반응형
Pretendard 폰트
Pretendard는 오픈 소스 산세리프 한글 웹폰트로, 깔끔하고 현대적인 느낌을 주는 글꼴이다.
애플의 San Francisco와 비슷한 느낌을 주면서도 한글 지원이 뛰어나서 UI 디자인, 웹사이트, 앱 등 다양한 곳에 많이 사용되고 있다.
- Orion Cactus라는 디자이너/개발자 (본명: 김용민)님이 주도해서 만들었다.
- GitHub를 통해 오픈 소스로 배포하고, 많은 디자이너/개발자들이 함께 개선에 참여하고 있다.
- 기존 한글 웹폰트들이 대부분 무겁고 성능이 좋지 않다.
- 한글과 영문의 조합이 어색하거나, UI에서 쓸 만큼 정돈된 폰트가 부족했다.
- 애플의 San Francisco처럼 UI 친화적이면서도 한글을 자연스럽게 표현하는 폰트를 원했다. 그래서 Pretendard는 **"SF Pro + 한글 최적화"**라는 철학 아래 만들어졌다.
- 한글, 라틴 문자, 숫자, 일부 기호에 최적화되어 있다.
일본어(히라가나/가타카나/한자), 중국어(간체/번체)는 포함되어 있지 않다.
Pretendard 폰트 특징
- 가변 폰트 지원 (Variable Font): 한 개의 파일로 여러 굵기를 사용할 수 있어 성능과 관리 면에서 유리함.
- 다양한 굵기 (Weight): Thin ~ Black까지 총 9단계의 굵기 제공.
- 넓은 호환성: 웹, 앱, 디자인툴 등 어디에서든 사용 가능.
- 한글 + 라틴 글자 조화: 영문과 한글이 자연스럽게 어울림.
- 라이선스: SIL Open Font License로 자유롭게 사용 가능 (상업적 이용 OK)
사용법
1. 웹에서 사용하기 (CDN)
아래 코드를 HTML <head>에 추가하면 바로 사용할 수 있다:
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css" rel="stylesheet">그리고 CSS에 이렇게 적용하면 된다:
body {
font-family: 'Pretendard Variable', sans-serif;
}2. 로컬에서 사용하기
- GitHub에서 다운로드:
👉 https://github.com/orioncactus/pretendard - 원하는 폴더에 .ttf 또는 .woff2 파일을 넣고 CSS에 적용:
@font-face {
font-family: 'Pretendard';
src: url('./fonts/Pretendard-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
body {
font-family: 'Pretendard', sans-serif;
}3. 디자인 툴에서 사용하기 (예: Figma, Photoshop)
- 시스템에 폰트를 설치하면 자동으로 사용 가능
- macOS: .ttf 파일 더블 클릭 → “설치”
- Windows: 마찬가지로 더블 클릭 → “설치”
비슷한 느낌의 폰트
- Apple San Francisco (macOS 전용)
- Noto Sans KR
- Spoqa Han Sans Neo
- SUIT
'프론트엔드' 카테고리의 다른 글
| 두 라인 사이에 색 채우기 Chart.js (1) | 2025.04.13 |
|---|---|
| Lottie 애니메이션 (0) | 2025.04.12 |
| Vite 기본 폴더 구조 (1) | 2025.03.29 |
| Vite vs 프레임워크 (0) | 2025.03.29 |
| DispatcherServlet web.xml (1) | 2025.01.26 |
