Day 107 - 한글 폰트 이름

Day 107 - 한글 폰트 이름

EPUB2 365일 마스터 과정

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

Day 107: 한글 폰트의 비밀! 영문명과 한글명, 어떤 걸 써야 할까요?

학습 목표

• 한글 폰트의 이름 체계 이해하기
• 영문명과 한글명의 차이 알아보기
• 호환성 높은 폰트 이름 지정법 익히기
• 플랫폼별 기본 한글 폰트 파악하기
• EPUB2에서 한글 폰트 활용법 이해하기

핵심 개념

한글 폰트의 두 가지 이름

한글 폰트는 대부분 한글명과 영문명 두 가지 이름을 가지고 있습니다. CSS에서는 둘 다 사용할 수 있지만, 호환성에 차이가 있습니다.

한글명	영문명	유형
맑은 고딕	Malgun Gothic	고딕 (Sans-serif)
바탕	Batang	명조 (Serif)
돋움	Dotum	고딕 (Sans-serif)
굴림	Gulim	고딕 (Sans-serif)
궁서	Gungsuh	필기체 (Script)

권장! CSS에서는 영문명을 사용하는 것이 호환성이 더 좋습니다. 일부 브라우저나 시스템에서 한글명을 제대로 인식하지 못할 수 있습니다.

플랫폼별 기본 한글 폰트

Windows 기본 폰트 Windows

한글명	영문명	특징
맑은 고딕	Malgun Gothic	Windows Vista 이후 기본 고딕
바탕	Batang	전통적인 명조체
돋움	Dotum	부드러운 고딕체
굴림	Gulim	오래된 시스템 기본 고딕

macOS/iOS 기본 폰트 macOS

폰트명	영문명	특징
Apple SD Gothic Neo	Apple SD Gothic Neo	macOS/iOS 기본 고딕
애플명조	AppleMyungjo	macOS 기본 명조
나눔고딕	NanumGothic	널리 사용되는 무료 폰트

범용 폰트 Cross-platform

폰트명	특징	지원
Noto Sans KR	Google 무료 폰트	웹폰트로 널리 사용
Noto Serif KR	Google 무료 명조	웹폰트로 널리 사용
본고딕 (Source Han Sans)	Adobe 무료 고딕	다국어 지원

코드 예제

한글명 vs 영문명 사용

/* 한글명 사용 (호환성 낮음) */ body { font-family: '맑은 고딕'; } /* 영문명 사용 (호환성 높음) - 권장! */ body { font-family: 'Malgun Gothic'; } /* 둘 다 사용 (가장 안전) */ body { font-family: 'Malgun Gothic', '맑은 고딕'; }

올바른 폰트 스택 예시

/* Windows + macOS 모두 지원하는 고딕 스택 */ body { font-family: 'Malgun Gothic', /* Windows */ 'Apple SD Gothic Neo', /* macOS */ 'Noto Sans KR', /* 웹폰트 */ sans-serif; /* 최종 대체 */ } /* 명조(세리프) 스택 */ .serif-text { font-family: Batang, /* Windows */ AppleMyungjo, /* macOS */ 'Noto Serif KR', /* 웹폰트 */ serif; /* 최종 대체 */ }

주의! 단어 사이에 공백이 있는 폰트명은 반드시 따옴표로 감싸세요!

• 'Malgun Gothic' - 올바름
• Malgun Gothic - 오류!
• Batang - 공백 없으면 따옴표 생략 가능

비유로 이해하기

여권 이름

한글 폰트의 두 이름은 여권의 이름과 같습니다. 국내에서는 한글 이름으로 통하지만, 해외에서는 영문 이름이 필요하죠. CSS에서는 영문명이 "국제 표준"처럼 더 널리 통합니다!

별명과 본명

폰트의 한글명은 별명, 영문명은 본명이라고 생각하세요. 친한 친구는 별명으로 불러도 알아듣지만, 공식 문서에는 본명을 써야 확실하게 인식됩니다!

전화번호부

컴퓨터의 폰트 시스템은 전화번호부와 같습니다. "맑은 고딕"으로 찾아도 되고 "Malgun Gothic"으로 찾아도 되지만, 어떤 전화번호부는 영문만 검색되는 경우가 있어요!

EPUB2에서 한글 폰트

EPUB2 한글 폰트 권장 설정

/* EPUB2 고딕(본문) 권장 */ body { font-family: 'KoPub Dotum', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', Dotum, sans-serif; } /* EPUB2 명조(인용구, 시) 권장 */ blockquote { font-family: 'KoPub Batang', Batang, AppleMyungjo, 'Noto Serif KR', serif; }

EPUB2 핵심!

• KoPub 폰트: 전자책에 최적화된 한글 폰트
• 여러 플랫폼 폰트를 순서대로 나열
• 마지막에 반드시 제네릭 폰트(sans-serif, serif) 포함

자주 하는 실수

올바른 사용법 vs 잘못된 사용법

잘못된 예	올바른 예	이유
font-family: 맑은고딕;	font-family: '맑은 고딕';	공백 필요 + 따옴표 필요
font-family: Malgun Gothic;	font-family: 'Malgun Gothic';	공백 있으면 따옴표 필수
font-family: "AppleSDGothicNeo";	font-family: 'Apple SD Gothic Neo';	정확한 폰트명 사용
font-family: '나눔고딕';	font-family: 'NanumGothic', '나눔고딕';	영문명 우선 + 한글명 백업

주의사항과 팁

주의사항

• 폰트명의 공백을 정확하게 입력해야 함
• 대소문자 구분하지 않지만, 정확하게 쓰는 것이 좋음
• 시스템에 없는 폰트는 적용되지 않음
• 한글명만 사용하면 일부 환경에서 인식 안 될 수 있음

실무 팁

• 영문명을 먼저 쓰고, 한글명을 백업으로 나열
• Windows와 macOS 폰트를 모두 포함
• 마지막에 sans-serif 또는 serif 필수
• 폰트 이름은 제조사 공식 문서 확인이 가장 정확

실습 과제

미션: 크로스 플랫폼 폰트 스택 작성

Windows와 macOS 모두에서 작동하는 폰트 스택을 작성해보세요:

1. 고딕체 본문용 font-family 작성
2. 명조체 인용구용 font-family 작성
3. 각 스택에 최소 3개 이상의 폰트 포함
4. 마지막에 제네릭 폰트 포함

체크리스트:

Windows 폰트가 포함되었나요? (Malgun Gothic 등)

macOS 폰트가 포함되었나요? (Apple SD Gothic Neo 등)

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

마지막에 sans-serif 또는 serif를 넣었나요?

요약 정리

Day 107 핵심 정리

• 한글 폰트 이름: 한글명과 영문명 두 가지 존재
• 권장: 영문명 사용이 호환성 높음
• Windows 고딕: Malgun Gothic (맑은 고딕)
• macOS 고딕: Apple SD Gothic Neo
• Windows 명조: Batang (바탕)
• 따옴표: 공백 있는 폰트명에는 필수
• 폰트 스택: 여러 플랫폼 폰트 + 제네릭 폰트

퀴즈

오늘의 퀴즈

Q1. "맑은 고딕"의 영문명은?

정답: Malgun Gothic

Q2. macOS의 기본 한글 고딕 폰트는?

정답: Apple SD Gothic Neo

Q3. 다음 중 올바른 코드는?

A) font-family: Malgun Gothic;
B) font-family: 'Malgun Gothic';
C) font-family: "맑은고딕";

정답: B - 공백 있는 이름은 따옴표 필수

Q4. CSS에서 한글 폰트를 지정할 때 권장되는 이름 형식은?

정답: 영문명 (호환성이 더 높기 때문)

Q5. Windows의 기본 명조체 폰트는?

정답: Batang (바탕)

참고 자료

• Windows 시스템 폰트 목록
• macOS 시스템 폰트 목록
• Google Fonts 한글 폰트
• KoPub 폰트 공식 가이드

다음 학습 예고

Day 108 - 폰트 스택 만들기

여러 폰트를 순서대로 나열하는 폰트 스택! 대체 폰트 전략을 배워봅시다!