CSS font-family, 그냥 베끼지 마세요 — 폰트 스택 제대로 쓰는 법

font-family, 그냥 복붙하고 계신가요

웹을 만들 때 CSS에서 font-family를 어떻게 정하세요? 솔직히 많은 분이 다른 사이트에서 길게 늘어선 폰트 목록을 그대로 복붙하거나, Arial, sans-serif 정도로 대충 적고 넘어가거든요. 그런데 이 한 줄이 사용자가 보는 글자의 첫인상을 좌우하고, 특히 한국어처럼 영어가 아닌 언어에서는 의외로 골치 아픈 문제를 일으켜요. 폰트 패밀리를 어떻게 합리적으로 골라야 하는지 정리해볼게요.

먼저 '제네릭 패밀리'를 이해하기

가장 먼저 알아야 할 건 '제네릭 패밀리(generic family)'예요. 이게 뭐냐면, 특정 폰트 이름이 아니라 "이런 종류의 글꼴"이라고 브라우저에게 맡기는 키워드예요. 우리가 잘 아는 serif(명조처럼 삐침이 있는), sans-serif(고딕처럼 깔끔한), monospace(글자 폭이 같은 코딩용)가 여기 속하죠. 폰트 스택의 맨 끝에는 거의 항상 이 제네릭 패밀리를 적어줘야 해요. 앞에 지정한 폰트가 사용자 기기에 하나도 없을 때 최후의 보루가 되거든요.

요즘은 더 똑똑한 제네릭 패밀리도 생겼어요. system-ui는 "그 운영체제가 기본으로 쓰는 UI 폰트를 그대로 써라"는 뜻이에요. 맥이면 산프란시스코, 윈도우면 세고에 UI가 자동 적용돼서 마치 네이티브 앱처럼 보이게 만들죠. 비슷하게 ui-monospace, ui-serif, ui-sans-serif도 있어요.

한국 개발자가 꼭 알아야 할 함정

그런데 여기 함정이 있어요. system-ui는 영어권에선 깔끔하지만, 한국어·일본어·중국어(CJK) 텍스트에서 글자가 깨지거나 엉뚱한 글꼴로 나오는 문제가 보고돼 왔거든요. 운영체제의 'UI 폰트'가 한글을 제대로 포함하지 않거나, 시스템 언어 설정에 따라 중국어용 한자가 한국어 문맥에 섞여 나오는 식이에요. 그래서 system-ui 하나만 믿고 가면 안 되고, 한글을 잘 지원하는 폰트를 명시적으로 함께 깔아주는 게 안전해요.

그래서 어떻게 쓰는 게 좋나

권장 방향은 "최소한으로, 의도를 갖고" 쓰는 거예요. 옛날처럼 폰트 이름을 열 개씩 줄줄이 나열하면 오히려 어떤 기기에서 뭐가 뜰지 예측이 안 돼서 안 좋아요. 차라리 (1) 정말 원하는 웹폰트나 핵심 폰트 한두 개를 적고, (2) 그다음 한글 지원 폴백(대체 폰트)을 넣고, (3) 맨 끝에 sans-serif 같은 제네릭 패밀리로 마무리하는 식이 깔끔해요. 이모지가 중요하면 emoji 제네릭이나 전용 이모지 폰트를 따로 챙겨야 하고요.

한국 서비스라면

본문은 보통 한글을 잘 지원하는 웹폰트(예: 프리텐다드, 노토 산스 KR 등)나 흔한 시스템 한글 폰트를 쓰고, 코드 블록에는 ui-monospace를 활용하면 OS별로 자연스러운 코딩 폰트가 잡혀요. 핵심은 "예쁜 폰트를 욕심내되, 그게 없을 때 어떻게 떨어질지(폴백)까지 설계하라"는 거예요. 웹폰트를 너무 많이 부르면 로딩이 느려지니, 본문 가독성과 성능 사이 균형도 같이 봐야 하고요.

마무리

정리하면, font-family는 무작정 복붙할 게 아니라 '맨 끝 제네릭 패밀리 + 한글 폴백 + system-ui 함정 주의'라는 원칙으로 직접 설계하는 게 맞아요. 지금 여러분 프로젝트의 font-family 한 줄, 한글이 안 깨지고 폰트가 다 없을 때까지 안전하게 떨어지도록 짜여 있나요?