워드프레스용 책장 순위 발표하는 위젯만들기

알림
|
X

페이지 정보

작성자 덴디 182.♡.33.72
작성일 2024.08.21 11:14
분류 서비스·SW
1,110 조회
2 추천
분류

본문

figma로 대충 디자인해보고 모바일용 사이즈에 맞춰 순위를 보여주는 위젯을 먼저 만들고 있습니다. 책등, 책표지를 보여주는 서가를 만든 것과 달리 위젯은 여기저기 화면에 배치할 수 있어야 하기 때문에 DIV안에 마스크해서 스크롤하는 것을 보여줘야 합니다.

자바스크립트로 해당 부분을 제어해서 데이터를 가져오는 방식을 선택할 예정입니다. 물론 서가형태로 책등이 나오는 것이나 다른 여러가지 아이디어는 있지만 일단 사이즈에 집중할 예정입니다.

그리고 순위데이터는 저희는 자체 집계 프로그램을 쓰는데 이걸 엑셀이나 구글스프레드시트, 웹페이지에서 가져올 수 있도록 할 예정입니다. 진짜 내가 보고 있는 서가의 책을 블로그에 넣을 수 있게 하려고 하고 그게 판매가 되면 알라딘 TTB나 링크프라이스, 쿠팡 같은 곳에서 수수료를 줄 수 있게 해볼 계획입니다.

책소개도 읽어주는 형태로 바꿔볼 생각이 있고 이 책은 어떤 책인지 출판사가 직접 입력하게 만드는 부분도 필요할 것이라 봅니다.

아직은 서비스화 단계가 아니라서 기본적인 부분만 진행하려고 합니다.

책공장 텀블벅 진행중인 책이라든지 홍보할 수 있는 영역을 서로 본인의 블로그나 홈페이지에 달 수 있는 위젯으로 개발해볼 생각입니다. 앱으로 사이즈 변화도 기획에는 다 있습니다. ^^

노션, 옵시디언도 다시 열심히 보는 중입니다.


전에도 만들어 놓기는 했지만 이제 사락, 알라딘의 리스트 등을 가져와서 워드프레스의 홈페이지 광고위젯요소로 사용할 수 있게 책장에서 가로 스크롤형태의 위젯 디자인을 만들었습니다.

만들어 놓고 외부에서 데이터를 가져올 수 있게 한다고 했는데 이제 그 리스트를 올릴 수 있는 게시글, 게시판, 공간 등을 특정해서 만들 생각입니다.

그래서 일단 사락, 알라딘 먼저 테스트하고 이제 실험을 대충 끝내고 기능을 명확하게 해볼 생각입니다.

https://sarak.yes24.com/blog/atmark/list-view/10390395 (제휴)

사락에서 URL을 a9press에 다음처럼 url=에 넣어주면

https://a9press.com/shelf/ranks.html?mode=hscroll&url=https://sarak.yes24.com/blog/atmark/list-view/10390395 (제휴)

브런치 글 이미지 1

이런 형태로 바꿔서 횡스크롤 할 수 있는 기능을 제공합니다. 워드프레스에 넣었을 때 모바일 화면에 제대로 나올 수 있게 작업했는데 데스크탑에서는 조금 크게 만든거 같네요.

원래 작가얼굴, 출판사 아이콘, 상승여부, 하락여부 등의 정보를 제공하고 책을 누르면 간단한 책정보나 서평을 보여주고 구매링크로 이동할 수 있게 만들 생각이었습니다. 그런데 생각보다 크게 보이니까 디자인을 범용적으로 제작해야할거 같습니다.

https://www.yes24.com/24/AuthorFile/Author/153343 (제휴)

https://a9press.com/shelf/ranks.html?mode=grid&url=https://www.yes24.com/24/AuthorFile/Author/153343 (제휴)

브런치 글 이미지 2

예를 들어 한 라인별로 카테고리, 번호, 이벤트, 할인정보 등등의 정보를 함께 제공해서 줄별로 다른 이벤트도 함께 제공할 수 있게 해보려고 합니다. 갑자기 할 일이 늘어나기는 하지만 서비스화 하려면 그런 기능이 필요할거 같습니다.

사락, 알라딘 리스트 처럼 구글스프레드시트나 엑셀로 작업된 html 파일을 그대로 읽어서 표시하는 기능이 제공되면 여러모로 쓸모가 있어지리라 생각됩니다. 현재 도서를 얼마나 읽었는지 % 를 책등으로 표시하는 것을 생각하고 있으니 하나씩 개발하려고 합니다.


링크가 전부 제휴로 나와서 샘플확인은 하단 링크에서 보시면 될거 같습니다.

댓글 5 / 1 페이지

SDK님의 댓글

작성자 SDK (127.♡.0.1)
작성일 08.22 07:14
멋지십니다.

덴디님의 댓글의 댓글

대댓글 작성자 덴디 (182.♡.33.72)
작성일 08.22 07:27
@SDK님에게 답글 감사합니다. 다모앙에 책광고를 해볼까 하고 있습니다.

SDK님의 댓글의 댓글

대댓글 작성자 SDK (127.♡.0.1)
작성일 08.22 07:28
@덴디님에게 답글 예비광고주님 안녕하세요.

덴디님의 댓글의 댓글

대댓글 작성자 덴디 (182.♡.33.72)
작성일 08.22 07:30
@SDK님에게 답글 반응이 채팅같습니다 ㅎㅎ =3=3=3

SDK님의 댓글의 댓글

대댓글 작성자 SDK (127.♡.0.1)
작성일 08.22 07:31
@덴디님에게 답글
분류
홈으로 전체메뉴 마이메뉴 새글/새댓글
전체 검색