웹 안전 폰트 리스트 완벽 가이드
웹 안전 폰트(Web Safe Fonts)란 Windows, macOS, Linux 등 대부분의 운영체제에 기본으로 설치되어 있어 별도의 웹 폰트 로딩 없이도 모든 사용자에게 동일하게 표시되는 시스템 폰트를 말합니다. 웹사이트를 제작할 때 폰트 선택은 가독성, 브랜드 이미지, 페이지 로딩 속도에 직접적인 영향을 미치는 중요한 요소입니다.
웹 안전 폰트를 사용하면 외부 폰트 파일을 다운로드할 필요가 없어 페이지 로딩 시간이 크게 단축됩니다. 특히 모바일 환경에서는 폰트 파일 용량이 사용자 데이터와 렌더링 성능에 직접 영향을 미치기 때문에, 시스템 폰트를 활용하는 것이 성능 최적화의 핵심 전략 중 하나입니다. CSS의 font-family 속성에서 여러 폰트를 쉼표로 나열하는 폰트 스택(Font Stack) 방식을 사용하면, 첫 번째 폰트가 없을 경우 자동으로 다음 폰트로 대체(fallback)됩니다.
웹 안전 폰트의 카테고리
웹 안전 폰트는 크게 다섯 가지 카테고리로 분류됩니다. 세리프(Serif) 폰트는 글자 끝에 작은 장식(세리프)이 있어 전통적이고 격식 있는 느낌을 줍니다. 산세리프(Sans-Serif) 폰트는 장식 없이 깔끔하고 현대적인 인상을 주며 화면 가독성이 뛰어납니다. 고정폭(Monospace) 폰트는 모든 글자가 같은 너비를 차지하여 코드 에디터나 표 형식 데이터에 적합합니다. 필기체(Cursive)와 판타지(Fantasy) 폰트는 장식적 용도로 활용되지만, 운영체제마다 렌더링 결과가 다를 수 있어 본문보다는 제목이나 강조 요소에 제한적으로 사용하는 것이 좋습니다.
CSS font-family 작성 요령
font-family를 작성할 때는 가장 선호하는 폰트를 먼저 적고, 뒤로 갈수록 범용적인 폰트를 배치합니다. 마지막에는 반드시 serif, sans-serif, monospace 같은 제네릭 패밀리를 추가해야 합니다. 폰트 이름에 공백이 포함된 경우 큰따옴표나 작은따옴표로 감싸야 하며, 제네릭 패밀리 이름은 따옴표 없이 작성합니다. 이 도구에서는 각 폰트마다 올바른 CSS 코드를 제공하므로 복사하여 바로 사용할 수 있습니다.
자주 묻는 질문 (FAQ)
Q. 웹 안전 폰트와 웹 폰트의 차이점은 무엇인가요?
A. 웹 안전 폰트는 운영체제에 기본 설치된 폰트로 별도 다운로드가 필요 없습니다. 반면 웹 폰트(Google Fonts, Adobe Fonts 등)는 서버에서 폰트 파일을 다운로드해야 하므로 추가 네트워크 요청이 발생합니다. 웹 안전 폰트는 로딩 속도가 빠르지만 디자인 선택의 폭이 좁고, 웹 폰트는 다양한 서체를 사용할 수 있지만 성능에 영향을 줄 수 있습니다.
Q. 모든 운영체제에서 100% 동일하게 보이나요?
A. 웹 안전 폰트라 하더라도 운영체제별 렌더링 엔진 차이로 인해 미세한 차이가 있을 수 있습니다. 예를 들어 Windows의 ClearType과 macOS의 서브픽셀 렌더링 방식이 다르기 때문에 글자 두께나 간격에 약간의 차이가 나타날 수 있습니다. 그러나 글꼴 자체는 동일하게 표시됩니다.
Q. font-family에 여러 폰트를 나열하는 이유는 무엇인가요?
A. 폰트 스택(Font Stack)이라 하며, 사용자 환경에 첫 번째 폰트가 설치되어 있지 않을 경우 순서대로 다음 폰트를 시도하는 폴백(fallback) 메커니즘입니다. 마지막에 serif, sans-serif 같은 제네릭 패밀리를 지정하면 어떤 환경에서든 최소한의 적절한 폰트가 적용됩니다.
Q. 한글 폰트도 웹 안전 폰트가 있나요?
A. 한글 전용 웹 안전 폰트는 많지 않지만, Windows의 맑은 고딕(Malgun Gothic), macOS의 Apple SD Gothic Neo 등이 각 OS에서 기본 제공됩니다. 다국어 지원이 필요한 경우 system-ui나 OS별 시스템 폰트를 조합한 폰트 스택을 사용하는 것이 좋습니다.