좋은 웹 타이포그래피는 하나의 문단에서 시작합니다

크리에이티브밴드는 웹사이트를 디자인할 때 잘 읽히는 하나의 문단(paragraphy)을 만드는 것에서 시작합니다. 서체(Typeface)를 선택하고, 콘텐츠의 성격에 맞는 글줄 길이(Measure)를 정합니다. 그 안에서 적절한 글자 크기(Type Size)와 행간(Leading)을 찾고 자간(Tracking)을 확인합니다. 하나의 문단이 완성되면 그 기준을 바탕으로 나머지 제목과 여백, 콘텐츠 영역까지 확장합니다.

본문용 서체와 제목용 서체를 구분합니다

Pretendard, Noto Sans KR, Wanted Sans 처럼 많이 사용되는 한글 서체는 본문용으로 좋은 선택입니다. 작은 크기에서도 안정적이고 장문을 읽는 데 방해가 되지 않습니다. 하지만 한글만 보고 서체를 결정하지는 않습니다. 기업 웹사이트에는 회사명, 서비스명, 숫자, SEO·GEO·AEO 같은 영문이 계속 섞입니다. 한글은 만족스럽지만 영문의 인상이 아쉬운 경우에는 별도의 영문 서체를 조합하기도 합니다.

font-family: "Outfit", "Pretendard", sans-serif;

제목은 조금 다르게 접근합니다. 본문의 중립성은 장점이지만 제목까지 같은 서체를 크게 확대하는 방식은 많은 웹사이트를 비슷하게 보이게 만듭니다. 그래서 가능하면 제목용 서체(Display Typeface)를 별도로 탐색합니다. 화려한 서체가 필요한 것은 아닙니다. 웹사이트의 성격과 맞는 그러나 본문과는 조금 다른 목소리를 가진 서체를 찾는 과정이 필요합니다.

font-family: "Ydestreet", sans-serif;

콘텐츠에 따라 글줄 길이를 결정합니다

서체를 선택한 다음에는 실제 콘텐츠를 넣어 글줄 길이를 결정합니다. 일반적인 콘텐츠에서는 약 680px을 출발점으로 삼을 수 있지만, 정보 밀도가 높은 전문 콘텐츠에서는 720~800px 정도까지 넓혀볼 수 있습니다.

중요한 것은 680px이나 800px이라는 숫자가 아닙니다. 같은 폭이라도 서체와 글자 크기에 따라 한 줄에 들어가는 글자의 수가 달라지기 때문입니다. 글줄 길이가 결정되면 글자 크기와 행간을 함께 조정합니다.

글자 크기 + 글줄 길이 + 행간

이 세 가지는 서로 영향을 줍니다. 글줄이 길어지면 행간을 넓히거나 글자 크기를 키울 수 있고, 글자가 커져 한 줄이 짧아지면 행간을 다시 줄일 수도 있습니다. 따라서 16px / 1.5 / 680px 같은 숫자를 각각 독립된 규칙으로 생각하지 않습니다. 하나를 바꾸면 나머지도 다시 확인합니다.

자간은 가능하면 건드리지 않습니다. 잘 만들어진 본문용 서체에는 이미 적절한 글자 사이 공간이 설계되어 있기 때문입니다. 다만 큰 제목에서는 실제 글자의 형태를 보고 미세하게 보정할 수 있습니다.

하나의 문단에서 전체 타입 시스템으로 확장합니다

본문이 완성되면 사이트 전체의 기준이 생깁니다. 크리에이티브밴드는 주로 12px, 14px, 16px을 기준 크기로 사용하고 필요에 따라 1.5배씩 확대하거나 축소합니다. 1:1.5는 음악에서 3:2의 비율을 갖는 완전5도(Perfect Fifth)와 같은 비율입니다.

이 기준으로 H2, H3, H4의 크기와 위계를 만들고, 제목용 서체와 굵기, 컬러를 적용합니다. 문단 사이와 제목 위아래의 여백도 결정됩니다. 결국 하나의 문단에서 시작한 설정이 웹사이트 전체로 확장됩니다.

그래서 우리는 레이아웃을 먼저 만들고 텍스트를 끼워 넣기보다 콘텐츠가 가장 잘 읽히는 문단을 먼저 만들고 그 문단에서 바깥쪽으로 디자인합니다.

콘텐츠가 많아질수록 읽기 좋은 디자인이 중요합니다

SEO에 이어 GEO와 AEO까지 중요해지면서 기업이 생산하는 콘텐츠는 빠르게 늘어나고 있습니다. 생성형 AI는 콘텐츠 생산량을 더욱 증가시키고 있습니다. 하지만 콘텐츠를 많이 만들 수 있다고 해서 사람들이 더 많이 읽는 것은 아닙니다.

검색엔진과 AI가 콘텐츠를 이해하도록 구조를 만드는 것만큼 사람이 편안하게 읽을 수 있는 환경을 만드는 것도 중요합니다. 글자가 충분히 잘 보여야 하고, 한 줄을 읽은 뒤 다음 줄을 쉽게 찾을 수 있어야 합니다. 제목만 훑어보더라도 정보의 구조를 파악할 수 있어야 하고, 긴 글을 읽어도 쉽게 피로해지지 않아야 합니다.

잘 설계된 타이포그래피는 눈에 잘 띄지 않습니다. 독자는 행간이나 글줄 길이를 의식하지 않고 그냥 읽습니다.

좋은 웹 타이포그래피는 잘 읽히는 하나의 문단에서 시작합니다. 그리고 그 하나의 문단을 제대로 만드는 것이 우리가 웹사이트 디자인에서 가장 먼저 하는 일입니다.

웹사이트 제작사를 선택할 때 타이포그래피를 확인해보세요

웹사이트 제작사를 선택하고 있다면 포트폴리오의 화려한 화면만 보지 말고 본문이 어떻게 디자인되어 있는지 살펴보는 것도 좋습니다. 어떤 서체를 사용하는지, 본문과 제목에 같은 서체를 사용하는지, 글자 크기와 글줄 길이, 행간은 어떤 기준으로 결정하는지 물어보세요. 모바일에서는 이러한 설정이 어떻게 달라지는지도 확인할 수 있습니다.

특히 콘텐츠가 중요한 기업 웹사이트라면 제작사가 본문의 타이포그래피를 별도의 디자인 과정으로 다루고 있는지 확인해볼 필요가 있습니다.

좋은 서체를 설치하고 font-size와 line-height를 지정하는 것만으로 타이포그래피 디자인이 끝나는 것은 아닙니다. 실제 콘텐츠의 성격과 읽기 환경을 고려해 서체, 글자 크기, 글줄 길이와 행간의 관계를 조정하고, 여기에서 제목과 여백을 포함한 전체 타입 시스템을 만들어야 합니다.

크리에이티브밴드가 하나의 문단을 먼저 디자인하는 이유도 여기에 있습니다. 웹사이트에서 가장 많이 사용되는 디자인 요소는 결국 글자입니다.

SEO, GEO, AEO를 위해 더 많은 콘텐츠를 만들어야 하는 시대라면, 그 콘텐츠를 얼마나 잘 만들 것인가뿐 아니라 사람이 얼마나 편안하게 읽을 수 있도록 보여줄 것인가도 웹사이트 제작 단계에서 함께 설계되어야 합니다.