Pretendard, Wanted Sans, SUIT 3대 UI 폰트의 특징, 차이점, 라이선스 및 웹폰트 CDN 적용 방

UI 디자이너와 개발자를 위한 3대 현대 한글 폰트 완벽 비교 (Pretendard vs Wanted Sans vs SUIT)

최근 국내 IT 및 디자이너 커뮤니티에서 Pretendard(프리텐다드)를 기본 축으로 두고, Wanted Sans(원티드 산스)와 SUIT(수트)를 서비스 특성에 맞춰 채택하는 트렌드가 뚜렷하게 나타나고 있습니다.

세 폰트는 모두 '디지털 UI와 웹 환경 최적화'라는 공통된 목표를 가지고 있지만, 제작 의도와 미세한 조형적 특징, 그리고 개발자·디자이너를 배려하는 세부 기능에서 차이점이 명확합니다.

1. 3대 UI 폰트 핵심 비교 (한눈에 보기)

항목	Pretendard (프리텐다드)	Wanted Sans (원티드 산스)	SUIT (수트)
제작자	길형진 (OrionCactus)	원티드랩 (길형진, 강한빈 외)	선윤 (SUNN YOUN)
디자인 콘셉트	표준 system-ui 대체 (Neutral)	기하학적+인간공학적 (Modern/Tech)	UI 요소 특화 기하학적 폰트 (Geometric UI)
인상 / 분위기	중립적, 군더더기 없는 유니버설함	세련됨, 세공된 느낌, 확실한 인상	정갈함, 깔끔함, 단정한 사각형 구도
핵심 강점	OS간(Windows/Mac) 위화감 없는 가독성	문맥 인식 자동 자간/OpenType 지원	수직 정렬(Vertical Metrics) 및 UI 규격 최적화
가장 잘 어울리는 곳	범용 웹/앱, 대규모 서비스, 블로그	SaaS, IT/테크 플랫폼, 헤드라인 & 본문	데이터 다이어그램, 버튼·폼 위주 UI, 앱

2. 폰트별 특장점 및 차이점 분석

① Pretendard (프리텐다드) ― "국민 표준 UI 폰트"

탄생 배경: Apple의 San Francisco 영문체와 Noto Sans KR(본고딕) 한글체의 매끄러운 결합을 목표로 제작되었습니다.

주요 특징:

• Windows와 macOS/iOS 환경 모두에서 글자 높낮이와 굵기 감도가 균일합니다.
• 어떠한 브랜드 색깔에도 무난하게 스며드는 중립적인 인상을 줍니다.
• 다양한 Font Weight(9종) 및 Variable(가변) 폰트를 완벽히 지원합니다.

---

② Wanted Sans (원티드 산스) ― "트렌디한 감성과 지능형 문맥 인상의 조합"

탄생 배경: 채용·커리어 플랫폼 '원티드(Wanted)'에서 디자이너 길형진님 등과 협업하여 선보인 오픈소스 폰트입니다.

주요 특징:

• 기하학적(Geometric) 스타일: 직선과 곡선의 대비가 또렷하여 현대적이고 차분하면서도 세련된 인상을 줍니다.
• 지능적 문맥 인식 (Contextual Alternates): 텍스트를 입력할 때 문맥에 맞게 글자 간격이나 모양이 자동 조율되어, 별도의 자간 조정 없이도 타이포그래피 완성도가 높습니다.
• ExtraBlack 체급 제공: 매우 두껍고 임팩트 있는 Bold/Black 스타일을 지원해 타이틀 및 마케팅 헤드라인에 강력한 연출이 가능합니다.

---

③ SUIT (수트) ― "UI/UX 디자이너와 개발자를 위한 기하학적 정밀함"

탄생 배경: 디자이너가 피그마(Figma) 등에서 디자인을 잡고 개발로 이전할 때 발생하는 공수를 최소화하기 위해 UI 전용으로 설계된 폰트입니다.

주요 특징:

• 수직 중앙 정렬 (Vertical Metrics): 버튼 내부 텍스트나 아이콘 옆 글자가 한쪽으로 쏠리지 않고 정확히 수직 중앙에 위치하도록 빈 공간을 계산해 제작되었습니다.
• 기본 자간 보정: 피그마 등에서 본고딕 사용 시 자간을 -4.8%가량 좁혀 써야 했던 번거로움을 폰트 자체에 사전 반영했습니다.
• 기하학적 영문/숫자: 한글 본고딕 라인업과 어울리는 Geometric 계열 영문·숫자를 조합해 대시보드나 수치 표현 시 매우 깔끔합니다.

3. 라이선스 (License)

결론부터 말씀드리면 3개 폰트 모두 "100% 무료 (SIL Open Font License)"입니다.

사용 허용 범위:

• 인쇄물(포스터, 책, 잡지), 웹사이트, 앱 UI 내장(Embedding), 광고, 영상 자막, 상업용 상품 패키지, 브랜드 로고(BI/CI) 작성 등 모든 상업적 행위 무료 사용 가능합니다.
• 폰트 수정 및 재배포도 가능합니다.

제한 사항:

• 폰트 파일 자체를 유료로 판매하거나 라이선스를 임의 변경하는 행위는 금지됩니다.

4. 다운로드 및 적용 방법

1) 다운로드 위치

공통 추천 경로: 상업용 무료 한글 폰트 사이트인 눈누(noonnu.cc) 또는 각 프로젝트의 GitHub 저장소에서 TTF, OTF, WOFF2 파일을 다운로드받을 수 있습니다.

• Pretendard: github.com/orioncactus/pretendard
• Wanted Sans: github.com/wanteddev/wanted-sans
• SUIT: sun.fo/suit

2) 웹사이트/앱에 웹폰트(Webfont)로 적용하기

웹 프로젝트 CSS 파일 최상단에 원하는 폰트의 CDN 구문을 넣고 font-family를 지정하면 바로 적용됩니다.

① Wanted Sans 적용

/* CDN 불러오기 (Variable / 가변 폰트) */
@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.1/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');

/* CSS 스타일 적용 */
body {
  font-family: "Wanted Sans Variable", "Wanted Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

② SUIT 적용

/* CDN 불러오기 (Variable / 가변 폰트) */
@import url('https://cdn.jsdelivr.net/gh/sun-api/SUIT/fonts/variable/woff2/SUIT-Variable.css');

/* CSS 스타일 적용 */
body {
  font-family: 'SUIT', -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

③ Pretendard 적용

/* CDN 불러오기 (Variable / 가변 폰트) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* CSS 스타일 적용 */
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

💡 요약 및 선택 가이드

• "가장 범용적이고 실패 없는 표준 폰트가 필요하다" → Pretendard
• "트렌디하고 세련된 IT/SaaS 제품 느낌과 확실한 헤드라인 연출이 필요하다" → Wanted Sans
• "버튼, 아이콘 정렬 등 UI 세부 요소의 정교함과 깔끔한 대시보드 수치 표현이 중요하다" → SUIT