한글 웹 타이포그래피 (1) 서구 규칙을 그대로 쓰면 안 되는 이유
디자인 시스템 문서를 새로 정리하던 날이었다. 본문 타이포를 어떻게 잡을지 정하려고 유명한 영문 가이드들을 펼쳤다. 한 줄은 66자, 행간(line-height)은 1.5, 본문 크기는 16px. 어느 책을 봐도 비슷한 숫자가 적혀 있으니 안전하다고 생각했다. 그대로 CSS에 옮겼다.
그런데 실제 화면에 한글 본문을 흘려보내니 뭔가 계속 어긋났다. 한 줄이 너무 길어서 다음 줄 첫 글자로 눈이 잘 안 넘어갔다. 줄과 줄이 서로 달라붙어 답답했다. 글자는 분명 16px인데 이상하게 빽빽하고 눈이 금방 피곤했다. 영문 목업으로 볼 때는 멀쩡하던 값이, 같은 자리에 한글을 넣자마자 무너졌다.
문제는 내 CSS가 아니었다. 그 숫자들이 애초에 한글을 보고 만든 값이 아니었다. 66자도 1.5도 16px도 전부 라틴 알파벳(Latin alphabet)을 조판하면서 쌓인 경험값이다. 글자의 생김새가 다르면 최적값도 달라진다. 이 시리즈는 그 다른 값을 하나씩 찾아 나가는 여정이고, 이번 글은 왜 서구 규칙을 그대로 가져오면 안 되는지, 그 뿌리인 한글 글자 구조부터 짚는다.
한글은 네모 칸을 꽉 채운다
한글과 라틴을 가르는 가장 큰 차이는 글자가 자리를 차지하는 방식이다.
라틴 알파벳은 낱글자를 옆으로 늘어놓는다. 이걸 풀어쓰기라고 부른다. a, b, c가 각자 폭을 가지고 기준선(baseline) 위에 순서대로 놓인다. 글자마다 위아래로 삐져나가는 부분(어센더·디센더)이 있어서, 실제 글자는 자기가 배정받은 칸의 절반 남짓만 쓰고 나머지는 여백으로 비운다.
한글은 다르다. 자음과 모음을 하나의 네모 칸 안에 모아서 한 글자를 만든다. 이걸 모아쓰기라고 하고, 그렇게 만들어진 사각형 틀을 네모틀(square frame)이라 부른다. 예를 들어 ‘값’이라는 글자는 ㄱ, ㅏ, ㅄ 세 요소가 한 칸 안에 겹쳐 들어간다. 한글 연구들은 이렇게 만들어진 글자가 네모틀의 약 90%를 차지한다고 본다. 라틴이 칸을 절반쯤 비워 두는 것과 정반대다.
칸을 꽉 채운다는 건 두 가지를 뜻한다.
첫째, 한 글자 안에 담기는 획이 많다. 자음 하나에 모음 하나, 거기에 받침까지 한 칸에 눌러 담으니 라틴 낱글자보다 획밀도(stroke density)가 높다. 같은 크기라면 한글이 더 빽빽하다.
둘째, 같은 픽셀 크기라도 한글이 시각적으로 더 커 보이고 더 꽉 차 보인다. 16px 라틴 소문자는 칸 안에서 실제로는 x-height 만큼만 차지하지만, 16px 한글은 칸을 거의 다 메운다. 눈에 들어오는 실질 크기가 다르다.
여기에 속공간(counter)이라는 개념이 하나 더 붙는다. 속공간은 글자 획으로 둘러싸인 안쪽 빈 공간이다. 라틴 o의 가운데 구멍, ㅁ의 안쪽 사각형 같은 것이다. 한글은 한 칸 안에 여러 획을 모아쓰기 때문에 속공간이 잘게 쪼개지고 좁아진다. 속공간이 좁으면 글자가 뭉쳐 보이고, 작은 크기에서 획이 서로 먹혀 읽기 힘들어진다.
이 세 가지 (높은 획밀도, 큰 시각적 크기, 좁은 속공간)가 이 시리즈를 관통하는 한 문장으로 모인다. 한글은 라틴보다 크게, 넓게, 짧게 조판해야 한다. 글자에 숨 쉴 공간을 주려고 크게, 줄 사이를 넓게, 한 줄은 짧게. 왜 그런지는 아래에서 서구의 세 숫자를 하나씩 뜯어보며 확인한다.
66자가 한글에서 어긋나는 이유
서구 타이포에서 한 줄 길이의 정석은 66자다. 로버트 브링허스트가 정리한 이 값은 라틴 본문에서 눈이 한 줄을 읽고 다음 줄 첫 글자로 정확히 되돌아오기 좋은 폭으로 자리 잡았다.
문제는 이 66이 라틴 글자의 폭을 기준으로 한 숫자라는 것이다. 라틴 소문자는 대체로 폭이 좁고 글자마다 폭도 제각각이다. 한글은 네모틀이라 글자 하나하나가 라틴 소문자보다 폭이 넓고, 대략 라틴 두 글자만큼의 가로 자리를 차지한다.
그래서 글자 수 66을 한글에 그대로 옮기면 물리적인 줄 길이가 라틴의 거의 두 배로 늘어난다. 한 줄이 화면에서 너무 길어지면 눈이 줄 끝까지 갔다가 다음 줄 첫머리를 놓치고 같은 줄을 다시 읽거나 엉뚱한 줄로 튄다. 도입에서 겪은 그 증상이다.
웹 접근성 기준(WCAG)이 CJK 문자에 대해 한 줄 40자를 권하는 것도 같은 맥락이다. 라틴 글자 수를 CJK에 그대로 쓰면 안 되니 별도 숫자를 둔 것이다. 실무에서는 글자 수로 세기보다 본문 폭을 픽셀로 제한하는 편이 다루기 쉬운데, 그 구체적인 max-width 값과 40자의 관계는 글 길이를 다루는 편에서 확정한다.
line-height 1.5가 한글에서 어긋나는 이유
행간 1.5도 라틴 본문의 기본값으로 흔히 쓰인다. 그런데 이 값은 칸을 절반쯤 비우는 라틴 글자를 전제로 한다. 글자 자체가 위아래 여백을 이미 품고 있으니, 줄 간격을 조금만 벌려도 줄과 줄 사이에 숨 쉴 틈이 생긴다.
한글은 칸을 꽉 채운다. 획밀도가 높은 네모틀이 위아래로 빽빽하게 쌓이면 줄과 줄의 검은 덩어리가 서로 가까워진다. 라틴에서 1.5로 충분하던 여백이, 한글에서는 줄이 서로 달라붙은 것처럼 답답하게 느껴진다. 도입에서 줄이 붙어 보였던 이유가 이것이다.
그래서 CJK 조판에서는 행간을 라틴보다 넉넉하게 잡는 게 관습이다. 여러 조판 안내서가 CJK 본문에 1.7 안팎의 행간을 권한다. 다만 이건 실험으로 못박힌 상수라기보다 밀도 높은 글자에 숨 쉴 공간을 준다는 원리에서 나온 실무 관습에 가깝다. 정확히 얼마로, 그리고 글자 크기나 줄 길이에 따라 어떻게 조정할지는 자간·행간·문단 간격을 다루는 편에서 값으로 정리한다.
16px가 한글에서 어긋나는 이유
본문 16px은 웹에서 사실상 기본값처럼 굳었다. 브라우저 기본 글자 크기가 16px이기도 하다.
하지만 앞에서 봤듯이 같은 16px이라도 한글은 라틴보다 시각적으로 크고 빽빽하다. 얼핏 그러면 한글은 더 작게 써도 되겠다 싶지만 실제로는 반대다. 획밀도가 높고 속공간이 좁은 글자는 작은 크기에서 획이 서로 뭉개진다. 특히 받침이 있는 글자나 획이 복잡한 글자는 16px 언저리에서 안쪽 공간이 먹혀 읽기가 눈에 띄게 힘들어진다. 도입에서 16px 한글이 유독 빽빽하고 눈이 피곤했던 게 이 때문이다.
그래서 한글 본문은 라틴보다 한 단계 키워 주는 편이 안전하다. 좁은 속공간을 벌려 글자가 서로 먹히지 않게 하려는 것이다. 다만 무작정 키우면 한 줄 글자 수와 행간이 다시 흔들리니 크기 하나만 따로 정할 수는 없다. 본문 크기의 구체값과 굵기, 대비까지 묶어서 크기·굵기 편에서 정한다.
이 시리즈가 결국 무엇을 주는가
여기까지가 문제 제기다. 66자도 1.5도 16px도 라틴 글자를 보고 만든 값이라, 칸을 꽉 채우는 한글에는 그대로 맞지 않는다. 그럼 한글에 맞는 값은 얼마인가. 이 시리즈가 답할 질문이 바로 이것이다.
목표는 분명하다. 마지막 글에서 복사해 붙이면 바로 쓰는 한글 웹 타입스케일과 CSS 토큰 세트를 만든다. 서체, 글자 크기, 굵기, 대비, 한 줄 길이, 줄끝 처리, 자간, 행간, 문단 간격, 그리고 이 모두를 엮은 타입스케일까지. 매 글은 원리를 먼저 설명하고, 근거를 대고, 마지막에 실전값을 남긴다. 그렇게 쌓인 값을 마지막 글이 하나의 CSS 변수 블록으로 조립한다.
앞으로 다룰 편의 지도는 이렇다.
- 2편. 명조와 고딕: 화면에서 무엇을 언제 쓸지. 본문 고딕이 기본인 이유와 명조가 빛나는 맥락.
- 3편. 글자 크기·굵기와 본문 대비: 한글 본문을 라틴보다 키우는 근거, 굵기, 다크모드 대비까지.
- 4편. 글 길이와 줄끝 처리: 한 줄 40자와 본문 폭, 어절 단위로 끊는 줄바꿈, 외톨이 줄 관리.
- 5편. 자간·행간과 문단 간격: 한글 자간을 왜 대개 건드리지 않는지, 행간을 얼마나 넓힐지, 문단 사이를 얼마나 띄울지.
- 6편. 위계와 타입스케일: 본문 값을 기준으로 제목부터 캡션까지 도출하고, 앞의 모든 값을 하나의 토큰 블록으로 조립.
- 한영 혼용 조판(선택): 라틴을 섞을 때 크기와 기준선 차이 보정.
이 글은 도입이라 구체적인 CSS 값을 확정하지 않았다. 크게, 넓게, 짧게라는 방향과, 서구의 숫자를 의심해야 하는 이유만 챙기면 이번 편은 충분하다. 확정 값은 다음 편부터 하나씩 못박는다. 다음 글에서는 가장 먼저 결정해야 할 것, 본문에 명조를 쓸지 고딕을 쓸지부터 정한다.