Merged
Conversation
…f/web-image-optimization
📦 번들 분석 결과📊 번들 크기 요약
🔍 주요 청크 파일 (크기순)🤖 자동 생성된 번들 분석 리포트 |
⚡ Lighthouse 성능 분석 결과📊 전체 평균 점수
📈 측정 현황
📄 페이지별 상세 분석🏠 커뮤니티 페이지:
|
| 지표 | 점수 |
|---|---|
| 🚀 Performance | 67점 |
| ♿ Accessibility | 78점 |
| ✅ Best Practices | 96점 |
| 🔍 SEO | 100점 |
📊 상세 분석 보기
👥 창업자 페이지: /main/founder
| 지표 | 점수 |
|---|---|
| 🚀 Performance | 75점 |
| ♿ Accessibility | 87점 |
| ✅ Best Practices | 100점 |
| 🔍 SEO | 100점 |
📊 상세 분석 보기
🏡 홈 페이지: /main/home
| 지표 | 점수 |
|---|---|
| 🚀 Performance | 75점 |
| ♿ Accessibility | 91점 |
| ✅ Best Practices | 100점 |
| 🔍 SEO | 100점 |
📊 상세 분석 보기
🗺️ 지도 페이지: /main/maps
| 지표 | 점수 |
|---|---|
| 🚀 Performance | 75점 |
| ♿ Accessibility | 87점 |
| ✅ Best Practices | 100점 |
| 🔍 SEO | 100점 |
📊 상세 분석 보기
👤 프로필 페이지: /main/profile
| 지표 | 점수 |
|---|---|
| 🚀 Performance | 75점 |
| ♿ Accessibility | 88점 |
| ✅ Best Practices | 100점 |
| 🔍 SEO | 100점 |
📊 상세 분석 보기
🔗 전체 상세 분석 결과
📄 측정된 페이지
- /main/community
- /main/founder
- /main/home
- /main/maps
- /main/profile
모든 페이지에서 성능 측정이 완료되었습니다.
🤖 자동 생성된 Lighthouse 성능 리포트
DreamPaste
approved these changes
Jan 17, 2026
Comment on lines
+46
to
+50
| return getBlurDataURL(img.imageUrl, { | ||
| size: 10, | ||
| blur: 2, | ||
| quality: 40, | ||
| }); |
Member
There was a problem hiding this comment.
여러 값을 비교해보면서 속도와 UX 사이의 균형점을 생각해보면 좋을 것 같아요
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 개요
deviceSizes/imageSizes튜닝draggable=false)🗒 상세 설명
1. Next/Image 최적화 설정(WebP + sizes 튜닝)
핵심 기술 및 구현사항
apps/web/next.config.jsimages.formats: ['image/webp']로 WebP 우선 적용deviceSizes,imageSizes를 SoSo 레이아웃 기준으로 조정해서 불필요한 리사이즈/다운로드를 줄임domains/remotePatterns유지 및 확장2. SSR blurDataURL 생성 유틸 추가 + 상세 슬라이더 전체 이미지 적용
핵심 기술 및 구현사항
apps/web/src/utils/getBlurDataURL.ts신규 추가server-only+sharp기반으로data:image/webp;base64,...형태로 반환apps/web/src/app/main/community/freeboard/[freeboardId]/page.tsxpost.images전체를 대상으로Promise.all로 blurDataURL 배열 생성blurImageUrls를ClientPage로 prop 전달ClientPage → FreeboardDetail → ImageSlider로blurDataUrlsprop drillingapps/web/src/components/ImageSlider.tsxplaceholder={blurDataUrls?.[idx] ? 'blur' : 'empty'}blurDataURL={blurDataUrls?.[idx]}→ 슬라이드 전체 이미지에 블러 placeholder 적용
사용 예시
3. 깨진 이미지도 최대한 블러 생성되도록 보강
핵심 기술 및 구현사항
sharp(input, { failOn: 'none' })적용undefined반환으로 placeholder만 스킵되도록 처리4. 슬라이더 UX 개선
핵심 기술 및 구현사항
priority적용 (초기 로딩 개선)draggable={false}적용으로 슬라이더 조작 중 이미지 드래그 UX 이슈 방지 -> 확인 부탁드립니다5. pnpm 10 적용 및 락파일 재생성(+ 소규모 설정)
핵심 기술 및 구현사항
chore: pnpm 10 적용 및 lockfile 재생성apps/web/.eslintrc.cjs에서src/generated/**ignore 추가📸 스크린샷 (추가예정)
AS-IS
TO-BE
🔗 이슈
closes #
✅ 체크리스트
🧪 테스트 방법
/main/community/freeboard/[id]진입 시 슬라이더 이미지 placeholder blur 적용 확인blurDataUrls[idx]) 정상 동작 확인/_next/image응답 포맷(WebP/JPEG fallback) 확인pnpm i및 dev 실행 확인📝 추가 노트
apps/web/next.config.jsapps/web/src/utils/getBlurDataURL.tsapps/web/src/app/main/community/freeboard/[freeboardId]/page.tsxapps/web/src/components/ImageSlider.tsx후속 작업