Day 108 - 폰트 스택 만들기

Day 108 - 폰트 스택 만들기

EPUB2 365일 마스터 과정

Week 17: 글꼴 바꾸기 (Day 105-111)

Day 108: 폰트가 없으면? 대체 폰트 전략, 폰트 스택을 배워봅시다!

학습 목표

• 폰트 스택의 개념과 필요성 이해하기
• 폰트 스택 작성 순서 익히기
• 폴백(fallback) 전략 이해하기
• 다양한 상황에 맞는 폰트 스택 작성하기
• EPUB2 최적 폰트 스택 설계하기

핵심 개념

폰트 스택(Font Stack)이란?

폰트 스택은 font-family에서 여러 폰트를 순서대로 나열한 것입니다. 첫 번째 폰트가 없으면 두 번째, 두 번째도 없으면 세 번째... 순서로 적용됩니다.

font-family: '첫번째폰트', '두번째폰트', '세번째폰트', 제네릭폰트;

왜 폰트 스택이 필요할까?

• 사용자 기기에 특정 폰트가 설치되어 있지 않을 수 있음
• Windows, macOS, Linux 등 OS마다 기본 폰트가 다름
• 최악의 경우에도 적절한 폰트가 표시되도록 보장

폰트 스택 작동 원리

순차적 탐색

1

'Noto Sans KR' - 이 폰트가 있으면 사용!

없으면 ↓

2

'Malgun Gothic' - 이 폰트가 있으면 사용!

없으면 ↓

3

'Apple SD Gothic Neo' - 이 폰트가 있으면 사용!

없으면 ↓

sans-serif - 브라우저 기본 산세리프 폰트 사용

핵심! 폰트 스택은 "보험"과 같습니다. 첫 번째 폰트가 최선이고, 마지막 제네릭 폰트는 최후의 안전망입니다.

폰트 스택 작성 순서

권장 순서

순서	폰트 유형	설명	예시
1	이상적인 폰트	가장 사용하고 싶은 폰트	'KoPub Dotum'
2	Windows 대체	Windows 시스템 폰트	'Malgun Gothic'
3	macOS 대체	macOS 시스템 폰트	'Apple SD Gothic Neo'
4	범용 폰트	여러 시스템에 있는 폰트	'Noto Sans KR'
5	제네릭 폰트	최종 안전망	sans-serif

코드 예제

고딕체 폰트 스택 (본문용)

body { font-family: 'KoPub Dotum', /* 이상적: 전자책 최적화 */ 'Malgun Gothic', /* Windows 대체 */ 'Apple SD Gothic Neo', /* macOS 대체 */ 'Noto Sans KR', /* 범용 웹폰트 */ Dotum, /* 구형 Windows */ sans-serif; /* 최종 안전망 */ }

명조체 폰트 스택 (인용구용)

blockquote { font-family: 'KoPub Batang', /* 이상적: 전자책 최적화 */ Batang, /* Windows 명조 */ AppleMyungjo, /* macOS 명조 */ 'Noto Serif KR', /* 범용 웹폰트 */ Georgia, /* 영문 세리프 */ serif; /* 최종 안전망 */ }

코드 전용 폰트 스택

code, pre { font-family: 'D2Coding', /* 한글 코딩 폰트 */ 'Consolas', /* Windows 코드 폰트 */ 'Monaco', /* macOS 코드 폰트 */ 'Courier New', /* 범용 고정폭 */ monospace; /* 최종 안전망 */ }

비유로 이해하기

여행 준비물 리스트

폰트 스택은 여행 준비물 목록과 같습니다. "선글라스가 없으면 모자를 써야지, 모자도 없으면 손으로 해를 가리자"처럼 항상 대안을 준비해두는 것입니다!

메뉴판의 대체 메뉴

폰트 스택은 식당 메뉴판과 같습니다. "된장찌개가 품절이면 김치찌개로, 그것도 없으면 라면이라도..." 첫 번째 선택이 안 되면 다음 선택지가 있는 것이죠!

보험 플랜

폰트 스택은 보험입니다. 1순위 폰트는 완벽한 상황, 마지막 제네릭 폰트는 최악의 상황을 대비합니다. 어떤 상황에서도 텍스트가 보이도록 안전망을 만드는 것입니다!

상황별 폰트 스택 템플릿

EPUB2 본문용 (권장)

body { font-family: 'KoPub Dotum', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; }

제목/강조용

h1, h2, h3 { font-family: 'KoPub Dotum Medium', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; }

시/인용구용 (명조)

.poem, blockquote { font-family: 'KoPub Batang', Batang, AppleMyungjo, 'Noto Serif KR', serif; }

영문 중심 문서

.english-content { font-family: Georgia, 'Times New Roman', 'Noto Serif', serif; }

주의사항과 팁

주의사항

• 폰트를 너무 많이 나열하면 코드가 복잡해짐 (5-7개 권장)
• 제네릭 폰트(sans-serif, serif)는 반드시 마지막에 위치
• 공백이 있는 폰트명은 따옴표 필수
• 제네릭 폰트에는 따옴표 사용 금지

실무 팁

• 같은 유형의 폰트를 나열 (고딕끼리, 명조끼리)
• 비슷한 너비/두께의 폰트 선택으로 레이아웃 유지
• 영문 폰트와 한글 폰트를 적절히 조합
• 테스트: 첫 폰트를 비활성화하고 대체 폰트 확인

실습 과제

미션: 완전한 폰트 스택 작성하기

다음 요구사항에 맞는 폰트 스택을 작성해보세요:

1. 본문용 고딕 스택: 최소 5개 폰트 포함
2. 인용구용 명조 스택: 최소 4개 폰트 포함
3. 코드용 고정폭 스택: 최소 3개 폰트 포함

체크리스트:

Windows 폰트가 포함되었나요?

macOS 폰트가 포함되었나요?

마지막에 제네릭 폰트를 넣었나요?

쉼표로 폰트를 구분했나요?

공백 있는 폰트명에 따옴표를 사용했나요?

요약 정리

Day 108 핵심 정리

• 폰트 스택: 여러 폰트를 순서대로 나열한 목록
• 작동 원리: 첫 폰트부터 순차적으로 탐색, 있는 폰트 사용
• 순서: 이상적 폰트 → OS별 대체 → 범용 → 제네릭
• 제네릭 폰트: 마지막에 반드시 포함 (안전망)
• 구분자: 쉼표(,)로 폰트 구분
• 권장 개수: 5-7개가 적당

퀴즈

오늘의 퀴즈

Q1. 폰트 스택에서 첫 번째 폰트가 없을 때 어떤 일이 발생하나요?

정답: 두 번째 폰트를 찾아서 사용합니다 (순차적 탐색)

Q2. 폰트 스택 마지막에 반드시 넣어야 하는 것은?

정답: 제네릭 폰트 (sans-serif, serif 등)

Q3. 다음 폰트 스택에서 첫 번째로 시도되는 폰트는?
font-family: Arial, Helvetica, sans-serif;

정답: Arial

Q4. 폰트 스택에서 폰트를 구분하는 기호는?

정답: 쉼표(,)

Q5. 폰트 스택의 권장 폰트 개수는?

정답: 5-7개 정도가 적당

참고 자료

• CSS font-family 폴백 시스템
• 크로스 플랫폼 폰트 호환성 가이드
• 웹 안전 폰트 스택 모음
• EPUB2 폰트 스택 권장사항

다음 학습 예고

Day 109 - 안전한 폰트 선택

어떤 기기에서도 잘 보이는 웹 안전 폰트! 호환성 높은 폰트 선택법을 배워봅시다!