아이콘 폰트 101
아이콘 폰트에 대해 알아야 할 모든 것——그것이 무엇인지, 어떻게 작동하는지, 그리고 프로젝트에 맞는 형식을 선택하는 방법.
아이콘 폰트란?
아이콘 폰트는 글리프——보통 글자와 숫자——가 그림 기호로 대체된 서체입니다. 문자 "A"를 렌더링하는 대신, 아이콘 폰트는 홈 아이콘, 검색 돋보기, 또는 장바구니를 렌더링합니다.
아이콘이 폰트 파일 안에 존재하기 때문에 텍스트와 완전히 동일하게 작동합니다. font-size로 어떤 크기로도 확장하고, color로 색을 바꾸고, 텍스트 그림자를 추가하고, CSS 전환을 적용하고, 심지어 애니메이션을 줄 수 있습니다——이미지 파일 하나 건드리지 않고요.
이 접근법은 여러 실질적인 이점을 제공합니다:
- 해상도 독립성——벡터 아웃라인이 어떤 화면 밀도에서도 선명하게 확장됨
- 작은 페이로드——하나의 압축 폰트 파일이 수십 개의 개별 이미지 에셋을 대체
- CSS 제어——색상, 크기, 그림자, 불투명도, 호버 상태가 텍스트 스타일링으로 무료로 제공
- 단일 HTTP 요청——전체 아이콘 세트가 한 번의 네트워크 왕복으로 로드됨
간략한 역사
초기 웹에서 개발자들은 개별 이미지나 CSS 이미지 스프라이트——각 아이콘이 고정 직사각형 영역을 차지하는 대형 복합 이미지——에 의존했습니다. 스프라이트는 HTTP 요청을 줄였지만 취약했습니다: 아이콘을 추가하거나 크기를 변경하려면 전체 스프라이트 시트를 다시 생성하고 픽셀 오프셋을 수동으로 업데이트해야 했습니다.
2012년경 Font Awesome과 IcoMoon 같은 프로젝트가 더 깔끔한 대안을 대중화했습니다: Unicode의 사용자 정의 영역에 매핑된 폰트 글리프로 아이콘을 패키징하는 방법입니다. 디자이너는 하나의 @font-face 선언을 바꾸어 전체 아이콘 세트를 교체할 수 있었고, 개발자는 이미 텍스트에 사용하는 것과 동일한 CSS로 아이콘을 스타일링할 수 있었습니다. 이 기술은 빠르게 퍼졌고 단색 아이코노그래피를 사용하는 디자인 시스템에서 신뢰할 수 있는 저오버헤드 선택지로 남아있습니다.
아이콘 폰트 vs SVG 아이콘
"아이콘 폰트 vs 인라인 SVG" 논쟁은 10년 이상 프론트엔드 토론의 단골 주제였습니다. 두 접근법 모두 유효합니다——올바른 선택은 프로젝트의 요구사항에 달려있습니다.
아이콘 폰트
- 단일 HTTP 요청——하나의 폰트 파일로 모든 아이콘 제공
- 매우 간단한 CSS 스타일링——일반 텍스트처럼
color,font-size,text-shadow변경 - 단색만 지원——각 글리프는 단일 채우기 색만 지원
- 쉬운 도입——스타일시트 링크 추가, CSS 클래스 사용, 완료
인라인 SVG
- 다색——각 경로가 자체 채우기, 획, 또는 그라디언트를 가질 수 있음
- 기본 접근성——
<title>과aria-label이 스크린 리더에 실제 의미를 제공 - 개별 캐시 가능——사용되지 않는 아이콘은 절대 다운로드되지 않음
- 세밀한 제어——개별 경로 애니메이션, 요소별 필터 적용
SVG 스프라이트
- 여러 SVG를 단일
<symbol>스프라이트 시트로 결합 <use href="#icon-name">로 아이콘 참조- 양쪽의 장점 제공——단일 요청, 다색, 접근성——하지만 더 복잡한 빌드 파이프라인 필요
형식 비교
아이콘 폰트는 각각 다른 압축, 브라우저 지원, 사용 사례를 가진 5가지 파일 형식으로 패키징될 수 있습니다. 한눈에 비교하면:
| 형식 | 압축 | 파일 크기 | 브라우저 지원 | 최적 용도 |
|---|---|---|---|---|
| .woff2 | Brotli | 가장 작음 | 97%+ | 모던 웹 (권장) |
| .woff | zlib | 작음 | 98%+ | 광범위한 호환성 폴백 |
| .ttf | 없음 | 중간 | 98%+ | 데스크톱 앱, 개발 |
| .svg | 없음 | 가장 큼 | 제한적 | 레거시 iOS, 디버깅 |
| .eot | 선택적 | 중간 | IE만 | IE 6-8 레거시 지원 |
올바른 형식 선택
어떤 형식을 포함해야 할지 모르겠나요? 이 실용적인 결정 가이드를 사용하세요:
- 하나만 선택한다면——WOFF2를 배포하세요. 최고의 압축(Brotli)을 제공하고 97%+ 브라우저를 커버합니다.
- IE 11 지원이 필요한 경우——WOFF2 + WOFF를 배포하세요. WOFF가 Brotli 디코딩이 없는 나머지 브라우저를 커버합니다.
- IE 8 지원이 필요한 경우——WOFF2 + WOFF + EOT를 배포하세요. EOT는 Internet Explorer 6-8이 이해하는 유일한 형식입니다.
- 데스크톱 애플리케이션의 경우——TTF를 사용하세요. Windows, macOS, Linux에서 OS 레벨 폰트 렌더링의 기본 형식입니다.
- 폰트 문제 디버깅의 경우——SVG Font를 검사하세요. XML 구조가 사람이 읽을 수 있어 글리프 경로와 메타데이터를 쉽게 확인할 수 있습니다.
형식별로 자세히 알아보기
각 형식을 깊이 파고들어 내부 구조, 브라우저 호환성, 모범 사례를 이해하세요:
프로젝트에서 이러한 형식을 사용하는 방법을 알아보세요: