Claude Code 비전공자 실전 튜토리얼: 터미널 한 줄로 앱 만들기

코드를 한 줄도 몰라도 됩니다. 말만 할 줄 알면 됩니다. 2026년 바이브 코딩의 핵심 도구로 자리 잡은 Claude Code는 터미널에서 AI와 대화하듯 개발하는 완전히 새로운 방식의 코딩 경험을 제공합니다. 이 글에서는 비전공자가 처음부터 Claude Code를 설치하고, 실제로 동작하는 웹 앱을 만들어내는 전 과정을 단계별로 살펴봅니다.

Claude Code란 무엇인가 — 바이브 코딩의 심장

Claude Code는 Anthropic이 2025년 출시한 에이전틱 코딩 도구입니다. 일반 코드 자동완성 도구와는 차원이 다릅니다. Claude Code는 프로젝트 전체를 읽고, 파일을 직접 편집하고, 터미널 명령을 실행하며, Git 커밋까지 스스로 처리합니다.

전통적인 개발 흐름은 이렇습니다. 개발자가 요구사항을 분석하고, 설계하고, 코드를 작성하고, 디버깅하고, 배포합니다. 이 과정에 보통 수일에서 수주가 걸립니다. 바이브 코딩은 이 흐름을 완전히 뒤집습니다. 사람은 무엇을 만들지만 이야기하고, Claude Code가 나머지를 처리합니다.

2026년 3월 현재 Claude Code는 다음 환경에서 사용 가능합니다.

• 터미널 CLI (macOS, Linux, Windows WSL)
• VS Code 확장 프로그램
• Claude 데스크탑 앱 내 통합
• 브라우저 기반 인터페이스

비전공자에게 가장 추천하는 방식은 터미널 CLI입니다. 처음에는 낯설지만, 몇 번 써보면 이것이 가장 강력하다는 것을 바로 느낍니다.

설치 완전 정복 — macOS, Windows, Linux 모두

설치는 놀랍도록 간단합니다. 플랫폼별로 명령 하나만 실행하면 됩니다.

macOS / Linux / WSL

터미널을 열고 아래 명령을 그대로 붙여넣습니다.

curl -fsSL https://claude.ai/install.sh | bash

설치가 끝나면 Claude 계정으로 로그인합니다. Claude Pro 플랜($20/월) 이상이면 바로 사용 가능합니다.

claude login

로그인 후 버전을 확인해 정상 설치를 확인합니다.

claude --version
# 출력 예시: claude 1.4.2 (2026-02-28)

Windows (PowerShell)

Windows 사용자는 PowerShell을 관리자 권한으로 열고 실행합니다. 단, Git for Windows가 먼저 설치되어 있어야 합니다.

# 1단계: Git for Windows 설치 (이미 있으면 생략)
winget install Git.Git

# 2단계: Claude Code 설치
irm https://claude.ai/install.ps1 | iex

Homebrew 사용자 (macOS)

brew install --cask claude-code

# Homebrew는 자동 업데이트가 안 되므로 주기적으로 실행
brew upgrade claude-code

설치 후 처음으로 프로젝트 폴더를 만들고 Claude Code를 시작해 봅니다.

mkdir my-first-app
cd my-first-app
claude

이렇게 하면 Claude Code가 현재 폴더를 프로젝트로 인식하고 대화 모드로 진입합니다. 여기서부터 말만 하면 됩니다.

첫 번째 프로젝트 — 할 일 관리 앱을 10분 안에

실제로 동작하는 앱을 만들어 보겠습니다. 목표는 브라우저에서 열 수 있는 할 일 관리(Todo) 웹 앱입니다. 추가, 완료 체크, 삭제 기능이 모두 들어갑니다.

1단계: 프로젝트 시작

mkdir todo-app && cd todo-app
claude

2단계: 프롬프트 입력

Claude Code 대화창에 다음처럼 입력합니다. 한국어로 말해도 됩니다.

할 일 관리 웹 앱을 만들어줘.
- HTML, CSS, JavaScript만 사용 (서버 없이 브라우저에서 바로 열리게)
- 할 일 추가 입력창과 추가 버튼
- 각 항목에 완료 체크박스와 삭제 버튼
- 완료된 항목은 취소선 표시
- 깔끔한 카드 디자인, 모바일도 잘 보이게

Claude Code는 이 요청을 받고 자동으로 파일을 생성합니다. 실제 출력 과정은 다음과 같습니다.

Creating index.html...
  Writing HTML structure with semantic elements
  Adding CSS with flexbox layout and card design
  Implementing JavaScript for add/complete/delete functions

Done. Created: index.html (187 lines)

3단계: 브라우저에서 확인

# macOS
open index.html

# Windows
start index.html

# Linux
xdg-open index.html

10분도 안 되어 실제로 동작하는 앱이 완성됩니다. 여기서 끝이 아닙니다. 추가 요청을 계속 이어갈 수 있습니다.

# 기능 추가 요청 예시
"로컬스토리지에 저장해서 새로고침해도 데이터가 남게 해줘"
"다크모드 토글 버튼도 추가해줘"
"완료된 항목 수를 상단에 표시해줘"

각 요청마다 Claude Code는 기존 코드를 파악하고 적절한 위치에 수정을 가합니다. 덮어쓰는 것이 아니라, 기존 구조를 이해하고 정밀하게 편집합니다.

비전공자를 위한 프롬프트 작성법

Claude Code를 처음 쓰는 비전공자가 가장 막히는 부분은 코드가 아닙니다. 어떻게 말해야 하는지입니다. 몇 가지 핵심 원칙을 소개합니다.

원칙 1: 결과물 중심으로 말하기

나쁜 예시와 좋은 예시를 비교해 봅니다.

# 나쁜 예시 (과정 중심)
"React를 쓰고 useState 훅으로 상태를 관리하고 styled-components로 스타일링해줘"

# 좋은 예시 (결과 중심)
"사용자가 이름과 이메일을 입력하고 제출하면, 
 입력 내용을 화면 아래 목록으로 보여주는 폼 앱을 만들어줘"

원칙 2: 제약 조건 명시하기

# 기술 제약
"서버 없이 브라우저에서만 동작하게"
"외부 라이브러리 없이 순수 HTML/JS만 사용해"
"Python Flask로 만들어줘"

# 디자인 제약
"버튼은 파란색, 폰트는 크게, 모바일 우선으로"
"심플하고 미니멀한 스타일, 불필요한 장식 없이"

원칙 3: 오류 발생 시 그대로 붙여넣기

앱이 오류를 내면 오류 메시지를 그대로 복사해서 Claude Code에 붙여넣습니다. 분석하거나 해석할 필요 없습니다.

# 오류 처리 예시
"아래 오류가 났어. 고쳐줘:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at index.html:45:30"

원칙 4: 단계적으로 요청하기

한 번에 모든 기능을 요청하는 것보다 기능별로 나누어 요청하면 품질이 높아집니다.

# 1차 요청: 기본 구조
"기본 레이아웃과 헤더, 푸터만 먼저 만들어줘"

# 2차 요청: 핵심 기능
"메인 콘텐츠 영역에 검색 기능 추가해줘"

# 3차 요청: 세부 조정
"검색 결과가 없을 때 안내 메시지 보여줘"

AntiGravity와 Claude Code 연동 — 배포까지 한 번에

만든 앱을 인터넷에 공개하려면 배포가 필요합니다. 바이브 코딩 생태계에서 주목받는 도구 중 하나가 AntiGravity입니다. AntiGravity는 코드 작성부터 클라우드 배포까지를 단순화하는 플랫폼으로, Claude Code와 함께 쓰면 개발-배포 사이클을 크게 단축할 수 있습니다.

Claude Code 내에서 배포 관련 작업을 요청하는 방식은 다음과 같습니다.

# Vercel로 정적 사이트 배포 요청
"이 앱을 Vercel에 배포할 수 있도록 vercel.json 설정 파일 만들어줘"

# Netlify 배포 설정
"Netlify에 배포할 netlify.toml 파일 만들고, 
 배포 명령도 알려줘"

# GitHub Pages 배포
"GitHub Pages로 배포하려면 어떻게 해야 해? 
 필요한 설정 파일 다 만들어줘"

Claude Code는 요청에 맞는 설정 파일을 생성하고, 이후 터미널 명령까지 안내합니다.

# Vercel CLI 설치 및 배포
npm install -g vercel
vercel --prod

# 출력 예시
Vercel CLI 38.0.0
Deploying ~/todo-app ...
Deployed to https://todo-app-abc123.vercel.app

중요한 점은, 비전공자가 Vercel이나 Netlify의 구체적인 설정 방식을 몰라도 된다는 겁니다. Claude Code에 목표만 말하면 세부 설정은 알아서 처리됩니다.

Git 연동과 자동화

Claude Code는 Git도 다룹니다. 코드를 완성하고 나서 아래처럼 요청할 수 있습니다.

# Git 초기화 및 첫 커밋
"Git 저장소 초기화하고 첫 커밋해줘. 커밋 메시지는 한국어로"

# Claude Code 실행 결과
git init
git add .
git commit -m "첫 번째 커밋: 할 일 관리 앱 기본 구조 완성"
[main (root-commit) a1b2c3d] 첫 번째 커밋: 할 일 관리 앱 기본 구조 완성
 1 file changed, 187 insertions(+)

Q&A — 실제 수강생들이 가장 많이 묻는 질문

Q1. 비전공자도 정말 Claude Code를 쓸 수 있나요?

네, 가능합니다. 단, 완전히 아무것도 몰라도 된다는 뜻은 아닙니다. 터미널이 무엇인지, 폴더 구조가 어떻게 되는지 정도는 알면 훨씬 수월합니다. 미래이음연구소의 바이브 코딩 입문 과정에서는 이 기초부터 시작해 첫날에 실제 앱을 배포하는 경험을 제공합니다.

Q2. Claude Code와 ChatGPT 코딩 기능의 차이는 무엇인가요?

ChatGPT는 코드를 생성해서 보여줍니다. 사용자가 그것을 복사해서 직접 파일에 붙여넣어야 합니다. Claude Code는 파일을 직접 편집합니다. 프로젝트 폴더 전체를 이해하고, 변경이 필요한 파일을 스스로 찾아 수정합니다. 이 차이가 실제 개발 속도에서 매우 크게 나타납니다.

Q3. 요금은 얼마나 드나요?

Claude Pro 플랜($20/월)이 기본입니다. 사용량이 많다면 Max 플랜($100/월)을 고려할 수 있습니다. API를 직접 연결하는 방식도 있는데, 이 경우 사용한 토큰만큼 과금됩니다. 일반적인 학습 및 개인 프로젝트 수준이라면 Pro 플랜으로 충분합니다.

Q4. 만든 코드가 내 것인가요?

네. Claude Code가 생성한 코드의 저작권은 사용자에게 있습니다. Anthropic은 생성된 코드에 대한 권리를 주장하지 않습니다.

Q5. 오류가 나면 어떻게 하나요?

가장 쉬운 방법은 오류 메시지를 그대로 Claude Code에 붙여넣는 것입니다. “이 오류 고쳐줘”라고 하면 원인을 분석하고 수정까지 완료합니다. 수강생 경험상 대부분의 초급 오류는 이 방법으로 5분 내에 해결됩니다.

Q6. 인터넷이 없으면 사용 못 하나요?

Claude Code는 클라우드 기반 AI를 사용하기 때문에 인터넷 연결이 필수입니다. 오프라인 환경에서는 사용할 수 없습니다.

Q7. 어떤 언어로 개발할 수 있나요?

Python, JavaScript, TypeScript, HTML/CSS, Java, Go, Rust, PHP, SQL 등 주요 언어를 모두 지원합니다. 특정 언어를 명시하지 않으면 맥락에 맞는 언어를 자동으로 선택합니다.

오늘 바로 시작하는 5분 실습

지금 당장 Claude Code를 설치하고 첫 앱을 만들어 봅니다. 순서대로 따라하면 5분 안에 동작하는 앱이 생깁니다.

1. 터미널을 열고 설치 명령 실행
   curl -fsSL https://claude.ai/install.sh | bash
2. Claude 계정 로그인
   claude login
3. 새 프로젝트 폴더 생성 및 이동
   mkdir my-vibe-app && cd my-vibe-app
4. Claude Code 시작
   claude
5. 첫 번째 프롬프트 입력 (한국어 OK)
   오늘 날씨를 입력하면 어울리는 음악 장르를 추천해주는 간단한 웹 앱 만들어줘. HTML 파일 하나로, 외부 라이브러리 없이.
6. 생성된 파일을 브라우저로 열기
   open index.html

이 과정을 마치면 실제로 동작하는 인터랙티브 웹 앱이 완성됩니다. 여기서 기능을 계속 추가하거나, 다른 아이디어로 새 프로젝트를 시작하면 됩니다.

---

바이브 코딩은 특권층의 도구가 아닙니다. 아이디어가 있고 그것을 말로 표현할 수 있다면 누구나 개발자가 될 수 있는 시대입니다. Claude Code는 그 입구에 서 있는 가장 강력한 도구 중 하나입니다.

더 체계적인 학습을 원한다면 두온교육(main.duonedu.net)의 바이브 코딩 커리큘럼을 확인해 보세요. 그리고 실전 프로젝트 중심의 집중 교육은 미래이음연구소(lab.duonedu.net)에서 이신우 소장에게 직접 배울 수 있습니다. 문의: 010-3343-4000.