Claude Code로 구현한 책장 프로젝트

1 month ago 12

약 500권의 책을 자동으로 분류·시각화하기 위해 AI 도구 Claude Code를 활용한 개인 프로젝트 사례
기존 ISBN 스캐너나 Goodreads가 루마니아어 판본을 인식하지 못해 실패했던 문제를, OpenAI Vision API와 Claude의 스크립트로 해결
90% 정확도의 메타데이터 추출 후, 나머지는 수작업으로 보정하고 Open Library·SerpAPI를 통해 표지 이미지를 자동 수집
Framer Motion을 이용한 스크롤 기반 애니메이션과 페이지 수 기반의 책 두께 표현으로 실제 책장 같은 인터랙션 구현
AI가 실행을 맡고 사용자가 미적 판단과 선택을 담당하는 협업 구조를 보여주며, ‘실행 비용은 줄지만 취향은 여전히 인간의 몫’ 임을 강조

프로젝트 개요

약 500권의 책을 보유했지만 목록을 관리하지 못한 상태에서, AI 도구를 이용해 자동 분류·시각화 시스템을 구축
단순한 스프레드시트 대신, Claude Code를 통해 실행 단계를 자동화하여 오랫동안 미뤄온 개인 프로젝트를 완성
프로젝트의 핵심은 기술적 완성도보다 실행의 병목을 제거하는 데 있음

문제 인식

ISBN 스캐너 앱과 Goodreads가 루마니아어 판본이나 희귀 출판물을 인식하지 못해 데이터가 불완전
불완전한 데이터는 오히려 혼란을 초래해 프로젝트가 반복적으로 중단됨
필요한 것은 완벽한 앱이 아니라, 불완전함을 견딜 수 있는 시스템 구조였음

데이터 수집과 처리

책의 표지와 책등을 촬영한 470장의 사진을 기반으로 데이터 구축
Claude가 작성한 스크립트가 각 이미지를 OpenAI Vision API로 전송해 저자·제목·출판사를 추출하고, 결과를 JSON 파일로 저장
약 90% 정확도를 달성했으며, 나머지 오류는 조명·손상·해상도 문제로 발생
남은 10%는 수작업으로 수정, 이후 새 책 추가 시 동일 파이프라인을 자동 실행

표지 이미지 보완

Open Library API로 표지를 가져왔으나 절반은 품질이 낮거나 잘못된 이미지
Claude가 품질 점수화 및 오류 플래그 시스템을 추가하고, 실패 시 SerpAPI를 통해 Google 이미지 검색으로 대체
약 460권 중 10권만 수동 보정으로 해결, 자동화 효율 확보

책장 UI 구현

단순한 커버 그리드 대신 실제 책장처럼 책등 중심의 시각 표현을 구현
Claude가 색상 추출(color quantization) 과 대비 텍스트 색상 계산을 수행
Open Library의 페이지 수 데이터를 이용해 책 두께를 반영하고, 약간의 변동치를 추가해 현실감 강화
결과적으로 실제 책장과 유사한 시각적 질감 구현

애니메이션과 인터랙션

Framer Motion으로 스크롤 시 책등이 기울어지는 스크롤 기반 애니메이션 추가
초기에는 React 상태 업데이트로 인해 끊김 현상이 있었으나, motion values와 spring 애니메이션으로 수정
수정 후 부드러운 움직임 구현, 실험 비용이 낮아져 반복 시도가 가능해짐

불필요한 기능 제거

무한 스크롤 기능을 추가했으나, 컨테이너 높이 불일치와 스크롤 오류로 사용자 경험 저하
기술적으로는 작동했지만 필요하지 않아 삭제
“작동하지만 불필요한 코드”를 제거하는 판단은 인간의 역할임을 강조

모바일 대응과 스택 뷰

모바일에서 가로 스크롤이 불편해 세로형 스택 뷰를 추가
Claude가 기존 코드를 분석해 애니메이션 타이밍, 색상 추출, 스크롤 투명도 처리 등을 재활용
별도 설명 없이 완전한 새 컴포넌트를 생성, AI의 코드 이해·재구성 능력을 확인

인간의 역할과 결론

Claude가 모든 코드를 작성했지만, 사용자는 다음을 결정
- 90% 정확도 수용
- 10개의 표지 수동 수정
- 책등 중심 디자인 선택
- 불필요한 기능 삭제
- 애니메이션의 감각적 완성 확인
최종 결과물은 460권의 책을 자동 분류·시각화한 웹 기반 책장
AI가 실행을 담당하고 인간이 취향과 판단을 담당하는 협업 모델을 보여줌
결론적으로 “실행 비용은 계속 낮아지지만, 취향은 여전히 인간의 몫” 임을 강조

Read Entire Article