디지털 인사이트 미디어, 월간 Di (Digital Insight) 매거진

디아이투데이(http://ditoday.com)는 ‘월간 디아이(DI)’ 를 발행하는 웹스미디어의 콘텐츠 포털사이트입니다. ‘월간 웹디자인’을 시작으로 ‘월간 w.e.b.’ 그리고 온라인 마케팅 전문 잡지인 ‘월간 IM’의 통합으로 탄생한 월간 디아이는 2017년 9월호가 통권 213호로 17년이 넘는 시간 동안 대한민국의 웹 산업 발전에 큰 기여를 해온 매체사라고 할 수 있습니다.

웹스미디어는 비록 그 근간이 종이 잡지를 발행하는 출판사이지만, 여타의 출판사와는 기본적으로 디지털 환경을 바라보는 시각이 다릅니다. 이미 10여년 전 월드웹을 통해서 콘텐츠의 디지털 아카이빙을 시작한 것이 그 좋은 예입니다. 뿐만 아니라 이 산업의 많은 주체들과 상생을 도모하는 다양한 사업들을 시도하고 있기도 합니다.

하지만 비교적 가까운 거리에서 바라본 웹스미디어의 디지털 콘텐츠 제공 방식에는 아쉬움이 많았습니다. 콘텐츠 페이지의 가독성이 너무 떨어졌기 때문입니다.

가독성 낮은 콘텐츠 페이지

디아이투데이 웹사이트의 가장 큰 문제점은 바로 가독성이 낮은 콘텐츠 페이지였습니다. 콘텐츠를 제공하는 매체사의 웹사이트가 가독성이 낮다는 것은 치명적인 결함입니다. 아무리 좋은 콘텐츠로 가득차 있다고 해도 그것을 읽고 싶지 않게 만드는 사이트라면 차라리 없는 것이 더 좋겠죠.

위의 이미지는 개선 전 디아이 투데이의 콘텐츠 페이지를 캡쳐한 것입니다. 이 한 장의 캡쳐 이미지 만으로도 우리는 많은 문제점을 발견할 수 있습니다. 뿐만 아니라 보이지 않는 영역까지도 훤히 들여다볼 수 있습니다.

일단

웹페이지의 이상적인 글줄 길이는 글자 수 45~85(공백과 구두점 포함)개라고 알려져 있습니다. 물론 이는 영문 기준입니다. 한글과 영문의 문자 특성을 고려한다면 한글 기준으로는 글자 수 50~60개가 가장 이상적입니다.

글줄 길이가 너무 긴 경우에는 글자를 읽는 것이 피곤해집니다. 반면에 너무 짧은 글줄 길이는 한 단위로 읽혀야 하는 단어나 구절을 깨뜨리게 됩니다. 따라서 적절한 글줄 길이를 설정하는 것은 콘텐츠의 가독성을 높이는데 있어서 무엇보다 중요한 일입니다.

하지만 글줄 길이에 해당하는 콘텐츠 영역의 너비는 사이트 레이아웃이 결정된 이후에 자동으로 정해지고 있습니다. 이 경우 많은 디자이너들이 관습적으로 콘텐츠 영역의 너비를 800px 정도로 설정합니다. 800과 같이 딱 떨어지는 숫자는 기억하기도 쉽고 또 계산하기도 편리하기 때문입니다.

디아이투데이의 웹사이트도 여지없이 콘텐츠 영역의 너비가 800px로 디자인되었습니다. 그리고 최악인 것은 글꼴의 크기가 12px이라는 것입니다. 그러다 보니 한 행에 약 96개의 글자를 포함하게 됩니다. 앞서 언급한 한글 기준 50~60개의 글자 수에 비해 거의 2배나 많은 글자수로 채우고 있습니다.

그러다보니 디아이투데이의 콘텐츠 페이지는 가독성이 현저하게 낮습니다. 간혹 웹 콘텐츠를 읽을 때 단락의 시작 부분을 마우스로 클릭하고 글줄을 따라서 드래그해가는 모습을 볼 수 있습니다. 이런 습관은 기본적으로 콘텐츠 페이지의 가독성이 낮기 때문에 생겨난 것입니다. 디아이투데이의 콘텐츠는 이 방법이 아니고서는 제대로 읽을 수 있는 방법이 없어 보입니다.

크리에이티브 매거진이 적용된 첫 번째 매체사

새로운 디아이투데이의 웹사이트는 크리에이티브 매거진 워드프레스 테마가 적용되었습니다. 크리에이티브 매거진 워드프레스 테마는 오랜 매체사 웹사이트 구축 및 운영 경험을 바탕으로 새롭게 출시한 워드프레스 매거진 테마입니다. 이 테마는 무엇보다 한글 웹 타이포그래피 작업에 심혈을 기울였습니다. 크리에이티브 밴드가 생각는 매거진 테마의 핵심 기능이기 때문입니다.

크리에이티브 매거진 워드프레스 테마가 적용된 디아이투데이의 새로운 사이트는 글줄 길이(content-width)가 570px입니다. 글꼴의 크기(font-size)는 15px(일반적으로 16px을 본문 글꼴 크기에 적용하나 이번에 적용한 나눔스퀘어 글꼴은 글자 내부의 공간이 많이 확보되어 있어서 15px이 적당합니다.)이며 글줄사이(line-height)는 27px(1.8)을 적용하였습니다.

“누군가 우리 콘텐츠를 읽고 있다는 생각을 하기 시작했다.”는 웹스미디어 류호현 대표의 말은 한글 웹 타이포그래피 작업의 중요성을 다시 한 번 생각하게 해줍니다.