블로그 가독성의 중요함과 가독성을 높이는 방법

가독성이란 글이 얼마나 쉽게 읽히는지의 정도를 말합니다. 블로그 포스트의 가독성은 생각보다 중요합니다. 내용이 아무리 좋은 글이라 하더라도 가독성이 떨어지게 되면 눈에 잘 들어오지 않으니까요. 방문자들을 배려하는 차원에서라도 자신의 글이 보다 쉽게 읽힐 수 있도록 하는 것이 좋겠습니다. 아래 보이는 이미지를 통해서 가독성의 차이를 느낄 수 있습니다. 수정 전과 후의 차이가 느껴지나요?

수정 전

수정 후

나눔 고딕

맑은 고딕

'수정 전'의 모습을 보면 양쪽정렬이 되지 않고, 줄과 줄사이의 간격이 좁아 가독성이 상대적으로 떨어지는 것을 볼 수 있습니다. 여러 블로그를 돌아다니다 보면 몰라서 수정을 못한 것인지, 일부러 안한 것인지, 아니면 귀찮아서 안한 것인지는 모르겠지만 CSS를 수정하지 않은 블로그가 많이 보이더군요. 글자의 크기도 중요하겠지만 간격을 조금 넓혀 주고, 양쪽을 정렬해 주는 것만으로도 비교적 깔끔해진 모습을 볼 수 있을 겁니다. 추가로 나눔 고딕이나 맑은 고딕으로 폰트를 바꾸는 것도 좋을 것 같습니다. 저는 나눔 고딕을 사용 중인데 굴림체에 비해 부드러운 느낌이 들어 보기에 더 좋은 것 같습니다. 글자의 크기나 색깔 역시 입맞에 맞게 수정해서 사용할 수 있습니다. 방법은 아주 간단합니다.

가독성을 높이는 방법

티스토리 기준으로 스킨 > HTML/CSS 편집 > style.css에서 약간의 편집이 필요합니다. 가장 큰 문제는 스킨마다 편집해야 할 부분이 다르다는 것인데요. 몇 개의 스킨을 확인해 본 결과 소스가 다 비슷비슷하기 때문에 편집에는 크게 무리가 없을 것 같습니다.

예제 1

좌측에 보이는 이미지는 'Life In Mono' 스킨의 css를 캡처한 것입니다. 'post-body-color'로 검색해 보면 중복없이 바로 저 부분으로 이동할 겁니다. 4번 줄과 5번 줄은 원래 없던 것을 제가 추가한 것입니다.

line-height:/*@post-body-line-height*/26px/*@*/; text-align:justify;

4번이 줄과 줄 사이의 간격을 말하고, 5번이 양쪽정렬을 의미합니다. 26px를 수정하여 줄과 줄 사이의 간격을 조절할 수 있습니다. 20px에서 30px가 적당한 것 같습니다.

1번에서는 글자의 색깔을 조절 할 수 있습니다. ＃8A8A8A로 된 부분을 수정하면 되는데 참고로 000000이 검정색이고 FFFFFF가 흰색입니다. 2번에서는 글자의 크기를 바꿀 수 있습니다. 12px를 수정하여 적당한 크기로 바꾸면 됩니다.
3번에서는 폰트의 종류를 바꿀 수 있는데요. dotum(돋음 글꼴) 대신 나눔 고딕이나 맑은 고딕을 사용하고 싶다면 NanumGothic 혹은 Malgun Gothic으로 바꾸면 되고, 이때 띄어쓰기와 대소문자에 주의해야 합니다. 그리고 자신의 컴퓨터에 해당 글꼴이 설치가 되어 있어야 폰트가 정상적으로 보이게 된다는 점 참고해 주시고요. 폰트 설치 방법은 검색창에 글꼴명을 검색하면 바로 나옵니다.


예제 2

위에 보이는 이미지는 'Moving Box' 스킨의 소스인데, 줄바꿈이 안돼 있어서 그렇지 내용은 거의 비슷합니다. 마찬가지로 'post-body-color'로 검색을 해보면 중복없이 바로 이동합니다.
가운데 줄 끝 부분을 보면 '9pt/*@*/;이곳}'라고 되어 있습니다. 이곳에 'line-height:/*@post-body-line-height*/26px/*@*/; text-align:justify;'를 삽입하면 줄간격과 양쪽정렬이 적용됩니다. 나머지는 다 똑같습니다. ＃565656을 수정하여 글자의 색깔을 바꾸고, Tahoma,gulim을 수정하여 폰트를 바꿀 수 있으며, 9pt를 수정하여 글자의 크기를 조절할 수 있습니다.

스킨마다 소스의 차이가 있기 때문에 2개의 예제로는 수정하기가 어려울 수도 있습니다. 해당 부분을 찾아 낼 수 있는 검색어 중에 모든 스킨에 적용되는 검색어가 없습니다. 그래서 막상 뜯어 보면 비슷하긴 한데, 소스를 삽입하는 부분을 찾는 것이 관건이 될 것 같습니다.