Notification

크리에이티브 밴드의 테마 디자인 작업은 한 개의 단락을 구성하는 것에서부터 시작됩니다. 한 개의 단락을 구성하는 ‘글꼴 크기(Font Size)’, ‘글줄사이(Line Height)’ 그리고 ‘글줄 길이(Line Width)’는 웹사이트의 타이포그래피를 결정하는 핵심적인 요소들이기 때문입니다.

  • 글꼴 크기 – 글꼴의 크기는 상대값을 표현하는 em을 사용합니다. 물론 기준 글꼴 크기는 px로 정의합니다.
  • 글줄사이 – 줄간격, 레딩 또는 행간으로 불리우는 글줄사이는 디자인툴에서 사용하는 기준과 CSS가 정의하는 기준이 다릅니다. 이 기준을 잘 이해하고 디자인해야 합니다.
  • 글줄 길이 – 글줄 길이는 레이아웃에 의해서 자동으로 정해지는 것이 아닙니다. 콘텐츠에 맞는 적절한 글줄 길이 설정이 필요합니다. 이 값(Contetn Width)은 워드프레스에서 매우 중요하게 다루어 집니다.

이번 매거진 테마를 준비하면서 국내 여러 인쇄 기반 매체사들의 웹사이트(특히 콘텐츠 페이지)를 분석하였습니다. 그들의 출판물이 그러하듯 웹사이트를 통해 게시되는 콘텐츠 역시 정확한 타이포그래피 설정이 이루어져 있을 것이라고 기대했기 때문입니다. 하지만 아쉽게도 웹 타이포그래피와 관련된 일관된 규칙이 적용된 사이트를 발견할 수 없었습니다.

웹 타이포그래피의 목적은 보기 좋고, 읽기 편한 웹사이트(콘텐츠)를 구성하는 일입니다. 심미성과 기능성을 결합하는 중요한 작업인 것이죠. 그리고 그 시작은 앞서 언급한 글꼴 크기, 글줄 사이 그리고 글줄 길이를 조화로운 비율로 설정하는 것에서부터 시작됩니다.

글꼴 크기

글꼴의 크기는 어떤 글꼴을 선택하는가에 따라서 달라질 수 있습니다. 로마자의 경우 x-height의 값에 따라서 글꼴이 더 커보일 수 있습니다. 한글의 경우 글자 내부의 공간이 얼마나 확보되어 있는가에 따라서 글꼴이 달라집니다. 따라서 적용하고자 하는 글꼴의 특성을 잘 파악해야 합니다.

한글 웹 타이포그래피 - 글꼴에 따른 크기의 변화
Roboto Slab과 Adobe Garamond Pro는 동일한 글꼴 크기를 적용하더라도 차이가 있어 보입니다. x-height가 서로 다르기 때문입니다. 일반적으로 x-height 값이 큰 글꼴을 본문용으로 사용해야 가독성이 높습니다. 한글이 경우 글자 내부의 공간 확보가 어느 정도 되는가에 따라서 크기가 달라보일 수 있습니다. 나눔스퀘어는 Apple SD Gothic Neo 보다 더 커 보입니다.

이번 테마에 적용된 나눔스퀘어는 고딕 계열의 글꼴로 내부 공간이 확보되어 있어서 일반적인 본문용 고딕 계열의 글꼴에 비해서 더 커보입니다. 따라서 본문 글꼴은 16px이 아닌 15px로 정의하였습니다. 본문에 사용되는 영문에는 가독성을 높이고 심미적인 효과를 주기 위해서 별도의 영문 글꼴을 적용했습니다. Roboto Slab은 로마자를 사용하는 국가에서 널리 사용되는 명조 계열 슬라브 스타일 글꼴로 고딕 계열인 나눔스퀘어와 잘 어울리는 글꼴입니다.

사실 본문용 글꼴로는 고딕 계열 보다는 명조 계열의 글꼴을 사용하는 것이 좋습니다. 명조 계열은 사용자의 시선이 글자를 따라서 자연스럽게 흐르게 함으로써, 쉽게 피로해지지 않고 또 빠르게 읽을 수 있기 때문이죠. 하지만 한글 웹사이트에 명조 계열의 글꼴을 적용하기에는 많은 어려움이 있습니다. 이 부분은 추후에 따로 언급하겠습니다.

글줄 길이

개인적으로 글줄 길이는 웹 콘텐츠의 가독성을 높이기 위한 가장 중요한 설정이라고 생각합니다. 그리고 대부분의 웹사이트에서 제대로 설정하고 있지 못한 부분이기도 하죠. 페이지의 레이아웃을 완성하고 그 레이아웃에 맞게 콘텐츠를 넣다 보니 생기는 문제입니다. 단락을 우선적으로 디자인해야하는 이유이기도 합니다.

이 역시 로마자와 한글의 차이점을 이해하고 적용할 수 있어야 하는데, 일반적으로 로마자 기준으로 45~85자(공백 및 기호 포함)가 적당하다고 알려져 있습니다. 한글의 경우에는 55~65자 정도가 적당합니다. 크리에이티브 매거진 테마의 콘텐츠 영역 길이는 570px로 설정하였습니다.

한글 웹 타이포그래피 - 글줄 길이가 지나치게 큰 경우
메종 코리아 웹사이트의 글줄 길이는 1200px 이나 됩니다. 글줄의 반만 읽어도 지치는 느낌입니다. 정확한 HTML 태그를 사용하지 않고 있는 부분은 여기서 언급하지 않겠습니다.
한글 웹 타이포그래피 - 글줄 길이가 지나치게 큰 경우
글줄 길이를 980px로 수정한 예제입니다. 980px도 권장할 수 있는 값은 아니지만 본문 글꼴 크기 18px에 글줄사이 32px 그리고 글꼴의 컬러를 #747474에서 #333으로 변경하여 배경과의 대비를 크게 하였습니다.

물론 글줄 길이는 콘텐츠의 성격에 따라서도 달라질 수 있습니다. 전문적인 글인 경우에는 글줄 길이가 조금 긴 것이 좋습니다. 일반적인 잡지 콘텐츠 보다는 문장의 길이가 길며, 잦은 줄바꿈은 문맥을 이해하는데 방해가 될 수 있기 때문입니다. 이 경우라면 640px 정도가 적합합니다.

글줄사이

글줄사이는 기본적으로 글줄과 글줄 사이에 등면적을 적용하는 것을 기본으로 합니다. 글줄과 글줄 사이의 공간은 글자면의 높이와 같아야 한다는 것으로, 물론 이는 실제로 동일한 px값을 적용한다는 의미는 아닙니다. 글꼴에 따라서 달라 보일 수 있기 때문입니다.

한글 웹 타이포그래피 - 글줄 간격이 좁은 경우
코스모폴리탄의 글줄사이는 매우 좁습니다. 사실 글줄사이 만의 문제는 아닙니다. 글꼴의 크기, 자간 등이 함께 개선되는 것이 좋습니다. 뿐만 아니라 콘텐츠를 등록하는 WYSIWIG 웹 에디터를 교체하여 HTML 마크업이 정상적으로 이루어지도록 해야 합니다.

단락을 구성하는 3가지 요소들은 서로 밀접하게 연관되어 있습니다. 예를 들어 글꼴의 크기가 커진다면 글줄사이도 커져야 한다거나, 글줄 길이가 길어진다면 글줄사이도 늘어나야 합니다. 그렇다면 정확하게 얼마나 늘어나야할까요? 이 비율을 알 수 있다면 우리는 보다 쉽게 단락을 디자인할 수 있게됩니다.

사실 이 물음에 대한 답은 매우 간단합니다. 우리는 이미 자연을 통해서 아름답고 효과적인 비율이 무엇인지를 알고 있기 때문입니다. 이 비율은 식물, 동물, 은하의 형태 그리고 DNA에서도 발견될 만큼 넓게 퍼져있으며, 인류는 수천년에 걸쳐 이 비율을 적극적으로 활용해 왔습니다. 많은 예술품이나 건축물 등이 바로 그 증거죠.

맞습니다. 바로 황금비율에 관한 이야기입니다. 실제로 자연속에서 어떤 사물과 사물이 연관을 맺고 그 순서를 정할때 황금비율이 적용된다고 합니다. 구체적인 사례는 구글을 통해서 확인바랍니다.

사실 타이포그래피의 목적도 글꼴 크기, 글줄 길이 그리고 글줄사이를 심미적이고 규칙적으로 연관시키는 것입니다. 황금비율이 적용된 타이포그래피는 그래서 매우 아름답고 또 효과적입니다. 그리고 이는 단지 웹 뿐만 아니라 책, 신문, 잡지 등 타이포그래피가 필요한 모든 영역에 적용됩니다.

하지만 매번 이를 위한 계산을 한다는 것은 쉬운 일이 아닙니다. 그리고 이 계산에 의한 값은 소수로 표현됩니다. 만약에 임의로 반올림해서 적용할 경우 황금비율에 의한 조화는 쉽게 깨질 수 있습니다. 이런 불편을 해소하기 위한 방법으로 미세하게 튜닝된 함수가 적용된 계산기를 이용하는 것입니다.

https://pearsonified.com/typography/

황금비율이 적용된 타이포그래피는 우리 사이트의 적절한 타이포그래피 설정을 위한 시작점이라고 생각하면 됩니다. 같은 크기의 글꼴이라고 하더라도 어떤 글꼴이냐에 따라서 달라 보일 수 있기 때문입니다. 뿐만 아니라 위 계산기 사이트는 로마자 기준입니다. 로마자와 한글의 구조적인 차이점을 이해하고 접근해야 합니다. 그러기 위해서도 기초적인 타이포그래피에 대한 학습이 필요합니다.

이렇게 완성된 사이트는 모든 사람에게 어필할 수 있는 조화로운 사이트가 될 것이라고 온 우주와 자연 그리고 역사가 천재로 증명한 여러 아티스트와 건축가가 장담합니다.

© Creative Magazine. 무단전재 및 재배포 금지

Leave a Reply