출판전야 사이트 제작기
출판전야 아카이빙 사이트
창작자를 위한 스테이인 출판전야(出版前夜)를 짓기로 결심한 후 이것저것 투닥투닥해보는 중이다. 특히 출판전야를 기획하며 한 고민 그리고 떠오른 아이디어 등을 아카이빙하고 있다.
처음엔 노션에 아카이빙을 했다. 근데 왜인지 손이 잘 안 갔다. 이거 노션에 남겨놔야지 생각했던 것도 계속 미루다가 결국엔 까먹기 일쑤였다.
조금 더 재밌게 아카이빙을 할 수는 없을까 고민을 하다가 인스타그램을 하기로 했다. 현재 출판전야 인스타그램 채널을 파서 고민의 과정을 기록하는 중이다.
확실히 인스타그램에서 게시글을 하나씩 올리니 더 뿌듯했다. 나는 확실히 시각적으로 드러나야 만족을 하는 스타일인가보다.
그렇게 지금까지 약 11개의 게시글을 올렸는데 그 와중에도 아쉬움이 남는 점이 있었다. 바로 포맷이 한정되어있다는 것이었다.
출판전야 관련해서 이런저런 고민을 하다보니 아카이빙하고 싶은 것들도 늘어났는데 매번 이미지를 함께 만들어 기록해야 되니 부담스러웠다.
그래서 보기 좋으면서 포맷 상으로 더 자유롭게 아카이빙 할 수 있는 방법이 없을까 고민을 하게 됐다. 그리고 결국 출판전야 웹사이트를 만들기로 했다.
어차피 결국 만들게 될 거 미리 만들어놓자는 생각이었다. 웹사이트에 잘 아카이빙 해놓으면 브랜딩에도 도움이 되지 않을까 생각도 들었고.
전체 프로젝트 기한은 약 2주 정도로 그리 길지 않았다. 기획과 개발보다는 디자인적으로 고민을 더 많이 했던 프로젝트였다.
어떤 고민을 했을까. 이번 프로젝트도 마찬가지로 기록으로 남겨본다.
목차
디자인 콘셉트
첫인상을 결정하는 표지
아카이빙할 것들
맺으며.
디자인 콘셉트 - 책등과 문단
출판전야는 모든 창작자들을 환영하지만 어쨌든 그 기본은 책에 있다. 그래서 출판전야 웹사이트의 디자인 콘셉트도 책을 중심으로 잡기로 했다.
디자인에 어떻게 책을 녹여넣을 수 있을까. 타이포그래피를 해야할까 싶었는데 내겐 그럴 재주가 없었다.
이런저런 고민을 하던 중 갑자기 책등이 생각났다. 요새 제본 수업을 들으며 책등의 중요성에 알게 되었기 때문일까. 책의 내용물(콘텐츠)을 엮어주는 책등을 디자인 컨셉에 녹이고 싶어졌다.
책의 내용물을 묶어주는 책등책등이란 개념을 어떻게 디자인에 녹일 수 있을지 고민하던 중 책등이라는 것이 결국 웹사이트 기준에서 보면 내비게이션 영역이 아닐까 생각이 들었다. 내비게이션 영역도 웹페이지의 내용물(콘텐츠)을 하나로 묶어주는 역할을 하기 때문이었다.
그래서 내비게이션 영역의 위치를 책등을 모티프로 삼아 정하기로 했다. 일반적인 웹사이트와 달리 내비게이션 영역 위치를 좌측에 놓았다.(PC 기준)
내비게이션 영역을 좌측에 배치내비게이션 영역을 좌측에 놓으니 뭔가 책등과 같은 느낌이 들었다. 나만의 생각일 수도 있지만..
그 다음은 콘텐츠 영역이었다. 어떻게 하면 콘텐츠 영역도 책 느낌이 나게 풀어낼 수 있을까. 고민을 하던 중 이번엔 문단이라는 게 생각났다.
책에 담긴 콘텐츠, 즉 글이라는 것은 문단을 통해 호흡한다. 작가는 문단의 길이를 통해 글의 호흡을 조절하고 이것은 곧 독자가 즐길 글의 리듬이 된다.
이런 문단이 가진 리듬의 매력을 콘텐츠 영역에 풀어내고 싶었고 난 영감을 받기 위해 여러 콘텐츠형 사이트를 둘러봤다.
그러던 중 핀터레스트 피드를 보며 이거다라는 생각이 들었다. 각 콘텐츠 카드의 높이가 가변적이어서 그런지 리듬감이 있었다.
핀터레스트 콘텐츠 카드핀터레스트처럼 각 콘텐츠 카드의 높이값을 가변적으로 정해줄 수 있으면 문단의 리듬을 살릴 수 있을 것 같았다.
개발적으로 구현이 어려울까 걱정이 되었는데 역시나 리액트 아니랄까봐 누가 만들어놓은 모듈이 이미 있었다. 핀터레스트 같은 레이아웃을 masonry라고 하는 걸 이번에 처음 알았다.
정리하면 난 결국 아래와 같이 디자인에 책의 느낌을 풀어내게 되었다.
내비게이션 영역 - 책등
내비게이션 영역 좌측에 배치하여 책등 느낌 살리기
콘텐츠 영역 - 문단
masonry 레이아웃으로 문단의 리듬 입히기
손재주가 부족한 것을 이렇게 구조적으로 풀어내서 뿌듯했고 방향성이 정해지니 작업 속도가 붙었다. 디자인이 적용된 결과는 금방 나왔다.
첫인상을 결정하는 표지
책을 겉표지로 판단하지 말라는 말이 있지만 그럼에도 표지는 중요하다. 어쨌든 책에 대한 첫인상인 거니까. 독립출판을 경험해본 바로도 그러하다.
출판전야 웹사이트의 메인 페이지는 책의 겉표지와 같이 아래의 역할을 수행해야 했다.
멋진 무언가로 이목을 끈다.
어떤 내용인지 멋지게 전달한다.
일단 이목을 끄는 방법으론 그럴듯한 영상을 쓰는 것이 좋아보였다. 내 부족한 손재주로는 이목을 끌 수 있는 멋진 결과물을 만들어낼 수가 없었기에..
무료 영상 사이트에서 글쓰기와 관련된 영상을 찾아봤고 마음에 드는 걸 발견할 수 있었다. 메인 페이지 배경에 깔면 출판전야의 느낌을 잘 살려줄 것으로 보였다.
출판전야 메인 페이지 영상그 다음 타자는 타이틀과 부제였다. 잠시나마 잡아둔 시선을 호기심으로 연결시키기 위해선 효과적인 타이틀과 부제가 필요했다.
출판전야가 어떤 스테이인지 짧으면서도 와닿게 전달해야 됐다. 나름대로 고민을 해서 아래와 같이 표지에 들어갈 내용을 정리했다.
앞 표지 - 출판전야에 대한 설명
출판전야 | 出版前夜
몽상가를 위한 은신처
마침표를 찍기까지의 긴 밤
그 설레면서도 고된 밤에
출판전야가 함께 합니다.
뒷 표지 - 영감을 준 문장
집이란 몽상의 보금자리요,
몽상가의 은신처이며,
평화롭게 꿈꿀 수 있는 공간이다.
- 가스통 바슐라르
인터랙션을 통해 앞 표지와 뒷 표지 간에 이동을 할 수 있도록 했다. 말로만 들어서는 이해가 어려우니 바로 결과물을 확인해보자.
아카이빙할 것들
표지를 만들었으니 이제는 내용을 채워넣을 단계다. 우선 지금은 아래의 세 가지를 아카이빙하기로 했다.
1. 기록
2. 문장
3. 작업곡
하나씩 어떤 식으로 아카이빙하고 있는지 살펴보자.
1. 기록
현재 인스타그램에 올리고 있는 기록들을 출판전야 웹사이트에도 업로드하기로 했다. 인스타그램보다 출판전야 웹사이트에서 보여주니 확실히 일관성이 있어보이는 게 보기 좋다.
기록 페이지2. 문장
출판전야를 만들 때 영감을 준 문장 혹은 창작에 도움을 주는 문장들도 아카이빙하기로 했다. 나중에 출판전야를 운영할 때 문장 카드와 같은 기획을 진행하고 싶기 때문이다.
문장 페이지3. 작업곡
나중에 출판전야 운영할 때 활용할 수 있지 않을까 싶어 창작자들의 작업용 음악도 수집 중이다. 우선 지인 중심으로 작업곡들을 물어봐서 아카이빙하고 있다.
그런데 아직까지는 작업곡을 모으는 기준 같은 게 뚜렷하지 않아 이 부분은 조금 더 고민해볼 예정이다. 더 의미있는 콘텐츠를 만드는 방향을 생각해봐야겠다!
작업곡 페이지사실 아직까지는 아카이빙의 방향성이 뚜렷하지 않다. 근데 걱정은 없다. 출판전야 웹사이트에 하나둘씩 아카이빙을 하면서 방향을 잡아가면 되니까.
다행히 일단은 웹사이트가 내 마음에 들어서 아카이빙할 맛이 날 것 같다. 아이디어가 떠오르는 대로 아카이빙을 해가며 웹사이트도 조금씩 개선해나갈 생각이다.
맺으며.
이렇게 웹사이트를 만드니 본격적으로 시작한 것 같은 느낌이 든다. 언젠가 출판전야의 리셉션에 이 웹사이트가 띄워져 있을 거라 생각하니 마음이 두근거리기도 하고..
물론 오픈 목표가 2024년이니 아직 가야할 길이 멀다. 그래도 이렇게 한 걸음 한 걸음 나아가다보면 언젠가 창작자들을 출판전야에 초대하게 될 날이 올 거라 믿는다.
그 날이 오길 고대하며 차근차근 천천히 거름을 주고 키워나가야지.
그 키워나가는 과정을 아카이빙할 출판전야 웹사이트에 놀러와주세요~!
(가급적이면 PC로 접속해주시면 감사하겠습니다!)
