[책책책, 책을 읽읍시다] 1. 아이디어 구체화

한음·2023년 2월 12일
0
post-thumbnail

Idea

텍스트 위주의 서평이 아닌,

비주얼에 중점을 두어 책의 느낌을 웹페이지 하나 정도로 시각화해보면 재밌겠다는 생각이 들었다.

웹 아-ㄹ트(Web Art) 랄까.

프로젝트 이름은 [책책책, 책을 읽읍시다].

주호민 - 『책책책』 中 발췌


구체화

  1. 프로젝트 컨셉
  2. Feature
  3. Router
  4. UI
  5. Stack
    으로 나누어 아이디어를 끼적였다.

프로젝트 컨셉

서평은 지루하다.

간혹 띠지에 적힌 한줄평은 재미있을때도 있지만, 보통은 그렇지 않다.

책 뒤의 해설도 읽지 않는다.

너무 현학적으로 접근한다고 느껴진다 해야하나

여튼 그렇다.

책의 느낌을 비주얼적으로 기록해보면 재밌을거 같았다.


Feature

넣고 싶은 기능 + 구현하면서 배울게 있겠다 싶은 것들 위주로 기능 리스트를 작성했다.

  • 검색
    Gatsby 를 메인 스택으로, 내장 GQL을 통해 태그 / 작가 / 타이틀 검색을 구현하려 했다.
    근데 구체화를 진행할수록 내가 1000권을 리뷰할 것도 아니고 굳이 검색을 넣을 필요가 있나, Lean하게 가자 하는 생각이 들어 제외했다.

  • 필터
    전체 작가 리스트 제공하고 태그 검색처럼 클릭만으로 작가 필터링을 할 수 있게 하여 검색 기능 부재를 보완한다.

  • 무한 스크롤
    최근 리뷰한 20권 정도만 메인 페이지에서 정적 리소스로 제공하고, 나머지는 무한 스크롤로 받아오는 정적 + 동적 방식의 페이지를 계획했다.

  • 테마
    태양이 떠오르는 뮤지컬 무대장치 느낌으로 Dark / Light 모드 전환을 해보려 한다.

(와이어로 이런거 올렸다 내렸다 하는 고런느낌)

  • 공유
    SNS 공유기능

Router

최대한 간단하게 구성했다.

/
/filter?author=${authorName}
/detail/:bookId
/page/info

요정도?

UI

메인페이지 UI를 고민했다. 최근 작성한 20권 정도를 보여줘야 한다.

후보로

  • 카드형
  • Masonry
  • Y2K 스큐어모피즘

요정도.

카드형 UI

카드형은 모던하긴 한데, 너무 양산형 느낌이 나고 무난해서 싫었다.

개인 프로젝트인데 하고싶은대로 해도 되잖아.

Masonry UI

핀터레스트로 대표되는 Masonry UI. 돌을 쌓은듯한 모양새라 이름이 그렇게 지어졌다.

UI 라이브러리 없이 구현하면 챌린지 요소도 있을 것 같아 맘에 들었는데,

'책 표지'라는 특성 상

Masonry를 아름답게 보이게 하는 요소 중 하나인 이미지 별 높이 차이가 크게 나지 않아

단조로운 느낌이 될 것 같아 제외했다.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

냄새날거같지만 한번 맡아보고싶은 그런 디자인

데몰리션 노래방같은넘

구미는 당겼는데 애매하게 했다가 조질거같아 그만뒀다.

어쨌든,

혼자 하는 프로젝트인 만큼 하고 싶은대로 하고 싶었고 너무 모던하게는 가고싶지 않았다.

스큐어모피즘쪽으로 마음이 기울었다.

옛날 만화방 슬라이드 책장 같은걸 하면 재밌지 않을까

스큐어모피즘
"스큐어모피즘 또는 스큐어모프란 대상을 원래 그대로의 모습으로 사실적으로 표현하는 디자인 기법으로 3차원적이고 사실주의적이다."

과거 애플 Ibooks. 책장 형태의 UI

지금 보면 구리다.

사물의 특징을 반영하되 음양각으로 오브젝트와 배경을 구분하는 뉴모피즘도 있다.

뉴모피즘 UI

Umm... 멋지긴 한데 너무 멋져서 별로다.

스큐어모피즘이 구려보이는 이유가 뭘까 고민했다.

과도한 질감표현이 별로다.

스큐어모피즘의 핵심이 되는 요소 중 하나라지만, 어쨌든 별로다.

사물의 특성을 반영한다는 점만 가져가고 디자인은 플랫하게 구성하는걸로 결정했다.


레퍼런스 조사 중 굳이 표지가 보이게 해야하나 하는 생각이 들었고

서가에 책등이 보이게 꽂아놓은 형태로 결정했다.


음~ 마음에 들엉

요런 느낌으로 20권을 두줄로 세우고 좌측 aside에 작가 검색 필터를 제공한다.


필터는 이런 느낌.

합치면 내가 생각하는 그림은 이렇다.

한 권씩 뽑아서 해당 책에 대한 이미지 시각화 페이지 /detail 로 이동하는 방식.

Stack

지금까지 세운 계획 실현에 필요한 stack들을 꼽아봤다.

  • Gatsby
    정적 + 동적 웹페이지

  • Styled Component / Tailwind (고민중)

  • Netlify / Vercel
    (고민중인데 Netlify가 대한민국 CDN 제공을 안한다는 글을 봤다. 넷틀리파이가(틀니파이ㅋㅋ) 개츠비를 인수하면서 배포에 수월한 부분이 분명 있을거같긴 한데, 만약 지금 시점까지도 한국 CDN 제공이 안된다면 Vercel을 선택할 예정이다.)

  • Framer-motion
    비주얼적인 부분이 많은 프로젝트라 애니메이션에 힘을 써볼 생각.

  • Contentful
    정적 리소스 관리

  • React-query (Tanstack-query)
    정적으로 제공하는 20권 외의 동적으로 가져와야 하는 책들에 대해 사용할 생각.

profile
https://github.com/0hhanum

0개의 댓글