본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

TLDR(요약)

Framer는 이제 AVIF를 지원하며, WebP 대비 이미지 크기를 약 20% 줄일 수 있습니다. 하지만 AVIF가 완벽한 것은 아닙니다.

AVIF 인코딩 속도가 느리기 때문에, Framer는 stale-while-revalidate라는 캐싱 방식을 clever하게 활용했습니다. 첫 번째 요청에서는 빠른 로딩을 위해 WebP를 제공하고, 이후 요청에서 AVIF 변환을 진행하면서도 여전히 WebP를 제공하는 방식입니다. 또한, AVIF가 WebP보다 품질이 떨어지는 경우도 있어, 일부 이미지에는 여전히 WebP를 사용하고 있습니다.

AVIF 지원: 더 작아진 이미지

2024년 5월, Framer는 AVIF 지원을 시작했습니다. 현재 Framer의 모든 이미지는 기본적으로 AVIF로 제공되며, 이 덕분에 평균적으로 약 20% 더 작은 용량을 달성했습니다. 그러나 이 새로운 포맷을 통합하는 과정에는 어려움이 있었습니다. 가장 큰 문제는 AVIF로 변환하는 과정이 매우 느리다는 점이었죠.

문제: 느린 AVIF 인코딩

Framer에서는 이미지 요청이 들어오면 즉시 최적화 작업을 수행합니다. 그 후 최적화된 이미지를 CDN에 캐싱합니다.

이 방식은 일반적이고 효율적이지만, 단점이 있습니다. 캐시에 없는 이미지를 첫번째로 요청하면 변환과 리사이징이 동시에 이뤄져야 하기 때문에 후에 요청을 하는 것보다 더 오랜 시간이 걸립니다. WebP의 경우 변환에 보통 100~300ms가 추가되며, 이정도는 감내할 수 있는 수준입니다. 하지만 AVIF는 1~2초가 걸리게 됩니다.

Note: "1~2초면 충분히 빠른 거 아닌가요?" 라고 생각할 수 있지만, 사용자 경험 연구에 따르면 100ms 이상만 돼도 즉각적이지 않다고 느낍니다.

Framer에서 이미지 캐시 적중률은 약 98%입니다. 만약 아무 조치 없이 AVIF로만 전환했다면, 50번째 이미지마다 몇 초씩 지연되는 상황이 발생했을 것입니다. 이는 사용자 경험에 치명적이라고 판단했고, 이를 해결하기 위해 Jacob이 아이디어를 내고 Piotr가 구현한 전략이 바로 stale-while-revalidate입니다.

해결책: Stale-While-Revalidate

stale-while-revalidate는 캐싱 설정 옵션 중 하나로, Cache-Control 헤더에 추가됩니다. 이 값은 만료된 리소스를 CDN이 얼마나 더 오래 제공할 수 있는지를 정의합니다

Cache-Control: max-age=3600, stale-while-revalidate=60
               ↑ how long a file can be cached for
                             ↑ how long a CDN can keep serving
                               the file after max-age expires

max-age=3600 → 파일이 캐시되는 기본 시간
stale-while-revalidate=60 → 만료된 후에도 60초 동안 기존 파일 제공 가능
Framer는 이 방식을 활용해 AVIF 변환 속도의 문제를 풀었습니다.

1단계

첫번째 요청(WebP 제공)
첫 번째 요청에서는 AVIF 대신 WebP 이미지를 제공합니다.
그리고 헤더를 이렇게 설정합니다: Cache-Control: max-age=0, stale-while-revalidate=31536000

2단계

즉시 만료되는 WebP
max-age=0이므로 이 WebP 이미지는 즉시 만료됩니다. 이로 인해 CDN은 두 번째 요청을 원 서버로 전달합니다.

3단계

두 번째 요청(AVIF 변환)

• 두 번째 요청이 들어오면 서버는 AVIF로 변환된 이미지를 제공합니다. 이 과정은 수 초가 걸릴 수 있지만, stale-while-revalidate 덕분에 CDN(CloudFront)은 변환이 끝날 때까지 WebP 이미지를 계속 제공합니다.

• AVIF 변환이 끝나면 Cache-Control: max-age=31536000을 설정하여 CDN이 장기간 캐싱할 수 있도록 합니다.

이 방식 덕분에, 백그라운드에서 이미지를 제공하기 위한 별도의 큐잉 시스템을 만들 필요 없어졌습니다. 단순한 인프라 구조로 안정적인 성능을 유지할 수 있으며, 버그가 발생하지 않게 됩니다.

AVIF를 사용하지 않는 경우

현재 대부분의 이미지는 기본적으로 AVIF로 제공됩니다. 하지만 아래와 같은 상황에서는 여전히 WebP를 사용합니다.

• 무손실(Lossless) 이미지
  AVIF의 무손실 압축은 완벽한 무손실이 아니며, WebP보다 품질이 낮습니다. 따라서 무손실 이미지에는 WebP를 유지합니다.

• 애니메이션 이미지
  Framer가 사용하는 이미지 최적화 라이브러리가 애니메이션 AVIF를 지원하지 않기 때문에, 이 경우에도 WebP를 사용합니다.

본 글은 Framer 공식 블로그의 ‘How Framer does AVIF’를 번역·각색한 콘텐츠입니다.