MyPortfolio

📌 문제 배경

프로젝트의 ProjectsSection에서 카드 클릭 시 모달이 열리고 닫히는 구조였는데 모달 종료 후 카드 이미지가 다시 렌더링되면서 이미지 깜빡임과 지연 로딩 현상이 발생했습니다.

🔍 원인 분석

• public 폴더 이미지 사용 시 next/image의 최적화 기능이 적용되지 않음
• 모달이 닫힐 때 이미지가 다시 렌더링되면서 네트워크 요청이 반복됨
• 브라우저나 CDN에서 캐시가 충분히 작동하지 않아 이미지가 깜빡이거나 느리게 나타남

🛠 해결 과정

1. vercel.json을 통한 정적 이미지에 대한 캐시 정책 강화
   • vercel.json 설정 파일을 추가하여 public 폴더 내 이미지 파일에 대해 max-age=31536000, immutable 설정을 적용
   • Vercel CDN을 통해 정적 이미지 리소스가 1년간 캐싱되도록 설정하여 반복 요청 시 캐시에서 즉시 로딩되도록 개선
   • 모달 종료 후에도 이미지가 네트워크가 아닌 캐시에서 로딩되어 깜빡임 없이 즉시 렌더링되도록 처리

✅ 결과

• 이미지 로딩 시간 450ms → 59.73ms로 약 86.7% 단축
• CDN 캐시 HIT율 10~20% → 90% 이상으로 약 4~9배 향상
• LCP 2.3초 → 1.2초로 약 48% 성능 개선
• 모달 전환 시 이미지 깜빡임 제거로 사용자 경험 향상

📌 문제 배경

기존 ProjectsSection에서 카드 클릭 시 모달 관련 컴포넌트와 라우트 번들이 즉시 로드되었습니다. 이로 인해 스크립트 컴파일, 평가, 레이아웃 계산 등 여러 작업이 클릭 시점에 한꺼번에 발생하여 모달이 포함된 페이지의 전반적인 반응 속도가 느려졌습니다. 전체 이벤트 총 시간은 약 5.48초에 달했습니다.

🔍 원인 분석

• 모달 진입 시점에 필요한 자바스크립트 번들이 네트워크에서 즉시 로드되어 병목 현상 발생
• Next.js의 라우터 프리페치(router.prefetch) 기능이 활용되지 않아 사전 로딩이 이루어지지 않음
• 스크립트 컴파일 및 평가, 레이아웃 재계산 등 연산 작업이 클릭 시점에 집중되어 UI 표시 지연

🛠 해결 과정

1. IntersectionObserver + 사용자 행동 기반 라우트 사전 로드 구현
   • IntersectionObserver를 활용하여 카드가 뷰포트 100px 이내에 들어오면 해당 프로젝트 상세 경로를 `router.prefetch`로 사전 로드하도록 구현
   • 추가적으로 사용자가 프로젝트 카드에 마우스 오버(onMouseEnter)하거나 포커스(onFocus)할 때도 router.prefetch를 호출해 인터랙션 기반의 사전 로딩을 보완

✅ 결과

• 모달을 포함한 전체 이벤트 총 시간: 5,478ms → 3,844ms로 약 29.7% 단축
• 모달 렌더링 관련 스크립트 실행 시간: 237.7ms → 138.3ms로 약 41.8% 감소
• 스크립트 컴파일 시간: 253ms → 148ms로 약 41.4% 감소
• 스크립트 평가 시간: 233.5ms → 126.3ms로 약 45.9% 감소
• 사전 로딩으로 인해 사용자 클릭 직후 네트워크 요청 지연 해소 → 모달 전환 반응성 개선