Single-file HTML 기반 234권 도서 라이브러리의 4단계 Waterfall 커버 패칭 시스템 구축

Context

디지털 도서 목록의 시각적 부재를 해결하기 위해 물리적 서재를 모방한 Ambient Display 구현 필요. 서버리스 환경에서 외부 API 호출 제약과 낮은 데이터 매칭률로 인한 커버 이미지 누락 문제가 병목 지점으로 작용.

Technical Solution

• Zero-dependency 설계를 위해 CSS 기반의 렌더링과 JS Array 내 정적 데이터 내장 방식을 채택한 Single HTML 아키텍처 설계
• 데이터 일관성 유지를 위해 Title 기반 Hash 함수를 통한 Book Spine 색상 결정 로직 구현
• 이미지 누락 최소화를 위해 'Google Books(ISBN) → Google Books(Title/Author) → Open Library(ISBN) → Open Library(Title)' 순의 4단계 Waterfall 전략 적용
• API 검색 정확도 향상을 위해 Goodreads 데이터 내 괄호 포함 시리즈 정보(Series Information)를 제거하는 전처리 프로세스 도입
• UX 최적화를 위해 3개 단위의 Concurrency Limit을 적용한 Background Prefetch Thread 및 브라우저 메모리 캐싱 레이어 구축
• 대량 데이터(234권)의 뷰포트 최적화를 위해 CSS Grid 대신 Horizontal Drag-to-Scroll 인터페이스 도입