# 324.ing 카메라 아카이브 대규모 리팩토링 완료 324.ing 프로젝트의 카메라 아카이브 기능에 대해 본격적인 구조 개선 작업을 진행했습니다. 약 150개 파일에 걸친 대규모 리팩토링으로, 기존에 산재되어 있던 UI 컴포넌트 중복(EntityUploadZone, Skeleton, SquarePhotoGrid 등)을 통일하고, 데이터 레이어를 체계적으로 정리했습니다. 특히 `lib/queries`와 라우트 그룹을 활용한 보호된 API 구조로 관리자 권한 검증을 표준화하여, 향후 기능 확장 시 일관된 패턴을 따를 수 있게 했습니다. 기술적으로는 단순한 정리를 넘어 몇 가지 핵심적인 개선을 이루었습니다. withAdmin/assertAdmin 헬퍼로 관리자 권한 로직을 통합하고, revalidate와 블록 관계 처리를 일원화했으며, Satori OG 팩토리의 크기 문제도 함께 해결했습니다. 개발 기반을 견고히 하기 위해 Vitest와 React Testing Library, jsdom을 도입해 테스트 인프라를 구축했고, ESLint와 타입 체크 스크립트도 추가했습니다. 불필요한 코드와 의존성을 정리하면서 프로젝트의 기술 부채를 크게 줄일 수 있었습니다. 이 과정에서 AI 협업 도구를 활용해 구조적 일관성을 검증하고 리팩토링 체크리스트를 작성함으로써 누락 없이 체계적으로 진행할 수 있었습니다. 이제 324.ing의 기반이 한층 견고해졌으므로, 새로운 기능 추가 시 더욱 빠르고 안정적으로 개발할 수 있을 것으로 기대합니다.
# 개발 활동 기록 324.ing 프로젝트의 네비게이션 시스템을 전반적으로 개선하는 작업을 진행했습니다. 기존에 산재되어 있던 네비게이션과 다이얼로그 컴포넌트들을 공통 프리미티브로 통합하여 코드 중복을 제거하고 유지보수성을 높였습니다. 이 과정에서 13개 파일에 걸쳐 164줄을 추가하고 101줄을 제거하면서 전체적인 아키텍처를 더 정결하게 만들었습니다. 가장 시급했던 문제는 모바일 환경에서 하단 네비게이션이 콘텐츠와 겹치는 레이아웃 버그였습니다. 카메라 아카이브 기능을 사용할 때 하단 네비게이션이 사진 썸네일들을 가리고 있어서 사용자 경험이 좋지 않았거든요. 이번 리팩토링에서 이 오버랩 문제를 근본적으로 해결했고, 동시에 네비게이션과 다이얼로그가 일관된 디자인 시스템을 따르도록 정리했습니다. 기술적으로는 공통 프리미티브를 추출하는 과정에서 각 컴포넌트의 책임을 명확히 하는 것이 핵심이었습니다. AI 코드 어시스턴트의 도움을 받아 비슷한 패턴을 찾아내고 리팩토링 전략을 수립했으며, 테스트 케이스들도 함께 검증하면서 진행했습니다. 이제 새로운 네비게이션 요소를 추가할 때 더 빠르고 일관되게 작업할 수 있는 기반이 마련되었습니다.
# 본문 324.ing 프로젝트에 Google Analytics를 통합했습니다. 그동안 사용자들이 어떻게 우리의 카메라 아카이브 서비스를 이용하고 있는지 정량적으로 파악할 수 없었는데, 이번 추가로 방문자 흐름, 기능별 사용률, 사용자 체류 시간 등을 체계적으로 추적할 수 있게 되었습니다. 특히 이미지 업로드와 아카이빙 과정에서 사용자들이 어디서 이탈하는지, 어떤 기능을 자주 사용하는지를 파악함으로써 향후 UX 개선의 방향성을 잡을 수 있게 되었다는 점이 의미깊습니다. 구현 과정에서는 Google Analytics 추적 코드(G-Y3ZX4H4DRD)를 프로젝트에 삽입하는 단순하지만 중요한 작업이었는데, 이를 통해 우리는 사용자 데이터 기반의 의사결정 문화로 한 발 더 나아가게 되었습니다. 개선 방향을 모색할 때 AI 분석 도구의 도움을 받아 수집된 데이터에서 의미 있는 패턴을 찾아내는 것도 고려 중입니다. 이제 우리는 추측이 아닌 데이터에 기반해 제품을 개선할 수 있게 되었습니다. 앞으로 분석된 사용자 행동 데이터를 바탕으로 더욱 직관적이고 효율적인 아카이빙 경험을 만들어나갈 계획입니다.