글자크기와 글자색으로 가독성을 높여보자

가독성이라는 말을 제가 아는 것은 글자의 크기 등을 여러분이 글을 읽을 때 눈이 피로하지 않으며 편하도록(?) 설정하는 는 것이라고만 알고 있는데 위키백과에서 찾아 보니 가독성을 아래처럼 정의 했군요. 여러분이 알고 있는 가독성의 정의나 위키백과에 나온 정의나 크게 차이가 없을 것입니다.

가독성(可讀性)은 얼마나 쉽게 읽을 수 있는지를 나타내는 정도를 뜻하는 말이다. - 출처 : 위키백과

그러나 가독성에 대해서 자세히 살펴보면 북디자인에서 가독성과 프로그램밍에서 가독성으로 나누어 설명했는데 저나 여러분이 알고 있는 가독성은 아래 글에서 설명한 북디자인의 가독성의 일부라 생각하고 프로그래밍에서 가독성도 참고하시기 바랍니다. 프로그램밍 가독성을 보면 가독성은 단순히 글자크기나 글자색만이 아닌 코드를 이해하기 쉽게 했는가도 가독성에 들어가네요.

북디자인에서의 가독성은 독자가 책을 읽기 얼마나 좋은지를 뜻하며, 서체, 레이아웃, 자간, 행간, 여백등에 따라 결정된다.

프로그래밍에서의 가독성이란 소스코드를 보고 코드가 의도하는 동작이나 알고리즘을 얼마나 쉽게 이해할 수 있는지를 뜻한다. 예를 들어 어셈블리어는 기계어보다 가독성이 높다고 할 수 있다. 

코드의 가독성은 소프트웨어가 보통 여러 사람에 의해, 오래 기간 동안 관리되고 발전되는 것이기 때문에 점점 더 중요하게 인식되고 있다. 코드의 가독성을 일부러 떨어뜨리는 이른바 obfuscation이 연구되기도 하지만, 가독성이 안 좋은 코드는 버그 유발, 효율성 저하, 중복성의 위험이 있다고 여겨진다.

가독성은 코딩 스타일과 관련이 있으며, 스타일에는 다음과 같은 요소들이 있다.- 출처 : 위키백과

블로그 가독성은 제가 익스플로러나 파이어폭스가 아닌 크롬 9에서 나눔고딕으로 시험한 것입니다. 그리고 블로그를 나눔고딕으로 예쁘게 만드는 것이 http://min-blog.tistory.com/400 부터 보지 않고는 여기의 내용을 무슨 말인지 이해가지 않을 것 같으니 옆 카테고리에서 블로그 폰트 예쁘게 하는 카테고리 글을 모두 차례로 보시기 바랍니다. 참고로 크롬 8을 사용하다가 크롬10을 사용했는데 크롬 10의 개발자 버전이 에러가 많아서 이제는 정식버전인 크롬9를 사용합니다.

스킨위자드로 가독성 높이기 - 글자색과 글자크기 설정 

위 정의대로 가독성은 글을  읽기 좋게 하는 것이라 생각할 수 있으므로 가독성을 높이기 위해 게시글(내용)의 글자크기와 글자색을 변경하면 좋을 것 같습니다. 기본적으로 폰트의 색은 검정이 아닌 진한 회색인(666666) 것으로 아는데 티스토리 블로그를 만들면 기본 스킨인 BASIC 2008 ver 1.0의 스킨위자드에서 폰트설정을 기독성이 높은 나눔고딕으로 설정하는 것은 http://min-blog.tistory.com/400 에서 설명했고, 가독성을 더 높이기 위해서 블로그의 게시글(내용)의 글자색을 검정으로 해 보겠습니다.

그럼 블로그 게시글(내용)의 글자색과 글자크기를 가독성있게 만들기 위해 http://study3.tistory.com/ 블로그의 스킨인 BASIC 2008 ver 1.0  스킨의 스킨 메뉴에서 스킨 선택을 클릭한 후 스킨위자드 버튼을 클릭한 후 아래처럼 순서대로 합니다.

1. 블로그 게시글(내용)의 글자색을 변화하기 위해서 기본적으로 글자색이 진한 회색인 #666666인데 검정으로 변경하기 위해서  아래 그림에서 1번을 클릭합니다.
2. 게시글(내용)의 글자크기를 크게 하기 위해 16px를 클릭합니다. 저는 지금 본문을 14px로 했는데 저는 단위를 pt가 아닌 px를 사용했습니다.  글에 따라 14로도 하고 15로도 합니다.
3. 이것을 저장하기 위해 스킨위자드 아래에 있는 아래 그림에는 없지만 적용 버튼을 누릅니다.

위에서 한 것에 대한 결과는  http://study3.tistory.com/31 을 보시면 글자크기와 글자색을 변경한 것이 나옵니다.

위에서는 16px라고 설정하는 것을 말했지만 글자크기는 여러분 마음대로 하는데 12px는 너무 작을 것 같고 24px를 너무 클것 같습니다. 그러면 더 정교하게 설정하는 방법은 스킨의  style.css를 수정해야 하는데 저는 스킨위자드를 사용하지 않고 글자 크기를 변경하므로 14px,15px,16px.17px 등 다양하게 했습니다.  저는 스킨에서 article 의 글자크기를 변화하면 된다는 것을 알기 때문에 아래 그림처럼 글자 크기를 15px로 했습니다. 스킨에서 스킨위자드로 설정하지 않고 style.css로 설정하는 것은 귀찮고 어렵다는 것을 알아 두시기 바랍니다.  참고로 지금은 본문크기를 14로 했는데 어떤 경우는 15로도 하고 자주 변합니다.

네이버 블로그의 스킨위자드인 리모콘

네이버 블로그의 스킨위자드라고 할 수 있는 리모콘에서는 단지 댓글수의 색과 스킨의 이미지 등만 변경할 수 있지 티스토리 블로그의 스킨 위자드 처럼 글자를 제어할 수 없습니다. 

네이버 블로그에서  게시물(내용)의 글자 크기를 제어하려면 아래 그림처럼 에디터에서만 가능한데 이렇게 하는 것은 다음 블로그에서도 마찬가지 입니다. 

여러분은  네이버 블로그의 리모콘보면 아마 그것이  티스토리 블로그의 스킨위자드보다 좋다고 생각할 것 같습니다. 네이버 블로그의 리모콘은 설정을 정말 다양하게 많이 할 수 있거든요. 제가 전에도 말했듯이 기능만 보았을 때는 네이버 블로그가 좋다고요. 말도 안된다고 생각하시는 분은 네이버 블로그의 리모콘을 보시는데 문제는 모르시면 복잡할 것 같습니다.

CSS 폰트 속성

CSS에서 폰트 속성에 대해 알고 싶어서 폰트의 크기/색/굵기 등을 나타내는 속성을 간단히 알아 보았는데 스킨위자드가 없는 스킨을 사용한다면 도움이 될 것 같습니다. 저는 만약을 위해서 스킨에서 스킨위자드가 없는 스킨을 디자인 등이 예뻐도 고르지 않습니다. 참고로 이것은 어려우니 그냥 넘어가세요.

• 폰트 크기 : font-size: 수치로 나타내는데 수치의 단위는 pt.px 등이 있더군요. pt는 point의 약자로 포인트의 수치이고 px는 픽셀을 나타내는 단위라고 아는데 보통 가독성이 좋은 pt는 10정도이며 px로는 14이상의 값인데 지금 저는 14px를 사용합니다. 저의 블로그에서는 익스플로러에서는 웹폰트로 글자 크기는 14px로 했고 댓글쓰기는 17px로 했습니다.
• 폰트 색 : color : 수치로 나타내는데 수치는 보통 RGB값으로 나타낸다고 알고 있습니다. 예로 검정은 color:#000000 입니다.
• 폰트 굵기 : font-weight : 값인데 저는 댓글 이름을 굵게 하기 위해 font-weight:bold 라고 했습니다.