세종 웹폰트 — 시 전용 서체를 홈페이지에 쓸 때 WOFF2 · font-display 순서
세종 웹폰트를 홈페이지에 올릴 때 먼저 볼 것은 디자인보다 파일입니다. 시가 배포하는 글꽃체는 TTF · OTF로, 시문화관광재단의 자으미모으미체는 WOFF · WOFF2까지 받을 수 있습니다. 한글 서체는 글자 수가 많아 파일이 무겁기 때문에, WOFF2를 쓰고 font-display로 글자가 숨는 시간을 정하고 꼭 필요한 굵기만 불러오는 순서를 지키면 첫 화면이 덜 느려집니다. 무료 서체의 이용 범위 읽는 법은 따로 정리한 글로 넘기고, 여기서는 속도만 다룹니다.
- 시 누리집의 글꽃체는 한글 11,172자를 지원하고 TTF · OTF 파일로 배포됩니다. 자으미모으미체는 컬러 · 볼드 두 가지를 TTF · OTF · WOFF · WOFF2로 받을 수 있습니다.
- web.dev는 WOFF2가 WOFF보다 약 30% 더 잘 압축되며, 지금은 WOFF2만 쓰자는 의견이 많다고 설명합니다.
- font-display 기본값(block)에서는 크롬 · 파이어폭스가 최대 3초 동안 글자를 숨깁니다. 본문은 optional, 제목 · 로고는 swap처럼 나눠 쓸 수 있습니다.
- 두 서체 모두 변형해 재배포하는 행위를 금지합니다. 글자를 줄이는 서브셋이나 형식 변환을 하기 전에 배포처 지침을 확인합니다.
1시에서 배포하는 서체는 어떤 파일로 받나요?
두 서체 모두 공공저작물로 무료 이용이 가능하고, 홈페이지에 쓸 때 출처 표시를 요청합니다(예: '이 게시글은 ○○체를 사용하여 작성되었습니다'). 웹에 올릴 때 차이가 나는 곳은 받을 수 있는 파일 형식입니다.
| 항목 | 글꽃체 | 자으미모으미체 |
|---|---|---|
| 배포처 | 세종특별자치시 누리집(세종의 상징) | 세종시문화관광재단 한글문화도시 누리집 |
| 받을 수 있는 형식 | TTF · OTF | TTF · OTF · WOFF · WOFF2 |
| 종류 | 한 가지 | 컬러 폰트 · 볼드 폰트 |
| 지원 글자 | 한글 11,172자, 영문 94자, 특수문자 986자, 시 상징 21자 | 누리집 슬라이드 안내 · 사용 지침 PDF 참고 |
| 금지 사항 | 유료 양도 · 판매, 변형 재배포 | 유료 양도 · 판매, 변형 재배포 |
2한글 웹폰트는 왜 유독 무겁나요?
글자 수 때문입니다. web.dev 폰트 권장사항은 라틴 문자 서체가 보통 100~1,000자 정도인 데 비해 한중일(CJK) 서체는 10,000자를 넘을 수 있다고 설명합니다. 한글 완성형 11,172자를 다 담으면 영문 서체 여러 개를 합친 것보다 커지기 쉽습니다. 그래서 같은 문서는 쓰지 않는 글자를 덜어 내는 서브셋과, 페이지에 해당 글자가 있을 때만 파일을 받게 하는 unicode-range를 권합니다. 다만 앞서 본 것처럼 서브셋은 이용 조건을 먼저 확인한 뒤에 합니다.
3font-display 값은 무엇을 골라야 하나요?
웹폰트가 도착하기 전 글자를 어떻게 보여 줄지 정하는 값입니다. web.dev 문서 내용을 가게 홈페이지 기준으로 옮기면 아래와 같습니다.
| 값 | 도착 전 화면 | 어울리는 곳 |
|---|---|---|
| block(기본값) | 글자를 숨김 — 크롬 · 파이어폭스 최대 3초, 사파리는 무기한 | 되도록 피함 |
| swap | 기본 글꼴로 바로 보여 주고, 도착하면 바꿈(글자 크기가 달라 화면이 밀릴 수 있음) | 로고 · 큰 제목처럼 꼭 그 서체여야 하는 곳 |
| fallback | 아주 짧게 숨긴 뒤 기본 글꼴로 보여 줌 | 빠른 망이 많은 경우 |
| optional | 약 100ms 안에 오면 쓰고, 아니면 기본 글꼴 유지(다음 방문부터 캐시로 사용) | 본문 · 메뉴 설명 같은 긴 글 |
4적용 순서는 어떻게 잡나요?
- 필요한 굵기만 고릅니다. 제목용 하나, 본문은 system-ui 같은 기기 기본 글꼴로 두면 내려받을 파일이 줄어듭니다.
- 파일은 WOFF2 하나로 준비합니다. 아주 오래된 브라우저를 꼭 지원해야 할 때만 다른 형식을 더합니다.
- @font-face 선언을 외부 CSS가 아니라 head 안 style 태그에 넣어 브라우저가 서체를 일찍 찾게 합니다. 서체 파일 자체를 base64로 넣지는 않습니다.
- 첫 화면 제목에 쓰는 서체 한 개만 preload 합니다. 서체는 CORS 자원이라 자체 서버에 두어도 crossorigin 속성을 붙입니다. 여러 개를 preload 하면 다른 중요한 파일을 늦출 수 있습니다.
- 제목은 swap, 본문은 optional처럼 font-display를 나눠 적습니다.
5Google Fonts 같은 외부 서비스를 쓰면 다른가요?
주소에 붙는 옵션이 달라집니다. Google Fonts 문서는 기본값(auto) 대신 display=swap처럼 다른 값을 주는 것이 대개 적절하다고 하고, text= 옵션으로 실제 쓰는 글자만 요청하면 경우에 따라 파일이 최대 90%까지 줄어든다고 설명합니다. 외부 서비스를 쓸 때는 서체 서버에 미리 연결하는 preconnect도 head에 둡니다.
자체 서버에 올리는 것과 외부 서비스 중 무엇이 빠른지는 web.dev도 '분명하지 않다'고 봅니다. 자체 서버라면 CDN · HTTP/2를 갖춰야 이점이 생기므로, 두 방식을 같은 페이지로 재 보고 고릅니다.
6세종 가게 홈페이지라면 무엇부터 재 볼까요?
시 서체를 제목에 쓰고 있다면 첫 화면 한 페이지만 PageSpeed Insights로 재 보고, 서체 파일이 큰 항목으로 잡히는지 확인합니다. 결과 화면 읽는 법은 홈페이지 속도 글에 정리했습니다. 출처 표시 문구는 하단 정보 영역에 한 줄로 넣으면 됩니다.
큰길브리지는 서체 적용과 속도 점검을 전국 비대면으로 진행합니다. 지금 상태가 궁금하면 무료 SEO 점검부터 받아 보시고, 새로 만들 계획이면 제작 문의를 남겨 주세요.
자주 묻는 질문
시 서체를 TTF 그대로 홈페이지에 올려도 되나요?
작동은 하지만 web.dev는 압축률이 가장 좋은 WOFF2를 주 형식으로 쓰라고 권합니다. 글꽃체처럼 WOFF2가 따로 없는 서체는 변환이 '변형'에 해당하는지 배포처에 먼저 확인합니다.
font-display: swap만 넣으면 끝인가요?
글자가 숨는 문제는 줄지만, 서체가 바뀌는 순간 화면이 밀릴 수 있습니다. web.dev는 본문에는 optional, 기본 글꼴에는 size-adjust를 함께 쓰는 방법을 소개합니다.
모든 웹폰트에 preload를 걸면 더 빨라지나요?
아닙니다. web.dev는 preload를 아껴 쓰라고 합니다. 다른 중요한 자원의 대역폭을 빼앗고, 페이지에 필요 없는 서체까지 받게 할 수 있습니다.
