Claude Code 완전 정복: 비전공자도 하루 만에 실전 앱 만드는 법

코딩을 배운 적 없어도 괜찮다. 2026년 현재, 바이브 코딩(Vibe Coding)이라는 새로운 개발 방식이 비전공자들에게 실제 소프트웨어를 만들 수 있는 문을 열어주고 있다. 그 중심에 있는 도구가 바로 Claude Code다. 터미널 창 하나, 그리고 자연어로 대화하는 능력만 있으면 충분하다.

이 글에서는 Claude Code를 처음 접하는 비전공자가 설치부터 첫 앱 완성까지 직접 따라 할 수 있도록 구체적인 명령어와 예시를 모두 담았다. 막히는 부분 없이 끝까지 따라와 보자.

Claude Code란 무엇인가

Claude Code는 Anthropic이 2025년에 출시한 터미널 기반 AI 코딩 에이전트다. 일반적인 채팅 AI와 다른 점은, 단순히 코드를 알려주는 데 그치지 않고 실제로 파일을 만들고, 실행하고, 오류를 수정하는 일까지 직접 처리한다는 것이다.

쉽게 말하면 이런 식이다. 터미널에서 Claude Code를 실행한 뒤 “로그인 기능이 있는 웹 앱 만들어줘”라고 입력하면, Claude가 파일 구조를 설계하고, 코드를 작성하고, 필요한 라이브러리를 설치하고, 서버까지 띄워준다. 개발자는 코드 한 줄 직접 쓰지 않아도 된다.

기존 AI 코딩 도구와의 차이점

• ChatGPT / Claude 웹버전: 코드를 텍스트로 보여줌. 직접 복사해서 붙여넣어야 함.
• GitHub Copilot: 에디터 안에서 코드 자동완성. 기본 개발 지식 필요.
• Claude Code: 터미널에서 직접 파일 조작, 실행, 수정까지 자율적으로 처리.

비전공자 입장에서 Claude Code의 가장 큰 강점은 맥락을 기억하며 대화가 이어진다는 점이다. “버튼 색을 바꿔줘”, “로그인 오류 고쳐줘” 같은 자연어 지시만으로 프로젝트를 계속 발전시킬 수 있다.

설치 및 첫 실행 — 5분이면 끝

Claude Code는 Node.js 기반으로 동작한다. 아래 순서대로 따라 하면 된다.

1단계: Node.js 설치 확인

node --version

버전이 표시되면 이미 설치된 것이다. v18 이상이면 문제없다. 설치가 안 되어 있다면 nodejs.org에서 LTS 버전을 내려받아 설치한다.

2단계: Claude Code 설치

npm install -g @anthropic-ai/claude-code

설치가 완료되면 아래 명령으로 버전을 확인한다.

claude --version

3단계: 인증

claude

처음 실행하면 Anthropic 계정 로그인 화면이 뜬다. 브라우저가 열리고 계정 인증을 마치면 터미널로 돌아온다. 이후부터는 별도 로그인 없이 바로 사용할 수 있다.

4단계: 프로젝트 폴더 만들기

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

이제 Claude Code가 이 폴더를 작업 공간으로 인식한다. 준비 완료다.

첫 번째 프로젝트: 할 일 관리 앱 만들기

비전공자에게 가장 좋은 첫 프로젝트는 할 일 관리 앱(Todo App)이다. 단순하지만 데이터 저장, 화면 출력, 사용자 입력 처리 등 웹 앱의 핵심 개념을 모두 담고 있기 때문이다.

프롬프트 입력

Claude Code 터미널에 아래처럼 입력한다.

할 일을 추가하고 완료 체크하고 삭제할 수 있는 웹 앱을 만들어줘.
HTML, CSS, JavaScript만 사용하고, 데이터는 브라우저 localStorage에 저장해줘.
디자인은 깔끔하고 모바일에서도 잘 보이게 해줘.

Claude가 자동으로 다음 작업을 수행한다.

1. index.html 생성 — 전체 구조
2. style.css 생성 — 반응형 디자인
3. app.js 생성 — 기능 로직

결과물 확인

파일이 생성되면 바로 브라우저에서 확인할 수 있다.

open index.html

macOS 기준 명령어다. Windows라면 start index.html, Linux라면 xdg-open index.html을 쓴다.

기능 추가 요청

앱이 마음에 들면 바로 기능을 더 요청할 수 있다.

할 일에 마감일 설정 기능을 추가해줘. 오늘이 마감일이면 빨간색으로 표시해줘.

완료된 항목은 별도 섹션으로 분리해서 보여줘.

전체 삭제 버튼을 추가하고, 클릭 시 확인 팝업이 뜨게 해줘.

이런 식으로 대화를 이어가며 앱을 발전시킨다. 코드를 전혀 몰라도 된다. 원하는 기능을 말로 설명하는 것이 전부다.

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

Claude Code를 잘 쓰는 핵심은 좋은 프롬프트에 있다. 막연한 요청보다 구체적인 요청이 훨씬 좋은 결과를 만든다.

나쁜 프롬프트 vs 좋은 프롬프트

나쁜 프롬프트	좋은 프롬프트
앱 만들어줘	사용자가 메모를 작성하고 태그로 분류할 수 있는 메모 앱을 만들어줘
예쁘게 해줘	배경은 흰색, 강조색은 보라색(#7c3aed)으로 바꿔줘. 카드 그림자도 추가해줘
오류 고쳐줘	삭제 버튼 클릭 시 콘솔에 “Cannot read properties of null” 오류가 뜨는데 고쳐줘

단계별로 요청하기

한 번에 모든 기능을 요청하면 Claude가 복잡한 코드를 한꺼번에 생성해 오류가 생길 수 있다. 작은 단위로 나눠서 요청하고, 각 단계마다 결과를 확인하는 것이 효율적이다.

# 1단계: 기본 구조만
기본 HTML 구조와 헤더만 만들어줘.

# 2단계: 기능 추가
할 일 입력 폼과 목록 표시 기능을 추가해줘.

# 3단계: 스타일
전체 디자인을 깔끔하게 다듬어줘. 모바일 대응도 해줘.

# 4단계: 데이터 저장
새로고침해도 데이터가 유지되도록 localStorage 저장 기능을 추가해줘.

오류 발생 시 대처법

앱이 제대로 작동하지 않을 때는 브라우저 개발자 도구(F12)를 열어 콘솔 탭에 표시된 오류 메시지를 그대로 복사해서 Claude에게 붙여넣는다.

이 오류가 발생했어. 고쳐줘:
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
    at renderTodos (app.js:45:30)

코드를 이해할 필요가 없다. 오류 메시지를 전달하는 것만으로도 Claude가 원인을 찾아 수정한다.

자주 묻는 질문 Q&A

Q. Claude Code는 유료인가요?

A. Claude Code 자체는 무료로 설치할 수 있지만, 실제 사용 시 Anthropic API 비용이 발생한다. 가볍게 개인 프로젝트를 만드는 수준이라면 월 5~10달러 내외로 충분하다. Anthropic 콘솔에서 사용량을 실시간으로 확인할 수 있다.

Q. 맥이 아닌 윈도우에서도 쓸 수 있나요?

A. 가능하다. Windows라면 PowerShell이나 명령 프롬프트에서 동일하게 설치하고 사용할 수 있다. WSL2(Windows Subsystem for Linux)를 쓴다면 더 안정적으로 동작한다. WSL2 설치 후 Ubuntu 터미널에서 동일한 설치 명령을 실행하면 된다.

Q. 만든 앱을 인터넷에 올릴 수 있나요?

A. 물론이다. Claude Code에게 배포까지 부탁할 수 있다. “이 앱을 Vercel에 배포해줘”라고 입력하면 Vercel CLI 설치부터 배포 과정까지 안내해준다. 정적 사이트라면 GitHub Pages나 Netlify를 이용해도 된다.

이 앱을 Vercel에 무료로 배포하는 방법을 단계별로 알려주고 직접 배포해줘.

Q. 만든 코드를 이해해야 하나요?

A. 처음에는 이해하지 못해도 된다. 하지만 Claude Code를 쓰면서 자연스럽게 코드 구조를 눈에 익히게 된다. 같은 패턴이 반복되면서 “이 부분이 이런 역할을 하는구나”를 느끼게 되는데, 이것이 바이브 코딩의 학습 방식이다. 이해보다 실행이 먼저다.

Q. 한국어로 요청해도 되나요?

A. 완벽하게 작동한다. Claude는 한국어를 매우 잘 이해한다. 영어로 요청하면 더 정확할 것이라는 생각은 버려도 된다. 편한 언어로 자세히 설명하는 것이 더 중요하다.

오늘 5분 실습

지금 당장 할 수 있는 실습이다. 터미널을 열고 아래 과정을 그대로 따라 해보자.

# 1. 폴더 만들기
mkdir vibe-test && cd vibe-test

# 2. Claude Code 실행
claude

# 3. 아래 프롬프트 입력
오늘 날짜와 시간을 보여주는 디지털 시계 웹 페이지를 만들어줘.
배경은 어두운 색, 시계 숫자는 크고 밝게.
1초마다 자동으로 업데이트되어야 해.

5분이면 동작하는 디지털 시계 앱이 완성된다. 여기서 끝내지 말고 이렇게 이어가 보자.

# 추가 요청 예시
알람 기능을 추가해줘. 특정 시간을 입력하면 알림음이 울리게.

배경을 3가지 테마(다크/라이트/보라색)로 바꿀 수 있는 버튼을 추가해줘.

프롬프트를 바꿔가며 앱이 진화하는 과정을 직접 경험해 보자. 이것이 바이브 코딩의 즐거움이다.

마무리

Claude Code는 코딩 장벽을 낮추는 도구가 아니라, 코딩 장벽을 없애는 도구다. 지금까지 “개발은 어려운 것”이라는 선입견이 있었다면 오늘 실습으로 그 생각이 조금 바뀌었으면 한다.

바이브 코딩은 아이디어가 있는 사람이라면 누구나 소프트웨어를 만들 수 있는 시대를 열고 있다. 코드를 외울 필요도, 알고리즘을 공부할 필요도 없다. 만들고 싶은 것을 말로 설명하는 능력, 그것만으로 충분하다.

더 깊이 배우고 싶다면 두온교육(main.duonedu.net)의 AI 교육 콘텐츠와 미래이음연구소(lab.duonedu.net)의 실전 강의를 참고하자. 비전공자도 3개월이면 실제 서비스를 만들 수 있는 커리큘럼이 준비되어 있다.