자주 쓰는 무료 웹 디자인 한글 폰트 [모두 있다]

웹 디자인에서는 글꼴의 모양뿐 아니라 한글 지원 범위, 로딩 용량과 화면별 줄바꿈을 함께 살펴야 합니다. Noto Sans, Noto Serif, 도현체, 스포카 한 산스, 블랙 한 산스의 특징을 비교하고, Pixso에서 실제 문구를 넣어 글꼴과 굵기를 검토하는 방법을 알아보세요.

웹 폰트와 설치형 글꼴은 어떻게 다른가요?

1. 웹 폰트는 웹페이지가 글꼴 파일을 불러와 사용자의 기기에 미리 설치되지 않은 글꼴로도 텍스트를 표시하는 방식입니다. “웹 디자인용”이라는 별개의 글꼴 종류를 뜻하지는 않습니다. CSS의 @font-face 안내(영문)처럼 로컬 글꼴이나 내려받을 글꼴의 출처를 지정할 수 있습니다. 디자인 도구에서 보이는 글꼴과 실제 웹페이지가 불러오는 글꼴은 따로 확인해야 합니다.

2. 웹 폰트는 파일을 내려받는 시간이 필요하므로 용량과 사용하는 굵기 수를 고려해야 합니다. 한글 글리프가 많은 글꼴은 필요한 글자 범위를 나눈 서브셋을 활용할 수 있지만, 드문 이름이나 기호가 빠지지 않는지 확인해야 합니다. 글꼴을 가볍게 만드는 것만큼 로딩 전후에도 내용을 읽을 수 있게 하는 것이 중요합니다.

3. 같은 글꼴도 운영체제와 브라우저의 렌더링 방식에 따라 획의 인상이 달라질 수 있습니다. 글꼴을 불러오기 전의 대체 글꼴과 본래 글꼴 사이에서 글자 폭과 줄바꿈이 달라지는 문제도 생깁니다. 주요 환경에서 제목, 버튼과 본문의 길이를 확인하고, 글자가 잘리거나 레이아웃이 크게 움직이지 않도록 크기·줄 높이·너비를 조정하세요.

디자이너가 자주 쓰는 웹 디자인 한글 폰트

노토 산스(Noto Sans KR)

한글 UI를 위해 고를 때는 일반적인 Noto Sans라는 이름만 보지 말고 Noto Sans KR 배포본(영문)처럼 한국어를 지원하는 글꼴을 확인하세요. 획의 굵기 변화가 적은 고딕 계열로, 여러 굵기를 사용해 본문과 제목의 위계를 만들 수 있습니다. Noto Sans CJK KR 등 다른 배포 이름도 있으므로 사용한 파일과 글꼴 이름을 함께 기록해야 합니다. 제목·본문·로고에 적용할 때는 같은 글꼴이라도 실제 크기와 문구에서 가독성을 비교해 보세요.

노토 세리프(Noto Serif KR)

Noto Serif KR(영문)은 한국어를 지원하는 명조 계열 글꼴입니다. 획의 대비와 끝 장식이 있어 고딕체와 다른 인상을 주며, 제목이나 긴 글의 분위기를 비교할 때 활용할 수 있습니다. Noto의 동아시아 글꼴과 Adobe의 본명조(Source Han Serif, 영문)는 관련 프로젝트이지만 모든 배포 파일과 글꼴 이름이 동일한 것은 아닙니다. 한·중·일 지역별 글자 형태와 필요한 문자 범위에 맞는 패키지를 선택하세요.

도현체(Do Hyeon)

도현체는 배달의민족을 만든 우아한형제들의 글꼴로, 아크릴판 위에 선을 그리고 잘라 만든 옛 간판에서 착안했습니다. 도현체 공식 프로젝트 설명(영문)에 따르면 자음과 모음의 획을 연결하고, 뒤따르는 모음에 따라 ‘ㅅ·ㅈ·ㅎ’ 등의 글자 형태를 다르게 표현합니다. 이런 개성은 짧은 제목이나 간판 같은 문구에서 비교해 볼 만합니다. Google Fonts의 Do Hyeon 배포본은 Regular 한 굵기를 제공하므로, 굵기가 여러 개 있다고 가정하지 말고 필요한 위계를 글자 크기와 배치로 조정하세요.

스포카 한 산스(Spoqa Han Sans)

스포카 한 산스는 Noto Sans와 Lato를 바탕으로 다듬은 글꼴이며, 숫자를 많이 사용하는 서비스 화면도 고려했습니다. 스포카 공식 글꼴 페이지에서 소개하는 Spoqa Han Sans Neo는 기존 버전을 개선한 글꼴이므로 이름과 버전을 구분해 사용하세요. 한글 글리프를 선별한 서브셋으로 용량을 줄일 수 있지만, 실제 전송량은 선택한 파일과 굵기 수에 따라 달라집니다. 가격·수량·날짜와 한글을 함께 넣어 숫자의 인상과 정렬을 확인하는 것이 좋습니다.

블랙 한 산스(Black Han Sans)

블랙 한 산스는 네모난 형태와 두꺼운 획을 살린 제목용 고딕 계열 글꼴입니다. 공식 프로젝트(영문)는 제목과 헤드라인에 맞춘 정방형 글자 형태를 설명합니다. 짧은 타이틀을 강하게 강조할 때 검토할 수 있지만, 같은 굵기를 작은 본문에 사용하면 답답하게 보일 수 있습니다. 한글과 영문·숫자·기호를 섞을 때는 빠진 글자가 대체 글꼴로 표시되는지도 확인하세요. 각 글꼴의 배포 파일에 포함된 라이선스는 사용·수정·재배포 조건까지 확인해야 합니다.

Pixso에서 한글 글꼴을 비교하는 방법

Pixso 캔버스에 프레임을 만들고 텍스트 도구(T)로 실제 사용할 문구를 입력하세요. 빈 견본 문장보다 제목, 본문, 버튼처럼 용도가 다른 텍스트를 준비하면 한글 글꼴이 화면에서 어떻게 작동하는지 비교하기 쉽습니다.

입력한 텍스트를 선택한 뒤 디자인 패널의 텍스트(Text) 설정에서 사용할 글꼴을 고르세요. Noto Sans KR이 목록에 있다면 정확한 이름을 선택하고, 글자 크기와 제공되는 굵기를 조정합니다. 예를 들어 “결제 금액 12,500원 · 다음 단계”를 넣으면 한글·숫자·기호가 섞인 폭과 기준선을 함께 볼 수 있습니다. 버튼 안에서는 문구가 길어졌을 때 잘리지 않는지도 확인하세요.

Pixso에서 제공하는 글꼴을 사용하거나, 프로젝트와 계정 설정이 지원하는 경우 로컬 글꼴을 업로드해 사용할 수 있습니다. Noto Sans, Noto Serif, 도현체 등이 모든 환경에 기본 탑재되어 있다고 가정하지 말고 현재 글꼴 목록에서 확인하세요. 목록에 없는 글꼴이 필요하면 정식 배포본과 이용 허용 범위를 확인한 뒤 해당 환경의 글꼴 추가 방법을 따라야 합니다. Pixso 공식 UI 디자인 안내에서 글꼴 사용 조건을 확인할 수 있습니다.

결론

한글 글꼴은 이름만 보고 선택하기보다 실제 문구와 사용할 크기에서 비교하는 편이 좋습니다. Pixso 시안에서 선택한 글꼴 이름과 굵기를 기록하고, 웹 구현에서는 같은 배포본과 필요한 문자 범위가 적용되는지 확인하세요. 디자인 도구에서 정상 표시되었다고 해서 방문자의 브라우저에 글꼴이 자동으로 전달되는 것은 아닙니다.