Next.js 컨퍼런스(2022) 사진 350장 이상을 Lighthouse 거의 만점과 뛰어난 Core Web Vitals를 유지하면서 아름답게 제공하기 위해 필드 엔지니어 Hassan El Mghari가 적용한 성능 최적화 기법을 코드와 함께 공개했다. 대용량 이미지 갤러리에서 빠른 로딩·부드러운 애니메이션·접근성을 동시에 달성하는 구체적인 구현 패턴을 다룬다.
핵심 포인트- Cloudinary CDN + 뷰포트별 해상도 분리: 그리드(720×480), 모달(1280×853), 개별 페이지(2560×1706)로 불필요한 데이터 전송 차단
- Base64 blur placeholder: imagemin으로 이미지를 최소 크기로 압축 후 base64 인코딩해 HTML에 직접 embed, 추가 네트워크 요청 없이 로딩 blur 제공
- GPU 가속 트릭: `transform: translate3d(0,0,0)`으로 실제 이동 없이 일부 기기의 GPU 렌더링 레이어 강제 활성화
- 로딩 전략: 첫 4장 eager, 나머지 lazy loading + `sizes` prop으로 반응형 이미지 최적화
- Shallow routing: Link `as` prop으로 URL 마스킹(`/?photoId=N` → `/p/N`), `shallow` prop으로 모달 전환 시 data refetch 방지
- AI alt 태그 자동화: Cloudinary 전체 이미지를 alt-text generator API에 전달해 생성된 캡션을 메타데이터로 역저장 (수동 검토 필수)
상세 정리- 350장 이상의 4K 고해상도 사진을 메인 그리드, 모달, 개별 동적 라우트 세 가지 뷰에서 최적 품질로 제공하는 것이 목표
- 뷰포트별 해상도: 그리드 720×480px, 모달 대형 1280×853px, 개별 페이지 2560×1706px — Cloudinary API 쿼리 파라미터로 요청 시 서버사이드 변환
- 빌드 타임 데이터 fetch: `getStaticProps`로 전체 이미지를 빌드 시 가져와 클라이언트 런타임 요청 부담 제거
- blur placeholder 생성: `imagemin` + `imagemin-jpegtran`으로 이미지를 최소 크기 압축 후 base64 변환, Next.js Image의 `blurDataURL` prop에 주입해 HTML에 직접 embed
- GPU 렌더링: `style={{ transform: "translate3d(0, 0, 0)" }}`은 물리적 이동 없이 일부 기기에서 CSS 합성 레이어를 생성, GPU 렌더링 유도
- loading 분기: `id < 4`인 초반 4장만 eager loading, 나머지는 lazy loading으로 초기 페이지 로드 집중 최적화
- `sizes` prop: 640px/1280px/1536px 브레이크포인트별 이미지 너비를 명시해 Next.js가 정확한 크기의 srcset을 선택하도록 안내
- URL 마스킹 + shallow routing: Next.js Link의 `as` prop으로 `/p/${id}`로 표시, `shallow` prop으로 모달 열릴 때 데이터 재요청 방지
- Framer Motion으로 모달 전환 애니메이션 선언적 구현, 모바일 스와이프는 `react-swipable` 사용
- 스크롤 복원: 마지막으로 본 사진 id를 상태로 추적, 그리드로 돌아올 때 `scrollIntoView({ block: "center" })`로 해당 요소로 복원
- AI alt 태그: Cloudinary 검색 API로 전체 이미지 목록 조회 후 alt-text generator API 호출, 응답 캡션을 Cloudinary 메타데이터로 업데이트
- Headless UI 사용으로 접근성 기본 확보, OG 이미지 자동 생성으로 소셜 공유 시 해당 사진 미리보기 제공
- 최종: Lighthouse 거의 만점, 뛰어난 Core Web Vitals, 수백 장 이미지에서도 부드러운 사용자 경험
왜 읽나Next.js에서 대량 이미지를 성능 저하 없이 제공하는 실전 구현 패턴을 구체적인 코드와 함께 배울 수 있다. blur placeholder, GPU 가속 트릭, shallow routing, 스크롤 복원 등 여러 UX 최적화 기법을 실전 맥락에서 이해하고 싶은 프런트엔드 개발자에게 직접 적용 가능한 레퍼런스다.
Vercel Blog·
LINE Engineering·