TL;DR
- "눈누"라는 한글 폰트 웹 사이트는 광고가 많고, 퍼포먼스가 떨어진다.
- "낸내"라는 서비스를 만들어, 광고 없이 운영하고, 퍼포먼스를 개선시켰다.
- "낸내"는 GitHub Pages와 jsDelivr을 이용해 서비스를 구현하고, Service Worker와 Cache Storage를 이용해 폰트 파일을 캐싱하고, 가상 스크롤을 이용해 렌더링 속도를 향상했다.
서론
“눈누” 라는 서비스가 있다. 상업적인 용도로 사용이 가능한 무료 한글 폰트를 소개해 주는 웹 사이트인데, 꽤 유용해서 나도 종종 사용했었다. 다만 두 가지 불편한 점이 있었다:
- 광고가 너무 많음
- 떨어지는 퍼포먼스
이 글에서는 위에 대한 접근 및 해결 방법과 함께, 이를 구현한 "낸내"라는 서비스를 소개하고자 한다.
불편한 점
광고
눈누는 정말 좋은 서비스지만 광고가 너무 많다. 폰트와 관련된 페이지에서만 8개. 그중 하나는 폰트 상세 페이지로 이동하는 중간에 흐름을 막는 광고였다.
광고 이미지
서비스 운영에 지속적인 비용이 발생하는 것 같다. 그렇지만 이런 방식은 사용자 경험에 좋지 않다고 생각했다. 기술적으로 이를 해결할 수 있지 않을까? 이 생각이 발화점이 되었다. “눈누와 같은 서비스를 만들되, 광고를 넣지 않고 운영해 보자”.
어렵지는 않았다. GitHub Pages 같은 서비스를 이용해 정적 웹 사이트를 배포하고, 폰트 파일은 jsDelivr CDN으로 제공하면 된다. 다만 GitHub Pages 트래픽 제한 정책을 고려해 폰트 서브셋을 이용해 트래픽을 줄여야 한다.
폰트 서브셋을 이용한 트래픽 개선
퍼포먼스
눈누는 크게 두 가지 퍼포먼스 개선점이 있다:
- 새로고침 시마다 필요한 폰트 파일을 서버에서 다시 다운로드
- 폰트를 다수 렌더링하게 되면 브라우저가 느려짐
먼저 폰트 파일은 변경될 일이 거의 없다. 따라서 새로고침 시마다 다운로드하지 않아도 된다. 이를 브라우저에 캐싱하면 데이터 사용량을 줄일 수 있고, 더 빠른 폰트 로딩 속도도 제공할 수 있다.
폰트 캐싱
이는 Service Worker와 Cache Storage를 이용해 구현이 가능하다. Service Worker는 브라우저와 웹 사이트 사이에서 동작하는 프록시 서버로, 브라우저 요청을 대신 처리할 수 있다. Cache Storage는 HTTP 응답을 캐싱할 수 있는 API로, Service Worker와 함께 사용하면 폰트 데이터를 캐싱할 수 있다.
다음으로, 폰트를 다수 렌더링하는 문제는 이미 잘 알려진 가상 스크롤을 이용해 해결할 수 있다. 눈누는 이를 적용하지 않아 폰트가 많아질수록 렌더링 속도가 느려졌다. 이는 모바일 환경에서 더욱 두드러진다.
낸내
낸내는 눈누와 유사한 서비스를 제공한다. 폰트를 다운로드 받을 수 있고, 폰트 렌더링 결과물을 미리 볼 수도 있다. 다만 낸내는 폰트 파일을 캐싱해 새로고침 시마다 다운로드하지 않는다. 또한, 폰트를 다수 렌더링할 때 가상 스크롤을 이용해 렌더링 속도를 향상했다.
홍보는 디스콰이엇과 GeekNews에서 진행했다. 트위터에서도 언급되었다.
디스콰이엇 홍보
GeekNews 홍보
디스콰이엇에서 반응이 나쁘지 않아 흥미로웠다. 배포 1주 차에는 120명 정도 사용자가 접속했다.
배포 1주차
배포 2주 차에는 에브리타임에도 홍보했고, 사용자가 약 300명 접속했다.
배포 2주차
3주 차에는 510명 접속했다. 실제 서비스에 대해 광고를 넣지 않고도 운영이 가능한지 확인하기 위한 목적이 컸기에, 방문자 체크는 여기까지만 했다.
마치며
낸내는 눈누와 유사한 서비스를 제공하되, 광고를 넣지 않고 운영하는 것을 목표로 시작한 프로젝트였다. 이를 위해 GitHub Pages와 jsDelivr을 이용해 서비스를 구현했다. 또한, Service Worker와 Cache Storage를 이용해 폰트 파일을 캐싱하고, 가상 스크롤을 이용해 렌더링 속도를 향상했다.
낸내는 3주 동안 천 명 정도 접속했다. 눈누에 비해 사용자가 적었을 터이지만, 목적을 어느정도 이루었기에 만족스러웠다. 기존 서비스를 분석하고 이를 개선하는 과정에서 여럿 배우기도 했다. 이를 바탕으로 더 좋은 서비스를 만들어 보고 싶다.