홈페이지 폰트 추천 | 가독성·브랜드·로딩 속도 기준으로 고른 한국어 폰트 5가지
·
Qshop Growth Lab
홈페이지 폰트 추천이 막막하다면? 가독성·브랜드 이미지·로딩 속도 기준으로 고른 한국어 폰트 5가지와 큐샵 설정법까지 정리했어요.
한 줄 요약
폰트 하나만 바꿔도 홈페이지 분위기가 완전히 달라져요. 가독성·브랜드 이미지·로딩 속도 3가지 기준으로 고른 한국어 폰트 5가지를 추천해드려요.
홈페이지를 만들었는데 뭔가 허전하거나 전문적이지 않은 느낌이 든다면, 폰트를 먼저 점검해보세요. 폰트는 홈페이지의 첫인상을 결정하는 가장 쉬운 요소예요.
Figma에 따르면 폰트는 브랜드 정체성을 확립하는 데 중요한 역할을 하는 동시에, 정보를 정확하게 전달하고 가독성을 높이며 전반적인 사용자 경험을 향상시켜요. 고딕체가 기본이지만, 어떤 고딕이냐, 아니면 다른 계열을 쓰느냐에 따라 완전히 다른 인상을 줘요.
폰트를 고르는 기준 3가지
신뢰감·이미지만 보고 폰트를 고르면 안 돼요. 홈페이지 폰트를 고를 때는 3가지를 함께 봐야 해요.
| 기준 | 설명 |
|---|---|
| 가독성 | 방문자가 읽기 편한가. 아무리 예뻐도 읽기 어려우면 방문자가 홈페이지를 이탈할 확률이 높아져요. |
| 브랜드 이미지 | 내 업종·브랜드 분위기와 맞는가. 신뢰감·감성·친근함 등 |
| 로딩 속도 | 폰트 파일이 가벼운가. 무거운 폰트는 홈페이지 속도를 느리게 해요 |
기본 고딕 계열 | 깔끔하고 신뢰감 있는 폰트
고딕체는 홈페이지 폰트의 기본이에요. 획 끝에 장식이 없고 균일한 굵기라 어떤 화면 크기에서도 읽기 편해요. 쇼핑몰·IT·전문직·교육 등 대부분의 업종에 무난하게 어울려요.
프리텐다드 (Pretendard)
원티드, 카카오뱅크 등 국내 주요 서비스에서 사용할 만큼 실무에서 검증된 폰트예요. 2024년엔 대한민국 정부 공식 디자인 시스템 기본 서체로 선정됐어요. 한글과 영문·숫자를 함께 쓸 때 조화가 자연스럽고, 가격표나 수치가 많은 쇼핑몰에도 잘 어울려요.
- 분위기 : 모던, 신뢰감, 전문성
- 사용 조건 : 개인·상업 모두 무료로 쓸 수 있어요. 폰트 파일 자체를 유료로 파는 것만 안 돼요.
노토 산스 (Noto Sans)
구글과 어도비가 함께 만든 폰트예요. 국내에서 가장 널리 쓰이는 표준 고딕으로, 브런치·기업 포털 등 수많은 서비스에서 쓰이고 있어요. 어떤 기기에서도 깨지지 않고 잘 보이도록 설계됐어요. 병원·법무·금융처럼 신뢰감이 중요한 업종에 잘 어울려요.
- 분위기 : 안정감, 신뢰감, 가독성
- 사용 조건 : 개인·상업 모두 무료로 쓸 수 있어요
수트(SUIT)
처음부터 웹폰트·UI 최적화를 목적으로 만들어진 고딕 폰트예요. 파일 용량이 가벼워 홈페이지 로딩 속도에 유리하고, 숫자 가독성을 위한 고정폭 숫자를 별도로 제공해요. 가격표나 수치가 많이 나오는 쇼핑몰에 특히 잘 어울려요.
- 분위기 : 깔끔함, 현대적, 가독성
- 사용 조건 : 개인·상업 모두 무료로 쓸 수 있어요
큐샵에서 설정하는 법
에디터(클래식/스튜디오) → 텍스트 박스 선택 → 프리텐다드 / Noto Sans / 수트 선택
명조 계열 | 감성적이고 고급스러운 폰트
명조체는 획 끝에 장식(세리프)이 있어서 고딕보다 감성적이고 클래식한 인상을 줘요. 고딕체만 쓰면 딱딱해 보이는 업종에 명조를 섞으면 분위기가 확 살아나요. 인테리어·웨딩·뷰티·F&B 브랜드가 대표적인 예시에요.
단, 타이포그래피 전문가들은 디지털 환경에서 고딕 폰트가 본문 가독성이 더 높다는 데 대체로 동의해요. 명조 계열은 본문 전체보다는 제목·인용구·강조 섹션에 포인트로 쓸 때 가장 효과적이에요.
나눔명조
고딕과 가장 대조되는 명조 계열이에요. 가로획과 세로획 굵기가 달라 고급스럽고 감성적인 인상을 줘요. 네이버가 배포하는 무료 폰트예요.
- 분위기 : 고급감, 감성, 따뜻함
- 어울리는 업종 : 뷰티·웨딩·F&B 브랜드
- 사용 조건 : 개인·상업 모두 무료로 쓸 수 있어요. 단, 이 폰트를 사용한 광고·인쇄물 이미지가 네이버 프로모션에 활용될 수 있어요.
본명조
어도비·구글이 공동 개발하고 한글 파트는 산돌커뮤니케이션이 만든 명조 폰트예요. 나눔명조보다 더 차분하고 정제된 인상을 줘요. 굵기를 다르게 쓸 수 있어 제목부터 본문까지 일관된 분위기를 유지할 수 있어요.
- 분위기 : 차분함, 정제됨, 클래식
- 어울리는 업종 : 인테리어·출판·에디토리얼 감성 브랜드
- 사용 조건 : 개인·상업 모두 무료로 쓸 수 있어요
큐샵에서 설정하는 법
에디터(클래식/스튜디오) → 텍스트 박스 선택 → 나눔명조 / 본명조 선택
홈페이지에서 폰트를 사용할 때 주의할 점
🪄 조합할 때
- 고딕과 명조를 섞을 때는 역할을 나누세요. 제목에 명조, 본문에 고딕 조합이 가장 안정적이에요. 폰트는 최대 2가지로 제한하는 걸 권장해요. 너무 많으면 사이트가 복잡하고 탐색하기 어려워져요.
- 본문 폰트 크기는 16px 이상으로 설정하세요. 미국 정부 공식 웹 디자인 시스템(USWDS)을 비롯한 대부분의 UX 가이드라인에서 본문 텍스트의 최소 크기로 16px을 권장해요. 그 이하는 모바일에서 눈이 피로해질 수 있어요.
📌 고를 때
- 웹폰트는 굵기를 1~2가지만 불러오세요. 폰트 하나가 홈페이지 성능 점수를 25%나 떨어뜨릴 수 있어요. 실제로 쓰는 굵기만 불러오는 게 중요해요.
- 무료 폰트도 사용 조건 확인은 필수예요. 상업적으로 쓸 수 있는지 꼭 확인하세요.
- 장식 손글씨 폰트는 이미지·팝업·상세페이지 제작에 써보세요. 홈페이지 기본 폰트로 쓰면 가독성이 떨어질 수 있지만, 배너·팝업 이미지를 만들 때 포인트로 활용하면 효과적이에요.
자주 묻는 질문 (FAQ)
Q. 폰트가 홈페이지 속도에 영향을 주나요?
A. 네, 영향을 줄 수 있어요. 웹폰트는 파일을 불러오는 시간이 걸려서 폰트 굵기를 너무 많이 불러오면 로딩이 느려져요. 실제로 쓰는 굵기 1~2가지만 적용하는 걸 권장해요.
Q. 큐샵에서 폰트를 바꾸면 전체 페이지에 다 적용되나요?
A. 네, 가능해요. 큐샵 클래식 에디터에서는 상단 사이트 전체 설정>색상/폰트 탭에서 H1·H2·H3·H4·본문 텍스트 단위로 폰트를 한 번에 설정할 수 있어요. 제목과 본문에 각각 다른 폰트를 적용하고 싶다면 여기서 바로 설정하면 돼요.
🪄 연관 콘텐츠
