.png)
이 자료는 이후에 이어질 "사용자 모니터 해상도와 페이지 가독성"이라는 글을 쓰기 위해 사전 조사한 내용이다. 내용 분리를 위해, 그리고 좀 더 보기 편하게 하기 위해 이렇게 따로 글로 뺐다.
뉴스 사이트, 다시 말해 언론사의 홈페이지는 수많은 이용자층이 다양하게 이용하고있으며, 수많은 문자 위주의 데이터 소모가일어난다. 뿐만 아니라 언론사는 기본적으로, 치밀한 페이지 레이아웃과 타이포그라피, 폰트에 신경을 많이 쓰던 오래된 매채 '신문'을 만들던 곳이다. 따라서 활자의 배치나 가독성에 대한 반영이 일반 블로그나 개인 홈페이지보다 잘되어있을 것으로 예상하였다.
하루이틀 날을 잡아 국내 5대 포탈사이트의 뉴스면, 그리고 언론사의 홈페이지, 외국 언론사의 홈페이지를 쭈욱 훑어서 글씨체, 글씨크기, 줄간격, 본문 가로폭을 측정하였다.
비교 대상 홈페이지들은 네이버와 다음에 뉴스를 공급하는 언론매체 리스트에서 종합지, 경제지, IT관련 언론사 등을 끄집어내어 대충 50개를 맞추었다. 측정은 Firefox3 웹브라우저의 Firebug 확장기능을 이용하여 본문 최소 영역을 재는 방식으로 진행되었으며, 브라우저 특징을 타므로 약간의 차이가 있을 수 있다.
1. 국내 언론사 홈페이지의 글씨크기, 행송, 가로폭 비교
클릭해서 크게 보면 좋다.
일단 한국 언론사 웹사이트들의 기사 페이지 가로폭 평균은 약 588.02px이었다.
본문 폭이 가장 좁은 곳은 디지털데일리의 500px이었고, 그 다음이 한국경제TV의 515px이었다. 폭이 가장 넓은 곳은 서울경제의 705px, 그 다음이 YTN의 700px이었다.
한국일보는 서울경제와 마찬가지로 본문 가로폭이 705px이지만 가장 넓은 곳에 포함시키진 않았다.
한국일보의 최대 폭은 705px이지만, 상단이 왼쪽의 280px 배너를 제외하여 425px, 하단이 좌측의 114px 세로 광고를 제외하고 591px로 평균에 근접한 모습을 보여주고있다. 상단 배너는 그림 자료를 위에, 광고를 바로 아래에 배치하는 치밀한 구성이 눈에 띈다.
(참고로 이 UXfactory의 본문 가로폭은 540px이다.)
그 외에 폰트 사이즈는 px, pt, %, em등 여러 단위로 사용되고있었으나 px단위로 일괄 환산하였을 때 평균 14.52px이 나왔다.
(참고로 이 UXfactory의 본문 폰트 사이즈는 맑은고딕으로 13px이다.)
행송은 본문에 쓰인 line-height 태그를 말하는건데, 이건 줄간격(line-spacing)이 아니라 행송으로 번역해야한다. 줄간격은 글줄과 글줄 사이의 빈 공간을 말하지만, 행송(leading, line-height)는 줄간격을 포함하여 그 글자의 높이를 합쳐서 부르는 말이다.
나는 행송의 경우 픽셀 단위 보다는 글씨 크기에 종속되어 상대값의 개념으로 정리하는게 옳다고 생각하여 px, pt, %, em 등으로 적힌 행송 단위들을 모두 자연수로 환산했다. 환산 통계 결과, 국내 언론사들의 환산 행송 평균은 1.5586이 나왔다. 대략 155% 정도라는 뜻.
2. 국외 언론사 홈페이지의 글씨크기, 행송, 가로폭 비교
이번에는 외국 언론사 웹사이트들도 참고용으로 비교해보았다.
외국 언론사 사이트의 가로길이 평균은 약 536.48px이었고, 가장 넓은 곳은 FOX news의 670px, 그 다음이 USA today의 658px, 가장 좁은 곳은 Times Online의 385px, 그 다음으로 the Nation의 400px이었다.
글씨 크기는 산 세리프 계열을 사용한 언론사에서는 평균 약 12.8px, 세리프 계열을 사용한 언론사에서는 평균 약 14.6px가 나왔다. 글꼴에 장식이 많이 달린 세리프 계열은 모양이 복잡하기 때문에 글씨 크기가 작으면 알아보기 힘들기 때문에 이런 약 2px 정도의 평균 크기 차이가 나타나는 것이다. 앞서 한국 언론사 사이트의 폰트 크기 평균이 14.52px이었는데, 이 역시 한글이 받침이 합쳐진 복잡한 형태를 취하고 있기 때문으로 분석된다.
환산 행송 평균은 1.4028로, 140% 정도로 비교적 깔끔하게 떨어진다. 이것도 산세리프/세리프로 나눠보면 달라지는데, 산세리프 계열은 1.3822로 138% 정도, 세리프 계열은 1.4875로 148% 정도다. 역시나 세리프 계열은 글씨 장식이 많아 줄 간격을 더 벌려야 가독성이 올라가기 때문인것으로 판단한다.
종합으로 정리해보면 아래 표와 같다.
본문의 가로폭이 너무 길어지면 읽는이가 다음 문장의 시작점을 판독할 수 없어 가독성이 떨어진다. 반면 가로폭이 너무 짧아지면 눈이 지그재그로 이동하는 횟수가 늘어나 역시 가독성이 떨어진다. 그래서 서양에서는 한줄의 가로폭을 알파벳 40자 정도로 잡는게 가독성에 좋다고 한다. 한 문자가 차지하는 간격이 대체로 알파벳보다 넓은 한글의 특성상 평균적으로 본문 가로폭이 넓음을 위 통계에서 알 수 있다.
글씨 크기의 경우, 모양이 간단한 산세리프는 작게 보여줘도 판독이 용이하므로 평균 글씨크기가 작지만, 세리프체나 한글은 상대적으로 글씨크기가 큼을 알 수 있다.
행송은 문자의 높이에 줄간격을 더한 값인데, 한글이 더 복잡한 서체라 그런지 행송도 넓었다. 본문 가로폭과 마찬가지로 산세리프<세리프<한글 순으로 커짐을 알 수 있었다.
하루이틀 날을 잡아 국내 5대 포탈사이트의 뉴스면, 그리고 언론사의 홈페이지, 외국 언론사의 홈페이지를 쭈욱 훑어서 글씨체, 글씨크기, 줄간격, 본문 가로폭을 측정하였다.
비교 대상 홈페이지들은 네이버와 다음에 뉴스를 공급하는 언론매체 리스트에서 종합지, 경제지, IT관련 언론사 등을 끄집어내어 대충 50개를 맞추었다. 측정은 Firefox3 웹브라우저의 Firebug 확장기능을 이용하여 본문 최소 영역을 재는 방식으로 진행되었으며, 브라우저 특징을 타므로 약간의 차이가 있을 수 있다.
1. 국내 언론사 홈페이지의 글씨크기, 행송, 가로폭 비교
클릭해서 크게 보면 좋다.
일단 한국 언론사 웹사이트들의 기사 페이지 가로폭 평균은 약 588.02px이었다.
본문 폭이 가장 좁은 곳은 디지털데일리의 500px이었고, 그 다음이 한국경제TV의 515px이었다. 폭이 가장 넓은 곳은 서울경제의 705px, 그 다음이 YTN의 700px이었다.
한국일보는 서울경제와 마찬가지로 본문 가로폭이 705px이지만 가장 넓은 곳에 포함시키진 않았다.
한국일보의 최대 폭은 705px이지만, 상단이 왼쪽의 280px 배너를 제외하여 425px, 하단이 좌측의 114px 세로 광고를 제외하고 591px로 평균에 근접한 모습을 보여주고있다. 상단 배너는 그림 자료를 위에, 광고를 바로 아래에 배치하는 치밀한 구성이 눈에 띈다.
(참고로 이 UXfactory의 본문 가로폭은 540px이다.)
그 외에 폰트 사이즈는 px, pt, %, em등 여러 단위로 사용되고있었으나 px단위로 일괄 환산하였을 때 평균 14.52px이 나왔다.
(참고로 이 UXfactory의 본문 폰트 사이즈는 맑은고딕으로 13px이다.)
행송은 본문에 쓰인 line-height 태그를 말하는건데, 이건 줄간격(line-spacing)이 아니라 행송으로 번역해야한다. 줄간격은 글줄과 글줄 사이의 빈 공간을 말하지만, 행송(leading, line-height)는 줄간격을 포함하여 그 글자의 높이를 합쳐서 부르는 말이다.
나는 행송의 경우 픽셀 단위 보다는 글씨 크기에 종속되어 상대값의 개념으로 정리하는게 옳다고 생각하여 px, pt, %, em 등으로 적힌 행송 단위들을 모두 자연수로 환산했다. 환산 통계 결과, 국내 언론사들의 환산 행송 평균은 1.5586이 나왔다. 대략 155% 정도라는 뜻.
2. 국외 언론사 홈페이지의 글씨크기, 행송, 가로폭 비교
이번에는 외국 언론사 웹사이트들도 참고용으로 비교해보았다.
외국 언론사 사이트의 가로길이 평균은 약 536.48px이었고, 가장 넓은 곳은 FOX news의 670px, 그 다음이 USA today의 658px, 가장 좁은 곳은 Times Online의 385px, 그 다음으로 the Nation의 400px이었다.
글씨 크기는 산 세리프 계열을 사용한 언론사에서는 평균 약 12.8px, 세리프 계열을 사용한 언론사에서는 평균 약 14.6px가 나왔다. 글꼴에 장식이 많이 달린 세리프 계열은 모양이 복잡하기 때문에 글씨 크기가 작으면 알아보기 힘들기 때문에 이런 약 2px 정도의 평균 크기 차이가 나타나는 것이다. 앞서 한국 언론사 사이트의 폰트 크기 평균이 14.52px이었는데, 이 역시 한글이 받침이 합쳐진 복잡한 형태를 취하고 있기 때문으로 분석된다.
환산 행송 평균은 1.4028로, 140% 정도로 비교적 깔끔하게 떨어진다. 이것도 산세리프/세리프로 나눠보면 달라지는데, 산세리프 계열은 1.3822로 138% 정도, 세리프 계열은 1.4875로 148% 정도다. 역시나 세리프 계열은 글씨 장식이 많아 줄 간격을 더 벌려야 가독성이 올라가기 때문인것으로 판단한다.
종합으로 정리해보면 아래 표와 같다.
| 본문가로폭 | 글씨크기 | 행송 | ||
| 국내 | 588px | 14.5px | 155% | |
| 국외 | 산세리프 | 530px | 12.8px | 138% |
| 세리프 | 564px | 14.6px | 148% | |
본문의 가로폭이 너무 길어지면 읽는이가 다음 문장의 시작점을 판독할 수 없어 가독성이 떨어진다. 반면 가로폭이 너무 짧아지면 눈이 지그재그로 이동하는 횟수가 늘어나 역시 가독성이 떨어진다. 그래서 서양에서는 한줄의 가로폭을 알파벳 40자 정도로 잡는게 가독성에 좋다고 한다. 한 문자가 차지하는 간격이 대체로 알파벳보다 넓은 한글의 특성상 평균적으로 본문 가로폭이 넓음을 위 통계에서 알 수 있다.
글씨 크기의 경우, 모양이 간단한 산세리프는 작게 보여줘도 판독이 용이하므로 평균 글씨크기가 작지만, 세리프체나 한글은 상대적으로 글씨크기가 큼을 알 수 있다.
행송은 문자의 높이에 줄간격을 더한 값인데, 한글이 더 복잡한 서체라 그런지 행송도 넓었다. 본문 가로폭과 마찬가지로 산세리프<세리프<한글 순으로 커짐을 알 수 있었다.
