next.js Image 프로젝트 맞춤 최적화

[linear]

개요

Next.js 기본 <Image> 최적화를 SoSo 프로젝트 전반에 일관되게 적용하고,

레이아웃/브레이크포인트에 맞는 sizes, priority, 포맷 설정까지 튜닝해 이미지 성능을 개선한다.

---

배경

• 현재 상태
  • apps/web/package.json에서 next@14.2.3 사용 중
  • next.config.js에서 images.remotePatterns만 설정해
    • picsum.photos
    • k.kakaocdn.net
    • dreampaste-soso-image-storage.s3.ap-northeast-2.amazonaws.com/freeboard/**
      를 Next 이미지 최적화 파이프라인(리사이즈·WebP/AVIF 변환·캐싱)에 태워 사용 중
  • 대부분의 이미지에서 next/image를 사용해 기본 리사이즈·지연 로딩·CLS 방지·캐싱은 받고 있음
• 하지만,
  • sizes가 비어 있는 컴포넌트가 많고
  • priority가 꼭 LCP에 필요한 이미지에만 제한되어 있지 않으며
  • 전역 images.formats, deviceSizes 튜닝 등은 아직 적용되지 않음

→ Next.js 기본 최적화는 잘 쓰고 있지만, 프로젝트 레이아웃에 맞춘 세부 튜닝이 부족한 상태.

---

목표

• SoSo 웹앱의 주요 이미지 경로에 대해

  • sizes 최적화,
  • priority 정리,
  • images.formats, deviceSizes 설정

  을 적용해 Next.js 이미지 최적화를 “프로젝트 맞춤형”으로 완전히 활용하는 것.

---

주요 작업

1) next.config.js 이미지 설정 튜닝

• apps/web/next.config.js에 images.formats 추가
  • 예: ['image/avif', 'image/webp']로 AVIF/WebP 우선 전략 적용
• images.deviceSizes, images.imageSizes를 SoSo 레이아웃/브레이크포인트에 맞게 설정
  • 예: deviceSizes: [360, 768, 1024, 1280, 1440] 등
• 추후 추가될 이미지 도메인에 대비해 remotePatterns 관리 규칙 간단히 주석/정리

2) 주요 컴포넌트 sizes 적용

다음 경로들을 중심으로, 레이아웃에 맞는 sizes를 명시한다.

• 카드/썸네일 영역
  • apps/web/src/app/(auth)/signup/components/SelectCard.tsx
  • 게시판/피드 카드 컴포넌트들 (자유게시판, 투표게시판 등)
• 프로필/아바타 영역
  • 프로필 이미지, 사용자 리스트 등

3) priority 정리 (LCP 기준으로 최소화)

• 현재 priority가 켜져 있는 컴포넌트들 점검
  • DefaultSomoon, LogoImage, CompleteImg 등
• 진입 시 LCP에 직접 관여하는 히어로/상단 대표 이미지 1~2개만 priority 유지
• 나머지 이미지는 기본 lazy 로딩으로 변경해 초기 네트워크 부하/페인트 병목 완화

※ 유저 업로드 이미지 LQIP 파이프라인(썸네일 기반 blur placeholder)은 별도 이슈에서 진행 예정.

[linear]

SOS-54

[github-actions]

🔒 조직 멤버 전용 기능

새로운 목표 옵션 추가는 조직 멤버만 사용할 수 있습니다.

조직 가입 문의는 관리자에게 연락해주세요! 👥

🤖 자동으로 확인되었습니다