⚡ AI 인텔리전스 레이더
🚀 중급반 · 나만의 자동화 봇 & 앱 서비스 런칭

8회차 · Claude Code 실전 — 기능 추가 & 배포

글 백두산 (Doosan Baek) · 게시 2026-06-13 · 최종 수정 2026-07-10

이 회차에서 배우는 것

⚡ 기능 확장상태 저장·다크모드·반응형까지 한 기능씩
🌐 외부 API날씨·환율·뉴스 + ChatGPT API 직접 호출
🐛 에러 해결콘솔 → Claude 던지기, 디버깅 5단계
🌿 Git 워크플로커밋·푸시·되돌리기를 Claude가 대신
🚀 배포Vercel + 환경 변수 + 도메인 연결
🔐 비밀 관리.env·시크릿·API 키 새지 않게
🤖 자동화 (추천)Anthropic Cloud /schedule — 토큰·YAML 없이 매주 자동 실행
⚙️ 자동화 심화GitHub Actions + setup-token — 세밀한 제어·CI 통합
💻 CLI 심화터미널·CI·서버 등 GUI 없는 자동화 (선택)

7회차의 To-do 앱에 진짜 기능을 붙이고, 인터넷에 배포해 어디서나 쓸 수 있게 만듭니다. 이번 회차의 목표는 한 가지 기능을 추가하는 게 아니라 '기능 확장 → 디버깅 → 배포 → 운영'이라는 한 사이클을 끝까지 도는 것 — 다음 앱도 같은 사이클로 만들 수 있게.

⚡ 기능 추가 — 한 번에 한 기능

실력이 가장 빨리 느는 패턴 — '아주 작은 기능을 자주, 매번 확인'. 한 번에 모든 걸 요청하면 어디서 깨졌는지 모르고 디버깅이 늪이 됩니다.

  1. Claude에 '항목별 우선순위(높음/보통/낮음) 표시 기능' 한 가지만 요청
  2. 결과 확인 → 마음에 들면 다음으로
  3. '완료된 항목은 흐리게 + 맨 아래로 정렬'
  4. '카테고리(태그) 추가 + 태그 필터'
  5. '다크/라이트 모드 토글 + 시스템 설정 따라가기'
  6. '모바일 친화적으로 반응형 다듬기'

💾 상태 저장 — localStorage·DB

새로고침해도 데이터가 사라지지 않게. 작은 앱은 localStorage, 큰 앱은 DB(Supabase·Firebase).

🌐 외부 API 1 — 날씨 (키 불필요)

가장 쉬운 외부 데이터. API 키 발급 없이 Open-Meteo로 즉시.

  1. Claude에 아래 프롬프트 그대로
  2. Claude가 fetch 호출 코드를 자동 작성 + 화면에 표시
  3. 브라우저 새로고침 → 실제 날씨 확인
  4. 에러 처리(네트워크 끊김·API 다운)까지 같이 요청해두기
내 To-do 앱 상단에 [서울 현재 기온 + 날씨 아이콘 + 한 줄 코멘트]를 표시해줘.
API: Open-Meteo (https://api.open-meteo.com/v1/forecast), 키 불필요.
파라미터: latitude=37.57, longitude=126.98, current=temperature_2m,weather_code

요구사항:
- 페이지 로딩 시 자동 호출
- 5분 캐시 (localStorage)
- 실패 시 '날씨 정보 없음'으로 폴백, 콘솔에 에러 로그
- 디자인은 본문 톤과 어울리게

🌐 외부 API 2 — 환율·뉴스·기타

🤖 ChatGPT API 직접 호출 — 내 앱 안에서

내 앱에 'AI 기능'을 붙입니다. To-do 앱이라면 '오늘 할 일 자동 제안' 같은 기능을 추가.

  1. platform.openai.com → API keys → Create new secret key
  2. 받은 키를 .env 파일에 'OPENAI_API_KEY=sk-...' 저장
  3. Claude에 '내 To-do에 AI 추천 버튼 추가, OpenAI API 사용, 키는 .env에서'
  4. Claude가 자동으로 fetch 호출 코드 + 키 로딩 코드 작성
  5. 주의 — 브라우저에서 직접 호출하면 키 노출. 서버 함수(Vercel Serverless) 거쳐야 안전
  6. Claude에 '키 노출 안 되게 서버 함수로 분리해줘' 한 줄 추가하면 자동 변환

🎨 디자인 — Tailwind·다크 모드·반응형

Claude는 디자인 시스템도 알아서 적용해 줍니다. '이런 느낌으로'만 던지세요.

🐛 에러 해결 — 5단계 디버깅 워크플로

에러는 일상. 두려워하지 말고 정해진 절차로 풀면 됩니다.

  1. 1. 재현 — 어떻게 하면 다시 나는지 정확히
  2. 2. 콘솔 확인 — F12 → Console → 빨간 줄 전체 복사
  3. 3. Claude에 던지기 — 에러 + '내가 한 동작' + '기대한 결과'
  4. 4. 수정 적용 — Claude의 진단·코드 받은 뒤 적용
  5. 5. 재테스트 — 같은 동작·다른 동작 모두 확인
다음 에러가 났어:

[에러 메시지 전체 붙여넣기]

내가 한 동작:
- 추가 버튼을 빠르게 두 번 눌렀어

기대한 결과:
- 항목 하나만 추가

원인 진단 + 수정 코드 + '다음에 같은 실수 막는 법'까지 알려줘.

🌿 Git 워크플로 — Claude가 대신 해줌

커밋·푸시·되돌리기를 명령어로 외울 필요 없습니다. 자연어로 시키면 됩니다.

🔄 push·pull·merge — 협업의 3박자

혼자 한 PC로만 작업하면 커밋만 알면 됩니다. 하지만 여러 기기·여러 사람이 같은 코드를 만지거나, GitHub에 올려 자동 배포(Vercel·Netlify)를 쓰면 push·pull·merge가 필요해져요. 클라우드 문서함에 비유하면 쉽습니다.

왜 순서가 중요하냐면 — 남(또는 다른 기기의 나)이 먼저 올린 변경이 있는데 pull 없이 내 것만 push하면 충돌이 납니다. 그래서 기본 리듬은 'pull(최신 받기) → 작업·커밋 → push(올리기)'예요.

  1. 작업 시작 전 — '원격 최신 내용 pull 해줘' (남의 변경 먼저 반영)
  2. 기능 작업 — 브랜치 만들어 커밋들 쌓기
  3. 합치기 — 'main으로 merge해줘' (또는 GitHub에서 Pull Request로 검토 후 머지)
  4. 올리기 — 'push 해줘' → GitHub 반영 → 연결된 사이트 자동 배포

🐙 GitHub에 올리기

  1. github.com에서 New repository → 이름·공개 여부 선택
  2. Claude에 '이 GitHub 리포지토리에 푸시하는 법 알려줘 → 그대로 실행'
  3. 또는 '이 폴더를 GitHub의 [URL]에 푸시해줘' 한 줄로
  4. 푸시 후 GitHub 페이지에서 파일 확인
  5. .gitignore에 .env·node_modules 들어갔는지 마지막 확인 (시크릿 노출 방지)

🚀 Vercel 배포 — 1분 안에 인터넷에

  1. vercel.com → Sign Up → GitHub 계정으로 가입
  2. Dashboard → 'Add New' → 'Project'
  3. 방금 푸시한 GitHub 리포지토리 선택 → Import
  4. 프레임워크 자동 감지(또는 'Other')
  5. 환경 변수가 필요하면 'Environment Variables'에 추가 (OPENAI_API_KEY 등)
  6. Deploy 클릭 → 1~2분 대기 → ~~~.vercel.app URL 발급
  7. URL을 폰·다른 PC·친구에게 공유

🔐 시크릿(비밀 키) 관리 — 가장 중요한 보안

'시크릿'은 API 키처럼 남에게 보이면 안 되는 비밀번호예요. 집 현관 비밀번호나 신용카드 번호라고 생각하면 됩니다 — 한 번 새어 나가면 남이 내 계정으로 AI를 마구 써서 요금 폭탄을 맞을 수 있어요. 그래서 처음부터 '절대 공개되지 않게' 하는 습관이 중요합니다.

❓ 왜 코드에 직접 적으면 안 되나

키를 코드 안에 그냥 써놓고 GitHub에 올리면, 그 코드를 누구나 볼 수 있게 됩니다 — 비밀번호를 대문에 써붙이는 셈이죠. 그래서 키는 코드와 '분리된 비밀 서랍'에 보관하고, 코드는 그 서랍을 '참조'만 합니다. 그 비밀 서랍이 바로 환경 변수예요.

🤖 자동화 — Anthropic Cloud 로 매주 자동 실행 (추천)

'GitHub 푸시 = 자동 배포'를 넘어, 정해진 시간마다 Claude 가 스스로 돌며 데이터 초안을 모으게 만들 수 있습니다. 이 사이트(AI Radar)도 매주 이렇게 최신 정보를 수집하지만, 게시 전에는 운영자가 사실 관계를 직접 검증합니다. 스케줄 실행의 가장 쉬운 길은 Anthropic Cloud 예요. 코드도, 토큰도, YAML 도 필요 없습니다. '/schedule' 로 한 번 등록하면 Anthropic 서버에서 에이전트가 정해진 시간에 알아서 돌아갑니다 — 내 PC 가 꺼져 있어도.

내 컴퓨터가 꺼져 있어도 — 클라우드가 알아서 실행🕘 매주 월 9시cron 스케줄☁️ Anthropic CloudAI 에이전트가 웹 검색·판단·파일 수정 자동 수행🚀 git push사이트 자동 배포💻 내 PC 꺼져 있어도 OK · 🔑 setup-token 불필요 · 💳 구독 한도에서 차감
그림 · 매주 월요일, 내 PC가 꺼져 있어도 Anthropic 클라우드가 알아서 실행한다
  1. Claude Code(또는 데스크탑 앱)에서 '/schedule' 입력 — 또는 브라우저로 claude.ai/code/routines 접속
  2. 무엇을 할지 자연어로 설명 — 어떤 레포·무슨 작업·어떻게 마무리(커밋/푸시)까지 빠짐없이
  3. 주기 선택 — 예: 매주 월요일 오전 9시 (최소 간격 1시간)
  4. 모델·레포 확인 후 생성 → 끝. 이후엔 내 PC 없이도 알아서 실행됩니다

⚙️ 심화 — GitHub Actions + setup-token (세밀한 제어·CI 통합)

Anthropic Cloud 로 충분한 경우가 대부분이지만, 기존 CI 파이프라인에 끼우거나(빌드·테스트·머지 게이트) PR·push 같은 이벤트로 트리거하고 싶으면 GitHub Actions 방식이 있습니다. 대신 setup-token 발급·시크릿 등록·YAML 작성이 필요해요.

인증은 'setup-token'을 씁니다. 단 2026-06-15부터 과금이 둘로 나뉩니다 — 터미널에서 직접(대화형) 쓰는 Claude Code는 그대로 내 구독(Pro·Max) 한도로 처리되지만, 자동 실행(GitHub Actions·claude -p 같은 무인)은 구독과 분리된 별도 'Agent SDK 크레딧'(월 Pro $20·Max $100~200, 소진 후 표준 API 요금, 이월 없음)에서 차감됩니다. 앱에서 API 키로 직접 호출하는 건 종전처럼 종량제고요.

  1. 터미널에서 'claude setup-token' 실행 → 브라우저 인증 → 토큰 발급
  2. GitHub 리포 → Settings → Secrets and variables → Actions → New repository secret
  3. 이름 'CLAUDE_CODE_OAUTH_TOKEN', 값에 발급받은 토큰 붙여넣기
  4. .github/workflows/ 안에 워크플로 YAML 작성 (아래 프롬프트로 Claude 에 시키면 자동 생성)
  5. Actions 탭에서 수동 실행(workflow_dispatch)으로 한 번 테스트
  6. 정상 동작하면 cron 스케줄(예: 매주 월요일)로 자동 실행
내 리포에 GitHub Actions 워크플로를 만들어줘.
- 트리거: 매주 월요일 09:00 KST + 수동 실행(workflow_dispatch)
- anthropics/claude-code-action 사용
- 인증: secrets.CLAUDE_CODE_OAUTH_TOKEN (API 키 아님)
- 데이터 갱신 슬래시 명령을 실행한 뒤 변경분을 자동 커밋·푸시
- 권한: contents: write

🌐 도메인 연결 (선택)

  1. 도메인 구매 — Cloudflare·가비아·Namecheap에서 연 $10~
  2. Vercel Project → Settings → Domains → Add
  3. Vercel이 알려주는 DNS 레코드(보통 A 또는 CNAME)를 도메인 관리 화면에 추가
  4. DNS 전파 대기 (몇 분~몇 시간)
  5. Vercel이 자동 SSL(HTTPS) 발급 — 완료

🌍 다른 배포 옵션

📊 사용자 분석 도입 (선택)

앱이 누구에게 어떻게 쓰이는지 보면 다음 기능이 보입니다.

🖥️ 언제 CLI가 꼭 필요한가 — GUI 없는 자동화

자동화·운영은 대부분 '화면(GUI)이 없는 환경'에서 돕니다. 그래서 다음 'CLI 심화'는 데스크탑 앱이 아니라 터미널(CLI) 전용이에요. (앱의 통합 터미널에서도 셸 작업은 되지만, 화면이 아예 없는 서버나 '사람이 아닌 프로그램이 호출'하는 경우는 CLI만 가능합니다.)

💻 CLI 경로 — 터미널 두려움 깨기 (앱 사용자는 명령을 '말로' 대체)

여기서부터는 터미널로 직접 하는 'CLI 심화 트랙'입니다 — 앱으로 충분하면 건너뛰어도 되고, 자동화·CI·서버 운영으로 갈 사람만 보면 됩니다. 터미널(검은 창)은 마우스 대신 명령어로 컴퓨터에 직접 말하는 창입니다. 우리가 쓸 명령은 10개면 충분하고, 이것조차 Claude Code에 '~ 어떻게 해?' 물어봐도 됩니다.

📁 경로 — 절대 경로 vs 상대 경로

파일을 다룰 때 항상 헷갈리는 부분. 한 번만 잡아두면 됩니다.

📦 Node.js 설치 (Claude Code의 전제 조건)

  1. nodejs.org 접속 → LTS(권장) 버전 다운로드
  2. 설치 마법사 따라 진행 (기본값 그대로 OK)
  3. 터미널 새로 열고 'node --version' → v18 이상 표시되면 성공
  4. 'npm --version' 도 같이 확인 (Node.js와 함께 설치)

📦 Claude Code 설치 & 첫 실행

  1. 터미널에서 'npm install -g @anthropic-ai/claude-code' 실행
  2. 설치 완료 후 '~/projects' 또는 원하는 곳으로 cd
  3. 'claude' 입력 → 환영 화면이 보이면 성공
  4. 첫 실행 시 로그인 안내 → 표시되는 URL을 브라우저에서 열어 인증
  5. Anthropic 계정으로 로그인 (구글 계정 OK)
  6. 사용량은 Claude 구독(Pro/Max)에 포함, 또는 별도 API 키

🧭 Claude Code 화면 익히기

🗣️ 터미널로도 만들어보기 — 같은 To-do (선택)

앞에서 앱으로 만든 To-do를, 이번엔 터미널 명령으로 똑같이. 터미널 흐름을 손에 익히는 용도 — 앱으로 충분하면 건너뛰어도 됩니다.

  1. 터미널에서 'mkdir my-todo && cd my-todo' (새 폴더 + 이동)
  2. 'claude' 실행 → 앞 '첫 앱 만들기'의 프롬프트를 그대로 입력
  3. Claude가 만들 파일을 미리 설명 → y로 승인
  4. 'ls'로 확인 후 'open index.html'(Mac) / 'start index.html'(Win)로 실행
  5. 수정도 자연어로 요청 → 브라우저 새로고침해 확인

🔌 IDE 통합 — VS Code / Cursor (터미널에서 함께)

터미널만으로도 충분하지만, 코드 편집 화면을 함께 보면 학습 속도가 훨씬 빠릅니다.

  1. VS Code 설치 (code.visualstudio.com) — 무료, 가장 보편
  2. 터미널에서 'code .' → 현재 폴더가 VS Code로 열림
  3. VS Code의 통합 터미널(Ctrl+`)에서 'claude' 실행 → 코드 + 대화 동시에
  4. Cursor는 VS Code 포크 + AI 기능 내장 — Claude Code 없이도 자체 AI 사용

⚙️ 권한 모드 & CLI 플래그 — 터미널 직접 제어 (앱은 GUI로 대체)

앱은 GUI라서 'claude -c'나 '--dangerously-skip-permissions' 같은 CLI 플래그를 채팅창에 직접 칠 수 없습니다. 대신 같은 동작을 화면 기능이나 통합 터미널로 합니다 — 앱과 CLI는 같은 엔진·설정(CLAUDE.md·MCP)을 공유하거든요.

🧰 바이브 코딩의 '하네스 튜닝' — 프롬프트보다 오래가는 실력

이번 회차에서 배운 조각들 — CLAUDE.md, 권한 모드, 커밋 세이프티넷 — 은 사실 하나의 그림입니다. AI 코딩 도구는 '모델 + 그걸 감싼 작업 환경(하네스)'으로 움직이는데, 그 환경을 내 프로젝트에 맞게 조정하는 게 하네스 튜닝이에요. 프롬프트는 한 번 쓰고 사라지지만, 아래 6가지는 파일·설정으로 남아 다음 세션에도 계속 일합니다.

📌 8회차 핵심