들어가며

현재 mirajet Design Documents 시스템은 외부 CDN(Google Fonts · jsDelivr)에 의존하고 있습니다. 오프라인 환경이나 회사 인트라넷 배포 시 폰트가 로드되지 않으면 시스템 폰트로 fallback되어 디자인 인상이 달라집니다. 본 가이드는 모든 폰트를 로컬 파일로 확보하는 방법을 안내합니다.

모든 폰트의 공통 라이선스

본 프로젝트에서 사용하는 모든 폰트는 SIL Open Font License 1.1 하에 배포됩니다. 단독 판매를 제외한 모든 상업적 사용 · 수정 · 재배포가 가능하며, 브로셔·인쇄물·디지털 자산 모두에 제한 없이 사용할 수 있습니다.

라이선스 전문: https://scripts.sil.org/OFL

확보해야 할 폰트 전체 목록

현재 mirajet Design Documents 전체(문서 시스템 + 인터랙티브 도구)에서 사용 중인 폰트는 총 9종입니다. 이 중 5종은 문서 시스템 필수 폰트, 4종은 타이포그래피 시뮬레이터용 선택 폰트입니다.

폰트	용도	언어	굵기	라이선스	상태
Pretendard (또는 Pretendard Variable)	본문 · 한글 기본	한글 + 라틴	100~900	SIL OFL 1.1	필수
Noto Serif KR	한글 세리프 옵션	한글	400 / 500 / 700	SIL OFL 1.1	필수
Playfair Display	영문 세리프 헤드	라틴	400 / 700 · Italic	SIL OFL 1.1	필수
JetBrains Mono	코드 · 메타 라벨	라틴	400 / 500 / 600	SIL OFL 1.1	필수
— 이하 타이포그래피 시뮬레이터 전용 —
Cormorant Garamond	시뮬레이터 · Classical 조합	라틴	300~700 · Italic	SIL OFL 1.1	선택
Italiana	시뮬레이터 · Vogue 조합	라틴	400	SIL OFL 1.1	선택
Prata	시뮬레이터 · Didot 조합	라틴 + 키릴	400	SIL OFL 1.1	선택
DM Serif Display	시뮬레이터 · Modern 조합	라틴	400 · Italic	SIL OFL 1.1	선택
Gowun Batang / Nanum Myeongjo	시뮬레이터 · 한글 세리프 페어링	한글	400 / 700	SIL OFL 1.1	선택

권장 폴더 구조

다운로드한 폰트 파일은 mirajet_docs/shared/fonts/ 하위에 폰트별 디렉토리로 정리합니다:

mirajet_docs/ ├── shared/ │ ├── tokens.css │ ├── base.css │ ├── components.css │ ├── print.css │ ├── nav.js │ ├── fonts.css # ← 신규 · @font-face 선언 모음 │ └── fonts/ # ← 신규 · 폰트 파일 저장소 │ ├── pretendard/ │ │ ├── Pretendard-Thin.woff2 │ │ ├── Pretendard-ExtraLight.woff2 │ │ ├── Pretendard-Light.woff2 │ │ ├── Pretendard-Regular.woff2 │ │ ├── Pretendard-Medium.woff2 │ │ ├── Pretendard-SemiBold.woff2 │ │ ├── Pretendard-Bold.woff2 │ │ ├── Pretendard-ExtraBold.woff2 │ │ └── Pretendard-Black.woff2 │ ├── noto-serif-kr/ │ │ ├── NotoSerifKR-Regular.woff2 │ │ ├── NotoSerifKR-Medium.woff2 │ │ └── NotoSerifKR-Bold.woff2 │ ├── playfair-display/ │ │ ├── PlayfairDisplay-Regular.woff2 │ │ ├── PlayfairDisplay-Bold.woff2 │ │ ├── PlayfairDisplay-Italic.woff2 │ │ └── PlayfairDisplay-BoldItalic.woff2 │ ├── jetbrains-mono/ │ │ ├── JetBrainsMono-Regular.woff2 │ │ ├── JetBrainsMono-Medium.woff2 │ │ └── JetBrainsMono-SemiBold.woff2 │ ├── cormorant-garamond/ # 선택 (시뮬레이터) │ ├── italiana/ # 선택 (시뮬레이터) │ ├── prata/ # 선택 (시뮬레이터) │ ├── dm-serif-display/ # 선택 (시뮬레이터) │ ├── gowun-batang/ # 선택 (시뮬레이터) │ └── nanum-myeongjo/ # 선택 (시뮬레이터) ├── 01-project-document/ ├── 02-luxury-reference/ └── ...

※ .woff2 포맷만 확보하면 충분합니다. 모든 현대 브라우저(Chrome · Edge · Firefox · Safari 2020+)가 지원하며, 파일 크기는 woff의 30% 수준입니다. woff·ttf·eot는 레거시 브라우저(IE11 등) 지원이 필요한 경우에만 추가하세요.

폰트별 다운로드 방법

1. Pretendard 필수

본문·한글 기본 폰트. 모든 문서의 body 텍스트.

font-family: "Pretendard Variable", Pretendard, sans-serif

출처: GitHub 공식 저장소 — orioncactus/pretendard

다운로드 방법 A — GitHub Releases (권장) 1. https://github.com/orioncactus/pretendard/releases 접속
2. 최신 릴리즈 (현재 v1.3.9)의 Assets 섹션에서 Pretendard-1.3.9.zip 다운로드
3. 압축 해제 → public/static/ 폴더에 9개 weight의 woff2 파일 확인
4. mirajet_docs/shared/fonts/pretendard/ 에 woff2 파일 복사

다운로드 방법 B — CDN에서 직접 (간편) 브라우저 주소창에 아래 URL을 하나씩 입력하여 다운로드:

https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2

Regular, Medium, SemiBold, Bold, ExtraBold 등 필요한 weight를 각각 다운로드. 파일 이름은 그대로 유지하세요.

✓ 변수 폰트(Variable)를 사용하면 단일 파일로 모든 weight 처리 가능 — PretendardVariable.woff2 1개만 받으면 됩니다. 파일 크기 유리, 다만 IE·구형 브라우저 미지원.

2. Noto Serif KR 필수

한글 세리프. 본문에서 한글 인용·Brand Statement의 명조 느낌 처리.

font-family: "Noto Serif KR", serif

방법 A — Google Fonts 공식 (ttf만) 1. https://fonts.google.com/noto/specimen/Noto+Serif+KR
2. 우측 상단 Get font → Download all 클릭
3. 압축 해제하면 .ttf 파일 (여러 weight)
4. ttf를 woff2로 변환해야 함 (아래 [공통] 섹션 참조)

방법 B — google-webfonts-helper (woff2 즉시 다운로드, 권장) 1. https://gwfh.mranftl.com/fonts/noto-serif-kr
2. Step 1: charset에서 korean만 체크 (파일 크기 대폭 절감)
3. Step 2: styles에서 regular · 500 · 700 선택
4. Step 3: Customize folder prefix → ../shared/fonts/noto-serif-kr/
5. Step 4: Download files 버튼 → ZIP 받기
6. ZIP 안의 .woff2 파일 + 생성된 CSS 스니펫 확보
7. 파일을 mirajet_docs/shared/fonts/noto-serif-kr/ 에 복사

한글 폰트 용량 주의

Noto Serif KR은 charset을 korean만 선택하지 않으면 파일당 10MB+ 됩니다 (CJK 통합). 한국어 전용 서브셋을 선택하면 weight당 2~3MB로 줄어듭니다. 그래도 라틴 폰트보다는 훨씬 큽니다.

3. Playfair Display 필수

영문 세리프 헤드라인. 커버 타이틀·섹션 헤드의 우아한 세리프.

font-family: "Playfair Display", serif

google-webfonts-helper 사용 (권장) 1. https://gwfh.mranftl.com/fonts/playfair-display
2. charset: latin · latin-ext (한국 사용자명 등 특수문자용)
3. styles: regular · italic · 700 · 700italic
4. folder prefix: ../shared/fonts/playfair-display/
5. Download → 압축 해제 → shared/fonts/playfair-display/ 복사

4. JetBrains Mono 필수

모노스페이스. 메타 라벨·코드·날짜·버전 표기.

font-family: "JetBrains Mono", ui-monospace, monospace

공식 사이트 1. https://www.jetbrains.com/lp/mono/
2. 우측 상단 Download 버튼 → ZIP 다운로드
3. 압축 해제 후 fonts/webfonts/ 폴더의 woff2 파일 사용
4. shared/fonts/jetbrains-mono/ 에 복사

또는 google-webfonts-helper:
https://gwfh.mranftl.com/fonts/jetbrains-mono

5~10. 타이포그래피 시뮬레이터 전용 (선택) 선택

타이포그래피 시뮬레이터에서 6개 조합 비교 테스트에 사용. 문서 본체에는 사용되지 않음.

타이포그래피 시뮬레이터를 오프라인 사용할 예정이 아니면 생략 가능

google-webfonts-helper 에서 일괄 다운로드 각 폰트 페이지에서 같은 방식으로 woff2 확보:

• Cormorant Garamond (latin · 300, 400italic, 700)
• Italiana (latin · regular)
• Prata (latin · regular)
• DM Serif Display (latin · regular, italic)
• Gowun Batang (korean · regular, 700)
• Nanum Myeongjo (korean · regular, 700)

CSS 전환 단계

폰트 파일을 다운로드한 후, HTML·CSS 코드를 수정하여 로컬 파일을 참조하도록 전환합니다.

shared/fonts.css 파일 생성

mirajet_docs/shared/ 에 새 파일 fonts.css 를 만듭니다. 파일 내용은 본 가이드 다음 섹션 [fonts.css 전체 내용] 을 그대로 복사 붙여넣기 합니다.
모든 HTML 파일의 <head> 외부 CDN 링크 제거

각 index.html 상단에서 다음 줄들을 제거:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" ...>
<link href="https://fonts.googleapis.com/css2?..." ...>
<link ... href="https://cdn.jsdelivr.net/.../pretendard..." ...>

대신 다음 한 줄을 추가:

<link rel="stylesheet" href="../shared/fonts.css">

※ 허브 페이지(index.html)는 href="shared/fonts.css" (상위 경로 없이)
오프라인 검증

브라우저 개발자 도구 (F12) → Network 탭 → 체크박스 Disable cache 와 Offline 설정 → 페이지 새로고침.

폰트가 여전히 정상 표시되면 성공. 만약 fallback 폰트로 표시되면 경로 오류. Network 탭에서 빨간색 404 항목 확인.
파일 크기 점검

모든 woff2 파일 합계가 너무 크면 사용하지 않는 weight를 제외합니다:
- Pretendard: 실제 사용 weight는 400 (본문) / 600 (강조) / 700 (헤드) / 800 (로고). 나머지 제외 가능
- Noto Serif KR: charset을 korean만 → 파일 크기 대폭 감소

fonts.css 전체 내용

아래 코드를 mirajet_docs/shared/fonts.css 파일로 저장하세요. 필수 4종만 포함된 버전입니다.

/* ============================================================
   mirajet Design Documents · Local Fonts
   ==============================================================
   모든 폰트는 로컬 /shared/fonts/ 하위에 배치.
   외부 CDN 의존성 없음 · 오프라인 정상 작동.
   All fonts: SIL Open Font License 1.1
   ============================================================ */

/* ---------- Pretendard (본문·한글 기본) ---------- */
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/pretendard/Pretendard-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/pretendard/Pretendard-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('fonts/pretendard/Pretendard-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/pretendard/Pretendard-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('fonts/pretendard/Pretendard-ExtraBold.woff2') format('woff2');
}

/* ---------- Pretendard Variable (단일 파일로 대체 가능) ---------- */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('fonts/pretendard/PretendardVariable.woff2') format('woff2-variations');
}

/* ---------- Noto Serif KR (한글 세리프) ---------- */
@font-face {
  font-family: 'Noto Serif KR';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/noto-serif-kr/NotoSerifKR-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Serif KR';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/noto-serif-kr/NotoSerifKR-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Serif KR';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/noto-serif-kr/NotoSerifKR-Bold.woff2') format('woff2');
}

/* ---------- Playfair Display (영문 세리프 헤드) ---------- */
@font-face {
  font-family: 'Playfair Display';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/playfair-display/PlayfairDisplay-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('fonts/playfair-display/PlayfairDisplay-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/playfair-display/PlayfairDisplay-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url('fonts/playfair-display/PlayfairDisplay-BoldItalic.woff2') format('woff2');
}

/* ---------- JetBrains Mono (코드·메타 라벨) ---------- */
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2') format('woff2');
}

/* ============================================================
   타이포그래피 시뮬레이터 전용 (선택적 포함)
   ============================================================ */

/* Cormorant Garamond */
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('fonts/cormorant-garamond/CormorantGaramond-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('fonts/cormorant-garamond/CormorantGaramond-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/cormorant-garamond/CormorantGaramond-Bold.woff2') format('woff2');
}

/* Italiana */
@font-face {
  font-family: 'Italiana';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/italiana/Italiana-Regular.woff2') format('woff2');
}

/* Prata */
@font-face {
  font-family: 'Prata';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/prata/Prata-Regular.woff2') format('woff2');
}

/* DM Serif Display */
@font-face {
  font-family: 'DM Serif Display';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/dm-serif-display/DMSerifDisplay-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('fonts/dm-serif-display/DMSerifDisplay-Italic.woff2') format('woff2');
}

/* Gowun Batang */
@font-face {
  font-family: 'Gowun Batang';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/gowun-batang/GowunBatang-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Gowun Batang';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/gowun-batang/GowunBatang-Bold.woff2') format('woff2');
}

/* Nanum Myeongjo */
@font-face {
  font-family: 'Nanum Myeongjo';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/nanum-myeongjo/NanumMyeongjo-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Nanum Myeongjo';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/nanum-myeongjo/NanumMyeongjo-Bold.woff2') format('woff2');
}

자주 묻는 질문

Q. 폰트 파일이 너무 큽니다. 줄일 방법은?

사용하지 않는 weight 제외 (Pretendard: 400/600/700/800만 남기기)
Noto Serif KR은 charset을 korean으로만 제한
Playfair Display는 latin 만 (라틴 확장은 특수문자용)
Pretendard Variable 단일 파일로 대체하면 9개 weight가 1개 파일로 통합

Q. ttf만 있는데 woff2로 변환해야 하나요?

ttf도 모든 브라우저에서 작동하지만 용량이 3~4배 큽니다. 변환 권장:

웹 도구: https://cloudconvert.com/ttf-to-woff2
명령줄: woff2_compress font.ttf (Google의 woff2 도구)
또는 google-webfonts-helper에서 woff2로 바로 받는 것이 가장 편합니다

Q. 회사 인트라넷에 배포하려면?

폰트 파일을 포함한 전체 mirajet_docs/ 폴더를 회사 웹서버에 업로드하면 됩니다. 상대 경로(../shared/fonts/...)로 참조되므로 서버 주소에 관계없이 작동합니다.

Q. 오프라인 배포 시 파일만 배포해도 되나요?

예. 폴더 전체를 USB/메일로 전달 후 받는 사람이 index.html 을 브라우저에서 열면 모든 폰트·CSS·JS가 로컬에서 로드됩니다. 다만 다음 제약이 있습니다:

Chrome은 로컬 HTML에서 CORS 문제로 일부 기능 제한 가능
가장 안정적인 방법: 받는 사람도 간이 로컬 서버로 실행 — python -m http.server 같은 1줄 명령
또는 브라우저에서 PDF로 내보내기 후 PDF 파일로 공유

Q. Pretendard Variable vs Static 어느 쪽을 써야 하나요?

Variable (단일 파일): 파일 크기 유리, 모든 weight 연속 조정 가능, 현대 브라우저만 지원
Static (9개 파일): 구형 브라우저 호환성, 필요 weight만 선택적 로드
한국 병의원·인트라넷 환경이면 두 가지 다 가능하나, 일반적으로 Static 이 안전합니다 (IE 지원 병원 환경 있음)

제한사항 및 주의

본 가이드의 한계

본 문서 작성자(Claude)는 외부 인터넷에서 바이너리 파일을 직접 다운로드하여 전달할 수 없습니다 · 실제 파일 확보는 사용자가 직접 수행해야 합니다
Google Fonts API는 변경 가능성이 있으므로, 수년 후 google-webfonts-helper 서비스가 중단될 수 있습니다 · 그 경우 폰트별 공식 저장소에서 직접 확보
Pretendard 버전은 v1.3.9 기준이며, 향후 버전업 시 @font-face 선언의 파일명이 달라질 수 있음
woff2 포맷이 브라우저에 따라 CORS 설정이 필요한 경우 있음 (로컬 파일 열 때) · 간이 웹서버 사용 권장
본 가이드의 파일명 · 경로는 참고용이며, 실제 다운로드한 파일명이 다를 수 있음 · 그 경우 fonts.css 의 url(...) 을 실제 파일명에 맞게 수정
고급 타이포그래피(라틴 lining figures, OpenType features 등)는 woff2 변환 시 유지되나, 일부 변환 도구는 손실 가능성 있음

라이선스 준수

모든 폰트는 SIL OFL 1.1 하에 자유 사용 가능하나, 폰트 파일 자체를 단독으로 판매하는 행위는 금지됩니다. 브로셔·웹사이트·인쇄물 내에서 사용하는 것은 문제없습니다. 폰트 파일을 회사 내부에 배포하는 경우에도 라이선스 파일(OFL.txt)을 함께 배포하는 것이 원칙입니다.

폰트 로컬 호스팅 가이드

들어가며

확보해야 할 폰트 전체 목록

권장 폴더 구조

폰트별 다운로드 방법

1. Pretendard 필수

2. Noto Serif KR 필수

3. Playfair Display 필수

4. JetBrains Mono 필수

5~10. 타이포그래피 시뮬레이터 전용 (선택) 선택

CSS 전환 단계

shared/fonts.css 파일 생성

모든 HTML 파일의 `<head>` 외부 CDN 링크 제거

오프라인 검증

파일 크기 점검

fonts.css 전체 내용

자주 묻는 질문

Q. 폰트 파일이 너무 큽니다. 줄일 방법은?

Q. ttf만 있는데 woff2로 변환해야 하나요?

Q. 회사 인트라넷에 배포하려면?

Q. 오프라인 배포 시 파일만 배포해도 되나요?

Q. Pretendard Variable vs Static 어느 쪽을 써야 하나요?

제한사항 및 주의

폰트 로컬 호스팅 가이드

들어가며

확보해야 할 폰트 전체 목록

권장 폴더 구조

폰트별 다운로드 방법

1. Pretendard 필수

2. Noto Serif KR 필수

3. Playfair Display 필수

4. JetBrains Mono 필수

5~10. 타이포그래피 시뮬레이터 전용 (선택) 선택

CSS 전환 단계

shared/fonts.css 파일 생성

모든 HTML 파일의 <head> 외부 CDN 링크 제거

오프라인 검증

파일 크기 점검

fonts.css 전체 내용

자주 묻는 질문

Q. 폰트 파일이 너무 큽니다. 줄일 방법은?

Q. ttf만 있는데 woff2로 변환해야 하나요?

Q. 회사 인트라넷에 배포하려면?

Q. 오프라인 배포 시 파일만 배포해도 되나요?

Q. Pretendard Variable vs Static 어느 쪽을 써야 하나요?

제한사항 및 주의

모든 HTML 파일의 `<head>` 외부 CDN 링크 제거