✨ 폰트 세팅: SF Pro, Apple SD, Pretendard를 함께 쓰기
1. 이 글을 쓰게 된 배경
이번 프로젝트를 진행하면서 가장 먼저 부딪힌 고민이 폰트를 어떻게 세팅할 것인가였다.
보통은Google Fonts처럼 웹에서 바로 불러오는 방식을 많이 쓰지만, 이번에는 애플 기기 기본 서체(SF Pro,Apple SD)와 오픈소스Pretendard를 조합해 직접 스택을 설계하려고 했다.
단순히 예쁜 글꼴을 고르는 문제를 넘어, 어떤 기준으로 선택하고 어떤 순서로 적용해야 하는지가 궁금했고, 그래서 실제 세팅 과정을 공부하며 정리하게 되었다.또한 이번 프로젝트는 전반적으로 애플 디자인을 참고해 UI를 만들고 있다.
자연스럽게 “그렇다면 글꼴도 애플의 서체를 사용하는 게 가장 잘 어울리지 않을까?”라는 생각으로 이어졌다.
브랜드 경험과 톤앤매너를 맞추기 위해,SF Pro와Apple SD 산돌고딕 Neo같은 애플 기본 서체를 우선적으로 고려하게 된 이유다.
2. 애플의 기본 서체: SF Pro와 Apple SD 산돌고딕 Neo
애플 기기에서 가장 익숙한 글꼴은
SF Pro와Apple SD 산돌고딕 Neo다.
SF Pro는 2015년 이후 iOS와 macOS 전반에 쓰이는 표준 서체이고, 영문과 숫자 표현에 강하다.
한글은 산돌커뮤니케이션이 애플과 협업해 만든Apple SD 산돌고딕 Neo가 담당한다.
아이폰, 아이패드, 맥에서 일관된 타이포그래피 경험을 제공하는 핵심 폰트다.
3. Pretendard를 함께 사용하는 이유
문제는 이 서체들이 애플 기기 전용이라는 점이다.
윈도우나 안드로이드 환경에서는 기본적으로 설치되어 있지 않다.
그래서 대안으로 선택한 것이Pretendard다.
Pretendard는 오픈소스 한글/영문 통합 서체로, 현대적인 디자인과 다양한 환경 호환성을 갖추고 있다.
애플 기본 서체가 없는 경우 자연스럽게Pretendard로 대체할 수 있다.
4. Fallback 폰트란 무엇인가
폰트 세팅에 대해 공부하면서 가장 자주 마주친 단어 중 하나가 바로
fallback이었다.
Fallback은 말 그대로 “대체 수단”을 의미한다.
사용자의 컴퓨터에 특정 폰트가 없으면, 미리 정해둔 순서에 따라 다른 폰트가 적용된다.예를 들어
SF Pro → Apple SD → Pretendard → 시스템 폰트순서를 세팅해두면,
어떤 환경에서 접속하더라도 전체적인 분위기가 크게 흐트러지지 않는다.
이런 체계적인 폰트 스택 덕분에 기기별·OS별로 일관된 사용자 경험을 제공할 수 있다.
5. 폰트 스택 설계 전략
최종적으로 정한 스택은 이렇다.
- 영문/숫자:
SF Pro → Pretendard → 시스템 폰트- 한글:
Apple SD 산돌고딕 Neo → Pretendard → 시스템 폰트이렇게 두 갈래로 나눠두면, 애플 기기에서는 기본 서체가 적용되고, 그 외 환경에서는
Pretendard나 범용 폰트가 자연스럽게 따라온다.
6. 설치 및 적용 방법
1)
SF Pro&Apple SD 산돌고딕 Neo
- 애플 기기에 기본 내장되어 있으므로 설치 과정은 필요 없다.
- 하지만 웹 프로젝트에서 적용되도록 하려면 폰트 스택에 이름을 반드시 포함해야 한다.
- 예:
--font-sans: "SF Pro", "Apple SD Gothic Neo", ...- 이렇게 등록해두면 애플 기기에서는 자동으로 해당 서체가 적용된다.
2)
Pretendard
애플 서체가 없는 환경을 대비해 오픈소스
Pretendard를 추가한다.두 가지 방법이 있다.
- npm 패키지:
@fontsource/pretendard설치 후globals.css에 import- CDN:
<link>태그를globals.css최상단에 추가이렇게 해두면 애플 서체가 없는 환경에서도 일관된 타이포그래피를 유지할 수 있다.
3) 시스템 폰트
- 각 OS에 기본 내장된 폰트를 마지막
fallback으로 지정한다.- 예: Windows =
Segoe UI, Android =Roboto, Linux =Ubuntu/Noto Sans, 그 외 =sans-serif- 설치는 불필요하지만, 스택에
"Segoe UI", Roboto, Arial, system-ui, sans-serif등을 포함해두어야 한다.
7. globals.css에 등록하기
Tailwind v4기준으로는globals.css안에@theme블록을 만들어 폰트 토큰을 등록했다.
영문/숫자용과 한글용 스택을 따로 지정해두고,html:lang(ko)에 따라 분기되도록 했다.
이렇게 하면 다국어 페이지에서도 폰트가 올바르게 적용된다.
8. 언어별 폰트 분기 (영문/숫자 vs 한글)
영문·숫자와 한글은 어울리는 폰트가 다르다.
SF Pro는 영문과 숫자에 최적화되어 있고,Apple SD는 한글에 맞춰 설계되었다.
따라서html에는 기본 스택을,html:lang(ko)에는 한글 전용 스택을 걸어 분리했다.
이렇게 하면 같은 페이지에서도 문자의 성격에 맞는 서체가 적용된다.
9. 성능 최적화: FOUT/FOUC 방지와 로딩 전략
웹폰트를 쓰면 흔히
FOUT(Flash of Unstyled Text)나FOUC(Flash of Unstyled Content)문제가 발생한다.
이를 줄이기 위해 자주 쓰는 굵기(Regular,Medium,Semibold,Bold)만 불러왔다.
또한 시스템 폰트를 먼저 선언해두고,Pretendard가 로드되면 자연스럽게 교체되도록 했다.
이렇게 하면 초기 로딩 속도와 가독성 모두 잡을 수 있다.
10. 정리: 브랜드 경험과 가독성을 모두 잡는 폰트 세팅
결국 나는 애플 기본 서체 +
Pretendard+ 시스템 폰트 조합을 선택했다.
애플 기기에서는 친숙한 브랜드 경험을 그대로 살리고, 다른 환경에서는Pretendard와 범용 서체로 안정적인 가독성을 확보했다.
이렇게 세팅해두니 어떤 기기에서 열어도 레이아웃이 흐트러지지 않고, 통일된 사용자 경험을 제공할 수 있었다.
