🌱 기초 프론트엔드
웹 폰트가 뭔가요?
쉽게 이해하기
친구 집에 놀러 갔는데 특정 보드게임이 없으면 못 하잖아요? 웹 폰트는 내가 게임을 들고 가는 거예요. 친구 컴퓨터에 폰트가 없어도 내 웹사이트가 폰트 파일을 가져와서 보여줄 수 있어요.
핵심 정리
웹사이트에서 사용자 컴퓨터에 없는 폰트를 불러와 쓸 수 있게 하는 기술이에요.
자세히 알아보기
웹 폰트는 사용자의 컴퓨터에 설치되지 않은 폰트를 웹사이트에서 직접 불러와 사용하는 기술이에요. 예전에는 사용자 시스템에 있는 폰트만 쓸 수 있어서 Arial, Times New Roman 같은 흔한 폰트에 제한됐어요. 하지만 웹 폰트 덕분에 브랜드에 맞는 독특한 글꼴을 어디서든 똑같이 보여줄 수 있게 됐어요.
실무에서는 Google Fonts 같은 무료 서비스를 많이 써요. 링크 태그 하나만 HTML에 넣고 CSS에서 `font-family`로 지정하면 끝이에요. 예를 들어 'Noto Sans KR'을 쓰고 싶으면 Google Fonts에서 링크를 복사해 `<head>`에 넣고, CSS에서 `font-family: 'Noto Sans KR', sans-serif;`라고 쓰면 돼요.
하지만 웹 폰트는 파일을 다운로드해야 하니까 로딩 속도에 영향을 줘요. 그래서 필요한 굵기(weight)와 스타일만 선택하고, WOFF2 같은 압축된 형식을 쓰고, `font-display: swap`으로 폰트 로딩 전에도 텍스트가 보이게 해요. 일부 사이트는 중요한 텍스트만 웹 폰트를 쓰고 나머지는 시스템 폰트를 써서 성능을 최적화해요.
한글 폰트는 용량이 커서 더 신경 써야 해요. 수천 개의 글자가 포함되니까요. 그래서 서브셋(subset) 폰트로 자주 쓰는 글자만 포함한 버전을 만들거나, 동적으로 필요한 글자만 불러오는 기술도 써요. 웹 폰트를 잘 쓰면 디자인이 훨씬 풍부해지지만, 성능과의 균형을 잘 맞춰야 해요.