코드 한 줄 안 짜고 대시보드 만들기 — Claude Code 첫 체험¶

이 글은 유튜브 영상 "비개발자를 위한 Claude Code" EP01의 블로그 버전입니다. 영상을 보면서 따라해도 되고, 이 글만 보고 따라해도 됩니다.

누구를 위한 글인가요?¶

• 엑셀이나 구글 시트는 쓸 줄 아는데, 코딩은 해본 적 없는 분
• "대시보드 만들어주세요"를 개발팀에 요청하고 2주 기다려본 분
• AI가 코딩을 해준다는데, 어떻게 시작하는지 모르는 분

전제 조건: 컴퓨터에 Claude Code가 설치되어 있어야 합니다. (설치가 안 되어 있다면 → EP02 설치 가이드 를 먼저 보세요)

오늘 만들 것¶

CSV 파일 하나를 Claude Code에 던지면, 이런 인터랙티브 대시보드가 만들어집니다:

• 📊 일별 매출 추이 차트
• 📊 가게별 매출 비교
• 📊 카테고리별 비중
• 🔍 기간/가게/카테고리 필터
• 📱 모바일에서도 볼 수 있는 반응형

소요 시간: 약 5분

Step 1: 샘플 데이터 준비하기¶

먼저 실습용 CSV 파일을 다운로드하세요.

👉 배달서비스_매출데이터.csv 다운로드

파일을 열어보면 이런 구조입니다:

약 60건의 배달 주문 데이터입니다. 실제 업무에서는 여러분의 CSV 파일을 사용하면 됩니다.

Step 2: 터미널 열기¶

Mac¶

1. Cmd + Space 눌러서 Spotlight 열기
2. "터미널" 입력 → Enter

Windows¶

1. Win + R 눌러서 실행 창 열기
2. "cmd" 입력 → Enter

💡 터미널은 그냥 "글자로 컴퓨터에 명령하는 창"입니다. 무섭지 않아요!

Step 3: CSV 파일이 있는 폴더로 이동¶

다운로드한 CSV 파일이 있는 폴더로 이동합니다.

cd ~/Downloads

💡 cd는 "이 폴더로 가줘"라는 뜻입니다. 만약 바탕화면에 저장했다면 cd ~/Desktop

Step 4: Claude Code 실행¶

claude

이 한 단어만 치면 Claude Code가 시작됩니다. 화면에 > 표시가 나타나면 준비 완료!

Step 5: 데이터 파악하기 (프롬프트 1)¶

아래 내용을 그대로 복사해서 붙여넣으세요:

배달서비스_매출데이터.csv 파일을 읽고 어떤 데이터인지 요약해줘.
- 몇 건의 데이터인지
- 어떤 컬럼이 있는지
- 기간은 언제부터 언제까지인지
- 가게는 몇 개인지

Claude가 파일을 읽고 요약해줍니다. 마치 "이 엑셀 파일 좀 봐줘"라고 동료에게 부탁하는 것과 같습니다.

Step 6: 분석 요청하기 (프롬프트 2)¶

이 데이터로 다음을 분석해줘:
1. 가게별 총 매출 순위
2. 메뉴카테고리별 주문 건수
3. 요일별 주문 패턴
4. 시간대별 주문 분포
5. 플랫폼별 매출 비중

분석 결과가 텍스트로 나옵니다. 하지만 숫자만으로는 한눈에 안 들어오죠?

Step 7: 대시보드 만들기! (프롬프트 3 — 핵심)¶

이 분석 결과를 인터랙티브 대시보드로 만들어줘.
- HTML 파일 하나로 만들어줘 (브라우저에서 바로 열 수 있게)
- 차트는 예쁘게, 한국어로
- 필터 기능: 기간, 가게, 카테고리별로 필터링 가능하게
- 포함할 차트:
  - 일별 매출 추이 (꺾은선)
  - 가게별 매출 비교 (막대)
  - 카테고리별 비중 (도넛)
  - 시간대별 주문 분포 (막대)
  - 플랫폼별 비중 (파이)
- 상단에 KPI 카드: 총 매출, 총 주문수, 평균 주문금액, 가장 인기 메뉴

잠시 기다리면... 대시보드가 만들어집니다.

Claude Code가 알아서: 1. Python 코드를 작성하고 2. 데이터를 분석하고 3. HTML/JavaScript로 대시보드를 생성합니다

여러분은 프롬프트만 붙여넣었을 뿐입니다.

Step 8: 대시보드 확인하기¶

생성된 HTML 파일을 브라우저에서 열어봅니다:

open dashboard.html

Windows라면: 파일 탐색기에서 해당 HTML 파일을 더블클릭

축하합니다! 코드 한 줄 안 짜고 인터랙티브 대시보드를 만들었습니다.

보너스: 마음에 안 드는 부분 수정하기¶

대시보드가 마음에 안 들면? 말로 수정 요청하면 됩니다:

• "차트 색상을 파란 계열로 바꿔줘"
• "다크 모드 토글 추가해줘"
• "모바일에서도 잘 보이게 해줘"
• "매출 상위 3개 가게만 하이라이트해줘"

이게 Claude Code의 핵심입니다. 대화하듯이 수정 요청하면 됩니다.

정리¶

코딩 지식: 0 / 결과물: 인터랙티브 대시보드

다음 영상 예고¶

다음 영상에서는 Claude Code를 내 컴퓨터에 설치하는 법을 처음부터 끝까지 알려드립니다. 터미널이 뭔지, Node.js가 뭔지 몰라도 괜찮습니다.

👉 EP02: 5분 설치 가이드 — 내 컴퓨터에 Claude Code 깔기

링크 모음¶

• 샘플 CSV 다운로드
• 프롬프트 전체 목록
• Claude Code 공식 사이트
• Kyle School 유튜브 구독