비전공자도 하루 만에 앱 만드는 Claude Code 실전 입문

Claude Code란 무엇인가 — 코딩 모르는 사람도 쓸 수 있나

2025년을 기점으로 “바이브 코딩(Vibe Coding)”이라는 단어가 개발자 커뮤니티를 넘어 일반 대중에게도 빠르게 퍼졌습니다. 바이브 코딩이란 코드를 직접 타이핑하는 대신 AI에게 원하는 것을 말(또는 글)로 설명하면 AI가 코드를 생성·수정·실행하는 방식을 말합니다. 그 중심에 있는 도구가 바로 Anthropic이 만든 Claude Code입니다.

Claude Code는 터미널(명령줄)에서 동작하는 AI 코딩 에이전트입니다. 단순한 코드 자동완성 도구와 다르게, 파일을 직접 읽고 수정하며, 명령을 실행하고, 결과를 스스로 확인하면서 작업을 끝까지 완수합니다. 비전공자 입장에서 가장 중요한 점은 “무엇을 만들고 싶다”는 목적만 명확히 전달하면 나머지 기술적 세부 사항은 Claude가 처리한다는 것입니다.

그렇다면 정말 코딩을 전혀 모르는 사람도 쓸 수 있을까요? 답은 “예, 하지만 준비가 필요합니다”입니다. 설치 과정과 기본 터미널 사용법은 한 번 익혀야 합니다. 이 글에서 그 준비 과정을 단계별로 안내합니다.

설치 5분 완성 — Node.js부터 Claude Code까지

1단계: Node.js 설치

Claude Code는 Node.js 환경에서 실행됩니다. Node.js가 없다면 먼저 설치해야 합니다.

macOS (Homebrew 사용):

# Homebrew가 없다면 먼저 설치
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Node.js 설치
brew install node

# 설치 확인
node --version
# v22.x.x 이상이면 정상

Windows (공식 설치 파일 사용):

# https://nodejs.org 에서 LTS 버전 다운로드 후 설치
# 설치 후 PowerShell 열고 확인
node --version

2단계: Claude Code 설치

# npm으로 전역 설치
npm install -g @anthropic-ai/claude-code

# 설치 확인
claude --version

3단계: API 키 설정

Claude Code를 사용하려면 Anthropic API 키가 필요합니다. console.anthropic.com에서 가입 후 API 키를 발급받으세요.

# 첫 실행 시 자동으로 API 키 입력 요청
claude

# 또는 환경변수로 직접 설정
export ANTHROPIC_API_KEY="sk-ant-여기에-본인-키-입력"

설치가 완료되었습니다. 여기까지 실제로 걸리는 시간은 인터넷 속도에 따라 다르지만 보통 5~10분이면 충분합니다.

첫 프로젝트 실습 — 할일 관리 앱을 말로 만들기

이제 실제로 무언가를 만들어 봅시다. 비전공자에게 가장 효과적인 첫 프로젝트는 간단한 할일 관리(Todo) 웹 앱입니다. HTML, CSS, JavaScript를 전혀 몰라도 됩니다.

프로젝트 폴더 만들기

# 홈 폴더에 프로젝트 폴더 생성
mkdir ~/my-todo-app
cd ~/my-todo-app

# Claude Code 시작
claude

Claude에게 요청하기

Claude Code가 실행되면 프롬프트(>)가 나타납니다. 여기에 원하는 것을 한국어로 입력하면 됩니다.

> 할일을 추가하고, 완료 체크하고, 삭제할 수 있는 웹 앱을 만들어줘.
  디자인은 깔끔하고 모던하게. 다크모드도 지원해줘.
  index.html 파일 하나로 완성해줘.

Claude는 즉시 작업을 시작합니다. 파일을 생성하고, 코드를 작성하고, 완성 여부를 스스로 확인합니다. 약 30초~1분 후 index.html 파일이 완성됩니다.

결과 확인

# macOS에서 브라우저로 열기
open index.html

# Windows에서 브라우저로 열기
start index.html

브라우저에 할일 관리 앱이 열립니다. 추가하고, 체크하고, 삭제하는 기능이 모두 동작합니다. 코드 한 줄 직접 입력하지 않았는데 앱이 만들어진 것입니다.

기능 추가 요청

앱이 마음에 들지 않거나 기능을 추가하고 싶으면 다시 말로 요청하면 됩니다.

> 할일에 마감일(날짜)을 설정할 수 있게 해줘.
  마감일이 오늘이면 빨간색으로 표시해줘.

> 할일을 카테고리별로 분류할 수 있게 해줘.
  업무, 개인, 공부 카테고리 기본으로 넣어줘.

> 할일 목록을 localStorage에 저장해서
  브라우저 새로고침해도 유지되게 해줘.

이처럼 Claude Code와의 대화는 점진적 개선 방식으로 진행됩니다. 처음부터 완벽한 앱을 요청할 필요가 없습니다. 기본을 만들고, 하나씩 추가하는 방식이 훨씬 효과적입니다.

비전공자가 알아야 할 프롬프트 작성법

Claude Code에서 원하는 결과를 얻으려면 프롬프트(요청문) 작성 방식이 중요합니다. 비전공자가 자주 하는 실수와 올바른 방법을 정리했습니다.

실수 1: 너무 모호하게 요청

# 나쁜 예
> 웹사이트 만들어줘

# 좋은 예
> 카페 메뉴판 웹페이지를 만들어줘.
  아메리카노, 라떼, 녹차 라떼 3가지 메뉴가 있고
  각각 이름, 가격, 간단한 설명이 있어.
  배경은 흰색, 글씨는 검정, 포인트 색은 갈색으로 해줘.

실수 2: 한 번에 너무 많이 요청

# 나쁜 예
> 회원가입, 로그인, 상품 등록, 장바구니, 결제까지 다 되는
  쇼핑몰 만들어줘

# 좋은 예 (단계별로)
> 먼저 상품 목록을 보여주는 페이지만 만들어줘.
  상품은 이름, 가격, 이미지(임시 이미지 ok)로 구성.

(완성 후)
> 이제 장바구니 기능을 추가해줘.
  상품 카드에 '담기' 버튼 추가하고, 오른쪽 사이드에 장바구니 표시.

실수 3: 에러 발생 시 포기

# 에러 메시지가 나와도 당황하지 말고 그대로 붙여넣기
> 아래 에러가 났어. 고쳐줘.
  [에러 메시지 붙여넣기]

# 또는 결과가 원하는 것과 다를 때
> 색상이 너무 어두워. 배경을 좀 더 밝게 바꿔줘.
> 글씨가 너무 작아. 전체적으로 폰트 크기 키워줘.

효과적인 프롬프트 패턴 3가지

패턴 1: 목적 + 대상 + 제약조건

> [무엇을 만들지] + [누가 쓸지/어디서 쓸지] + [꼭 지켜야 할 조건]
예: 중학생이 사용하는 영어 단어 퀴즈 앱을 만들어줘.
    모바일에서도 잘 보여야 하고, 글씨 크기는 크게 해줘.

패턴 2: 참고 사례 제시

> 노션(Notion)처럼 블록 단위로 글을 편집할 수 있는
  간단한 에디터 페이지를 만들어줘.
  블록 타입은 텍스트, 제목, 체크리스트만 지원하면 돼.

패턴 3: 단계 확인 요청

> 시작하기 전에 어떤 순서로 만들 건지 먼저 설명해줘.
  내가 확인하면 그때 시작해줘.

자주 묻는 질문 Q&A

Q. 비전공자도 정말 Claude Code로 실제 서비스를 만들 수 있나요?

A. 간단한 정적 웹사이트, 도구성 앱, 데이터 시각화 페이지 정도는 충분히 가능합니다. 다만 회원제 서비스, 결제 시스템, 대용량 데이터 처리 등은 기본적인 웹 개발 지식이 어느 정도 필요합니다. Claude Code는 그 과정을 크게 단축시켜 주는 도구이지, 지식을 완전히 대체하는 도구는 아닙니다.

Q. API 키 비용이 걱정됩니다. 많이 쓰면 돈이 많이 나오나요?

A. Anthropic API는 사용량 기반 과금입니다. 입력 토큰과 출력 토큰에 따라 요금이 달라집니다. 일반적인 학습 및 소규모 프로젝트 수준이라면 월 5~20달러 정도입니다. 처음에는 사용량 알림을 설정해두고 확인하며 사용하는 것을 권장합니다.

Q. 만든 앱을 인터넷에 공개하려면 어떻게 해야 하나요?

A. 가장 쉬운 방법은 Vercel이나 Netlify 같은 무료 호스팅 서비스를 이용하는 것입니다. Claude Code에게 “이 앱을 Vercel에 배포하는 방법을 알려줘”라고 물어보면 단계별로 안내해 줍니다.

Q. 한국어로 요청해도 되나요? 영어가 더 잘 되나요?

A. 한국어로 요청해도 충분히 잘 이해합니다. 다만 기술적인 용어(예: localStorage, API, 반응형 디자인)는 영어 그대로 사용하는 편이 더 정확합니다. 일반 설명은 한국어, 기술 키워드는 영어로 혼용하는 방식이 실제로 가장 효과적입니다.

Q. Claude Code와 ChatGPT의 코딩 기능은 어떻게 다른가요?

A. 가장 큰 차이는 에이전트 능력입니다. ChatGPT는 코드를 제안해주지만, 사용자가 직접 복사해서 파일에 붙여넣어야 합니다. Claude Code는 직접 파일을 생성하고, 명령을 실행하고, 에러를 확인하고 수정하는 과정을 스스로 수행합니다. 비전공자에게는 이 차이가 매우 크게 느껴집니다.

Q. Windows에서도 동일하게 사용할 수 있나요?

A. 네, Windows에서도 사용 가능합니다. 다만 WSL(Windows Subsystem for Linux)을 사용하면 macOS와 거의 동일한 환경에서 사용할 수 있어 추천드립니다. WSL 설치는 PowerShell에서 wsl --install 명령 하나로 가능합니다.

오늘 5분 실습

마무리

Claude Code는 비전공자에게 코딩의 진입 장벽을 획기적으로 낮춰줍니다. 물론 처음에는 낯설고 어색할 수 있습니다. 터미널이 무섭고, 에러 메시지가 난해하게 느껴질 수도 있습니다. 하지만 오늘 소개한 기본 흐름 — 설치 → 실행 → 말로 요청 → 확인 → 수정 요청 — 을 반복하다 보면 생각보다 빠르게 익숙해집니다.

중요한 것은 완벽한 프롬프트를 쓰려고 하지 않는 것입니다. 대략적인 방향을 잡고 Claude와 주고받으면서 결과를 만들어가는 과정 자체가 바이브 코딩의 핵심입니다.

더 깊이 있는 실습을 원하신다면 두온교육(main.duonedu.net)과 미래이음연구소(lab.duonedu.net)에서 체계적인 강의 커리큘럼을 확인하세요.