테마 · 플러그인 입문
한글 본문의 행간, 1.5로는 왜 부족한가
웹의 기본 행간은 라틴 알파벳을 기준으로 정해진 값입니다. 한글은 같은 크기에서 글자 안의 획이 더 촘촘하고 받침 때문에 실제 글자 높이도 커서, 같은 1.5가 훨씬 답답하게 읽힙니다.
Technote
한글 웹 타이포그래피
라틴 기준으로 만들어진 기본값이 한글에서 어긋나는 지점들. 행간 · 자간 · 줄바꿈 · 웹폰트 로딩을 한글 본문 기준으로 다시 세웁니다.
글 8편
테마 · 플러그인 입문
본문 16px이 기준선인 이유, 그리고 예외
16px은 누가 정한 유행이 아니라 브라우저와 사용자가 합의한 기본값입니다. 그 값을 기준으로 삼되, 한글 장문에서는 한 단계 올릴 이유가 분명히 있습니다.
테마 · 플러그인 실무
keep-all 이 한글에 주는 것, 다른 언어에서 빼앗는 것
한글 어절이 중간에서 잘리는 문제는 CSS 한 줄로 해결됩니다. 그런데 그 한 줄은 공백이 없는 일본어 · 중국어에서 "끊을 자리가 없다"는 뜻이 되어 가로 스크롤을 만듭니다.
성능 최적화 실무
웹폰트 자체 호스팅 — CDN을 쓰지 않을 때 얻는 것
공용 폰트 CDN의 가장 큰 장점이었던 "다른 사이트에서 이미 받아 둔 캐시"는 브라우저 캐시 분리 이후 사라졌습니다. 남은 것은 왕복 비용과 통제권의 문제입니다.
성능 최적화 실무
한글 서브셋 분할 — 11,172자를 다 내려받지 않는 법
한글 폰트가 무거운 이유는 분명합니다. 현대 한글 음절 조합만 11,172개이기 때문입니다. unicode-range로 나누면 브라우저가 그 페이지에 실제로 쓰인 조각만 가져갑니다.
성능 최적화 실무
font-display — 안 보이는 글자와 바뀌는 글자 사이
웹폰트가 도착하기 전의 몇백 밀리초를 어떻게 쓸지 정하는 속성입니다. 선택지는 다섯 개지만 실제 판단은 "빈 화면"과 "바뀌는 화면" 중 무엇을 받아들이느냐 하나입니다.
성능 최적화 심화
폴백 폰트 메트릭 보정으로 흔들림 없애기
웹폰트가 도착할 때 화면이 흔들리는 이유는 폰트가 늦어서가 아니라 폴백 폰트와 글자 폭·높이가 다르기 때문입니다. 그 둘을 맞춰 두면 교체가 일어나도 레이아웃이 그대로입니다.
테마 · 플러그인 심화
측정폭과 수직 리듬 — 끝까지 읽히는 본문 조판
한 줄에 몇 글자를 담을지와 요소 사이 간격을 어떻게 쌓을지가 장문 글의 완독률을 좌우합니다. 한글은 글자가 넓어 라틴 기준의 글자 수 관례를 그대로 쓸 수 없습니다.