한글 타이포그래피 기초 — 가독성과 리듬을 만드는 법

좋은 한글 타이포그래피는 폰트를 잘 고르는 일에서 끝나지 않는다. 네모틀 구조, 어절 단위 줄바꿈, 속공간처럼 라틴 조판과는 다른 한글만의 규칙을 이해해야 화면에서도 종이에서도 편안하게 읽히는 글이 만들어진다.

1. 네모틀 구조와 자간·행간

한글 글자는 라틴 알파벳과 달리 초성·중성·종성이 정사각형에 가까운 틀 안에 조합되어 하나의 음절을 이룬다. 로마자는 세로획 하나뿐인 i부터 획이 겹겹이 쌓인 m까지 글자마다 폭이 제각각이지만, 한글은 자모가 몇 개 모이든 거의 같은 크기의 네모 칸에 눌러 담긴다. 그래서 라틴 조판의 습관대로 자간을 좁히면 칸 안의 자모끼리 부딪히듯 답답해 보이고, 행간을 라틴 텍스트만큼 촘촘히 잡으면 네모난 덩어리들이 위아래로 눌린 인상을 준다. 본문용 한글은 자간을 거의 건드리지 않거나 아주 미세하게만 좁히고, 행간은 165~180% 이상으로 넉넉히 열어주는 편이 안정적이다.

2. word-break: keep-all

영문 웹 타이포그래피는 단어가 길면 하이픈으로 끊어 줄을 바꾸는 관행이 익숙하지만, 한글은 어절 중간이 잘리면 의미 단위가 깨져 가독성이 크게 떨어진다. 예를 들어 “디자인 데일리 라이프”라는 문구가 화면 끝에서 “디자인 데일 / 리 라이프”처럼 잘리면 독자는 문장을 눈으로 다시 이어 붙여야 한다. 이런 이유로 웹에서 한글 본문에는 word-break: keep-all을 지정해 띄어쓰기 단위로만 줄바꿈이 일어나도록 강제하는 것이 사실상 기본값에 가깝다. 반대로 word-break: break-all은 좁은 배지나 태그처럼 공간이 극도로 제한된 경우에만 예외적으로 쓰는 편이 좋다.

모바일 뷰포트에서 특히 두드러지는 문제

화면 폭이 좁은 모바일에서는 줄바꿈 위치가 더 자주 발생하는 만큼 keep-all의 효과도 더 크게 체감된다. 반응형 카드나 버튼처럼 너비가 유동적인 요소에서는 keep-all과 함께 여백을 여유 있게 설계해 어절이 끊기지 않고도 자연스럽게 줄이 바뀌도록 배려해야 한다.

3. 속공간과 국문 서체 고르기

로마자에는 소문자 몸통 높이를 가리키는 엑스하이트라는 개념이 있는데, 한글에서 이에 대응하는 감각은 자모와 자모 사이의 여백, 이른바 속공간이다. 속공간이 넉넉한 서체는 작은 크기에서도 자모끼리 들러붙지 않아 화면 가독성이 좋고, 속공간이 좁은 서체는 큰 제목에서 밀도 있고 힘 있는 인상을 준다. 국내 디자인 실무에서 널리 쓰이는 서체로는 오픈소스 산세리프인 프리텐다드, 구글과 어도비가 함께 만든 노토 산스 KR, 균일한 두께와 넉넉한 속공간으로 화면용으로 사랑받는 SUIT를 꼽을 수 있다. 이들은 모두 여러 굵기를 제공해 본문과 제목의 위계를 서체 하나만으로도 해결할 수 있다는 공통점이 있다.

4. 한글과 라틴·숫자 조합하기

한 화면 안에 한글과 로마자·숫자가 섞이면 두 문자 체계의 크기 균형을 맞추는 일이 중요해진다. 한글 서체에 딸려 오는 라틴 글리프는 대개 한글의 리듬에 맞춰 살짝 크고 두껍게 그려져 있어 그대로 써도 무난한 경우가 많다. 다만 헤드라인처럼 로마자의 인상이 또렷하게 살아야 하는 자리라면 별도의 라틴 서체를 짝지어 쓰기도 하는데, 이때는 두 서체의 대문자 높이와 굵기를 눈대중이 아니라 실제로 나란히 놓고 비교해 조정해야 한다. 표나 가격 정보처럼 숫자가 반복되는 자리는 한글 서체에 내장된 고정폭 숫자를 쓰면 자릿수가 흔들리지 않아 훨씬 안정적으로 보인다.

마치며

한글 타이포그래피는 라틴 조판 규칙을 대입한다고 저절로 완성되지 않는다. 음절이 네모틀 안에서 완결된다는 구조적 특징을 인정하는 데서 출발해, 자간과 행간을 다시 설계하고 word-break로 어절을 지키며 속공간이 다른 서체를 목적에 맞게 고르는 과정이 함께 필요하다. 결국 좋은 한글 조판은 원칙을 아는 것보다, 그 원칙을 화면 앞에서 매번 다시 확인하는 태도에서 완성된다.