Claude Code CLI 설치 및 REST API 연동 웹앱 실전 개발 가이드
- Claude Code는 코드를 한 줄도 몰라도 "말로 시키면" 웹사이트와 미니 웹앱을 대신 만들어주는 AI 터미널 도구입니다.
- 설치(
npm install -g @anthropic-ai/claude-code) → 자연어 지시 → 배포까지 딱 3단계면 결과물이 완성됩니다. - 완성한 웹앱은 크몽·숨고 외주 대행이나 템플릿 재판매로 실제 현금 수익으로 전환할 수 있습니다.
코딩 학원 결제 페이지 앞에서 카드를 꺼냈다가 다시 집어넣은 적 있으신가요? 저는 있습니다.
3개월짜리 부트캠프 견적을 보고 한숨 쉬다가, 외주 개발자한테 랜딩페이지 하나 맡기려니 견적이 30만 원부터 시작하는 걸 보고 조용히 창을 닫았습니다. "이걸 그냥 내가 만들 수 있으면 얼마나 좋을까"라는 생각, 다들 한 번쯤 해보셨을 겁니다.
그런데 요즘 국내 부업 커뮤니티에서 심상치 않은 이야기가 돌고 있습니다. 코딩을 전혀 모르는 사람들이 클로드코드(Claude Code) 하나로 랜딩페이지, 방명록, 신청서 웹앱 같은 걸 뚝딱 만들어서 외주로 팔고 있다는 후기입니다.
레고를 조립할 때 부품만 던져주면 저는 못 만듭니다. 하지만 "완성 사진을 보여주면서 이대로 만들어줘"라고 부탁할 수 있는 사람이 있다면 어떨까요? Claude Code가 정확히 그 역할을 합니다. 여러분은 완성된 그림(원하는 결과물)을 말로 설명하기만 하면 됩니다.
이 글에서는 실제로 설치부터 배포, 그리고 외주 수익화까지 이어지는 전 과정을 순서대로 짚어보겠습니다.
Claude Code, 대체 뭐가 다른가? (개발자 없이 개발자처럼)
Claude Code는 터미널(컴퓨터에 명령어를 입력하는 검은 화면)에서 돌아가는 AI 에이전트입니다. 어려운 말처럼 들리지만, 원리는 단순합니다.
일반 배송 기사에게 "이 물건, 이 주소로 보내주세요"라고만 말하면 나머지 포장·운송·배달은 기사님이 알아서 처리해줍니다. Claude Code도 똑같습니다. "이런 웹사이트를 만들어줘"라고 정확한 주소(요구사항)만 알려주면, 파일 생성부터 코드 작성, 오류 수정, 실행까지 전부 스스로 처리합니다.
별도의 개발용 프로그램(IDE)을 설치할 필요도 없습니다. 터미널 하나만 있으면 됩니다.
기본 엔진 Sonnet 5 vs 고난도 옵션 Opus 5
Claude Code는 기본적으로 Claude Sonnet 5 모델을 엔진으로 사용합니다. 일반 배송이라고 생각하면 됩니다. 랜딩페이지, 소개 페이지, 간단한 방명록 같은 작업은 이 기본값만으로 충분히 처리됩니다.
만약 회원가입·로그인·결제 연동처럼 여러 파일이 복잡하게 얽힌 풀스택 작업이 필요하다면, --model opus 옵션으로 Claude Opus 5로 전환할 수 있습니다. 당일 특급 배송처럼 더 정교하고 오래 걸리는 작업에 적합한 옵션입니다.
| 구분 | Claude Sonnet 5 (기본) | Claude Opus 5 (옵션) |
|---|---|---|
| 비유 | 일반 배송 | 당일 특급 배송 |
| 추천 작업 | 랜딩페이지, 소개페이지, 방명록 | 회원가입·결제 연동 풀스택 |
| 처리 속도 | 빠름 | 상대적으로 느리지만 정교함 |
| 초보자 추천 여부 | ⭐️ 대부분 이걸로 시작 | 복잡한 요구사항 있을 때만 |
일단 설치부터 해보겠습니다. 터미널을 열고 아래 명령을 입력합니다.
# Node.js가 설치되어 있다는 전제 하에,
# 전역(global)으로 Claude Code CLI를 설치합니다.
npm install -g @anthropic-ai/claude-code
# 설치가 끝나면 원하는 프로젝트 폴더로 이동한 뒤
cd my-first-project
# 대화형 세션을 시작합니다.
claude세션이 시작되면 바로 첫 지시를 내려볼 수 있습니다.
방문자 이름을 입력받아 "환영합니다, {이름}님!" 인사말을 보여주는
1페이지 웹사이트를 HTML/CSS/JS로 만들어줘.
배경색은 파란 계열, 폰트는 깔끔한 산세리프체로 부탁해.몇 초 후, index.html, style.css, script.js 파일이 실제로 만들어지는 걸 눈으로 확인할 수 있습니다. 코드를 한 줄도 안 쳤는데도요.
국내 사용자들의 커뮤니티 게시글을 보면 Windows·Mac 환경에서 설치 시 permission denied 오류가 반복적으로 보고됩니다.
- Windows: PowerShell을 "관리자 권한으로 실행"한 뒤 다시 설치 명령을 입력합니다.
- Mac/Linux: 전역 설치 권한 문제이므로,
nvm이나volta같은 Node.js 버전 관리자를 설치해 사용자 권한으로 Node를 관리하는 방식을 권장합니다.sudo npm install로 강제 설치하면 이후 다른 오류가 꼬일 수 있어 지양하는 게 좋습니다. - 여전히
claude: command not found가 뜬다면, 터미널을 완전히 재시작하거나 PATH 환경변수에 npm 전역 설치 경로가 등록되어 있는지 확인해야 합니다.
실전 5단계로 미니 웹앱 완성하기
이제 실제로 팔 수 있는 결과물을 만드는 흐름을 단계별로 짚어보겠습니다.
Step 1. 설치 (완료)
앞서 다룬 설치 명령과 권한 오류 해결법으로 이미 준비는 끝났습니다.
Step 2. 요구사항을 "건축 설계도"처럼 구체적으로 쓰기
건물을 지을 때 "예쁜 집 지어주세요"라고만 말하면 건축가도 막막합니다. 방 개수, 창문 위치, 층수를 구체적으로 알려줘야 원하는 집이 나옵니다.
Claude Code도 똑같습니다. 모호한 지시와 구체적인 지시의 결과물은 완전히 다릅니다.
| 지시 방식 | 예시 프롬프트 | 결과 품질 |
|---|---|---|
| ❌ 모호한 지시 | "멋진 사이트 만들어줘" | 방향성 없는 결과, 재수정 반복 |
| ✅ 구체적 지시 | "카페 메뉴판 웹사이트, 상단 로고+메뉴 3개 카테고리, 모바일 우선 반응형, 색상은 브라운·크림톤" | 원하는 결과에 근접, 수정 최소화 |
구체적으로 지시할수록 재작업 횟수가 줄어듭니다. 이건 곧 외주 작업 시간 단축, 즉 수익률과 직결됩니다.
Step 3. --agent 모드로 자율 실행 맡기기
Claude Code CLI는 --agent 모드를 지원합니다. 한 문장으로 전체 작업을 맡기고 스스로 판단해 폴더 구조, 프론트엔드, 필요하다면 백엔드 API와 DB 스키마까지 설계하도록 시키는 방식입니다.
claude --agent "회원가입 기능이 있는 방명록 웹사이트를 만들어줘.
방문자는 이름과 한마디 메시지를 남길 수 있고,
관리자 페이지에서 메시지를 삭제할 수 있어야 해.
프론트엔드는 React, 데이터는 간단한 JSON 파일로 저장해줘."이 지시 하나로 폴더 구조 설계, 컴포넌트 파일 생성, 저장 로직 작성까지 자동으로 진행됩니다. 사용자는 코드를 직접 작성하지 않고, 결과물을 확인만 하면 됩니다.
Step 4. 로컬에서 미리보기 확인하고 수정 요청하기
결과물이 마음에 안 들면 바로 대화로 수정을 요청할 수 있습니다.
방명록 목록이 최신순이 아니라 오래된 순으로 나오는데,
최신 메시지가 맨 위에 오도록 정렬 순서를 바꿔줘.사람 개발자에게 "저기요, 이거 순서 좀 바꿔주세요"라고 말하듯 그대로 요청하면 됩니다. 이 자연스러운 대화형 수정 과정이 Claude Code의 진짜 강점입니다.
Step 5. Vercel로 실제 URL 배포하기
로컬에서만 보이는 웹사이트는 아직 상품이 아닙니다. 실제 주소(URL)가 있어야 클라이언트에게 결과물을 보여주고 대금을 받을 수 있습니다.
claude "이 프로젝트를 Vercel에 배포하는 방법을 알려주고
필요한 설정 파일(vercel.json)을 만들어줘."Claude Code가 필요한 설정 파일을 만들어주고 배포 절차를 안내해줍니다. 다만 최종 배포 승인과 계정 인증은 Vercel 계정으로 사용자가 직접 진행해야 합니다. Claude Code가 배포 인증까지 대신해주는 건 아니라는 점은 분명히 알아두시는 게 좋습니다.
완성한 웹앱, 어떻게 돈으로 바꿀까?
만드는 것과 파는 것은 별개의 이야기입니다. 실제로 수익을 만드는 두 가지 시나리오를 소개합니다.
시나리오 A. 외주 대행 서비스 등록
크몽, 숨고 같은 국내 프리랜서 플랫폼에는 최근 "AI 기반 랜딩페이지 제작 대행" 카테고리 게시글이 눈에 띄게 늘고 있습니다. 플랫폼 정책상 AI 도구 사용 자체를 막지 않기 때문에, 결과물 품질과 요구사항 대응력이 경쟁력의 핵심입니다.
견적을 짤 때는 "기존 개발자 대비 제작 시간이 얼마나 단축되는지"를 가격 경쟁력으로 전환하는 게 유리합니다. 하루 만에 완성되는 랜딩페이지를 3일 견적 대신 당일 완성으로 어필하면 클라이언트 입장에서 매력적입니다.
시나리오 B. 재사용 가능한 템플릿 판매
한 번 만든 결과물을 컴포넌트 단위로 재사용 가능하게 설계해두면, 비슷한 요청이 들어올 때마다 처음부터 새로 만들지 않아도 됩니다. 카페 메뉴판을 만들었다면, 로고와 색상만 바꿔 미용실·식당용으로 재판매하는 식입니다. 같은 뼈대를 여러 클라이언트에게 판매하는 구조가 시간 대비 수익률을 극적으로 높여줍니다.
보조 도구로 클라이언트 요구사항 정리하기
클라이언트가 "그냥 예쁘게 해주세요" 같은 모호한 요청을 던지는 경우가 흔합니다. 이럴 때 Gemini 3.6 Flash(무료 티어로 제공되는 가벼운 모델)를 먼저 활용해 클라이언트의 두서없는 요청을 구조화된 프롬프트로 정리한 다음, 그 결과를 Claude Code에 전달하는 워크플로우가 효율적입니다.
예를 들면 이런 식입니다.
[Gemini 3.6 Flash에게 먼저 정리 요청]
클라이언트가 "카페 홈페이지인데 감성적이고 인스타 느낌이면 좋겠어요"
라고 요청했어. 이걸 구체적인 웹사이트 요구사항 스펙(색상, 레이아웃,
필요 섹션)으로 정리해줘.
↓ (정리된 결과를 그대로 복사)
[Claude Code에 전달]
위 스펙대로 카페 홈페이지를 React로 만들어줘.이렇게 정리 단계를 한 번 거치면 Claude Code와의 반복 수정 횟수가 눈에 띄게 줄어듭니다. 결과적으로 작업 시간이 짧아지고, 시간당 수익이 올라갑니다.
처음 시작할 때 흔히 하는 실수와 비용 관리 팁
구독제 vs API 종량제, 뭐가 유리할까
Claude Code 사용 비용은 기본적으로 API 토큰 사용량 기준으로 과금됩니다. 하지만 Claude Pro/Max 월 구독 플랜에도 Claude Code 사용량이 포함되어 있어, 별도 API 키 없이 구독 한도 내에서 사용할 수 있습니다.
부업을 이제 막 시작하는 단계라면, 사용량이 들쑥날쑥한 종량제보다 매달 정해진 금액만 나가는 월 구독제가 예산 관리 측면에서 훨씬 마음이 편합니다.
다만 구독 플랜 내 정확한 월간 사용 한도(시간/토큰)는 계정 유형에 따라 달라질 수 있어 공식 확인 불가입니다. 시작 전에는 반드시 본인 계정 대시보드에서 현재 남은 사용량을 직접 확인하는 습관을 들이는 게 좋습니다.
초보자가 가장 많이 하는 실수
가장 흔한 실수는 지시를 너무 광범위하게 던지는 것입니다. "멋진 사이트 만들어줘" 같은 지시는 결과물의 품질을 낮추고, 오히려 수정 요청만 늘려서 작업 시간을 더 잡아먹습니다.
두 번째 실수는 배포 전 로컬 미리보기 확인을 건너뛰는 것입니다. 클라이언트에게 결과물을 보여주기 전, 반드시 직접 눌러보고 깨진 부분이 없는지 확인하는 과정을 생략하면 신뢰를 잃기 쉽습니다.
설치 한 줄, 구체적인 지시 한 문단, 배포 명령 한 줄. 이 세 가지만 손에 익으면 코딩을 몰라도 실제로 팔 수 있는 웹앱을 만들 수 있습니다.
완성한 결과물은 크몽·숨고 외주 대행이나 템플릿 재판매로 곧바로 현금화 경로를 연결할 수 있습니다. 견적 산정 시 제작 시간 단축분을 가격 경쟁력으로 삼는 것, 그리고 요구사항 정리 단계에서 Gemini 3.6 Flash 같은 보조 도구를 활용해 반복 수정을 줄이는 것이 실전에서 체감되는 핵심 팁입니다.
더 미룰 이유가 없습니다. 지금 터미널을 열고 아래 한 줄부터 실행해보세요.
npm install -g @anthropic-ai/claude-code
댓글
댓글 쓰기