웹페이지에서 사용자가 가장 크게 체감하는 부분이 바로 글씨체입니다.
하지만 기본으로 제공되는 폰트에는 한계가 있고, 그걸 보완해주는 게 바로 웹폰트입니다.
제가 효과를 넣어서 [**굴림**]체와 웹폰트인 [**TMON소리체**]를 비교해봤습니다.
체감이 꽤 나실 겁니다.
문제는 기본폰트는 사용자의 컴퓨터에 내장되어 있기 때문에 호환이 되지만 웹폰트가 컴퓨터에 설치되어있지 않을 경우엔 다운받아야 한다는 겁니다.
그래서 웹폰트 적용시엔 웹페이지의 용량이 무거워지고, 로딩 속도가 느려지는 문제가 생기게 됩니다.
이번 시간에는 어떻게해야 웹폰트를 최적화해서 가벼운 페이지를 만들지를 알아보겠습니다.
웹폰트 고르기
당연한 이야기지만 웹폰트를 적용하려면 어떤 웹폰트를 쓸지를 먼저 결정해야 합니다.
웹폰트를 고를 때엔 2가지를 고려하면 됩니다.
- 무료 웹폰트를 사용할 것인가, 유료 웹폰트를 사용할 것인가?
- 편하게 읽을 수 있는 글씨체로 할 것인가, 다른 목적을 갖고 사용할 것인가?
폰트 시장은 저작권 검열이 매우 강력합니다.
유료 폰트를 무료 폰트로 착각해서 썼다가 고소 당하는 일이 비일비재합니다. 그렇기 때문에 유료버전을 쓸지, 무료 버전을 쓸지 확실하게 조사를 한 후 써야 합니다.
[팁*블로거가 무료 폰트라고 소개해놨지만 실제로는 유료 폰트인 경우도 있습니다. 꼭 폰트 제작사 홈페이지에 가서 무료 폰트인지 체크를 하시는 게 중요합니다.*]
또한 웹폰트의 용도도 잘 생각해봐야 합니다.
예를 들어 사용자의 시선을 확 잡아끌고 싶다면 개성 넘치는 손글씨체를 쓰는 것도 나쁘지 않습니다.
보통 이런 폰트는 로고/제목류에 많이 쓰입니다.
하지만 저런 손글씨체에도 단점이 있으니, 짧은 글이라면 모를까 긴 글을 읽을 때엔 사용자에게 피로감을 줄 수 있다는 겁니다.
때문에 본문에 사용할 폰트는 사용자가 읽기 편하도록 검증된 폰트를 쓰는 게 좋습니다.
인터넷에서 검색만 하더라도 많은 웹폰트들이 나오겠지만, 무료로 사용가능한 '스테디셀러' 폰트로는 Noto Sans와 네이버에서 제공하는 나눔류 폰트가 좋습니다.
이런 폰트의 특징은 화려한 기교를 부렸다기 보단 정돈된 느낌이 중심이 되었다는 겁니다.
웹폰트를 가져올 방법을 정하기
어떤 웹폰트를 쓸지 골랐다면 이제 가져올 방법을 택하면 됩니다.
방법은 2가지가 있습니다.
- CDN을 이용해 가져오기
- 직접 파일을 서버에 업로드해서 제공하기
각자의 방법에는 일장일단이 있습니다.
표로 정리하면 이렇습니다.
| 속도 | 트래픽 부담 | 캐싱 | |
| CDN | 제공 업체에 따라 다름 | 없음 | 있을 가능성이 있음 |
| 파일 업로드 | 안정적임 | 있음 | 없음 |
CDN은 외부 업체에서 업로드해둔 것을 링크해서 끌어오는 것을 뜻합니다.
이 때 중요한 것은 CDN이 어느 국가를 경유해서 제공되는지입니다.
한국 기준으론 서버가 유럽에 있는 것보단 아시아에 있는 쪽이 속도가 우월하고 좋습니다.
주로 쓰이는 CDN으론
1. 구글
2. jsDelivr
이 두 가지가 많이 쓰입니다.
또한 CDN은 사용자가 많습니다.
그렇기 때문에 A라는 사이트에서 이미 CDN이 캐싱된 상태로 우리 사이트에 방문한 경우라면 굳이 다운로드 받지 않고 적용할 수 있어서 부담을 덜 수 있습니다.
만약 본인이 CDN을 쓰고 싶은데, 다른건 다 귀찮다! 싶으시면 그냥 구글 웹폰트를 쓰세요.
초보자가 사용하기 편하게 위의 사진처럼 마크업방법까지 나옵니다.
웹폰트를 경량화시키기
이제 웹폰트를 적용하기 전 작업이 필요합니다.
한글 웹폰트는 라틴어계열 폰트보다 파일이 무겁습니다.
영어는 ABCDEF…YZ 같은 글자만 들어가 있는데, 한글은 가,나,다,라,갉,낡,닭 이런 식의 글자 조합이 많기 때문에 용량이 장난 아닙니다.
그 문제를 해결하기 위해서 한국에서 자주 쓰이는 집단을 모아둔 경량화 버전이 있습니다.
그게 바로 [**서브셋 폰트**]입니다.
한글 폰트에서 갉같은 글씨를 쓸 일이 정말 드문데, 이런 자주 쓰지 않는 글씨를 모두 제외하고 만든 작업물이죠.
요즘 웹폰트를 제공해주는 분들은 미리 서브셋폰트를 제작해서 배포해주십니다.
위의 사진은 제가 이 블로그에서 쓰고 있는 스포카 한 산스 글씨체를 다운받는 모습인데, 제작자분께서 KR서브셋이라는 이름으로 경량화 버전을 이미 배포하고 계십니다.
하지만 여기서 끝은 아닙니다.
바로 폰트의 포맷 문제가 남았기 때문입니다.
폰트 포맷엔 4가지 타입이 있습니다.
하지만 TTF, EOT 타입은 이미 도태된 과거의 포맷에 가깝고, 우리가 주목해야하는 것엔 2가지 타입이 있습니다.
바로 [**WOFF**]와 [**WOFF2**] 포맷이지요.
| 포맷이름 | IE | 모던브라우저 | 용량 |
| WOFF | 9.0부터 지원 | 모두 지원 | 상대적으로 큼 |
| WOFF2 | X | 모두 지원 | 상대적으로 작음 |
WOFF보다 WOFF2 파일이 더 압축되어 있어서 사용하기 좋습니다.
문제는 WOFF2는 IE를 지원하지 않는다는 겁니다.
그래서 IE까지 고려해야하는 한국의 상황에선 이 2가지 포맷을 사용하는 게 옳습니다.
기본적으로 WOFF2를 쓰되, 만약 WOFF을 호환하지 않는 상황이 되면 WOFF을 쓰게 만드는 겁니다.
웹폰트 마크업 예제
기본적으로 웹폰트를 불러오려면 CSS에서 불러오는 게 좋습니다.
이 때 @import보단 @font-face를 이용해서 불러와야 합니다.
이 쪽이 속도가 더 빠르기 때문입니다.
@font-face {
font-family: 'SpoqHanSans'; /*폰트이름*/
src:local('SpoqHanSansBold'), /*폰트식별이름*/
url('WOFF2폰트경로') format('woff2');/*폰트경로1*/
url('WOFF폰트경로') format('woff');/*폰트경로2*/
font-style: normal; /*폰트 스타일*/
font-weight: 400; /*폰트굵기*/
font-display: swap; /*폰트 디스플레이*/
unicode-range: U+AC00-U+D7A3,U+0030-0039; /*한글 유니코드*/
}
형식은 위와 같습니다.
원리를 보자면 가장 용량이 작은 WOFF2 형식을 다운로드 받도록 하되, 만약 WOFF2 형식을 지원하지 않는 브라우저면 두번째에 있는 WOFF 형식을 다운로드 받도록 하게 하는 겁니다.
그리고 font-display의 경우 여러 방식이 있습니다.
그 중에서 대중적으로 쓰이는 게 swap입니다.
이 방식의 경우 글씨체가 없는 경우에라도 폰트를 표시함으로써 항상 폰트가 보이게 해주는 역할을 합니다.
현재 웬만한 모던 브라우저에선 모두 지원하는 기능이라고 보면 됩니다.
물론 우리의 IE는 지원하지 않지만, IE의 경우 항상 글씨체를 표시해주는 브라우저 자체 기능이 있기 때문에 지원할 필요가 없습니다.
또한, [**unicode-range**]는 여러 언어를 사용하는 웹페이지에서 쓰면 좋은 기능입니다.
글자는 각각 unicode가 있는데, 이를 범위로 지정해서 묶는 역할을 합니다.
이를 잘 이용하면 영어는 A웹폰트, 한글은 B웹폰트, 인도어는 C웹폰트 이런 식의 응용이 가능합니다.
그리고 위처럼 폰트를 장전했다면, 더 빠르게 불러올 필요가 있습니다.
이럴 때 HTML에 아래와 같이 preload 마크업을 해줘야 합니다.
위치는 <head>에 넣으시면 됩니다.
<link rel="preload" href="./images/Spoqa_Han_Sans_Regular.woff2" as="font" type="font/woff2" crossorigin>
웹폰트는 빨리 불러오는 게 가장 중요합니다.
글씨 == 내용인 상황이기 때문에 가장 중요한 요소이기 때문입니다. 다만 중복다운로드를 막기 위해 as를 사용해야 합니다.
그게 위의 마크업이고요.
이렇게 웹폰트를 불러오는 세팅이 끝났다면 불러오면 됩니다.
방법은 간단합니다.
font-family를 이용해 css에 작성해주면 됩니다.
body{font-family: 'SpoqHanSans',Arial,"NanumBarunGothic",'Apple SD Gothic Neo',sans-serif;font-size:14px; font-weight:normal;}
위와 같이 적으면 웹페이지 전체에 적용 됩니다.
본문에만 적용하고 싶다면 앞의 body를 적용하기 원하는 곳의 class나 id로 바꾸시면 됩니다.
여담이지만 폰트를 BASE64로 만들어 localstorage에 저장해서 여러번 방문하는 사용자의 사용경험을 향상시키는 방법도 거론되고 있는데 그 부분은 구글에서 직접 비효율적이라고 답변을 했습니다.
마지막 요약
1. 사용할 웹폰트 파일을 고릅니다.
2. 웹폰트를 공급할 방법을 택합니다. (CDN/서버업로드)
3. 2번에서 업로드한 웹폰트의 경로를 아래와 같이 마크업 해줍니다.
@font-face {
font-family: 'SpoqHanSans'; /*폰트이름*/
src:local('SpoqHanSansBold'), /*폰트식별이름*/
url('WOFF2폰트경로') format('woff2');/*폰트경로1*/
url('WOFF폰트경로') format('woff');/*폰트경로2*/
font-style: normal; /*폰트 스타일*/
font-weight: 400; /*폰트굵기*/
font-display: swap; /*폰트 디스플레이*/
unicode-range: U+AC00-U+D7A3,U+0030-0039; /*한글 유니코드*/
}
4. 폰트를 빨리 불러오기 위해서 아래와 같이 HTML HEAD안에 마크업 해줍니다.
<link rel="preload" href="./images/Spoqa_Han_Sans_Regular.woff2" as="font" type="font/woff2" crossorigin>
5. 웹폰트를 적용하기 원하는 클래스에 웹폰트를 불러옵니다.
body{font-family: 'SpoqHanSans',Arial,"NanumBarunGothic",'Apple SD Gothic Neo',sans-serif;font-size:14px; font-weight:normal;}
관련글
'그외 > 유용한 정보' 카테고리의 다른 글
| 코드펜(codepen) 사용법과 저작권을 알아봅시다. (2) | 2020.10.21 |
|---|---|
| 스크롤 내리면 상단에 고정되는 네비 메뉴 만들기 (4) | 2020.10.20 |
| 파일이름 일괄변경 프로그램 다크네이머(DarkNamer) 사용법 리뷰 (2) | 2020.10.11 |
| 웹페이지의 로딩 속도 최적화를 해 줄 크리티컬 CSS 개념을 알아봅시다. (4) | 2020.10.06 |
| PageSpeed Insights의 렌더링 차단 리소스를 제거해보자. (15) | 2020.10.02 |
