Vanilla JS와 3단계 캐싱으로 구현한 고성능 AI 플레이리스트 변환기

Context

AI가 생성한 노래 리스트를 사용자가 일일이 스트리밍 플랫폼에 복사하는 번거로움 발생. 단순 링크 제공을 넘어 브라우저 내 즉시 재생 가능한 통합 플레이어 환경 필요.

Technical Solution

• 프레임워크 오버헤드 제거와 빠른 배포를 위해 Vanilla JS 기반의 무빌드 아키텍처 채택
• 비즈니스 로직과 시각적 상태를 분리하기 위해 window.UI.* 네임스페이스를 활용한 전용 렌더링 레이어 설계
• iTunes Search API를 통한 메타데이터 매칭 시 'Artist Title' 쿼리 조합 방식으로 검색 정확도 향상
• 사용자 경험 최적화를 위해 모든 곡의 결과 대기 없이 개별 카드를 순차적으로 출력하는 Progressive Rendering 적용
• YouTube IFrame API의 ToS 준수를 위해 오디오 전용 모드와 비디오 전용 모드를 전환하는 확장형 플레이어 구조 설계
• API 호출 비용 절감 및 응답 속도 향상을 위해 In-memory, sessionStorage, Firestore로 이어지는 3계층 캐싱 전략 구축

Impact

• 리디자인 후 10일 만에 일일 방문자 100명 달성
• 단일일 최대 777회의 Netlify Function 호출 기록
• Firestore 기반의 누적 플레이리스트 생성 수 319건 돌파

Key Takeaway

초기 단계의 서비스에서 복잡한 프레임워크보다 핵심 도메인 로직에 집중한 단순한 스택 선택이 빠른 제품 출시와 유연한 수정에 유리함.