Claude Code 활용 유튜브 CSV 분석 대시보드 30분 완성

유튜브 데이터 시각화의 필요성

준비물과 작업 방식

이번 프로젝트에서는 터미널 환경에서 직관적으로 코드를 생성하고 수정할 수 있는 에이전트 도구인 Claude Code를 활용합니다. 로컬 터미널에 이 도구를 준비해 두면 파일 생성과 코드 작성을 대화하듯 매끄럽게 진행할 수 있습니다. 만약 로컬 설치 환경을 갖추기 어렵다면 웹 브라우저의 Claude 대화 창을 열어 코드를 복사해서 붙여넣는 방식으로 진행해도 괜찮습니다. 코드 작성과 스타일링은 외부 라이브러리인 Chart.js와 CSS 프레임워크인 Tailwind CSS의 CDN 경로를 사용해 별도의 빌드 과정 없이 구현합니다.

웹 대시보드 제작 과정

자주 발생하는 문제와 해결 방안

작업 중에 예기치 못한 에러가 발생한다면 다음 세 가지 원인을 먼저 점검해 보시기 바랍니다.

화면이 하얗게 변하고 그래프가 나타나지 않는 경우
채널에서 바로 다운로드한 데이터 파일 상단에는 리포트 이름이나 생성 날짜 같은 텍스트 행이 몇 줄 포함되어 있습니다. 이 메타데이터 때문에 파서가 헤더 컬럼명을 제대로 읽지 못하는 일이 생깁니다. 텍스트 편집기로 파일을 열어 상단의 불필요한 메타 행을 지우고 올리거나, 파서 옵션에서 실제 데이터가 시작되는 라인을 스킵하도록 설정하면 정상 작동합니다.

새 파일을 올릴 때 그래프가 비정상적으로 겹치는 경우
Chart.js는 동일한 캔버스 엘리먼트에 새 차트를 덮어씌우면 기존 렌더링 객체와 충돌하여 깜빡임이나 잔상 오류가 생깁니다. 새 데이터를 파싱하여 차트를 그리기 전에 기존 차트 객체가 남아 있다면 반드시 destroy 메소드를 호출해 기존 인스턴스를 파괴한 뒤 새 차트를 생성하도록 예외 처리를 추가해야 합니다.

도구 설치 과정에서 시스템 권한 관련 경고가 뜨는 경우
일부 운영체제 환경에서는 보안 수준이나 실행 권한 제한으로 인해 관련 명령어를 로컬에 설치할 때 오류가 발생할 수 있습니다. 윈도우 환경에서는 명령 프롬프트나 파워쉘을 실행할 때 오른쪽 마우스를 클릭해 관리자 권한으로 실행하고, 맥OS나 리눅스 환경에서는 명령어 앞에 관리자 권한 부여 명령을 조합하여 실행하면 무리 없이 해결할 수 있습니다.

확장 기능 아이디어