블로그 가독성 높이기

무슨 바람이 불었는지, 지난 며칠 간 블로그 스킨을 조금씩 계속 수정했네요. 스킨을 처음 완성했을 때는 만족스럽지 않은 느낌이 있었는데, 이제야 자리를 좀 잡은 것 같습니다. 첫 수정은 색상 변경이었는데, 점점 계속 바꾸다 보니 글씨체를 넘어서 가독성까지 생각하게 됐습니다.

제가 블로그에 글을 길게 올리는 성격이라서 가독성이 정말 중요한 것 같습니다. 어떻게 보면 지금까지 수정한 게 전부 가독성을 위해서라고 볼 수 있습니다. 제가 올린 글을 직접 읽어보면서 불편한 부분을 찾고, 인터넷에서 가독성을 높이는 방법을 찾아서 블로그에 적용했습니다. 그 결과는 지금 이 모습이고요. 어떻게 수정했는지, 어떻게 수정해야 하는지 간단하게 소개하도록 하겠습니다.

글을 읽기 편하게

먼저 글을 읽기 편하도록 만들었습니다. 가장 기초적인 부분인데요. 글씨체, 줄 간격, 글씨 크기가 중요합니다. 제가 생각하는 중요도 순으로 정리해보겠습니다.

글씨체는 모양이 예쁜 글씨체가 아니라 읽기 쉬운 글씨체를 선택하셔야 합니다. 저는 ‘맑은 고딕’과 ‘애플 SD 고딕 Neo’로 설정해뒀습니다. 이는 윈도우와 맥의 기본 글씨체이면서 깔끔한 고딕체라서 읽기가 편하죠. IE로 네이버 블로그를 보면 모양만 예쁜 글씨체로 글을 쓰는 블로그가 있는데요. 정말 읽기 불편합니다. 최소한 본문 부분은 반듯반듯한 고딕체를 추천합니다.

줄 간격이 좁으면 답답합니다. 줄 간격은 line-height를 사용해서 지정해줄 수 있는데, 최소 160%를 추천합니다. 아래아 한글에서도 기본값이 160%인 이유가 있겠죠? 하지만 저는 160%보다는 180%를 추천해주고 싶습니다. 글이 길어지면 160%도 읽기가 힘들어지는 경우가 있었습니다. 180%는 시원시원하더라고요!

글씨 크기를 키우세요! 제가 웹서핑을 하면서 글을 읽기 편한 사이트는 대부분 글씨 크기가 컸습니다. 전에는 겉모습을 생각해서 10pt를 썼었는데, 이번에 11pt로 바꾸니까 확실히 가독성이 늘어나더라고요. 그렇다고 너무 키우면 줄당 글자 수가 적어져서 글을 읽는 데 방해가 됩니다. 한 줄에 한글 55자 정도가 들어가도록 맞추는 게 좋아 보입니다. 웹 브라우저 기본 글씨 크기는 12pt지만, 11pt 정도만 해도 읽기 편합니다. 스킨에 맞춰서 조절해주세요.

한 가지 더 알려드리자면, 문단 정렬을 justify로 지정해주세요. 기본 정렬을 사용하면 줄 끝 부분이 들쑥날쑥합니다. 이때 justify를 적용하면 양쪽 끝에 딱 맞도록 반듯하게 정렬이 돼 깔끔해집니다.

글에 집중할 수 있게

지금까지 글을 읽기 편하게 만드는 방법을 소개했습니다. 이젠 글에 집중할 수 있도록 도와줄 차례인데요. 훨씬 간단합니다.

사람이 웹사이트를 읽을 때, 시선을 F자 형태로 움직인다고 합니다. 다시 말해, 왼쪽 부분에 시선을 더 집중한다는 말이죠. 그래서 레이아웃을 2단으로 잡았을 때, 본문을 왼쪽에 두고, 사이드바를 오른쪽으로 하는 것이 좋습니다. 3단은 시선이 많이 분산되기 때문에 추천하지 않습니다. 물론, 가장 좋은 건 사이드바가 없는 것이겠죠.

본문 좌우에 적당한 여백을 주세요. 여백이 없으면 답답해 보이고, 글을 읽는 중에 시선이 분산됩니다. 30px 이상 주면 괜찮은 것 같습니다. 또한, 본문을 선이나 주변과 다른 색상을 이용해서 분리해주는 것이 좋습니다. 가능하다면 본문 부분에 밝은색을 넣어주는 게 집중하는 데 도움이 됩니다.

—

이것이 제가 스킨을 수정하면서 정리한 내용입니다. “이 내용이 정답이다.”라고는 할 수는 없지만, 제가 적용해보면서 효과가 있다고 느낀 것이니 어느 정도 효과를 보실 수 있으실 것으로 생각합니다. 하다 보니 은근히 재미있어서 나중에 책이라도 사서 UI 같은 걸 배워보고 싶다는 생각이 드네요.

게으른 블로거인 제가 왜 이렇게 글을 열심히 쓰는지 모르겠습니다. 블로그를 열심히 꾸미다 보니까 정이 들었는지, 거의 온종일 블로그를 쳐다보면서 자기만족을 하고 있는 것 같습니다. 이게 얼마나 갈지는 모르겠지만, 되는 대로 계속 써서 올려봐야겠습니다. 이 글을 마지막으로 다시 게을러져 버릴지도 모르지만요. ㅋㅋㅋ