324.ing — 2026년 3월 14일

# 324.ing 카메라 아카이브 프로젝트의 성능 최적화 여정

이번 주에는 324.ing 카메라 아카이브 프로젝트의 성능 개선에 집중했습니다. 사용자들이 수많은 사진을 빠르게 브라우징할 수 있어야 한다는 요구사항에서 시작된 이 작업은 이미지 최적화, 캐싱 전략, 리소스 로딩 순서 개선 등 다층적인 접근을 포함했습니다. 구체적으로는 Next.js의 Image 컴포넌트에서 불필요한 최적화 옵션을 제거하고, 히어로 이미지의 품질을 80으로 조정하며, BookCard 컴포넌트에 lazy loading을 적용했습니다. 또한 `force-dynamic` 설정을 제거하여 정적 생성을 최대한 활용하고, Sanity CDN을 통한 이미지 전송 최적화 및 폰트 preload를 추가했습니다.

기술적으로 흥미로웠던 부분은 단순히 한 가지 최적화가 아닌 여러 병목 지점을 동시에 개선하는 전략이었습니다. Cache-Control 헤더 설정으로 브라우저와 CDN 캐싱을 효율화하고, 파비콘과 OG 이미지를 적절히 설정하여 메타데이터 최적화까지 완료했습니다. 이 과정에서 Claude와 두 차례 세션을 통해 Vercel Agent Skills 설치, 성능 개선 항목 보완, Google OAuth 및 주의사항 문서화 등을 함께 진행했으며, AI의 도움으로 복잡한 성능 최적화 전략을 체계적으로 정리할 수 있었습니다.

이러한 최적화들이 실제 사용자 경험으로 어떻게 변환되는지 다음 단계에서 모니터링해야 할 것 같습니다. 웹 바이탈 지표 개선과 함께 실제 로딩 시간 감소가 확인되면, 아카이브 프로젝트의 완성도가 한 단계 높아질 것으로 기대합니다.