[질문] 폰트 슬라이더의 변경을 실시간 반영하지 않은 이유

[spilist]

폰트 슬라이더 UI를 보고 저는 드래그하면 그것이 좌측 픽셀 숫자에 실시간으로 반영되고, 아래 렌더링 결과도 같이 바뀔 거라고 생각했는데요. (https://fonts.google.com/ 처럼)

지금처럼 끝까지 변경된 뒤 반영하도록 결정하신 이유가 궁금합니다. 퍼포먼스 때문인가요?

[Gumball12]

@spilist

안녕하세요.

처음에는 Virtual Scroll을 도입하지 않아 렌더링 된 모든 폰트에 대해 Font Size가 갱신되었습니다.
다만, 언급하신 대로 퍼포먼스 이슈가 발생되어 이후 실시간으로 변경되지 않게끔 구성했습니다.
(Virtual Scroll은 이 블로그의 중간 즈음 보이는 그림에서 잘 나타나 있습니다.)

지금은 Virtual Scroll을 도입하였으며, 실제로 Viewport에 보일 요소들만을 Dom Tree에 추가시키고 있습니다.
이제 실시간으로 Font Size가 갱신되도록 구성해도 퍼포먼스 이슈는 발생되지 않겠네요.
또한 좀 더 괜찮은 사용자 경험을 전달할 수 있을 것 같습니다.

해당 기능은 이번 주말 즈음 추가될 것 같습니다.
피드백에 감사드립니다!

[spilist]

이제 실시간 렌더링을 해도 성능 이슈가 미비하다면, 고정 텍스트 대신 https://fonts.google.com/ 처럼 유저가 타이핑해서 즉시 그 결과를 볼 수 있게 해주는 것도 좋아 보이는데 어떻게 생각하세요?

[Gumball12]

@spilist

Font Subset('다람쥐 헌 쳇바퀴') 부분을 말씀하시는 것이라면, 이 부분은 바꾸기에 현실적으로 2 가지 어려움이 있습니다.

• Blocking Time
• GitHub Pages Bandwidth Limitation

(1)
먼저 Blocking Time 입니다.

완성형(2350글자) 한글 폰트 파일은 최소한 1MB 이상의 크기를 갖고 있습니다.
이로 인해 종종 Fetch가 Blocked(또는 Pending) 되거나(#14),
콘텐츠를 보여주기까지 매우 오랜 시간이 걸리더라구요.

물론 이는 HTTP Cache Header를 이용할 수도 있겠지만,
현재 호스팅이 Static Assets만을 제공할 수 있는 GitHub Pages를 이용하고 있기에
현재로서는 불가능한 방법입니다.

따라서 폰트 파일 크기 자체를 줄이는 방식을 채택했고, 그 결과는 아래와 같습니다(Blocking Time).

Font Subset을 사용하지 않은 경우

Font Subset을 사용한 경우

약 5.7배 Blocking Time이 줄어들었으며, 실제 트래픽 또한 약 7.2배 가량 감소하는 효과를 보였습니다.

Font Subset을 사용하지 않은 경우

Font Subset을 사용한 경우

추가적으로 CacheStorage를 이용해 사용자 브라우저에 캐싱하는 방식을 취했으며,
첫 페이지 콘텐츠가 거의 바로 보여질 수 있도록 구성했습니다.

(2)
언급했듯이, 현재 GitHub Pages를 이용해 호스팅을 하고 있습니다.

GitHub Pages는 Soft 하게 한 달 100GB의 대역폭을 제공하고 있는데요,
Subset이 아닌 원본 폰트 파일을 제공하는 경우 이를 빠르게 소모할 것이라 판단했습니다.
(다만 jsDevlir CDN을 추가적으로 이용하고 있기에 이 Limitation이 실제로 적용될지는 잘 모르겠습니다. 아마 괜찮지 않을까 싶네요.)

'낸내'는 최대한 금전적인 비용이 발생되지 않도록 구성하고자 했기에 GitHub Pages를 이용했으며,
따라서 Font Subset은 바꾸기에 현실적으로 어렵지 않을까 싶습니다.

다만 두 번째 방법은 예상일 뿐이고, 첫 번째 또한 더 좋은 방법이 있다면 언제든지 개선할 의향이 있습니다.

글이 조금 길어졌네요 ㅎㅎ; 감사합니다!

[spilist]

정성스러운 답변 감사합니다.

폰트 서브셋을 사용하셨다는게, 전송되는 용량을 줄이기 위해 원본이 아닌 정확히 저 글자들만을 가져오게 하셨다는 거군요. 잘 이해했습니다.

욕심일 수도 있지만 리드미 어딘가에 이런 의사결정의 이유가 적혀있어도 좋지 않을까 싶네요.

감사합니다!