Yaong

Written by a cat

지난 글에서 정적 웹 생성기를 사용하여 블로그를 만들기로 했다. 자유를 얻은 만큼 그만큼 디자인에 좀 더 신경써야했다. 이 글에는 블로그를 만들며 디자인에 대하여 고민한 내용을 적어둔다.

디자인 기조

스레드 방식의 글쓰기

트위터로부터 영감을 받았다. 멘션된 트윗들을 스레드로 이어보여준다는 것은 처음 봤을 때 대단히 인상적이었다. 언젠가 전주 여행갔을 때 가능성을 실험해보기 위해 여행 기록용 트위터 계정을 하나 만들어 스레드 방식으로 기록해보았다. 두서없이 드는 생각들이 분류되어 기록된다는 점이 마음에 들었다.

블로그 글 역시 스레드 방식으로 구성하면 장점이 있을 거라 생각하였다.

  • 글 하나의 길이를 짧게 가져갈 수 있어, 쓰는 쪽도 읽는 쪽도 부담이 덜하다.
  • 연속된 글을 연속하여 쓰지 않아도 잘 정리되어있다.

디자인이 글쓰기의 발목을 잡지 않도록

워드프레스로 블로그를 운영할 때 디자인에 굉장히 공을 많이 들였다. 블로그 메인에 보이는 포스트 썸네일의 퀄리티에도 신경을 썼다. 그런데 이게 언제부터인가 본말전도가 되어 썸네일을 구하는 귀찮음 때문에 글을 덜 쓰게 된 적이 있었다. 당시를 교훈삼아, 이번 블로그는 글쓰기에 귀찮음을 더하는 디자인 요소는 하나도 넣지 않기로 했다.

색상

포트폴리오 페이지 색상을 그대로 사용하여 개인 사이트 간 통일감을 주었다. 블로그는 포트폴리오보다 컨텐츠가 놓이는 영역이 넓다. 기존 색상으론 심심한 느낌이 있어 포인트 컬러(가장 우측)를 하나 추가했다.

가독성

한 줄 당 글자수는 영문 기준 45~85자 정도가 적절하다고 한다1. 하지만 한글 기준의 연구 자료는 몇 년 전이나 지금이나 없는 것 같다. 그래서 매번 디자인 할 때 마다 적절한 글자수를 찾으려 노력했고, 대체로 한 줄당 35~45자 정도가 가독성이 만족스럽게 느껴졌다. 이 블로그는 40자로 설정하였고, 단어 단위로 잘 보이게 하기 위해 자간도 약간 줄였다.

줄간격은 대체로 1.4~1.6 정도를 사용한다2. 적정 줄간격은 글자의 크기와 모양에 관계있다. 그 중 글자 크기와 적정 줄간격은 반비례 관계에 있다. 블로그 글자 크기가 20px로 큰 편이므로 줄간격은 1.4로 설정하였다.

로고

사이트를 보면 알 수 있겠지만 로고가 들어갈 곳이 없다. 하지만 favicon을 넣기 위해 어쩔 수 없이 로고를 디자인해야했다. 사실 고양이와 아무 상관없는 사이트이지만, 고양이가 귀여우므로 로고 역시 고양이스럽게 만들기로 했다. 노트에 잔뜩 스케치를 하다가 YA로 고양이 옆모습을 표현한 게 마음에 들었다.

Sketch of logo

Favicon인 만큼, y자로 고양이 옆면 실루엣만 가져가며 비율도 정사각형으로 바꾸어 아래와 같이 그렸다. 배색은 키컬러를 그대로 사용하였고, 사이트와 마찬가지로 배경에 투톤 그라데이션을 주었다.

사이즈는 3종류를 준비하였다. 가장 기본적인 16x16, 32x32에, iOS용으로 152x152를 추가. 다양한 사이즈3를 다 챙길까 하다가, 더 마음에 드는 아이콘을 그리면 그 때 해야지 하고는 말았다.

작은 사이즈는 번잡한 감이 있어 배경을 그라데이션에서 단색으로 바꾸었다. 혹시나 하는 마음에 큰 사이즈도 그라데이션을 제거해보니 더 마음에 들었다. 결과적으로 배경 그라데이션은 완전히 없는 것이 되었다.

Favicon with gradation Favicon without gradation

여전히 작은 사이즈에서의 시인성이 떨어지는 게 마음아프긴 한데, 2시간 들여 만들었다는 점을 생각하면 그럭저럭 만족. 언젠가 더 시간을 들여 제대로 만들기로 하고 일단은 이 정도에서 마무리하기로 하였다.


  1. http://webactually.com/2015/10/반응형-웹-디자인에서-글줄의-길이와-글자-크기-균형/

  2. Times: 1.4, GitHub: 1.5, NYTimes: 1.55, Economist: 1.6

  3. http://webdir.tistory.com/337 하단에 파비콘 사이즈 목록이 잘 정리되어 있다.