🔍 사이드베어링을 알아야 커닝이 이해된다

모든 글자는 투명한 상자에 담겨 있어.
글자 모양 왼쪽의 여백을 LSB(Left Side Bearing), 오른쪽 여백을 RSB(Right Side Bearing)라고 불러.

그래서 두 글자를 나란히 놓으면 실제 보이는 틈은
앞 글자의 RSB + 뒷 글자의 LSB 이렇게 합산돼.

문제는 여기서 터져.
H처럼 수직 기둥으로 끝나는 글자는 여백이 딱 떨어지는데,
A나 V처럼 사선으로 끝나는 글자는 위아래 중 한쪽이 뻥 뚫려 있거든.

그래서 AV는 물리적 거리가 같아도 눈에는 훨씬 넓어 보여.
이 착시를 손으로 메꾸는 작업, 그게 커닝이야.

💡 em이 뭔데?

em은 원래 활자 시대에 대문자 M의 폭에서 유래했다는 설이 유명한데,
현대 디지털 타이포그래피에서 em은 폰트의 지정 크기 그 자체를 뜻해.

즉 24pt 폰트면 1em = 24pt.
그래서 letter-spacing: -0.02em은 폰트가 커지든 작아지든 비율이 유지돼.

반면 letter-spacing: -1px로 박아두면?
12px 본문에선 너무 좁고, 80px 헤드라인에선 아무 효과도 없어.
이게 초보와 실무자를 가르는 아주 현실적인 지점이야.

🧪 자가진단 테스트

폰트 커닝 품질을 30초 만에 확인하는 방법이 있어. 이 문자열을 타이핑해봐.

AV  AW  AT  Ay  Av
LT  LY  LV  L'
To  Ta  Te  Tu
Fa  Fo  Yo  Ya
P.  F.  V,  W,
7.  1'  ((A))

이 중 하나라도 구멍이 뚫린 듯 보이면 그 폰트는 커닝이 약한 거야.
특히 L'와 P.는 거의 모든 폰트의 약점 구간이야.

1단계: HH — 수직 기둥 두 개가 마주 봄. 시각적 빈 공간이 꽉 차 보여서 물리적으로 가장 넓게 둬야 함.

2단계: HO — 한쪽이 곡선. 곡선은 양 끝이 안쪽으로 말려서 공간을 양보함. 중간 정도.

3단계: OO — 둘 다 곡선. 서로 공간을 양보하니 물리적으로 가장 좁게 붙여야 시각적으로 같아 보임.

규칙으로 표현하면:
OO 간격 ≈ HH 간격 × 0.6~0.75 정도가 일반적인 출발점이야.

📏 광학 크기 원칙(Optical Sizing)

글자가 커질수록 트래킹은 좁아져야 하고,
글자가 작아질수록 트래킹은 넓어져야 한다.

왜냐고? 글자가 크면 글자 사이 여백도 비례해서 같이 커지거든.
그런데 우리 눈은 그 여백을 실제보다 더 크게 인식해. 그래서 큰 글씨는 조여줘야 단단해 보여.

반대로 작은 글씨는 획이 서로 붙어서 뭉개지니까 벌려줘야 읽혀.

STEP 1. 서체 선정과 첫 타이핑

먼저 커닝 테이블이 잘 짜인 서체를 골라. 커닝 페어가 500쌍 이상인 폰트가 안전해.
타이핑하고 트래킹은 일단 0으로 두고 시작.

STEP 2. 전체 트래킹으로 톤 잡기

로고 성격에 따라 먼저 큰 방향을 정해.
테크·스포츠 → 조이기(-0.02 ~ -0.04)
럭셔리·뷰티 → 벌리기(+0.15 ~ +0.3)
프렌들리·리테일 → 거의 0 근처

STEP 3. 윤곽선 변환(Create Outlines)

이게 로고 작업의 분기점이야.
텍스트를 패스로 변환하면 폰트가 없는 환경에서도 깨지지 않고, 개별 글자를 자유롭게 움직일 수 있어.

단, 되돌릴 수 없으니 변환 전 원본 레이어를 반드시 복제해서 숨겨둬. 클라이언트가 "이름 철자 바꿔주세요" 하면 진짜 눈앞이 캄캄해져.

STEP 4. 가장 넓은 쌍을 기준점으로 삼기

여기가 핵심 노하우야.
커닝은 좁힐 수는 있어도 무한정 벌릴 수는 없어. 글자가 겹치면 끝이니까.

그래서 이미 가장 넓게 벌어진 쌍(보통 직선+직선, 예: L과 Y 사이가 아니라 E와 L 같은 조합)을 기준선으로 정하고,
나머지를 그 기준에 맞춰 좁혀 나가는 방식으로 작업해.

STEP 5. 세 글자 단위로 슬라이딩

전체를 한 번에 보면 판단이 안 돼.
WAV → AVE → VEL → ELY 이런 식으로 3글자 창을 옮겨가며 봐.

세 글자를 보면 가운데 글자가 좌우 중 어디에 치우쳤는지가 즉시 보여.
이게 프로들이 쓰는 "세 글자 법칙"이야.

STEP 6. 블러 테스트 & 반전 테스트

완성했다 싶으면 세 가지 검증을 돌려.

① 블러: 가우시안 블러를 걸어 회색 덩어리로 만들었을 때 밝기가 균일한가?
② 상하반전: 위아래로 뒤집어서 글자로 안 읽히게 만들고 여백만 보기
③ 축소: 로고를 16px 파비콘 크기로 줄여서 뭉개지는 구간 확인

STEP 7. 다음날 다시 보기

농담 아니고 진짜 중요해.
한 시간 넘게 같은 글자만 보면 눈이 적응해버려서 판단력이 바닥나.
하루 자고 일어나서 보면 어제 못 봤던 구멍이 바로 보여. 이건 거의 마법 수준이야.

STEP 8. 최종 좌표 기록

패스로 변환했더라도 각 글자의 X 좌표와 원본 서체·트래킹 값을 문서로 남겨.
브랜드 가이드라인에 들어가야 하고, 나중에 국문 버전이나 약어 버전 만들 때 기준이 돼.

워드마크는 브랜드 이름 전체를 쓰는 형태야. 글자 수가 많으니 리듬이 중요해.
글자마다 간격이 미세하게 튀면 문자열 전체가 울렁거려 보여.

레터마크는 2~4글자 약어야. 글자가 적으니 하나하나가 기념비급으로 보여.
여기선 0.5pt 차이도 치명적이라 아예 패스 단위로 손으로 조각해야 해.

글자 수가 적을수록 커닝 난이도는 역설적으로 올라가. 숨을 곳이 없거든.

한글은 모아쓰기 문자라 라틴 문자랑 게임이 완전히 달라.

• 한글 글립은 대부분 정사각형 프레임에 들어가 있어서 기본이 등폭에 가까워
• 그런데 실제 글자 모양의 밀도는 천차만별이야. 일은 세로로 길고 뻘은 꽉 차 있지
• 특히 받침이 없는 글자(가, 이)와 있는 글자(강, 일)는 아래쪽 무게가 완전히 달라

그래서 한글 로고에선 좌우 간격뿐 아니라 세로 정렬과 광학 중심까지 같이 봐야 해.

또 하나. 한글은 라틴보다 글자당 정보 밀도가 높아서
라틴 기준 트래킹을 그대로 적용하면 답답해 보이는 경우가 많아.
한글 로고는 라틴보다 살짝 여유를 주는 게 안전한 편이야.

한중일 폰트에는 palt(비례 대체 폭), vpal 같은 OpenType 기능이 있어서
전각 여백을 자동으로 줄여주기도 해. 인디자인에서 "프로포셔널 메트릭"을 켜면 이게 작동해.

이건 사람들이 자주 놓치는 부분인데, 심볼과 글자 사이의 거리도 커닝의 연장선이야.

업계에서 널리 쓰는 방법은 x-height 기준이야.
심볼과 워드마크 사이 여백 = 워드마크 x-height의 1배 또는 0.75배, 이런 식으로 정하는 거지.

이렇게 정하면 로고를 확대·축소해도 비율이 자동으로 유지돼서
브랜드 가이드라인에 쓰기도 딱 좋아.

클리어 스페이스(여백 보호 영역)도 보통 같은 논리로 잡아.
대문자 높이의 0.5배, 심볼 높이의 1/4 같은 상대 단위로.

📱 가변 폰트(Variable Font)와 광학 크기

요즘 폰트에는 opsz(optical size)라는 가변 축이 들어있는 경우가 있어.
이게 켜져 있으면 크기에 따라 획 굵기와 사이드베어링이 자동으로 조정돼.

CSS에서는 font-optical-sizing: auto로 제어할 수 있어.
본문 시스템에 쓰면 정말 유용한데, 로고는 결국 고정 아웃라인이 안전해.

눈을 훈련하는 5가지 방법

1. 커닝 게임 반복 — 온라인에 커닝 훈련 게임들이 있어. 글자를 드래그해서 정답 위치와의 오차를 점수로 알려주는 방식. 하루 10분씩 2주면 눈이 확실히 바뀐다.

2. 유명 로고 모사 — 잘 만든 로고를 벡터로 트레이싱해봐. 왜 저 위치인지 손으로 알게 돼.

3. 역커닝 찾기 — 거리 간판, 메뉴판 사진 찍어서 어긋난 곳 표시하기. 일상이 교재가 돼.

4. 흑백 덩어리 스케치 — 글자를 지우고 여백만 검게 칠해보기. 면적 감각이 생겨.

5. 축소 테스트 습관화 — 작업 중 계속 16px, 32px로 줄여보기.

알아두면 좋은 개념 도구

• 커닝 페어 우선순위: 모든 조합을 다 잡을 순 없어. 브랜드 이름에 실제로 들어간 쌍만 잡으면 돼. 6글자 이름이면 커닝 지점은 5개뿐이야.

• 대칭 검증: WAVELY의 W와 Y처럼 비슷한 사선 구조는 서로 같은 값을 적용하면 리듬이 맞아.

• 중심선 체크: 워드마크 전체의 광학 중심이 실제 기하 중심과 다를 수 있어. 심볼과 합칠 때 이게 어긋나면 로고가 기울어 보여.

로고 납품 전 확인 항목

☐ 트래킹을 먼저 잡고 커닝을 나중에 했는가

☐ 3글자 슬라이딩으로 전 구간을 검토했는가

☐ 블러 테스트에서 밝기가 균일한가

☐ 상하 반전 상태에서도 리듬이 살아있는가

☐ 16px, 32px 축소에서 글자가 붙지 않는가

☐ 대형 출력(3m 간판 가정)에서 벌어져 보이지 않는가

☐ 아웃라인 변환 전 원본 텍스트 레이어를 보관했는가

☐ 심볼-워드마크 간격을 상대 단위로 정의했는가

☐ 클리어 스페이스를 가이드라인에 명시했는가

☐ 다크모드 버전을 별도 검토했는가

☐ SVG 파일에 title/aria-label 접근성 정보를 넣었는가

☐ 하루 지난 뒤 다시 보고 최종 확정했는가

🔑 오늘의 요약 6줄

1. 커닝은 글자 쌍, 트래킹은 전체. 순서는 트래킹 → 커닝.

2. 단위는 1/1000 em. CSS는 px 말고 em으로.

3. 커닝은 거리가 아니라 여백의 면적을 맞추는 일.

4. 큰 글씨는 조이고, 작은 글씨는 벌린다. 대문자는 벌리고 소문자는 건드리지 않는다.

5. 검증은 블러 · 반전 · 축소 3종 세트.

6. 로고는 반드시 아웃라인 벡터로 납품하고 가이드라인에 간격을 명시한다.