안녕하세요.
핀코인입니다.
이번에 저희가 나눔고딕/나눔고딕코딩 구글 웹폰트를 홈페이지에 적용했습니다.
구글 웹폰트를 적용하는 방법은 크게 두 가지가 있습니다.
- 구글 웹폰트 CDN을 이용하는 방법
- 구글 웹폰트를 직접 호스팅하는 방법
구글 웹폰트 CDN을 이용하는 방법은 구글 홈페이지에서 공식적으로 지원하는 방법으로 다음 사이트에 접속해서 설명을 확인할 수 있습니다.
그러나 여기서는 구글 웹폰트를 직접 호스팅하는 방법에 대해서 알아봅니다.
구글 웹폰트의 깜빡임 현상(FOUT, flash of unstyled text)을 없애는 방법 중에 하나가 바로 구글 웹폰트를 서버에서 직접 호스팅하는 것입니다.
구글 웹폰트를 서버에서 직접 호스팅할 경우에 단점은 크게 두 가지가 있습니다.
- 최초 방문 시 로드가 느려진다.
- 서버의 네트워크 전송량이 증가한다.
사실 최초 방문 시 로드가 느려지는 점은사용자 접근성이 낮아지고 검색엔진 최적화 등에서 감점 요인이 될 수 있기 때문에 구글 웹폰트 사용을 꺼리는 가장 큰 이유 중의 하나입니다. 보다 미려한 콘텐츠 제공을 위해 서비스 제공자 입장에서 이러한 위험을 감수하기로 결정했습니다.
직접 호스팅을 위한 구글 웹폰트를 다운 받으려면 google-webfonts-helper 사이트를 이용하면 됩니다. 이 사이트는 현재 915개의 구글 웹폰트를 다운로드 제공하며 아래와 같이 nanum 검색어로 나눔고딕 폰트를 선택합니다.
1. 나눔고딕 찾기
나눔고딕 폰트를 찾았으면 이제 언어 문자셋에서 한국어(Korean)를 선택합니다. 그리고 폰트 스타일을 일반(regular), 굵게(bold) 등을 선택합니다.
2. 문자셋과 스타일 선택
위에서 굵은 폰트 선택을 너무 많이 하면 웹 페이지 로딩 속도가 저하될 수 있으니 꼭 필요한 굵은 폰트만 선택하세요.
3. CSS 스타일 시트 구성
이제 스타일시트 CSS를 구성할 차례입니다.
스타일시트 구성에는 크게 Best Support 버튼과 Modern Browsers 버튼이 있습니다.
Best Support 버튼은 eot, woff, woff2, ttf, svg 모든 폰트 타입을 지원합니다. 반면에 Modern Browsers 버튼을 눌러보면 woff, woff2 폰트 타입만 지원합니다.
위 CSS의 주석 설명에 따르면 각 폰트 타입은 다음과 같습니다.
eot: IE6~IE8 오래된 익스플로러 브라우저woff: 최신 웹 브라우저woff2: 가장 최신 웹 브라우저ttf: 사파리, 안드로이드, iOSsvg: 구 버전 iOS
Best Support는 거의 모든 브라우저에서 동일한 콘텐츠를 제공할 수 있는 장점이 있지만 속도 저하가 있을 수도 있습니다. eot, svg 폰트 타입을 과감하게 미지원할 지 여부는 잘 선택하시기 바랍니다.
일반적으로 css, font 디렉토리 구성은 다음과 같습니다.
/css/webfonts.css
/fonts/폰트파일따라서 css 파일 입장에서 폰트 파일을 찾는 상대 경로는 ../fonts 입니다.
그리고 홈페이지에서 CSS는 어떤 스타일시트 파일보다도 순서가 가장 위에 위치하도록 합니다. 그렇지 않으면 페이지 렌더링 과정에서 깜빡임 현상이 있을 수 있습니다.
4. 폰트 파일 다운로드
폰트 파일을 다운로드하고 폰트 파일 fonts 경로로 서버에 업로드합니다.
5. 속도 개선
구글 웹폰트 사용에 따른 속도 저하를 개선하기 위해서 쓰는 방법은 다음과 같습니다.
- 애초에 불필요한 스타일은 제공하지 않는다.
- 지원하지 않을 오래된 브라우저도 과감하게 선택한다.
<HEAD>태그에서 스타일시트 중 가장 위에 웹 폰트를 불러온다.- 브라우저 캐시에 폰트가 저장되어 있을 경우 재요청하지 않도록
local()을 사용한다. - 브라우저별 지원 가능 폰트
format을 명시적으로 선언한다. - CDN을 이용해서 네트워크 트래픽 사용량을 줄인다.
핀코인은 현재 나눔고딕과 나눔고딕코딩 폰트를 같이 사용하고 있습니다. monospace 글꼴을 사용하는 이유는 핀 번호에서 각종 숫자와 알파벳 i, 1, l, L, o, O, 0 등을 정확히 표시하기 위해서입니다.
보기 좋은 떡이 먹기도 좋다고 단순히 상품권을 싸게 판매하는 것에서 그치지 않고 사용자의 편의성을 고려한 쇼핑몰을 만들기 위해 노력하고 있습니다.
대한민국 1등 온라인 상품권 쇼핑몰 핀코인!
감사합니다.
