🎯 오늘의 목표
명령 한 줄로 자산 대시보드를 만듭니다. 코딩 경험 없어도 됩니다. 진짜로.
🐱 아카냥: "어려운 거 아니에요. 말로 시키는 거예요."
📋 준비물
- Claude Code가 설치된 터미널 (Chapter 2에서 설치했죠?)
- 인터넷 연결
- 그게 끝이에요
🚀 Step 1: Claude Code 열기
터미널을 열고, 작업할 폴더로 이동한 후:
claude
Claude Code가 실행되면 준비 완료!
✍️ Step 2: 지시문 입력
아래 문장을 그대로 입력해 보세요:
금, 은, 구리, 비트코인, 이더리움, 나스닥, 코스피 현재가를 실시간으로 보여주는 HTML 대시보드 만들어줘. 각 자산의 오늘 등락률도 보여줘. 다크 테마로 만들어줘.
Claude Code가 알아서:
- HTML 파일을 생성하고
- API 연동 코드를 작성하고
- 스타일링까지 완성합니다
👀 Step 3: 결과물 확인
Claude Code가 만든 HTML 파일을 브라우저에서 열어보세요.
open dashboard.html # macOS
# 또는
start dashboard.html # Windows
자산별 카드에 현재가와 등락률이 표시되는 대시보드가 보일 거예요!
🔄 Step 4: 수정 지시
마음에 안 드는 부분이 있다면 말로 수정합니다:
- "카드 크기를 더 키워줘"
- "환율(달러/엔/유로)도 추가해줘"
- "새로고침 버튼 넣어줘"
- "모바일에서도 잘 보이게 반응형으로 만들어줘"
매번 새로 만드는 게 아니라, 기존 파일을 수정해 줍니다.
📐 좋은 지시문 vs 나쁜 지시문
결과물의 품질은 지시문에 달려 있어요.
❌ 나쁜 지시문
"대시보드 만들어"
→ 뭘 보여줄지, 어떤 스타일인지 모르니까 결과가 애매합니다.
✅ 좋은 지시문
"금, 은, 비트코인, 나스닥 현재가를 카드형으로 보여주는 HTML 대시보드 만들어줘. 다크 테마에, 각 자산의 24시간 등락률도 색깔로 구분해서 보여줘."
→ 구체적일수록 결과가 정확합니다.
🌟 최고의 지시문 = 레퍼런스 포함
"이 이미지처럼 생긴 대시보드 만들어줘 (이미지 첨부). 데이터는 금/은/BTC/나스닥이고, 등락률에 따라 초록/빨강으로 색 바꿔줘."
→ 참고 자료(레퍼런스)를 주면 결과물의 퀄리티가 확 올라갑니다.
🎨 응용: 나만의 대시보드
아래 중 관심 있는 걸로 바꿔서 만들어 보세요:
- 환율 대시보드: USD, JPY, EUR, CNY 실시간 환율
- 내 포트폴리오: 보유 종목의 수익률 한눈에
- 경쟁사 모니터링: 우리 vs 경쟁사 주요 지표 비교
- 팀 KPI 보드: 이번 달 핵심 지표 현황
Claude Code에 "~~ 대시보드 만들어줘"라고 말하면 됩니다.
📌 핵심 정리
- Claude Code에게 구체적으로 말하면 원하는 도구가 나옵니다.
- 수정은 말로. "이것만 바꿔줘"면 끝.
- 지시문이 구체적일수록, 레퍼런스가 있을수록 결과가 좋아집니다.
- 다음 레슨에서는 반복 업무를 자동화하는 스크립트를 만들어 봅니다! 🐱