요약

• 문제: /activities 메인화면에서 모든 컴포넌트를 한 번에 로드해 초기 번들 크기가 커지고 사용자 경험이 저하되었습니다.
• 해결: Next.js의 dynamic 기능을 활용해 코드 스플리팅 및 Lazy Loading을 적용했습니다.
• 결과(빌드 기준):
  • 페이지 번들 크기: 7.92 kB → 6.45 kB (−1.47 kB, 22.8% 감소)
  • First Load JS: 239 kB → 234 kB (−5 kB, 2.1% 감소)
• 효과: 초기 로딩 시간이 약 2–3% 개선되었으며, 점진적 콘텐츠 로딩으로 사용자 경험(UX)과 메모리·네트워크 효율성이 향상되었습니다.

문제 상황

• /activities 페이지에서 하위 컴포넌트를 모두 정적으로 임포트해 초기 번들이 커졌습니다.
• 그 결과 초기 렌더링에서 필요하지 않은 코드까지 다운로드되어 페이지 로딩 속도가 느려지고 사용자 경험이 저하되었습니다.
• 빌드 시

원인 분석 (단계별)

1. 정적 임포트 사용: 모든 컴포넌트를 페이지 상단에서 정적으로 불러와 초기 번들에 포함시켰습니다.
2. 불필요한 초기 로드: 사용자가 실제로 접근하지 않은 섹션(예: 하단 Best/All Activities)의 코드까지 초기 다운로드가 발생했습니다.
3. 번들 분할 미흡: 컴포넌트별 청크 분리가 적용되지 않아 캐싱 및 지연 로딩 이점을 얻지 못했습니다.

해결 방안

• 임포트 전략 재설계
  • 페이지 렌더링 시 즉시 필요한 컴포넌트(예: 헤더, 상단 배너, 검색)는 정적으로 유지했습니다.
  • 스크롤로 접근하는 섹션이나 상대적으로 무거운 컴포넌트는 동적 로드로 전환했습니다.
• Next.js dynamic 적용