안녕하세요! 오늘은 최근 웹 디자이너와 개발자들 사이에서 큰 인기를 얻고 있는 Pretendard(프리텐다드) 폰트에 대해 상세히 알아보겠습니다. 무료로 사용 가능한 이 현대적인 시스템 UI 폰트의 모든 것을 알려드릴게요!
프리텐다드 폰트, 무엇이 특별한가요?
프리텐다드는 단순한 폰트가 아닌 크로스 플랫폼 환경을 위해 특별히 설계된 시스템 UI 폰트입니다. 뛰어난 가독성과 범용성을 자랑하며, 다음과 같은 특별한 장점들을 제공합니다:
- 45에서 920까지 9단계의 다양한 굵기 제공
- 최신 가변 폰트 기술 지원
- 한글, 영문, 일본어 등 다국어 완벽 지원
- 상업적 사용이 자유로운 SIL 오픈 폰트 라이선스
프리텐다드 폰트 다운로드 방법
1. 웹폰트로 사용하기
웹사이트에 프리텐다드를 적용하는 방법은 매우 간단합니다. HTML 파일의
섹션에 다음 코드 중 하나를 추가하면 됩니다:
기본 버전 적용
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
최적화된 다이나믹 서브셋 버전
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css" />
2. 시스템 폰트로 설치하기
운영체제별 설치 방법을 알아보겠습니다:
MacOS 사용자
Homebrew를 통해 간단히 설치할 수 있습니다:
brew tap homebrew/cask-fonts
brew install font-pretendard
Linux 사용자
AUR을 통해 설치 가능합니다:
yay -S otf-pretendard
패키지 매니저 사용
npm이나 Yarn을 통해서도 설치할 수 있습니다:
npm i pretendard
# 또는
yarn add pretendard
CSS에서 프리텐다드 폰트 설정하기
1. 시스템 폰트 우선 설정
font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
2. 프리텐다드 우선 설정
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
Next.js 프로젝트에서 사용하기
Next.js에서는 다음과 같이 설정할 수 있습니다:
import localFont from 'next/font/local'
const pretendard = localFont({
src: './fonts/PretendardVariable.woff2',
display: 'swap',
weight: '45 920',
})
주의: WebKit 기반 브라우저에서의 렌더링 문제를 방지하기 위해 반드시 weight 옵션을 지정해야 합니다.
프리텐다드 폰트 라이선스 안내
프리텐다드는 SIL 오픈 폰트 라이선스를 따르고 있어 다음과 같은 사용이 가능합니다:
- 모든 상업적 프로젝트에 무료로 사용 가능
- 폰트 파일 수정 및 재배포 허용
- 단, 폰트 자체를 단독으로 판매하는 것은 제한됨
마치며
프리텐다드는 Inter, Source Han Sans, M PLUS 1p를 기반으로 제작된 현대적인 폰트로, 이미 많은 기업과 서비스에서 시스템 UI 폰트로 채택하고 있습니다. 뛰어난 가독성과 다양한 굵기, 그리고 무료 사용이 가능한 라이선스까지, 웹 프로젝트에 완벽한 선택이 될 것입니다.
이 가이드가 여러분의 프로젝트에 프리텐다드 폰트를 적용하는 데 도움이 되었기를 바랍니다. 더 자세한 정보나 업데이트된 버전은 공식 GitHub 저장소를 참고해 주세요!