[Chore] 이미지 로딩 및 렌더링 공통 가이드 적용 (전체 페이지)

[bae-suho]

문제 요약

• Presigned URL 기반 S3 이미지 사용으로 캐시 활용이 어려움
• 대용량 원본 이미지가 그대로 렌더링되어 네트워크 페이로드 과다
• <img>와 next/image 사용이 혼재되어 이미지 처리 방식 불일치
• LCP 이미지 우선순위 미정의
• width / height 미지정으로 CLS 발생 가능
• Mobile First 환경 대비 이미지 전략 부재

---

Lighthouse 주요 지표

• Avoid enormous network payloads
• Use efficient cache lifetimes
• LCP request discovery
• Layout shift culprits
• CLS 관련 경고 다수 페이지에서 확인

---

원인 분석 (Lighthouse 기준)

Presigned URL 기반 이미지 구조

• S3 Presigned URL 특성상 캐시 효율 저하
• 목록/상세/뷰어 구분 없이 동일 리소스 사용
• 재방문 시 동일 이미지 반복 다운로드

이미지 포맷 및 크기 문제

• PNG / JPG 원본 이미지 직접 렌더링
• 썸네일/미리보기 전략 부재
• 모바일 환경에서도 고해상도 이미지 사용

이미지 컴포넌트 사용 불일치

• 일부 페이지만 next/image 사용

  • /signin (로고)
  • /mypage (프로필 이미지)

• 주요 컴포넌트는 <img> 사용

  • ImageGrid
  • ImageViewerModal
  • HomeNoteCard

LCP 및 CLS 제어 미흡

• LCP 후보 이미지 정의되지 않음
• 이미지 영역 사전 공간 확보 부족
• 동적 이미지 로딩 시 레이아웃 이동 발생 가능

---

개선 작업 (Action Items)

이미지 컴포넌트 기준 정립

• 신규 이미지 렌더링은 next/image를 기본 사용

• 기존 <img> 기반 컴포넌트 점진적 교체

  • ImageGrid
  • ImageViewerModal
  • HomeNoteCard

LCP 이미지 가이드 (Mobile First)

• 페이지별 LCP 후보 1개로 제한

• LCP 이미지는 다음 기준 적용

  • priority={true}
  • eager loading

• 초기 HTML에서 LCP 리소스 노출 보장

Lazy Loading 정책

• LCP 이미지 제외 전부 lazy loading

• 목록 페이지:

  • viewport 외 이미지 요청 지연

• Modal 내부 이미지:

  • 오픈 시점에 로딩

이미지 크기 및 CLS 방지

• 모든 이미지에 width / height 명시
• 메타데이터 기반 렌더 영역 사전 확보
• Skeleton 또는 placeholder 적용

Presigned URL 사용 가이드

• Presigned URL은 뷰어 목적에 한정
• 목록/썸네일은 캐시 가능한 리소스 사용 권장
• 동일 이미지 반복 렌더링 시 재요청 최소화

외부 CDN 이미지 (OAuth)

• Google / Kakao 이미지 next/image remotePatterns 등록
• fallback 이미지 제공
• 원본 해상도 그대로 렌더링 금지

---

완료 기준 (Acceptance Criteria)

• 전 페이지 Lighthouse Performance ≥ 90
• CLS ≤ 0.1 유지
• LCP request discovery 경고 제거
• 모바일 기준 이미지 네트워크 전송량 감소
• 이미지 처리 방식이 컴포넌트 단위로 일관됨

---

참고

• Lighthouse Insights:

  • Avoid enormous network payloads
  • Use efficient cache lifetimes
  • LCP request discovery
  • Layout shift culprits