웹사이트를 디자인하거나 앱 화면을 설계할 때, 영문 타이포그래피 원칙을 그대로 한글에 적용하면 어딘가 어색한 결과물이 나옵니다. 한글은 라틴 알파벳과 근본적으로 다른 구조를 가지고 있기 때문입니다. 이 글에서는 한글 타이포그래피의 기초를 체계적으로 정리합니다. 글꼴 선택부터 자간, 행간 설정, 반응형 대응까지. 한글을 다루는 디자이너라면 꼭 알아야 할 내용을 담았습니다.

한글의 구조적 특성

자모 조합 시스템

한글은 세계에서 거의 유일하게 자음과 모음을 조합해 하나의 글자를 만드는 문자 체계입니다. 영문 알파벳이 글자를 일렬로 나열하는 방식이라면, 한글은 초성, 중성, 종성이라는 세 요소를 하나의 네모꼴 안에 배치합니다. 예를 들어 '한'이라는 글자는 초성 'ㅎ', 중성 'ㅏ', 종성 'ㄴ'이 결합한 결과물입니다.

이 조합 방식 때문에 한글은 이론적으로 11,172개의 완성형 글자를 만들 수 있습니다. 실제로 자주 쓰이는 글자는 2,000~3,000자 정도지만, 폰트 파일에는 이 모든 조합을 포함해야 합니다. 영문 폰트가 알파벳 대소문자 52자와 기호 몇십 개만 담으면 되는 것과 비교하면, 한글 폰트 제작이 얼마나 방대한 작업인지 짐작할 수 있습니다.

네모꼴의 원리

한글의 가장 큰 시각적 특징은 네모꼴(정사각형 틀)입니다. 모든 한글 글자는 가상의 정사각형 안에 들어가도록 설계됩니다. '가'처럼 단순한 글자도, '뿟'처럼 복잡한 글자도 같은 크기의 네모꼴 안에 배치됩니다.

이 네모꼴 구조는 한글이 가지런하게 정렬되는 장점을 줍니다. 반면에 글자마다 획의 밀도가 크게 달라지는 문제도 생깁니다. 'ㅇ'처럼 획이 적은 글자와 '뿟'처럼 획이 많은 글자가 같은 크기 안에 들어가야 하니, 글꼴 디자이너는 시각적 균형을 맞추기 위해 세밀한 조정을 거칩니다.

초성, 중성, 종성의 배치

한글 글자 안에서 자모가 배치되는 방식은 중성(모음)의 형태에 따라 달라집니다. 'ㅏ', 'ㅓ'처럼 세로 모음이면 초성이 왼쪽, 중성이 오른쪽에 놓입니다. 'ㅗ', 'ㅜ'처럼 가로 모음이면 초성이 위, 중성이 아래에 배치됩니다. 'ㅘ', 'ㅝ'처럼 복합 모음은 두 가지 방식이 섞입니다.

종성(받침)이 있으면 글자 아래쪽에 추가 공간이 필요합니다. 받침이 없는 '가'와 받침이 있는 '간'은 내부 구조가 완전히 다릅니다. 이런 복잡한 배치 규칙 때문에 한글 폰트 디자인은 영문 폰트보다 훨씬 많은 노력이 들어갑니다.

한글 글꼴의 종류

명조체(바탕체)

명조체는 획의 끝에 삐침(세리프)이 있는 글꼴입니다. 영문의 세리프체에 해당합니다. 전통적으로 본문용 글꼴로 많이 쓰였고, 인쇄물에서 가독성이 뛰어납니다. 대표적인 명조체로는 바탕체, 나눔명조, 본명조(Noto Serif KR) 등이 있습니다.

다만 웹 환경에서는 명조체 사용이 줄어드는 추세입니다. 저해상도 화면에서 삐침이 뭉개져 보이는 문제가 있었기 때문입니다. 최근에는 고해상도 디스플레이가 보편화되면서 웹에서도 명조체를 다시 활용하는 사례가 늘고 있습니다.

고딕체(돋움체)

고딕체는 획의 굵기가 일정하고 삐침이 없는 글꼴입니다. 영문의 산세리프체에 해당합니다. 화면에서의 가독성이 좋아 웹과 앱 디자인에서 가장 널리 쓰이는 글꼴 유형입니다. 돋움체, 나눔고딕, 본고딕(Noto Sans KR), Pretendard 등이 대표적입니다.

고딕체는 깔끔하고 현대적인 인상을 주기 때문에 UI 디자인에 특히 적합합니다. 작은 크기에서도 글자가 또렷하게 보이는 장점이 있어, 모바일 환경에서도 안정적인 가독성을 보장합니다.

손글씨체와 장식체

손글씨체는 사람이 직접 쓴 듯한 느낌을 주는 글꼴입니다. 친근하고 따뜻한 분위기를 연출할 때 효과적입니다. 다만 본문에 사용하면 가독성이 떨어지므로, 제목이나 강조 요소에 제한적으로 쓰는 것이 좋습니다.

장식체 역시 마찬가지입니다. 개성 있는 디자인을 만들 때 포인트로 활용하되, 긴 텍스트에는 적합하지 않습니다. 한글 장식체는 영문 장식체보다 종류가 적은 편이지만, 최근 독립 폰트 디자이너들의 활동이 활발해지면서 선택지가 점점 넓어지고 있습니다.

웹폰트의 등장

과거에는 웹에서 한글 폰트를 쓰려면 사용자 컴퓨터에 해당 폰트가 설치되어 있어야 했습니다. 그래서 '맑은 고딕'이나 '돋움' 같은 시스템 기본 폰트에 의존할 수밖에 없었습니다. 웹폰트 기술이 보편화되면서 이 제약이 사라졌습니다.

하지만 한글 웹폰트는 파일 크기가 큰 편입니다. 11,172자를 모두 포함해야 하기 때문입니다. 이 문제를 해결하기 위해 서브셋 폰트, 다이나믹 서브셋, WOFF2 압축 등 다양한 최적화 기법이 발전했습니다.

추천 한글 웹폰트

Pretendard

Pretendard는 현재 한국 웹 디자인 업계에서 가장 인기 있는 고딕체 웹폰트입니다. Apple의 San Francisco와 Inter에서 영감을 받아 제작되었으며, 한글과 영문의 조화가 뛰어납니다. 9가지 굵기(Thin부터 Black까지)를 지원하고, 가변 폰트 버전도 제공합니다.

CDN을 통해 간편하게 적용할 수 있고, 파일 크기도 합리적입니다. 특히 UI 디자인에서 영문과 한글이 섞여 나올 때 시각적 통일감이 좋아, 많은 스타트업과 IT 기업이 채택하고 있습니다.

Noto Sans KR (본고딕)

구글과 어도비가 공동 개발한 Noto Sans KR은 한글 웹폰트의 표준이라 할 수 있습니다. '모든 언어를 지원하겠다'는 Noto 프로젝트의 일환으로 만들어졌으며, 한글뿐 아니라 한자, 일본어 가나까지 포함합니다. Google Fonts에서 무료로 제공되어 접근성이 매우 좋습니다.

다만 파일 크기가 상당히 크기 때문에, Google Fonts의 다이나믹 서브셋 기능을 활용하는 것이 좋습니다. 페이지에서 실제로 사용하는 글자만 내려받아 로딩 속도를 크게 개선할 수 있습니다.

Spoqa Han Sans Neo

스포카에서 제작한 Spoqa Han Sans Neo는 깔끔하고 단정한 인상의 고딕체입니다. 본고딕을 기반으로 하되, 한글의 자간과 행간을 웹 환경에 맞게 최적화했습니다. 특히 숫자와 영문의 가독성이 뛰어나 데이터가 많은 대시보드나 관리자 화면에 적합합니다.

기타 추천 폰트

이 밖에도 나눔스퀘어(네이버), IBM Plex Sans KR, Wanted Sans 등 품질 좋은 한글 웹폰트가 많습니다. 프로젝트의 성격과 브랜드 톤에 맞는 폰트를 선택하되, 라이선스 조건을 반드시 확인하세요. 대부분 무료로 사용 가능하지만, 일부 폰트는 상업적 사용에 제한이 있을 수 있습니다.

자간(letter-spacing) 설정 가이드

자간은 글자와 글자 사이의 간격을 뜻합니다. 한글 타이포그래피에서 자간 설정은 영문과 다른 접근이 필요합니다.

한글 자간의 특수성

영문 폰트는 글자마다 폭이 다릅니다. 'i'는 좁고 'w'는 넓습니다. 그래서 커닝(kerning)이라는 기법으로 글자 쌍마다 간격을 세밀하게 조정합니다. 반면 한글은 네모꼴 구조 때문에 모든 글자의 폭이 동일합니다. 커닝 대신 전체 자간을 일괄 조정하는 방식이 일반적입니다.

한글 본문의 자간은 보통 -0.01em에서 -0.03em 사이가 적당합니다. 한글 폰트는 네모꼴 안에 여백이 포함되어 있어, 기본 상태에서는 글자 사이가 다소 넓어 보일 수 있습니다. 약간의 마이너스 자간을 주면 글자들이 자연스럽게 모여 가독성이 좋아집니다.

제목과 본문의 자간 차이

제목처럼 큰 글씨에서는 자간을 좀 더 좁게 설정하는 것이 시각적으로 안정감을 줍니다. -0.02em에서 -0.05em 정도가 적절합니다. 반대로 캡션이나 작은 텍스트에서는 자간을 기본값으로 두거나 약간 넓히는 것이 읽기 편합니다.

행간(line-height) 설정 가이드

한글은 영문보다 넓은 행간이 필요하다

행간은 줄과 줄 사이의 간격입니다. 한글 타이포그래피에서 가장 중요한 설정 중 하나입니다. 영문 본문의 행간이 보통 1.4~1.6 정도라면, 한글 본문은 1.6~1.8이 적당합니다. 경우에 따라 2.0까지 넓히기도 합니다.

한글이 더 넓은 행간을 필요로 하는 이유가 있습니다. 첫째, 한글은 네모꼴 구조라 글자 자체의 높이가 영문보다 큽니다. 둘째, 한글에는 어센더(b, d, h 등 위로 올라가는 부분)와 디센더(g, p, y 등 아래로 내려가는 부분)가 없어서, 줄 사이의 시각적 구분이 영문보다 약합니다. 행간을 넓혀야 줄과 줄이 명확하게 분리되어 읽기 편해집니다.

상황별 행간 추천값

• 본문 텍스트: line-height 1.7~1.8이 가장 읽기 편합니다. 블로그, 뉴스 기사, 설명 페이지 등 긴 글에 적합합니다
• 제목: line-height 1.2~1.4 정도로 좁게 설정합니다. 제목은 짧기 때문에 행간이 넓으면 오히려 산만해 보입니다
• UI 텍스트: 버튼, 레이블, 메뉴 등 짧은 텍스트는 line-height 1.4~1.5가 적당합니다
• 캡션/주석: 작은 글씨에는 line-height 1.6~1.7 정도를 줍니다. 글씨가 작을수록 행간을 상대적으로 넓게 잡아야 가독성이 유지됩니다

본문 vs 제목 타이포그래피 차이

본문 타이포그래피

본문은 긴 시간 동안 읽어야 하는 텍스트입니다. 가독성이 최우선입니다. 글꼴 크기는 16px 이상을 권장합니다. 모바일에서도 16px 미만으로 내려가지 않는 것이 좋습니다. 글꼴 굵기는 Regular(400)가 기본이고, 강조할 부분만 SemiBold(600)나 Bold(700)를 씁니다.

본문의 줄 길이(measure)도 중요합니다. 한 줄에 너무 많은 글자가 들어가면 시선이 다음 줄로 넘어갈 때 길을 잃기 쉽습니다. 한글 본문은 한 줄에 25~35자 정도가 적당합니다. 이는 영문의 45~75자 권장 범위보다 적은 수치인데, 한글 한 글자가 영문 한 글자보다 정보량이 많기 때문입니다.

제목 타이포그래피

제목은 시선을 끌고 내용을 요약하는 역할을 합니다. 본문보다 크고 굵게 설정하되, 계층 구조를 명확히 해야 합니다. H1, H2, H3 사이의 크기 차이가 충분해야 독자가 글의 구조를 한눈에 파악할 수 있습니다.

한글 제목에서 자주 하는 실수가 있습니다. 영문 제목처럼 모든 단어의 첫 글자를 대문자로 쓰는 Title Case를 한글에 적용하려는 시도입니다. 한글에는 대소문자 구분이 없으므로, 이런 방식은 의미가 없습니다. 대신 글꼴 굵기, 크기, 색상으로 위계를 표현합니다.

반응형 타이포그래피

모바일에서의 한글

모바일 화면은 좁습니다. 데스크톱에서 잘 보이던 타이포그래피가 모바일에서는 답답하거나 읽기 어려울 수 있습니다. 한글은 네모꼴 구조 때문에 작은 화면에서 특히 주의가 필요합니다.

모바일에서 한글 본문 크기는 최소 15px, 가능하면 16px 이상을 유지하세요. iOS Safari는 16px 미만의 입력 필드에 자동 확대를 적용하는데, 이는 사용자 경험을 해칩니다. 행간은 데스크톱과 동일하거나 약간 넓게 설정하는 것이 좋습니다.

유동적 타이포그래피(Fluid Typography)

화면 크기에 따라 글꼴 크기가 부드럽게 변하는 유동적 타이포그래피를 적용하면, 모든 기기에서 최적의 읽기 경험을 제공할 수 있습니다. CSS의 clamp() 함수를 활용하면 최솟값과 최댓값 사이에서 뷰포트 크기에 비례해 글꼴 크기가 조절됩니다.

예를 들어 제목에 clamp(1.5rem, 4vw, 2.5rem)을 적용하면, 모바일에서는 1.5rem, 데스크톱에서는 2.5rem, 그 사이에서는 뷰포트 너비의 4%로 표시됩니다. 한글 제목은 영문보다 글자당 면적이 크므로, 최솟값을 넉넉하게 잡는 것이 좋습니다.

줄바꿈 처리

한글은 영문과 줄바꿈 규칙이 다릅니다. 영문은 단어 단위로만 줄바꿈이 되지만, 한글은 음절 단위로 줄바꿈이 가능합니다. CSS의 word-break 속성을 적절히 설정해야 합니다. word-break: keep-all을 적용하면 한글도 단어 단위로 줄바꿈됩니다. 이 설정은 제목이나 짧은 텍스트에서 특히 효과적입니다.

본문에서는 keep-all을 쓸지 말지 신중하게 판단해야 합니다. 좁은 컨테이너에서 keep-all을 적용하면 단어가 통째로 다음 줄로 넘어가면서 오른쪽에 큰 여백이 생길 수 있습니다. 본문 너비가 충분하다면 keep-all이 가독성을 높여주지만, 좁은 영역에서는 기본값(break-all)이 나을 수도 있습니다.

더미 텍스트로 타이포그래피 테스트하기

타이포그래피 설정을 마쳤다면, 실제 콘텐츠가 들어가기 전에 충분한 테스트가 필요합니다. 이때 한글 더미 텍스트가 큰 도움이 됩니다.

왜 한글 더미 텍스트인가

영문 로렘입숨으로는 한글 타이포그래피를 제대로 테스트할 수 없습니다. 한글과 영문은 글자 폭, 높이, 줄바꿈 방식이 모두 다르기 때문입니다. 한글 더미 텍스트를 사용해야 실제 한글 콘텐츠가 들어갔을 때의 모습을 정확히 예측할 수 있습니다.

자간과 행간을 조정할 때도 한글 텍스트로 확인해야 합니다. 영문에서는 적절해 보이던 설정이 한글에서는 너무 좁거나 넓을 수 있습니다. 특히 한글과 영문이 섞인 텍스트에서는 두 문자 체계의 균형을 맞추는 작업이 필수적입니다.

효과적인 테스트 방법

타이포그래피 테스트를 할 때는 다양한 길이의 텍스트를 넣어보세요. 한 줄짜리 제목, 두세 줄짜리 소제목, 여러 문단의 본문을 모두 확인해야 합니다. 글자 수를 자유롭게 조절할 수 있는 더미 텍스트 생성기를 쓰면 이 과정이 훨씬 수월해집니다.

다양한 기기에서도 확인하세요. 데스크톱 브라우저, 모바일 Safari, 안드로이드 Chrome에서 각각 어떻게 보이는지 점검해야 합니다. 같은 폰트라도 운영체제와 브라우저에 따라 렌더링 결과가 미묘하게 달라질 수 있습니다.

마치며

한글 타이포그래피는 영문 타이포그래피와 다른 고유한 원칙이 있습니다. 네모꼴 구조를 이해하고, 적절한 글꼴을 선택하며, 자간과 행간을 한글에 맞게 조정하는 것. 이 기본기만 갖춰도 한글 디자인의 품질이 눈에 띄게 달라집니다.

좋은 타이포그래피는 눈에 보이지 않습니다. 독자가 글을 읽으면서 글꼴이나 간격을 의식하지 않는다면, 그것이 바로 성공적인 타이포그래피입니다. 한글의 특성을 존중하면서도 자연스럽게 읽히는 디자인을 만들어보세요.