개인 블로그를 다시 만드는 일

글을 위한 공간부터

블로그를 만들면서 가장 먼저 고민한 건 첫 화면이었다. 좋아하는 색과 모양을 모으는 일은 즐겁지만, 화면이 완성되어 갈수록 한 가지 질문이 남았다. 이곳에서 긴 글을 읽고 싶을까?

목록과 본문은 서로 다른 일을 한다. 목록은 읽을 글을 찾게 하고, 본문은 선택한 글에 집중하게 한다. 두 화면을 나누는 것부터 다시 시작했다.

목록에서는 제목, 짧은 요약, 작성일만으로 글의 성격을 알 수 있게 했다. 글을 누르면 독립된 주소로 이동한다. 주소를 복사해 공유하거나 브라우저의 뒤로 가기를 사용하는 동작도 자연스러워진다.

첫 화면에서는 취향이 보이고, 글 안에서는 내용이 보였으면 했다.

본문에는 넓은 장식 대신 목차를 둔다. 읽는 위치와 다음에 읽을 글을 알려 주는 정도면 충분하다. 댓글도 이 흐름의 끝에 놓일 수 있다.

한글 본문은 글자 크기만 키운다고 편해지지 않는다. 한 줄의 길이와 행간, 문단 사이의 간격이 함께 맞아야 한다. 넓은 모니터에서도 본문 폭이 끝없이 늘어나지 않도록 상한을 정했다.

제목은 단단하게, 본문은 부드럽게. 같은 서체를 써도 굵기와 간격만으로 충분히 다른 역할을 줄 수 있다.

CSS

.article-body {
  max-width: 680px;
  font-size: 17px;
  line-height: 1.95;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

커서를 올렸을 때 선이 뻗고, 글을 선택하면 화면이 짧게 이어진다. 이런 움직임은 현재 동작을 알려 주는 데 쓴다. 본문을 읽는 동안에는 장식이 계속 움직이지 않게 했다.

움직임을 줄이도록 설정한 환경에서는 전환과 장식 애니메이션을 멈춘다. 취향을 드러내는 효과도 읽는 사람의 선택보다 앞서지 않았으면 한다.

글이 쌓이면 태그와 시리즈가 실제 탐색 수단이 될 것이다. 댓글은 글을 읽고 난 뒤 이어지는 대화로 붙이고 싶다. 기능을 늘리기 전에 지금의 목록과 글 페이지가 편하게 이어지는지부터 확인한다.

블로그는 한 번에 끝내는 화면이 아니라, 기록과 함께 조금씩 바뀌는 공간이다.