Claude Code 로 YouTube 취향 분석기 5분 만에 만들기

내 유튜브 시청 데이터를 한 장의 취향 카드로 정리하기

준비물은 간단합니다

이번 대시보드 설계에서 도우미 역할을 해줄 도구는 터미널 기반 개발 도구인 Claude Code 입니다. 별도의 무거운 편집기를 켜거나 여러 인터페이스를 오갈 필요 없이, 터미널 환경 안에서 코드 작성부터 디버깅까지 한 번에 완료할 수 있어 매우 직관적입니다.

분석에 쓸 데이터는 구글 계정의 데이터 백업 서비스인 구글 테이크아웃을 통해 손쉽게 준비할 수 있습니다. 개인 설정 페이지에서 시청 기록 항목을 찾아 JSON 형식으로 내려받으면 준비가 끝납니다.

이렇게 내려받은 watch-history.json 파일을 작업 디렉토리에 옮겨두면 됩니다. 이 파일에 담긴 데이터가 우리가 시각화할 소중한 기초 자료가 됩니다.

대시보드를 완성하는 세 단계의 과정

자주 발생하는 오류 해결하기

첫째, 다운로드한 파일의 누적 데이터 용량이 너무 크면 브라우저가 느려지거나 분석 도중에 멈추는 현상이 나타날 수 있습니다. 오랜 시청 역사가 누적된 파일은 크기가 매우 커서, 많은 데이터를 일시에 메모리에 로드하려고 하면 브라우저에 과부하가 걸리기 쉽습니다.

이럴 때는 대용량 데이터를 적절히 나누어 읽는 방식을 적용하거나, 분석에 꼭 필요한 요약 통계 정보만 걸러내어 메모리 낭비를 방지하도록 자바스크립트 소스코드를 보완해 달라고 요청하는 편이 안전합니다.

둘째, 파일 업로드 후에 파싱 결과는 잘 뜨지만 그래프가 공백으로 나오거나 라이브러리 참조 오류가 표시될 수 있습니다. CDN을 통해 비동기로 로드되는 외부 스크립트의 준비 속도보다 브라우저 내부의 연산 속도가 더 빨라서 간격이 생길 때 주로 일어나는 현상입니다.

이 문제는 라이브러리가 완전히 설치되어 준비가 끝났음을 알리는 리스너를 먼저 구축하고, 그 뒤에 초기화 코드가 순차적으로 이어지도록 파일 구조를 수정해 달라고 요구하면 매끄럽게 처리할 수 있습니다.

셋째, 카드 다운로드 버튼을 눌렀을 때 특정 폰트의 정렬이 흐트러지거나 테두리 둥글기 효과가 반영되지 않은 채로 캡처 파일이 어색하게 생성되기도 합니다. 이미지 변환 모듈은 CSS flexbox 속성이나 상세 디자인 규칙을 백퍼센트 완벽하게 해석하지 못하는 한계를 지닙니다.

이러한 오차를 예방하기 위해 취향 카드 디자인은 유동적인 비율보다는 명확한 크기 단위를 지정하고, 복잡한 입체 효과를 걷어내어 단순한 평면 구조로 정리하는 것이 깔끔한 결과물을 내는 요령입니다.

확장하여 시도할 만한 요소들