웹 폰트 이해하기｜폰트 확장자·브라우저·최적화 한 번에 정리

웹디자인이나 퍼블리싱을 처음 배우다 보면 “내 컴퓨터에서는 잘 보이는데 다른 사람 컴퓨터에서는 왜 다르게 보일까?”라는 의문이 생긴다. 이 차이는 브라우저에서 폰트가 출력되는 구조를 이해하면 자연스럽게 해결된다.

이 글에서는 디자이너·퍼블리셔 관점에서 폰트가 브라우저에 출력되는 전체 흐름, 기본 폰트와 웹 폰트의 차이, 그리고 실제 서비스에서 중요한 웹 폰트 최적화 이유와 방법까지 정리해 본다.

---

브라우저에서 폰트가 출력되는 기본 구조

1. 디자인 단계

디자이너가 디자인한 화면에는 특정 폰트가 사용된다. 이때의 폰트는 아직 ‘디자인 결과물’ 일뿐, 웹에서 바로 사용 가능한 상태는 아니다.

2. 퍼블리싱 단계 (CSS 적용)

퍼블리셔는 디자이너가 사용한 폰트를 기준으로 CSS 코드를 작성한다. 이 CSS 파일은 서버에 업로드되며, 서버는 일종의 외장하드라고 이해하면 쉽다. 중요한 점은 이 서버가 **접속 가능한 주소(URL)**를 가지고 있어야 한다는 것이다.

3. 브라우저 접속과 파일 다운로드

사용자가 브라우저에 사이트 주소를 입력하면 서버에 접속하게 된다. 이때 HTML과 CSS 파일이 사용자의 컴퓨터로 다운로드된다. 다운로드가 완료되면 브라우저는 CSS를 해석하면서 이렇게 묻는다.

“이 사이트에서 지정한 폰트가 내 컴퓨터에 있나요?”

4. 폰트 존재 여부에 따른 출력

• 해당 폰트가 컴퓨터에 이미 설치되어 있다면 → 그 폰트로 정상 출력
• 설치되어 있지 않다면 → 브라우저는 대체 폰트를 사용하거나, 경우에 따라 의도한 디자인이 깨진다

즉, 접속하는 유저의 웹 환경마다 출력되는 글꼴 모양이 달라질 수밖에 없다는 의미다.

---

모든 유저에게 동일한 폰트를 보여줄 수는 없을까?

기본 폰트(System Font) 사용

가장 안전한 방법은 운영체제 설치 시 기본으로 제공되는 폰트를 사용하는 것이다.

• macOS: 애플 SD 고딕 네오
• Windows: 돋움, 맑은 고딕

특히 맑은 고딕은 픽셀에 최적화되어 있어 웹 환경에서 가독성이 좋기 때문에 웹디자인에서 자주 사용된다. 다만, 디자인적인 한계가 있다는 단점이 있다.

---

기본 폰트 말고 원하는 폰트를 쓰고 싶다면?

웹 폰트(Web Font)란?

웹 폰트는 위에서 설명한 과정 중 3번 단계에서 동작한다. HTML과 CSS가 다운로드될 때, 우리가 지정한 폰트 파일 자체도 함께 다운로드되는 방식이다.

이렇게 하면 사용자의 컴퓨터에 해당 폰트가 설치되어 있지 않아도 동일한 글꼴로 화면을 보여줄 수 있다.

---

웹 폰트를 이해하기 위해 알아야 할 브라우저

주요 브라우저 종류

현재 웹에서 사용되는 대표적인 5대 브라우저는 다음과 같다.

• Chrome (Google)
• Internet Explorer (Microsoft)
• Safari (Apple)
• Firefox (Mozilla)
• Opera (Opera Software)

이 중에서 특히 주의해야 할 브라우저는 **인터넷 익스플로러(IE)**다. IE를 제외한 나머지 브라우저는 대부분의 폰트 확장자를 폭넓게 지원한다.

현재 통계 기준으로 IE 6~10 버전은 거의 사용되지 않기 때문에, 실무에서는 최신 IE 환경을 기준으로 판단한다.

---

폰트 확장자 이해하기

일반 폰트 확장자

• ttf (TrueType Font): 윈도우·일반 문서용
• otf (OpenType Font): 맥·그래픽용

과거에는 OS와 출력 품질 차이가 있었지만, 현재는 거의 차이가 없다. 다만 ttf에는 힌팅(hinting) 기술이 포함되어 있어 작은 사이즈에서도 가독성이 좋기 때문에 웹에서는 ttf 사용을 권장한다.

힌팅 기술이란, 폰트가 작아졌을 때 획이 뭉개지는 현상을 방지하기 위해 픽셀 단위로 획을 조정해 주는 기술이다.

웹 폰트 확장자

• woff
• woff2
• svg
• eot

이 중 woff와 woff2는 ttf·otf 구조를 기반으로 한 압축 버전이다. 용량이 작아 다운로드 속도가 빠르기 때문에 웹 환경에 가장 적합하다.

👉 사용 권장 순서 woff > ttf > otf

---

웹 폰트 최적화가 중요한 이유

웹 폰트는 서버에서 사용자에게 다운로드되는 파일이다. 파일 용량이 클수록 다운로드 시간이 길어지고, 그동안 브라우저에는 텍스트가 보이지 않는 현상이 발생한다.

이 때문에 실제 서비스에서는 웹 폰트 최적화가 매우 중요하다.

---

웹 폰트 최적화 방법

1. 2350자 조합 폰트 사용

한글은 초성 19자, 중성 21자, 종성 28자를 조합해 총 11,172자의 글꼴 조합이 만들어진다. 이 모든 조합을 포함하면 폰트 용량이 커질 수밖에 없다.

그래서 실무에서는 사용 빈도가 낮은 조합을 제거한 2350자 조합 폰트를 사용해 용량을 줄인다.

단, 이 범위를 벗어난 글자는 빈 박스로 출력될 수 있으므로 사용 목적을 명확히 해야 한다.

※ 참고로 영어는 94자 조합만 사용하기 때문에 폰트 용량이 훨씬 가볍다.

2. 폰트 두께(weight) 최소화

글꼴의 두께마다 별도의 폰트 파일이 존재한다.

• Black
• Bold
• Medium
• Regular
• Light
• Thin

필요하지 않은 두께까지 모두 사용하면 웹 폰트 용량이 급격히 증가한다. 디자인 단계에서 꼭 필요한 두께만 선택하는 것이 좋다.

---

구글 폰트와 폰트 혼합 사용 팁

구글 폰트 플랫폼에서는 무료 웹 폰트를 제공하고 있어 실무에서 많이 활용된다.

또한 하나의 문장 안에서 영문과 한글을 서로 다른 폰트로 출력할 수도 있다.

• 한글 폰트에는 영문이 포함되어 있음
• 영문 폰트에는 한글이 포함되어 있지 않음

따라서 CSS에서 영문 폰트를 1순위로 배치하면,

• 영어·숫자·특수문자 → 영문 폰트
• 한글 → 뒤에 지정한 한글 폰트

이렇게 언어별로 다른 폰트를 자연스럽게 적용할 수 있다.

---

정리하며

폰트는 단순히 ‘디자인 요소’가 아니라, 브라우저·성능·사용자 경험과 직결되는 중요한 요소다. 폰트가 어떻게 출력되는지 이해하고 웹 폰트를 올바르게 최적화한다면, 디자인 완성도와 사이트 성능을 동시에 잡을 수 있다.