---
# System prepended metadata

title: '낸내: 광고 없이 상업적으로 이용할 수 있는 한글 폰트 모음 사이트'
tags: [경험]

---

:::warning
2022년 1월경 작성했던 글을 다듬어 올린 글
:::

## TL;DR

- "눈누"라는 한글 폰트 웹 사이트는 광고가 많고, 퍼포먼스가 떨어진다.
- "낸내"라는 이름의 서비스를 만들어, 광고 없이 운영하고, 퍼포먼스를 개선시켰다.
- "낸내"는 GitHub Pages와 jsDelivr을 이용해 서비스를 구현하고, Service Worker와 Cache Storage를 이용해 폰트 파일을 캐싱하고, 가상 스크롤을 이용해 렌더링 속도를 향상했다.
- "낸내"는 3주간의 기간 동안 960명의 사용자가 접속했다.

## 서론

"눈누" 라는 이름의 서비스가 있다.

상업적인 용도로 사용이 가능한 무료 한글 폰트를 소개해 주는 웹 사이트인데, 꽤 유용해서 나도 종종 사용하곤 했었다. 다만 두 가지 불편한 점이 있었다:

- 광고가 너무 많음
- 떨어지는 퍼포먼스

이 글에서는 위에 대한 접근 및 해결 방법과 함께, 이를 구현한 "낸내"라는 이름의 서비스를 소개하고자 한다.

## 불편한 점 그리고 해결

### 광고

정말 좋은 서비스지만 광고가 너무 많다. 확인한 바로는 폰트와 관련된 페이지에서만 8개. 그중 하나(4번)는 폰트 상세 페이지로 이동하는 중간에 흐름을 막고 나타나는 광고였다.

<figure style="text-align: center; font-size: 12px">
    <div style="display:grid; grid-template-columns: 1fr 1fr; gap: 4px;">
        <img src="https://hackmd.io/_uploads/HJuczNTeT.png" alt="Ad (1)">
        <img src="https://hackmd.io/_uploads/Hk3UQN6eT.png" alt="Ad (2)">
        <img src="https://hackmd.io/_uploads/Hk6Om46g6.png" alt="Ad (3)">
        <img src="https://hackmd.io/_uploads/SkggQVaxa.png" alt="Ad (4)">
        <img src="https://hackmd.io/_uploads/Skvx4ETx6.png" alt="Ad (5)">
    </div>
    <figcaption style="margin-top: 4px"><span>눈누의 광고들</span></figcaption>
</figure>

무언가 지속적인 비용이 발생하고 있는 것일까? 눈누는 자원봉사와 같은 형태로 운영되기에 인건비를 따지는 것은 딱히 의미가 없다. 도메인 비용인가? 이 역시 큰 문제는 되지 않을 것이다. 매년 n 만원 수준이기에 광고가 없어도 충분히 운영이 가능하다.

나는 눈누가 서버 비용에서 부담이 있었던 것은 아닐지 생각했다. 사용자가 적지 않은 서비스이기에, 서버 비용이 어느 순간 사비로 해결할 수 있는 수준은 넘었을 것이리라. 그리고 이를 해결하기 위해 광고를 넣은 것이 아닐까. 이해는 되었지만 좀 더 나은 대안이 있지는 않았을까 하는 아쉬움이 있었다. 기술적으로 풀 수는 없었을까?

결국 이 생각이 새로운 서비스를 만드는 발화점이 되었다. "눈누와 같은 서비스를 만들되, 광고를 넣지 않고 운영해 보자."

사실 크게 어렵지는 않았다. GitHub Pages를 이용해 정적 웹 사이트를 만들고, 폰트 파일을 jsDelivr을 이용해 CDN으로 제공하면 된다. 다만 GitHub Pages의 트래픽 제한 정책을 고려해 폰트 서브셋을 이용해 제공했다.

<figure style="text-align: center; font-size: 12px">
    <img src="https://hackmd.io/_uploads/r14jNxk-T.png" alt="Blocing Time">
    <figcaption style="margin-top: 4px"><span>Blocking Time</span></figcaption>
</figure>

<figure style="text-align: center; font-size: 12px">
    <img src="https://hackmd.io/_uploads/r1berlyW6.png" alt="네트워크 트래픽">
    <figcaption style="margin-top: 4px"><span>네트워크 트래픽</span></figcaption>
</figure>

결과가 나쁘지 않아 만족스러웠다.

### 퍼포먼스

눈누는 크게 두 가지의 퍼포먼스 개선점이 있다:

- 새로고침 시마다 필요한 폰트 파일을 서버에서 다시 다운로드
- 다수의 폰트를 렌더링하게 되면 브라우저가 느려짐

폰트 파일은 변경될 일이 거의 없기 때문에, 새로고침 시마다 다운로드하는 것은 비효율적이다. 이를 브라우저에 캐싱하면 사용자의 데이터 사용량을 줄일 수 있고, 더 빠른 폰트 로딩 속도도 제공할 수 있을 것이다.

<figure style="text-align: center; font-size: 12px">
    <img src="https://hackmd.io/_uploads/rkDHre1bp.png" alt="캐싱 여부 비교">
    <figcaption style="margin-top: 4px"><span>캐싱 여부 비교</span></figcaption>
</figure>

이는 Service Worker와 Cache Storage를 이용해 해결할 수 있다. Service Worker는 브라우저와 웹 사이트 사이에서 동작하는 프록시 서버로, 웹 사이트의 콘텐츠를 캐싱하고 브라우저의 요청을 대신 처리할 수 있다. Cache Storage는 Service Worker가 캐싱하는 콘텐츠를 저장하는 공간이다.

다음으로, 다수의 폰트를 렌더링하는 것은 이젠 이미 잘 알려진 가상 스크롤을 이용해 해결할 수 있다. 눈누는 이를 적용하지 않아 폰트가 많아질수록 렌더링 속도가 느려지곤 했었다. 이는 모바일 환경에서 더욱 두드러진다.

## 낸내

<figure style="text-align: center; font-size: 12px">
    <img src="https://hackmd.io/_uploads/rJB8hgal6.png" alt="썸네일">
    <figcaption style="margin-top: 4px"><span><a href="https://github.com/naen-nae/naen-nae/" target="_block">[GitHub]</a> <a href="https://naen-nae.shj.rip/" target="_block">[Web]</a> <a href="https://www.figma.com/file/BwxiIqhzNzx523AQyCrWBk/naen-nae" target="_block">[Figma]</a></span></figcaption>
</figure>

낸내는 눈누와 유사한 서비스를 제공한다. 폰트를 다운로드 받을 수 있고, 폰트를 미리보기 할 수도 있다. 다만 낸내는 폰트 파일을 캐싱해 새로고침 시마다 다운로드하지 않는다. 또한, 다수의 폰트를 렌더링할 때 가상 스크롤을 이용해 렌더링 속도를 향상했다.

<figure style="text-align: center; font-size: 12px">
    <img src="https://hackmd.io/_uploads/HkxpSe1b6.png" alt="1주 차 GA" width="500">
    <figcaption style="margin-top: 4px"><span>1주 차 GA</span></figcaption>
</figure>

배포 1주 차에는 120명의 사용자가 접속했다.

<figure style="text-align: center; font-size: 12px">
    <img src="https://hackmd.io/_uploads/HJlv8eyZ6.png" alt="에브리타임 홍보" width="300">
    <figcaption style="margin-top: 4px"><span>에브리타임 홍보</span></figcaption>
</figure>

<figure style="text-align: center; font-size: 12px">
    <img src="https://hackmd.io/_uploads/Hkp1UekZa.png" alt="2주 차 GA" width="500">
    <figcaption style="margin-top: 4px"><span>2주 차 GA</span></figcaption>
</figure>

배포 2주 차에는 에브리타임에 홍보했었고, 300명의 사용자가 접속했다.

<figure style="text-align: center; font-size: 12px">
    <img src="https://hackmd.io/_uploads/rkABwxy-p.png" alt="디스콰이엇 홍보" width="400">
    <figcaption style="margin-top: 4px"><span>디스콰이엇 홍보</span></figcaption>
</figure>

<figure style="text-align: center; font-size: 12px">
    <img src="https://hackmd.io/_uploads/BkTPPlyWp.png" alt="긱뉴스 홍보" width="400">
    <figcaption style="margin-top: 4px"><span>긱뉴스 홍보</span></figcaption>
</figure>

<figure style="text-align: center; font-size: 12px">
    <img src="https://hackmd.io/_uploads/SkbyteJZa.png" alt="트위터" width="400">
    <figcaption style="margin-top: 4px"><span>트위터</span></figcaption>
</figure>

3주 차에는 디스콰이엇과 긱뉴스에서 홍보를 진행했었다(트위터에서도 언급되었다). 510명의 사용자가 접속했다.

## 결론

낸내는 눈누와 유사한 서비스를 제공하되, 광고를 넣지 않고 운영하는 것을 목표로 시작한 프로젝트였다. 이를 위해 GitHub Pages와 jsDelivr을 이용해 서비스를 구현했다. 또한, Service Worker와 Cache Storage를 이용해 폰트 파일을 캐싱하고, 가상 스크롤을 이용해 렌더링 속도를 향상했다.

낸내는 3주간의 기간 동안 960명의 사용자가 접속했다. 눈누에 비해 사용자가 적지만, 광고를 넣지 않고 운영하는 것을 목표로 시작한 프로젝트였기에 만족스럽다. 기존 서비스를 분석하고, 이를 개선하는 과정에서 많은 것도 배웠다. 이를 바탕으로 더 좋은 서비스를 만들어 보고 싶다.
