웹 글꼴 고르는 법, 한글 지원·로딩 속도·사용권을 확인하면 실패가 줄어든다
온라인 쇼핑몰을 만들던 민수 씨는 마음에 드는 글꼴을 골라 제목에 적용했습니다. 그런데 휴대전화에서는 글자가 늦게 바뀌고, 일부 문장은 기본 글꼴로 보였습니다. 디자인은 좋아졌지만 페이지가 무거워진 데다 글꼴 사용 범위도 확실하지 않아 다시 확인해야 했습니다.
웹 글꼴은 사이트의 분위기를 바꾸는 좋은 도구지만, 예쁜 모양만 보고 고르면 문제가 생길 수 있습니다. 이 글을 읽으면 웹 글꼴이 작동하는 방식, 한글 글꼴을 고르는 기준, 속도와 사용권을 확인하는 방법, 실제 적용 과정에서 자주 하는 실수를 알게 됩니다.
웹 글꼴이란 무엇인가
웹 글꼴은 방문자의 컴퓨터나 휴대전화에 글꼴이 없어도 웹사이트에서 글자를 일정한 모양으로 보여 주는 기술입니다. 사이트가 글꼴 파일을 서버에서 내려받아 브라우저가 화면에 표시합니다. 사용자의 기기에 글꼴을 미리 설치할 필요가 없다는 점이 일반 글꼴과 다릅니다.
예를 들어 브랜드가 둥근 글꼴을 사용한다면, 운영체제가 달라도 제목과 버튼의 인상이 비슷하게 유지됩니다. 반대로 웹 글꼴을 쓰지 않으면 같은 이름의 글꼴이라도 기기마다 다른 글꼴로 바뀔 수 있습니다. 이때 줄바꿈 위치와 버튼 높이까지 달라질 수 있습니다.
다만 글꼴 파일도 이미지처럼 내려받아야 하는 자료입니다. 한글은 표현해야 할 글자 수가 많아 라틴 문자 중심의 글꼴보다 파일이 커지기 쉽습니다. 그래서 디자인 품질과 페이지 속도를 함께 살펴야 합니다.
선택 전에 확인할 기준
- 한글 범위: 제목에 필요한 글자만 있는지, 자주 쓰는 한자나 특수문자까지 지원하는지 확인합니다. 일부 글꼴은 모든 한글이 아니라 자주 쓰는 글자만 담은 부분 집합일 수 있습니다.
- 굵기 종류: 보통 글씨와 굵은 글씨만 필요한지, 중간 굵기와 아주 굵은 글씨도 필요한지 정합니다. 사용하지 않는 굵기까지 불러오면 파일 크기가 커집니다.
- 읽기 편한 정도: 긴 글에는 장식이 적고 글자 사이가 안정적인 글꼴이 유리합니다. 손글씨 느낌의 글꼴은 짧은 제목이나 배너에는 어울리지만 본문 전체에 쓰면 피로할 수 있습니다.
- 화면 크기별 모양: 큰 모니터에서 예뻐도 작은 휴대전화에서는 획이 뭉개질 수 있습니다. 실제 문장으로 휴대전화와 컴퓨터 화면을 모두 확인해야 합니다.
- 사용 허가: 무료라는 말이 곧 모든 사용이 가능하다는 뜻은 아닙니다. 개인용과 상업용의 범위, 웹사이트 탑재 가능 여부, 수정 가능 여부를 제공자의 공식 안내에서 재확인합니다.
특히 로고나 인쇄물에 쓸 수 있다는 조건과 웹사이트에서 파일을 제공할 수 있다는 조건은 다를 수 있습니다. 파일을 내려받아 서버에 올리는 방식이 허용되는지까지 확인해야 안전합니다.
웹 글꼴 방식과 선택 기준 비교
웹 글꼴은 크게 외부 제공 서비스에서 불러오는 방식과 직접 파일을 관리하는 방식으로 나눌 수 있습니다. 어느 하나가 항상 더 좋은 것은 아닙니다. 관리 편의성, 속도, 개인정보와 보안 기준을 함께 봐야 합니다.
| 구분 | 외부 제공 방식 | 직접 관리 방식 |
|---|---|---|
| 시작 방법 | 제공자가 안내한 연결 코드를 삽입 | 허가받은 글꼴 파일을 서버에 저장 |
| 장점 | 설정이 간단하고 파일 관리가 편함 | 파일 위치와 제공 범위를 직접 관리 |
| 주의점 | 외부 서버 상태와 정책에 영향을 받음 | 사용권과 최적화 작업을 직접 확인 |
| 알맞은 경우 | 빠르게 시험하거나 소규모 사이트를 운영할 때 | 브랜드 통일성과 장기 운영이 중요할 때 |
외부 방식을 선택했다면 연결이 늦어졌을 때 사이트가 어떻게 보이는지 확인합니다. 직접 관리한다면 파일 이름, 캐시 설정, 압축, 허가 범위를 기록해 두는 편이 좋습니다. 두 방식 모두 기본 글꼴을 함께 지정해야 합니다.
파일 형식은 보통 최신 웹 환경에 맞는 형식을 우선 검토합니다. 다만 방문자 환경이 다양하다면 제공자가 권장하는 호환 범위를 확인해야 합니다. 형식 이름만 보고 여러 파일을 모두 올리는 것은 불필요한 전송을 만들 수 있습니다.
웹 글꼴 적용 순서
- 사용 장면을 먼저 정합니다. 본문, 제목, 버튼, 숫자 중 어디에 사용할지 정합니다. 모든 글자를 같은 글꼴로 바꿀 필요는 없습니다.
- 시험 문장을 만듭니다. “웹디자인 2026, 빠른 검색과 읽기”처럼 한글, 숫자, 기호가 섞인 문장을 준비합니다. 실제 사이트에서 자주 쓰는 단어도 넣습니다.
- 제공 범위와 사용권을 확인합니다. 공식 배포 페이지에서 웹 사용 가능 여부와 조건을 확인하고, 확인 날짜와 주소를 내부 문서에 남깁니다.
- 필요한 굵기만 선택합니다. 본문용 보통 굵기와 제목용 굵기처럼 실제로 쓰는 종류만 불러옵니다.
- 기본 글꼴을 지정합니다. 웹 글꼴을 내려받지 못해도 읽을 수 있도록 비슷한 계열의 대체 글꼴을 정합니다.
- 속도와 화면을 시험합니다. 느린 네트워크, 작은 화면, 처음 방문한 상태에서 글자가 어떻게 나타나는지 살핍니다.
직접 연결할 때는 다음처럼 글꼴 이름과 파일 경로, 굵기를 구분해 적습니다. 실제 파일 이름과 형식은 사용하는 제공자의 안내에 맞춰 바꿔야 합니다.
@font-face {
font-family: '사이트본문';
src: url('/fonts/site-text.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
본문 요소 {
font-family: '사이트본문', sans-serif;
}여기서 font-display는 글꼴을 불러오는 동안 글자를 어떻게 보여 줄지 정하는 설정입니다. 설정마다 화면 전환 방식이 다르므로, 적용 뒤 실제 기기에서 글자가 잠깐 사라지거나 모양이 갑자기 바뀌지 않는지 확인해야 합니다.
자주 하는 실수와 고치는 방법
- 무료 글꼴이면 마음대로 사용한다고 생각함: 무료 배포와 상업적 사용 허용은 같은 말이 아닙니다. 약관에서 웹 탑재 조건을 확인합니다.
- 굵기를 너무 많이 불러옴: 제목 하나에 쓰려고 여러 굵기를 연결하면 초기 로딩이 느려질 수 있습니다. 실제 사용 수를 줄이고 필요할 때만 추가합니다.
- 한글 전체가 나온다고 가정함: 이름과 예시 문장만 보고 판단하면 안 됩니다. 메뉴, 날짜, 괄호, 숫자, 자주 쓰는 단어를 직접 입력합니다.
- 대체 글꼴을 정하지 않음: 네트워크가 끊기면 글꼴이 바뀌며 줄바꿈이 달라질 수 있습니다. 비슷한 글자 폭의 대체 글꼴을 지정합니다.
- 본문까지 장식 글꼴을 사용함: 짧은 문구에서는 개성이 살아나지만 긴 글에서는 읽는 속도가 떨어질 수 있습니다. 본문은 안정적인 글꼴로 두고 장식 글꼴은 제목에 제한하는 방법이 안전합니다.
- 속도 측정을 데스크톱에서만 함: 사무실 컴퓨터에서는 빠르지만 휴대전화와 느린 통신 환경에서는 늦을 수 있습니다. 최소 한 대의 휴대전화에서 확인합니다.
자주 묻는 질문
웹 글꼴을 여러 개 사용해도 되나요?
가능하지만 목적이 분명해야 합니다. 본문용과 제목용처럼 역할을 나누고, 글꼴 종류와 굵기를 늘릴수록 파일 전송량이 커진다는 점을 고려합니다.
웹 글꼴은 이미지보다 좋은가요?
검색 가능한 글자와 접근성 측면에서는 일반적으로 웹 글꼴이 유리합니다. 이미지 속 글자는 확대했을 때 흐려지고 화면 읽기 기능이 내용을 읽지 못할 수 있습니다. 다만 특별한 로고나 장식 문구는 이미지가 더 적합할 때도 있습니다.
한글 웹 글꼴의 속도를 줄이는 방법은 무엇인가요?
사용할 굵기를 줄이고, 제공되는 문자 범위 선택 기능이 있다면 필요한 범위를 검토합니다. 파일을 압축하고 캐시를 활용하는 방법도 있습니다. 단, 일부 글자만 남기는 방식은 누락 문자가 생길 수 있으므로 실제 문장으로 시험해야 합니다.
사용권은 언제 다시 확인해야 하나요?
사이트를 공개하기 전과 글꼴 파일을 바꿀 때 확인하는 것이 좋습니다. 제공 서비스의 정책이나 배포 조건은 바뀔 수 있으므로 최신 내용은 공식 안내에서 재확인합니다.
좋은 웹 글꼴은 단지 눈에 예쁜 글꼴이 아닙니다. 방문자가 읽기 편하고, 사이트가 지나치게 느려지지 않으며, 운영자가 사용 조건을 설명할 수 있어야 합니다. 먼저 사용할 영역을 좁히고, 실제 문장과 기기에서 시험한 뒤 적용하면 디자인과 성능 사이의 균형을 잡기 쉽습니다.