🖋️ 05. 타이포그래피의 과학: '가독성과 웹 폰트 마스터하기'

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 8분(전체) / 핵심 파트만: 4분

🗺️ 이 문서의 흐름
[가독성을 높이는 텍스트 속성] → [웹 폰트 성능 최적화] → [반응형 타이포그래피]

🎯 이 문서를 다 읽으면 할 수 있는 것

• 행간, 자간, 글자 굵기를 조절해 가독성 높은 인터페이스를 설계합니다.
• 웹 폰트 로딩으로 인한 '깜빡임(CLS)' 현상을 방지하는 대책을 세웁니다.
• clamp()를 활용해 기기 크기에 따라 유연하게 변하는 텍스트를 구현합니다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 🐣 영철 ( 신입 ): "영호 님! 신기한 폰트를 하나 넣었는데, 페이지가 처음 뜰 때 글씨가 아예 안 보이다가 1초 뒤에 팍 나타나요. 그리고 나타나면서 레이아웃이 덜컹거리고요. 제 폰트가 너무 무거운 걸까요? 🏋️‍♂️"
• 🦁 영호 ( 리드 ): "영철 님, 그 현상을 바로 FOIT와 FOUT라고 합니다. 폰트는 디자인이기도 하지만, 네트워크를 타고 흐르는 '데이터 리소스'라는 걸 잊지 마세요. 폰트를 어떻게 불러오고 어떻게 보여줄지 전략이 없으면 사용자는 글을 읽기도 전에 떠나버릴 겁니다."

🤔 왜 알아야 하는가

웹의 90% 이상은 텍스트입니다. 아무리 예쁜 디자인도 글자가 읽기 힘들거나 로딩이 늦어지면 실패한 UX입니다. 특히 최근 구글의 성능 지표인 Core Web Vitals에서 폰트 로딩으로 인한 레이아웃 이동(CLS)은 매우 중요한 감점 요인입니다.

신입인 영철이가 겪은 현상은 5년차 이상의 시니어라면 반드시 해결해야 할 숙제입니다. 폰트의 크기가 아니라 '경험' 자체를 디자인하는 법, 그리고 그 이면의 성능 최적화(Web Font Optimization)를 배우는 것이 이번 장의 핵심입니다.

📏 1. 가독성을 결정하는 1%의 디테일

단순히 font-size만 키우는 건 초보입니다. 시니어는 다음 세 가지를 조절합니다.

• line-height (행간): 글자 높이의 1.5~1.6배가 한국어 가독성에 가장 좋다고 알려져 있습니다. 단위 없이 숫자만 쓰는 것이 상속 시 유리합니다.
• letter-spacing (자간): 폰트가 클 때는 살짝 좁게, 작을 때는 살짝 넓게 조절해 가독성을 확보합니다.
• font-smoothing: macOS 등 특정 환경에서 글자를 더 매끄럽게 렌더링하게 해줍니다.

⚡ 2. 웹 폰트 로딩 전략 (FOIT vs FOUT)

폰트가 로딩될 때 발생하는 두 가지 짜증 나는 현상입니다.

1. FOIT (Flash of Invisible Text): 폰트 올 때까지 글자를 안 보여줌 (사용자 답답함 최고)
2. FOUT (Flash of Unstyled Text): 기본 폰트로 먼저 보여주다가 나중에 샥 바뀜 (레이아웃 흔들림 발생)

🦁 영호의 해결책: font-display:
"영철 님, @font-face 안에 font-display: swap;을 넣어보세요. 기본 폰트로 먼저 보여주다가 웹 폰트가 준비되면 자연스럽게 교체해줍니다. 사용자에게 '아무것도 안 보이는 1초'를 주지 않는 것이 핵심이에요."

📱 3. 반응형 타이포그래피와 clamp()

모바일에서 글자가 너무 크거나, 데스크톱에서 너무 작아 보인다면? media query를 도배하는 대신 현대적인 함수를 써봅시다.

/* 🐣 영철이의 스마트한 제목 */
h1 {
  /* 최소 1.5rem, 이상적으론 화면폭의 5%, 최대 3rem */
  font-size: clamp(1.5rem, 5vw, 3rem);
}

📝 마무리 퀴즈

Q1. line-height: 1.5;와 line-height: 1.5em;의 차이점은 무엇일까요? (힌트: 상속)

✅ 정답: 1.5(단위 없음)는 자식 요소가 자신의 font-size 기준으로 재계산하고, 1.5em은 부모의 계산된 고정값이 그대로 상속된다.

💡 상세 해설:

• 원리 설명: line-height: 1.5(단위 없음)는 배수로 상속됩니다. 자식이 font-size: 16px이면 16 × 1.5 = 24px로 자동 계산되죠. 반면 1.5em은 부모의 font-size × 1.5로 **고정값(예: 48px)**이 계산된 후 그 값 자체가 상속됩니다.
• 오답 피드백: "영철 님, 부모가 font-size: 32px; line-height: 1.5em이면 48px이 자식에게 그대로 갑니다. 자식의 글자가 16px이면 행간이 비정상적으로 넓어져요!"
• 📌 핵심 기억법: "단위 없는 숫자 = 비율 상속(유연), em = 계산된 값 상속(딱딱)"

Q2. 웹 폰트가 로딩되기 전까지 브라우저 기본 폰트를 보여주어 가독성을 확보하는 CSS 속성값은 무엇일까요?

1. font-display: fallback
2. font-display: swap
3. font-style: auto
4. font-weight: pre-load

✅ 정답: 2. font-display: swap

💡 상세 해설:

• 원리 설명: font-display: swap은 폰트가 로드되기 전 시스템 폰트를 먼저 보여주고, 로딩이 완료되면 자동으로 교체합니다. 사용자가 빈 화면(FOIT)을 보지 않아 UX가 좋아집니다.
• 오답 피드백: "영철 님, fallback은 짧은 시간만 기다리다 포기하고, swap은 끝까지 교체해줘요. 대부분의 서비스에서는 swap이 정답입니다!"
• 📌 핵심 기억법: "swap = 일단 보여주고 나중에 교체. 사용자를 기다리게 하지 마라!"

Q3. [영철이의 테스트 타임: 아키텍처 설계]
영숙 디자이너 님이 한 페이지에 5가지의 다른 유료 웹 폰트를 사용하겠다고 하십니다. 영호 리드 님이 "성능 때문에 절대 안 된다"며 반대하고 계시네요. 영철이가 중간에서 이 문제를 해결할 수 있는 기술적인 최신 대안은 무엇일까요?

✅ 정답: Variable Fonts (가변 폰트)를 사용합니다.

💡 상세 해설:

• 원리 설명: 가변 폰트는 하나의 폰트 파일 안에 굵기(Weight), 너비(Width), 기울기(Italic) 등 다양한 스타일 정보를 모두 담고 있습니다. 5개의 파일을 받을 필요 없이 단 하나의 파일로 디자이너의 요구를 모두 만족시킬 수 있죠.
• 오답 피드백: "영철 님, 파일을 여러 개 받는 건 네트워크 비용이 너무 커요. 신기술인 Variable Font로 영숙 님과 영호 님 모두를 만족시켜 보세요!"
• 📌 핵심 기억법: "파일 하나로 수만 가지 변화를! Variable Font가 미래다."

🐣 영철이의 퇴근 일기

오늘은 글자가 그냥 글자가 아니라는 걸 알게 됐다.
글자에도 무게감이 있고, 속도가 있고, 예의가(?) 있다는 걸 배웠다.
그동안 글자가 깜빡거리는 걸 보면서도 "인터넷이 느린가 보다" 하고 넘겼는데, 그게 다 내 무관심에서 비롯된 UX 파괴였다니... 반성하게 된다.

💡 "타이포그래피는 목소리다. 최적화된 폰트 로딩은 그 목소리를 가장 선명하고 빠르게 전달하는 방법이다."

집에 가면서 내 블로그에 들어가 보니 글자가 다 'swap' 없이 로딩되고 있었다. 충격!
당장 집에 가서 한 줄 코드로 다 고쳐놔야지. 오늘 밤은 폰트 파일 다이어트 좀 시켜야겠다.
영철이의 성장 속도도 clamp()처럼 유연하면서도 탄탄해지길 바라며, 오늘은 꿀잠 예약! 😴

🔗 더 알아보기

• MDN: @font-face 레퍼런스
• MDN: Variable Fonts 가이드