반응형 이미지, 이제 신경 쓰지 않아도 될까요?

웹 개발을 좀 해보셨다면 srcset, sizes, <picture> 같은 태그 때문에 머리 아팠던 경험 한 번쯤은 있으실 거예요. "모바일에서는 작은 이미지, 데스크톱에서는 큰 이미지를 내려보내야 한다"는 규칙 때문에 HTML이 점점 복잡해지고, 이미지 하나 넣는 데 코드가 열 줄씩 늘어나곤 했거든요. 그런데 최근 piccalil.li 블로그에 올라온 "반응형 이미지의 종말"이라는 글이 흥미로운 관점을 던졌어요. 이제 이 복잡한 마크업은 필요 없을지도 모른다는 거예요.

왜 우리는 반응형 이미지로 고생했을까

반응형 이미지라는 개념이 본격적으로 표준이 된 건 2014년 무렵이에요. 그 전까지는 이미지 하나를 전체 크기로 받아다가 CSS로 늘이거나 줄여서 쓰는 게 일반적이었어요. 근데 모바일 환경이 폭발적으로 커지면서 문제가 생겼어요. 아이폰에 맞춘 작은 이미지만 있으면 레티나 디스플레이에서 흐릿하게 보이고, 4K 모니터용 큰 이미지를 내려보내면 3G 모바일 사용자는 로딩이 한참 걸리죠.

그래서 브라우저에게 "이 화면에서는 이 이미지, 저 화면에서는 저 이미지"라고 알려주는 방법이 도입됐어요. srcset에 여러 해상도의 이미지 URL을 쭉 나열하고, sizes로 CSS 뷰포트 크기별로 이미지가 얼마나 크게 보일지 알려주는 식이에요. 여기에 아트 디렉션(art direction, 화면 크기별로 구도 자체를 바꾸는 기법)까지 필요하면 <picture> 태그까지 써서 "모바일에서는 세로 크롭, 데스크톱에서는 가로 크롭 이미지"를 분리해야 했어요. 마크업이 금방 20줄 넘는 괴물이 되곤 했죠.

무엇이 바뀌었나

저자가 주장하는 핵심은, 최근 몇 년간 웹 플랫폼이 엄청나게 발전해서 이 복잡함의 대부분이 필요 없어졌다는 거예요. 가장 큰 변화는 이미지 포맷이에요. AVIF와 WebP 같은 현대 포맷은 JPEG 대비 30~50% 작은 용량으로 같은 품질을 낼 수 있거든요. 이미지 하나로 여러 해상도를 따로 준비하는 수고를 상당 부분 덜어주는 셈이에요.

두 번째는 CSS의 발전이에요. clamp() 함수로 최솟값, 선호값, 최댓값을 한 줄로 지정할 수 있고, aspect-ratio 속성으로 이미지 비율을 미리 예약해서 레이아웃 시프트(CLS, 페이지가 로딩되면서 요소들이 튀어다니는 현상)도 방지할 수 있어요. 컨테이너 쿼리(@container)가 도입되면서 부모 요소 크기에 따라 스타일을 바꿀 수도 있고요.

세 번째는 이미지 CDN의 일반화예요. Cloudinary, Imgix, Vercel Image Optimization 같은 서비스가 URL 하나만 받아서 요청하는 기기에 맞게 자동으로 최적 포맷과 크기를 서빙해줘요. 개발자가 일일이 여러 사이즈 이미지를 준비할 필요가 없는 거죠.

업계 흐름에서 보면

이 논의는 사실 혼자 나온 게 아니에요. Chrome은 이미 "클라이언트 힌트(Client Hints)"라는 헤더 기반 협상 방식을 밀고 있어요. 브라우저가 서버에게 "나는 지금 DPR 2인 400픽셀 화면이야"라고 알려주면 서버가 알아서 맞는 이미지를 내려주는 방식인데, 이러면 HTML이 깔끔해져요. Next.js의 <Image> 컴포넌트나 Nuxt의 <NuxtImg>도 내부적으로 이런 최적화를 자동으로 해주고 있어요.

반대 시각도 있어요. 여전히 아트 디렉션이 필요한 경우—뉴스 사이트에서 모바일용 세로 크롭과 데스크톱용 가로 크롭을 완전히 다르게 쓰고 싶은 경우—<picture> 태그는 대체 불가능해요. 자체 호스팅을 고집하는 팀에게는 여전히 srcset 관리가 필요하고요. 그러니 "종말"이라는 표현은 조금 과장이고, 정확히는 "일상적인 사용 사례에서는 더 이상 신경 쓸 필요가 없어졌다" 정도가 맞겠죠.

한국 개발자에게 주는 메시지

실무에서 Next.js나 Nuxt 같은 프레임워크를 쓰고 계시다면 이미 많은 부분이 자동화돼 있을 거예요. 직접 srcset을 손으로 쓰고 있다면, 이참에 프레임워크의 이미지 컴포넌트로 옮기거나 Cloudflare Images 같은 CDN을 붙여보는 걸 추천드려요. 한국은 네트워크 환경이 좋은 편이라 이미지 최적화의 가치를 간과하기 쉬운데, 모바일 LTE 음영지역이나 해외 트래픽까지 생각하면 여전히 중요한 영역이에요.

또 하나, Core Web Vitals에서 LCP(Largest Contentful Paint, 가장 큰 콘텐츠가 그려지는 시간)가 중요한 지표인데, 이게 대부분 이미지 로딩 속도에 좌우돼요. 구글 검색 랭킹에도 영향을 주니까 "반응형 이미지 안 해도 되네" 하고 손 놓기보다는, 어떤 도구가 나를 대신해주고 있는지 한 번쯤 점검해보는 게 좋아요.

마무리

정리하면, 반응형 이미지의 복잡한 마크업이 사라지는 게 아니라 플랫폼과 도구가 그 복잡함을 숨겨주는 방향으로 가고 있다는 거예요. 여러분은 어떤 방식으로 이미지 최적화를 하고 계신가요? 여전히 손으로 srcset을 관리하는 쪽인가요, 아니면 프레임워크나 CDN에 맡기는 쪽인가요?