프로필 사진
Sojin Park
Frontend Dev

신년맞이 블로그 개편
2014. 1. 8.

신년을 맞아 블로그 테마를 바꿔 보았다. 몇 주 전부터 기존 블로그 테마의 가독성이 별로 좋지 않은 것 같아 언젠가 바꾸리라 생각하고 있었는데, 마침 지난 3일간 시간이 조금 있어 테마를 새롭게 만들어 보았다. 이번 블로그 테마에서 가장 중점을 둔 부분은 미려함과 가독성. 어느 쪽에 더 중점을 두었냐고 묻는다면 아마 가독성이라고 대답할 것 같다. 테마를 바꾸게 된 주요한 원인이 가독성이었으니까.

가독성을 살리자

기존 블로그 테마였던 Readium 테마

지난 블로그 테마의 경우, 내용의 가로 길이가 지나치게 길고 그에 비해 폰트 크기는 작아 읽는 데에 어려움이 많았다. 시선을 계속해서 좌우로 이동시켜야 했고 이에 따라 눈도 쉽게 피로해질 뿐더러 글의 내용도 쉽게 들어오지 않았다. 블로그란 글을 읽기 위해 들어오는 것인데, 오히려 테마가 글을 읽는 것을 방해하고 있으니 아이러니한 상황이 아닐 수 없다.

새로 개선한 테마

이번 테마에서는 Designing blogs for readers라는 글을 참고하여 블로그 가독성을 최대한 높이려고 하였다. 이를 위해 페이지의 가로 길이를 700px 정도로 제한하여 시선의 이동을 최소화하였다. 아울러, 줄 간격을 160% 정도에서 190% 정도로 늘리고 단락 간 간격을 넓혀 글을 더욱 쉽게 읽을 수 있도록 했다. 결과는 위 이미지와 같다. 기존 테마에 비해 글 읽기가 쉬워지고 보기에도 더 나아졌다.

미려함도 갖추자

앞에서 말했듯, 가독성 다음으로 중점을 둔 부분은 미려함이었다. 이번 블로그 테마의 경우 iOS 7이나 Modern UI와 같은 글자 중심의, 군더더기 없는 디자인을 목표로 했다. 이에 따라 지난 블로그 테마에 있던 쓸데없는 장식용 이미지들을 모두 삭제하였고 글자와 단순한 형태의 아이콘만을 남겼다. 결과는 꽤 만족스럽다. 깔끔하고 내용에 더욱 집중할 수 있는 블로그가 된 것 같다.

정리

전체적인 변화를 정리하자면 다음과 같다:

  • 내용 표시 너비를 700px로 제한하였다. 기존에는 모니터 가로 너비에 따라 내용 표시 너비가 바뀌는 가변형 너비였다. 모니터 너비 1920px 기준으로 약 1000px.
  • 줄 간격을 160%에서 190%로 약 1.2배정도 늘렸다.
  • 목록 사이의 간격을 줄 한 줄 간격 정도로 띄었다.
  • 일관성 없던 PC와 모바일 페이지 사이의 디자인을 일관성 있게 수정하였다.
  • 링크의 색상을 바꾸고 밑줄을 추가함으로써 시인성을 높였다.
  • 전체적인 UI 배치를 바꾸고 필요없는 장식 요소를 제거하였다.

중학교 때 (1월 8일 작성)3학년 때 이후 꽤 오랜만에 해 보는 웹 디자인이었는데, 결과는 나쁘지 않은 것 같다. 제법 미려하면서 가독성이 좋은 블로그 테마를 만들 수 있었다. 앞으로 차차 이 테마를 개선해 나가면서 완성도를 키워야겠다.