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

TLDR(요약)

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

• AVIF 인코딩은 느리기 때문에, Framer는 stale-while-revalidate 전략을 적용했습니다. 초기 이미지 요청은 빠른 로딩을 위해 WebP를 제공하고, 이후 요청에서는 WebP를 제공하면서 AVIF 변환을 실행합니다.

• AVIF가 WebP보다 성능이 떨어지는 경우가 있어, 일부 이미지에서는 여전히 WebP를 사용합니다.

AVIF 지원: 더 작아진 이미지

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

문제: 느린 AVIF 인코딩

Framer에서는 첫번째 요청 시 모든 이미지를 최적화합니다. 이후 최적화된 이미지는 CDN에 캐싱되어 재사용됩니다.

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

“1~2초면 괜찮은 거 아닌가?”라고 생각할 수 있지만, 연구 결과 사람들은 100ms만 지나도 ‘즉각적이지 않다’라고 느낍니다. Framer에서 이미지 캐시 적중률은 약 98%입니다. 이 문제를 무시하고 AVIF로 전환하게 된다면 즉, 50번째 이미지마다 1~2초가 걸린다면 이는 분명한 사용자 경험 저하로 이어질 수도 있겠죠.

이 문제를 해결하기 위해 Framer의 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로 제공합니다. AVIF 변환 속도가 느리기 때문에 두 번째 요청에 응답하는 데 몇 초가 걸릴 수 있습니다. 하지만 stale-while-revalidateCDN(CloudFront) 덕분에 변환이 완료될 때까지 WebP 이미지를 계속 제공합니다.

• 두 번째 요청에만 헤더가 있어서, 첫 번째 요청과 If-None-Match헤더를 통해 구분할 수 있습니다.

• AVIF가 준비되면 Cache-Control: max-age=31536000과 함께 반환되어 CDN이 이미지를 캐싱하고 이를 오랫동안 제공할 수 있습니다.

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

언제 AVIF를 사용하지 않을까?

AVIF는 이제 대부분의 이미지에 기본 포맷으로 쓰지이지만, WebP를 계속 사용해야 하는 상황이 있습니다.

• 손실되지 않은 이미지 : AVIF의 무손실 압축은 완전한 무손실 압축이 아니며 WebP보다 성능이 떨어집니다. 따라서 손실되지 않은 이미지에는 WebP를 계속 사용해야 합니다.

• 애니메이션 이미지 : 현재 사용 중인 이미지 최적화 라이브러리는 애니메이션 AVIF 이미지를 지원하지 않으므로 , 계속해서 WebP를 사용해야 합니다.

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