비엔지니어를 위한 바이브 코딩 입문 (2) — 첫 프로젝트, 아이디어에서 작동하는 앱까지

지난 글에서는 바이브 코딩이 무엇이고 왜 지금이 중요한지를 다뤘습니다. 이번 글에서는 실제로 한 시간 동안 무엇을 하는지 단계별로 보여드립니다.

목표 — 한 시간 안에 브라우저에서 작동하는 개인 Todo 앱 만들기. 코드 한 줄도 직접 안 씁니다.

0~5분 — 환경 셋업

터미널을 열고 다음 명령을 입력합니다 (Mac/Linux/Windows WSL 모두 동일):

# Node.js가 없다면 먼저 설치 (한 번만)
# Mac: brew install node
# Windows: nodejs.org에서 다운로드
 
# Claude Code 설치
npm install -g @anthropic-ai/claude-code
 
# 프로젝트 폴더 만들기
mkdir my-todo-app
cd my-todo-app
 
# Claude Code 실행
claude

claude 명령을 치면 Claude가 인사를 합니다. 이게 끝입니다. 이제 대화를 시작할 시간입니다.

5~15분 — 프로젝트 결정하기

좋은 첫 프로젝트의 기준 3개:

1. 내가 매일 또는 매주 쓸 수 있는 것 (동기 유지)
2. 결과가 시각적으로 보이는 것 (성취감)
3. 5~10가지 기능 안에서 끝나는 것 (스코프)

후보:

• 개인 Todo 리스트
• 운동 기록 트래커
• 한국어 단어장
• 가계부
• 독서 기록

이 글에서는 Todo 앱을 예로 들어 진행합니다. 가장 단순하고 결과가 즉시 보이니까요.

Claude에게 첫 메시지를 보냅니다:

"내 컴퓨터에서 작동하는 Todo 앱을 만들고 싶어. 브라우저에서 열리는 웹 페이지 형태였으면 좋겠고, 데이터는 내 컴퓨터에 저장되면 좋겠어. 디자인은 깔끔하고 미니멀하게. Next.js랑 Tailwind 사용해줘. 어떻게 시작하면 될까?"

핵심 — 모르는 단어 그냥 적어도 됩니다. "Next.js"가 뭔지 몰라도 적으세요. Claude가 알아서 처리합니다.

15~30분 — 첫 작동 버전

Claude가 다음과 같이 답할 겁니다:

1. "Next.js 프로젝트를 초기화하겠습니다"
2. 명령어 실행 (npx create-next-app@latest .)
3. 메인 페이지 코드 생성
4. "이제 npm run dev 명령으로 실행해보세요"

당신이 할 일은 그냥 시키는 대로 하는 것. Claude가 만든 코드를 읽을 필요 없습니다 (지금은).

npm run dev를 치면 브라우저에서 http://localhost:3000을 열라고 합니다. 열어봅니다 — Todo 앱의 빈 화면이 떠 있습니다.

30~45분 — 기능 추가

기본 동작이 되면 — Todo 추가, 삭제, 체크 — 다음 기능들을 하나씩 요청합니다.

요청 1 — 데이터 저장

"지금은 새로고침하면 Todo가 사라져. 내 브라우저 localStorage에 저장해줘. 그래야 새로고침해도 남아있어."

Claude가 코드를 수정합니다. 새로고침해보고 데이터가 살아있는지 확인합니다.

요청 2 — 카테고리

"각 Todo에 카테고리를 붙이고 싶어 — 일, 개인, 운동 같은. 카테고리별 색깔도 다르게."

요청 3 — 날짜

"Todo에 마감일을 추가하고, 오늘이 마감일이면 빨간색으로 표시해."

요청 4 — 다크모드

"다크모드 토글 추가해줘."

각 요청 후 항상 — 브라우저로 가서 직접 작동 확인. 안 되면 즉시 Claude에게 말합니다. "이 부분이 안 돼", "이렇게 했으면 좋겠어".

45~55분 — 디자인 다듬기

기능이 다 들어갔으면 마지막은 모양:

"전체적으로 Apple 스타일로 다듬어줘. 폰트는 시스템 폰트, 모서리는 둥글게, 색감은 미니멀. 호버하면 살짝 들리는 효과 있으면 좋겠어."

Claude가 CSS를 수정합니다. 바로 보입니다.

이 단계에서 사진이나 아이콘을 넣고 싶으면:

"Todo 옆에 작은 체크 아이콘 추가해줘. lucide-react 라이브러리 써줘."

55~60분 — 인터넷에 올리기 (선택)

내 컴퓨터에서만 보는 것도 충분하지만, URL로 어디서나 접근하고 싶다면:

"이 앱을 Vercel에 배포하고 싶어. 단계별로 알려줘."

Claude가:

1. GitHub에 코드 올리는 방법 안내
2. Vercel 가입 및 GitHub 연결 안내
3. 배포 후 URL 확인

5분 안에 https://my-todo-app-xxx.vercel.app 같은 URL이 생깁니다. 친구한테 공유해도 됩니다.

이 한 시간에서 배운 것

당신은:

• ✅ 작동하는 웹 앱을 만들었다
• ✅ 코드를 한 줄도 직접 안 썼다
• ✅ 인터넷에 배포까지 했다
• ✅ 다음번엔 더 빨리 할 수 있다

코드를 못 읽어도 괜찮은가? 지금까진 괜찮습니다. 단, 다음 글에서 그 한계를 다룹니다.

대화의 형태 — 5가지 패턴

좋은 바이브 코딩 대화는 일정한 형태가 있습니다:

1. 시작 — 큰 그림

"X를 만들고 싶어. Y와 Z 기능이 있으면 좋겠어. 디자인은 [참고 사이트]처럼."

2. 작은 변경

"이 부분에서 글자 크기를 키우고 색을 회색으로 바꿔줘."

3. 에러 보고

"버튼을 누르면 콘솔에 'TypeError: ...' 에러가 떠. 고쳐줘."

4. 의도 명확화

"이게 맞는데, 모바일에서 보면 깨져. 모바일에서도 보이게 해줘."

5. 새 방향

"이 접근 방식이 너무 복잡해. 더 단순한 방법 없을까?"

처음 30번의 대화에서 이 5가지를 다 경험합니다. 그러면 익숙해집니다.

흔한 함정 5가지

1. 너무 큰 프로젝트로 시작 — Todo 앱은 좋습니다. "Instagram 같은 SNS"는 좋지 않습니다.
2. 결과 확인 안 하고 다음 요청 — 매번 동작 확인하세요.
3. 에러 메시지 그대로 안 보냄 — "안 돼"보다 "Error: Cannot find module 'next' 라고 떴어"가 100배 빠릅니다.
4. AI 답을 읽기만 하고 안 실행 — Claude가 명령어를 알려주면 실제로 터미널에 입력하세요.
5. Git 안 씀 — 잘 작동하던 게 망가지면 되돌릴 방법이 없습니다. 다음 글에서 다룹니다.

다음 글에서

Part 3 — 장기적으로: 비엔지니어가 알아야 할 원칙에서는:

• 코드를 안 읽고 가는 것의 한계
• 보안·유지보수의 함정
• 언제 진짜 엔지니어를 부를지
• 작은 도구의 누적이 만드는 큰 변화

첫 한 시간을 끝낸 당신은 이미 99%의 사람보다 앞서 있습니다.

다음 프로젝트는 무엇으로 할지 — 지금 결정하세요.