Refactor/#81 LCP 성능 개선

[leeleeleeleejun]

#️⃣연관된 이슈

• [Refactor] LCP 성능 개선 #81

📝작업 내용

웹 성능 최적화, LCP를 개선하기 위해 웹 폰트 경량화 작업을 진행했습니다.

1. 폰트 서브셋(Subset) 적용

문제상황

• Lighthouse 성능 측정 결과, LCP(Largest Contentful Paint) 시간이 약 6초 소요되며 'Poor' 등급이 나왔습니다.
• 네트워크 분석 결과, 사용 중인 PretendardVariable.woff2 파일의 용량이 비정상적으로 큰 약 6.7MB로 확인되어, 폰트 다운로드 지연이 렌더링 병목의 주원인임을 파악했습니다.

해결 방법

1. 파일 정상화: 용량이 비대한 기존 파일을 표준 용량의 원본 파일로 교체하여 1차적으로 용량을 확보했습니다. (6.7MB → 2.1MB)
2. 서브셋(Subset) 적용: 웹 환경에 최적화하기 위해 실생활에서 주로 쓰이는 글자(한글 2,350자 + 영문 + 필수 기호)만 포함된 Subset 버전으로 최종 교체했습니다. (2.1MB → 1.4MB)

결과

• 폰트 파일 용량 총 약 79% 절감 (6.7MB → 1.4MB)
• LCP 시간 단축: 5.9s → 1.6s (약 73% 성능 향상)

스크린샷 (선택)

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

Summary by CodeRabbit

릴리스 노트

• Refactor
  • 네비게이션 링크 구성을 최적화했습니다.
  • 폰트 로딩 설정을 다중 가중치 구성으로 업데이트했습니다.
  • 모의 서버 통합 기능을 비활성화했습니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Next.js Link 컴포넌트로 앵커 요소를 대체하고, 폰트 로딩 구성을 PretendardVariable에서 다중 가중치 서브셋으로 변경하며, MSW 목 서버 통합을 비활성화(주석 처리)하는 구조적 업데이트입니다.

Changes

Cohort / File(s)	Change Summary
Navigation 컴포넌트 리팩토링 apps/web/app/_components/eventBanners/FoodSlotMachineBanner.tsx	앵커 요소 래퍼를 Next.js Link 컴포넌트로 교체하고, Text 컴포넌트 JSX 구조를 간소화했습니다. 내보내기 서명은 변경되지 않음.
레이아웃 및 구성 업데이트 apps/web/app/layout.tsx	MSW 목 서버 초기화 및 제공자 통합을 주석 처리로 비활성화하고, 폰트 로딩을 PretendardVariable 단일 폰트에서 9개 가중치/스타일 변형의 다중 서브셋 구성으로 변경했습니다.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• FoodSlotMachineBanner.tsx: 간단한 컴포넌트 래퍼 교체 (앵커 → Link) 및 JSX 구조 리팩토링
• layout.tsx: 명확한 의도의 변경사항 (MSW 비활성화, 폰트 구성 업데이트)이지만 두 가지 별개의 변경 영역으로 주의 필요

Possibly related issues

• [Refactor] LCP 성능 개선 #81: 동일하게 app/layout.tsx 폰트 로딩 영역을 수정하며, PretendardVariable을 다중 가중치 서브셋으로 교체하여 폰트 크기를 줄이고 LCP를 개선하는 작업입니다.

Possibly related PRs

• Feat/#9 msw 초기 설정 및 HydrationBoundaryPage 추가 #11: 이전에 추가된 MSW 초기화 및 MSWProvider 래퍼를 동일하게 layout.tsx에서 비활성화(주석 처리)하고 있어, MSW 설정과 관련된 직접적인 연관이 있습니다.

Poem

🐰 링크가 흘러내리고,
폰트는 더 가벼워지고,
MSW는 조용히 잠들고 —
웹이 더 빠르게 춤춘다! ⚡

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목은 LCP 성능 개선이라는 주요 변경사항을 명확히 나타내며, 실제 코드 변경(웹 폰트 최적화, MSW 비활성화)과 일부 관련이 있습니다.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch refactor/#81

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b7a1f69 and c6f64a1.

⛔ Files ignored due to path filters (10)

• apps/web/public/fonts/Pretendard-Black-Subset.woff2 is excluded by !**/*.woff2
• apps/web/public/fonts/Pretendard-Bold-Subset.woff2 is excluded by !**/*.woff2
• apps/web/public/fonts/Pretendard-ExtraBold-Subset.woff2 is excluded by !**/*.woff2
• apps/web/public/fonts/Pretendard-ExtraLight-Subset.woff2 is excluded by !**/*.woff2
• apps/web/public/fonts/Pretendard-Light-Subset.woff2 is excluded by !**/*.woff2
• apps/web/public/fonts/Pretendard-Medium-Subset.woff2 is excluded by !**/*.woff2
• apps/web/public/fonts/Pretendard-Regular-Subset.woff2 is excluded by !**/*.woff2
• apps/web/public/fonts/Pretendard-SemiBold-Subset.woff2 is excluded by !**/*.woff2
• apps/web/public/fonts/Pretendard-Thin-Subset.woff2 is excluded by !**/*.woff2
• apps/web/public/fonts/PretendardVariable.woff2 is excluded by !**/*.woff2

📒 Files selected for processing (2)

• apps/web/app/_components/eventBanners/FoodSlotMachineBanner.tsx (2 hunks)
• apps/web/app/layout.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

apps/web/app/layout.tsx (3)

apps/web/app/QueryClientProvider.tsx (1)

• QueryProvider (40-57)

apps/web/app/HeroProvider.tsx (1)

• HeroProvider (6-11)

apps/web/app/NaverMapProvider.tsx (1)

• NaverMapProvider (6-10)

🔇 Additional comments (4)

apps/web/app/_components/eventBanners/FoodSlotMachineBanner.tsx (2)

1-1: LGTM! Next.js Link를 통한 클라이언트 사이드 네비게이션 개선

Link 컴포넌트를 사용하여 배너 클릭 시 클라이언트 사이드 네비게이션을 활성화한 것은 좋은 개선입니다. 프리페칭과 페이지 전환 최적화가 적용됩니다.

Also applies to: 9-9

---

23-25: LGTM! Text 컴포넌트 사용 정리

컴포넌트 구조가 간결하게 정리되었습니다.

apps/web/app/layout.tsx (2)

35-85: LGTM! 폰트 서브셋 구성으로 LCP 개선

PR 목표에 부합하는 훌륭한 최적화입니다:

• 9개 가중치별 서브셋 파일로 분리하여 필요한 가중치만 로드 가능
• display: 'swap' 유지로 FOIT 방지
• CSS 변수 추가로 유연한 폰트 관리 가능
• 모든 폰트 파일이 존재하며 경로가 올바르게 구성됨 (9개 파일 총 1.4MB)

---

6-7: 의도적인 MSW 비활성화 확인됨 - 팀 공유 및 백엔드 준비 상태 확인 필요

MSW(Mock Service Worker) 관련 코드가 완전히 주석 처리되어 있으며, 이는 의도적인 비활성화로 보입니다. MSW 인프라(apps/web/app/_mocks/MSWProvider.tsx, initMSW.ts)는 여전히 저장소에 존재합니다.

다음을 확인해주세요:

• 팀원들이 MSW 비활성화에 대해 인지하고 있는지
• 로컬 개발 환경에서 실제 백엔드 API가 정상적으로 작동하는지

필요시 MSW 파일을 완전히 제거하거나, 향후 재사용을 위해 보관 중인 경우 문서화를 추가하는 것을 검토해주세요.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}