P0 즉시 (사용자 체감·대용량)
P1 단기 (구조·효율)
P2 개선 (품질·정합)
핵심 우선순위 요약
전체 발견 항목을 심각도순으로 정리했습니다. P0 5건만 처리해도 약 40MB 이상 절감과 즉각적인 LCP 개선이 가능합니다.
| 우선 | 영역 | 이슈 | 규모 | 예상 효과 | 난이도 |
|---|---|---|---|---|---|
| P0 | 이미지 | buyer-elec-sea.jpg 무압축 | 21 MB | 13–15 MB ↓ (WebP) | 낮음 |
| P0 | 이미지 | 래스터 내장 SVG 3종 (base64 PNG) | 4.9 MB | 3–4 MB ↓ | 중간 |
| P0 | 이미지 | 500KB 초과 PNG/JPEG 35개, WebP/AVIF 변형 없음 | 76+ MB | 25–35 MB ↓ | 높음 |
| P0 | 폰트 | Pretendard 정적 4종 + Variable 동시 로드 | 3.75 MB | 2.3 MB ↓ (Variable만) | 낮음 |
| P0 | 렌더링 | LCP 이미지에 priority 0건 | 8–10장 | LCP −300~800ms | 낮음 |
| P1 | 이미지 | raw <img> 5곳 — next/image 우회 | 5곳 | 동적 이미지 대역폭 −10~15% | 낮음 |
| P1 | 설정 | deviceSizes·imageSizes·minimumCacheTTL 미설정 | — | srcset 효율 +5~10% | 낮음 |
| P1 | 번들 | framer-motion·recharts 클라 번들 상주 | ~190 KB | 15–25 KB ↓ (dynamic) | 중간 |
| P1 | 폰트 | 한글 unicode-range 서브셋 미적용 | 748 KB | 300–400 KB ↓ | 중간 |
| P1 | SEO | 6개 로케일 hreflang 누락 | — | 다국어 SEO 정합 | 낮음 |
| P2 | 접근성 | alt="" 빈 대체텍스트 43곳+ | 43+ | a11y 준수 | 낮음 |
| P2 | CSS | safelist 광범위 + 색상 스케일 중복 | ~5–10 KB | 3–5 KB ↓ | 낮음 |
| P2 | 이미지 | Image sizes 미지정 45–50곳 | 45–50 | 모바일 srcset 낭비 ↓ | 중간 |
| P2 | 렌더링 | 'use client' 155/845 (18.3%) | 155 | 20–50 KB ↓ (RSC 전환) | 높음 |
01 이미지 & 시각 자산
public 151MB 중 절대다수가 이미지입니다. 단일 21MB JPEG, 래스터를 base64로 품은 "가짜 SVG", priority 부재가 핵심 3대 병목입니다.
1.1 상위 대용량 이미지 (Top 15)
| # | 파일 | 크기 | 포맷 | 예상 절감 |
|---|---|---|---|---|
| 1 | images/buyer-elec-sea.jpg | 21 MB | JPEG | 60–70% |
| 2 | images/buyer-med-us.png | 7.0 MB | PNG | 50–60% |
| 3 | images/buyer-elec-me.png | 5.4 MB | PNG | 50–60% |
| 4 | images/hero-bg.png | 4.9 MB | PNG | 50–60% |
| 5 | images/hero/hero-bg-new.png | 4.2 MB | PNG | 50–60% |
| 6–8 | buyer-it-us / buyer-it-jp / buyer-elec-us .png | 각 3.2 MB | PNG | 50–60% |
| 9 | images/buyer-fashion-sea.jpg | 3.0 MB | JPEG | 40–50% |
| 10–15 | buyer-med-jp / cover-ja / buyer-med-eu / buyer-it-eu / buyer-fashion-eu / industry-5 | 1.3–2.8 MB | PNG | 50–60% |
Top 15 합계 ≈ 76 MB → 보수적 절감 35–45 MB (45–60%)
1.2 P0 래스터 내장 SVG (가짜 벡터)
3개 SVG가 실제로는
<image xlink:href="data:image/png;base64,…"> 형태로 PNG를 통째로 품고 있습니다. SVG 확장자지만 벡터 이점이 전혀 없고 용량만 큽니다.| 파일 | 크기 | 내장 래스터 | 권장 |
|---|---|---|---|
| all-sales-one-platform.svg | 1.8 MB | PNG 1248×713 | 추출 → WebP 500–600KB |
| zero-manual-sales.svg | 1.7 MB | PNG 1344×768 | 추출 → WebP 500–600KB |
| find-buyers-globally.svg | 1.4 MB | 패턴+image 혼합 | 순수 벡터 재추출 or WebP |
1.3 P1 raw <img> — next/image 우회 5곳
62곳은 next/image 사용(양호)이나, 아래 5곳은 raw 태그라 AVIF/WebP 변환·srcset·lazy 혜택을 모두 잃습니다. 3곳은 alt="" 동반.
| 파일 | 라인 | 문제 |
|---|---|---|
| components/landing/PopupRenderer.tsx | 252 | 최적화 없음 + 빈 alt |
| components/admin/popups/PopupPreviewOverlay.tsx | 150 | 최적화 없음 + 빈 alt |
| components/admin/popups/PopupManager.tsx | 782 | 최적화 없음 + 빈 alt |
| components/analytics/ChatbotWidget.tsx | 1795 | 원격 URL, 최적화 없음 |
| pages/blog/rss.xml.tsx | 44 | RSS XML 내 — 최적화 불가(정상) |
1.4 P1 next.config 이미지 설정 공백
formats: ["image/avif","image/webp"]는 설정됨(양호). 다만 아래 3개 미설정으로 srcset이 비효율적입니다.
| 누락 | 영향 | 권장값 |
|---|---|---|
deviceSizes | Tailwind 브레이크포인트와 불일치 | [320,640,768,1024,1280,1536,1920] |
imageSizes | 대형 이미지 srcset 비최적 | 레이아웃별 명시 |
minimumCacheTTL | 브라우저 캐시 기본 60초 | 3600 이상 |
02 폰트 & 타이포그래피
next/font/local + display:swap은 잘 구성됨. 그러나 정적 4종과 Variable을 동시에 싣고, 한글 서브셋이 없어 ko 사용자가 3.75MB를 받습니다.
2.1 P0 폰트 파일 중복 (public/fonts/Pretendard/)
| 파일 | 크기 | 비고 |
|---|---|---|
| Pretendard-Bold.woff2 | 773 KB | weight 700 |
| Pretendard-SemiBold.woff2 | 767 KB | weight 600 |
| Pretendard-Medium.woff2 | 760 KB | weight 500 |
| Pretendard-Regular.woff2 | 748 KB | weight 400 |
| PretendardVariable.woff2 | 748 KB | 중복 — 전 weight 1파일 |
정적 4종(3.05MB) + Variable(748KB) = 3.75MB 동시 로드. Variable 단독이면 ~748KB → 약 2.3MB 절감.
src/utils/fonts.ts의 4-weight path 제거 후 Variable만 사용.2.2 폰트 로딩 설정 (src/utils/fonts.ts)
| 항목 | 상태 | 조치 |
|---|---|---|
display: "swap" | 양호 | FOIT 회피 — 유지 |
Noto CJK preload:false | 양호 | 비CJK 방문자에 미전송 — 유지 |
| 한글 unicode-range 서브셋 | P1 | U+AC00-D7AF 서브셋 → 300–400KB ↓ |
| Variable 미사용 | P0 | 정적 삭제, Variable 단독 → 2.3MB ↓ |
| LCP 폰트 preload | P2 | rel=preload 추가 시 한글 렌더 200–500ms ↓ |
03 번들 & 의존성
'use client' 155/845(18.3%). dynamic import 약 60곳 적용(양호)이나 무거운 시각화 라이브러리는 여전히 클라 상주.
| 의존성 | 대략(gzip) | 용도 | 조치 |
|---|---|---|---|
recharts | ~120 KB | 계산기·분석 차트 | P1 홈 불필요 → dynamic |
framer-motion | ~70 KB | 히어로·스크롤 애니 | P1 비핵심 애니 dynamic |
firebase-admin | ~35 KB | 서버 전용(추정) | 클라 누출 점검 |
embla-carousel-react | ~25 KB | 캐러셀 | P2 dynamic 후보 |
@anthropic-ai/sdk | ~50 KB | API(서버) | 클라 미포함 확인 |
04 CSS & 스타일링
tailwind.config.ts 508줄·14KB. Tailwind v3 기본 purge로 충분하나, 광범위 safelist와 색상 스케일 이중 명명이 미세 낭비.
| 항목 | 발견 | 절감 |
|---|---|---|
| 색상 스케일 중복 | legacy(01–09) + new(50–1000) 병존 | 3–5 KB |
| safelist 패턴 | /^p-\[.+\]$/ 등 임의값 강제 포함 | 2–3 KB |
| 커스텀 폰트 유틸 | .text-ko-a-* 60+ 유틸 | 1–2 KB |
05 렌더링 & 로딩 전략
히어로/배너 이미지에 priority가 단 한 곳도 없어 LCP가 지연됩니다. 서드파티 스크립트 로딩은 대체로 양호.
LCP 핵심:
priority=true 0건. 히어로 hero-bg.png(4.9MB)가 lazy 우선순위로 로드 → 추정 LCP 2.5–3.5s. priority + 경량화 시 1.8–2.2s 기대.| 항목 | 상태 | 조치 |
|---|---|---|
| LCP 이미지 priority | P0 | above-fold 이미지에 priority 부여 |
| GTM (@next/third-parties) | 양호 | hydration 후 로드 — 유지 |
| reCAPTCHA v3 | 양호 | provider lazy — 유지 |
'use client' 18.3% | P2 | 랜딩 30–50% RSC 전환 여지 |
06 캐싱 & 네트워크
ISR 8개 페이지 적절히 배치(홈 300s, 가이드 3600s). /public/images 캐시 헤더와 LCP preload만 보강하면 됩니다.
| 항목 | 상태 | 조치 |
|---|---|---|
| ISR 전략 | 양호 | 홈 300s·가이드 3600s 적절 |
/images Cache-Control | P2 | public, max-age=86400, immutable 추가 |
| Vary(locale) 헤더 | 양호 | 로케일 캐시 분리 — 유지 |
| LCP 이미지 preload | P2 | headers Link: rel=preload 고려 |
07 접근성 (a11y)
빈 alt=""가 raw img 3/5곳, Image 컴포넌트 43곳+. 스크린리더 정보 손실. 자동 axe/Lighthouse 감사 권장.
| 이슈 | 개수 | 심각도 |
|---|---|---|
raw <img> 빈 alt | 3/5 | P1 |
| Image 컴포넌트 빈 alt | 43+ | P2 |
| 장식 SVG aria-hidden 미점검 | 미상 | P2 |
08 SEO & 메타데이터
sitemap·robots·llms.txt·structured-data 모두 구비(양호). 6개 로케일 hreflang 부재가 유일한 P1.
| 항목 | 상태 | 비고 |
|---|---|---|
| sitemap.xml / robots.txt | 양호 | 존재 |
| llms.txt / llms-full.txt | 양호 | AI 에이전트 친화 |
| structured-data (schema.org) | 양호 | 존재 |
| hreflang (en·ko·ja·id·zh-CN·th) | P1 | alternate 링크 누락 — 추가 필요 |
실행 우선순위 로드맵
난이도·효과 기준 3단계. Phase 1만으로 전체 절감의 90% 이상을 확보합니다.
Phase 11–2일 · 빠른 승리
- Pretendard 정적 4종 삭제 → Variable 단독 2.3MB ↓
- 히어로/above-fold 이미지에
priority부여 LCP −300~500ms - 래스터 내장 SVG 3종 → PNG 추출 후 WebP 3.3–4MB ↓
- 500KB+ 이미지 35개 WebP/AVIF 일괄 변환 25–35MB ↓
Phase 22–4일 · 중간
- raw
<img>5곳 → next/image (priority·sizes·alt) - next.config
deviceSizes·imageSizes·minimumCacheTTL추가 - Pretendard 한글 unicode-range 서브셋 300–400KB ↓
- framer-motion·recharts dynamic import 15–25KB ↓
Phase 33–5일 · 장기
- 6개 로케일 hreflang 추가 (다국어 SEO)
- 빈
alt=""43곳+ 의미 있는 텍스트로 채움 'use client'30–50개 Server Component 전환 20–50KB ↓- Tailwind 색상 스케일 통합 3–5KB ↓