designnews

한글 자간·커닝 연습

흐트러진 글자 사이 간격을, 눈으로만 보고 원래대로 되돌려 보세요.

흐린 글자(처음·끝)는 고정 — 마우스로 끌거나 키보드(Tab·화살표)로 가운데 글자들을 옮겨 자연스러운 간격을 만든 뒤 채점하세요. 정답은 폰트가 설계한 원래 간격(실측값)입니다.

1단계 — 같은 꼴끼리 (1/3)
서체 프리텐다드 · 제작 길형진 — 처음/끝 글자 고정

마우스로 끌거나, Tab으로 글자 선택 후 1px,Shift+화살표 10px,Enter 채점/다음.

감으로 고른 자간, CSS로 가져가기

게임의 1px 오차는 62px 글자 기준 약 0.016em입니다. 아래 슬라이더로 눈에 맞는 자간을 고르고 그대로 복사하세요.

동해물과 백두산이 마르고 닳도록
letter-spacing: 0.020em;

자간, 커닝, 행간 — 뭐가 다른가요

자간(letter-spacing, 트래킹)은 글자 사이에 일괄로 더하거나 빼는 고정 간격이고, 커닝(kerning)은 글자 모양에 따라 특정 쌍의 간격만 따로 보정하는 일입니다. 행간(line-height)은 줄과 줄 사이의 간격으로, 셋은 전부 다른 속성입니다. 이 게임에서 훈련하는 것은 글자 사이 공간을 고르게 느끼는 눈 — 자간과 커닝 감각의 공통 기초입니다.

한글에서 유독 어색해 보이는 조합

한글은 ㅇ·ㅅ처럼 비어 보이는 자음과 ㅏ·ㅔ처럼 오른쪽이 열린 모음이 만나면, 같은 간격이어도 시각적으로 벌어져 보이는 일이 생깁니다. 받침이 있는 글자와 없는 글자가 이어질 때도 마찬가지입니다. 수치가 같다고 균형이 같지 않다는 것 — 그래서 마지막 판단은 눈이 합니다.

한글 커닝은 왜 어려운가 — 11,172자와 꼴 그룹

알파벳은 26자라 글자 쌍이 676개뿐이지만, 한글은 초성·중성·종성 조합으로 11,172자가 만들어져 모든 쌍에 커닝 값을 일일이 지정하는 것이 사실상 불가능합니다. 그래서 타이포그래퍼 안상수의 등록특허(KR10-1254729)는 글자의 바깥 꼴이 비슷한 한글끼리 묶은 꼴 그룹 사이에만 커닝 값을 지정하는 방식을 제시했습니다. 이 연습의 단계 구성도 같은 원리를 따릅니다 — 받침 없는 세로 모음 글자처럼 꼴이 비슷한 조합은 간격이 읽기 쉽고, 받침 유무가 섞이면(예: "있"과 "다") 같은 간격도 달라 보여 눈의 일이 많아집니다.

게임 감각을 실무로 가져가기

위의 변환기에서 고른 letter-spacing 값은 CSS에 그대로 붙여넣을 수 있습니다. 제목·본문 크기 체계까지 함께 잡으려면 한글 타입 스케일 생성기를, 여러 폰트의 인상을 비교하려면 타입 테스터를 이어서 쓰세요.