채팅으로
앱 만들어보기

흐름은 다음과 같아요

유료 도구들은 AI가 내 파일을 직접 열어서 작업하지만, 초심자 트랙에서는 중간 역할이 필요합니다.
AI에게 코드를 받아서, 내가 파일에 붙여넣는 방식이에요.

처음 한 번만 설정하면 끝

아래 도구들을 설치하면 개발 환경 준비가 완료됩니다.
이후 모든 프로젝트에서 계속 쓸 수 있어요.

설치 확인하기

VS Code를 열고, 상단 메뉴 → 터미널 → 새 터미널을 클릭하세요. 검은 창이 뜨면 아래 명령어를 입력해서 Node.js가 제대로 설치됐는지 확인합니다.

node -v   # v20.x.x 같은 숫자가 나오면 OK
npm -v    # 9.x.x 같은 숫자가 나오면 OK

첫 프로젝트 만들기

이제 실제 프로젝트를 만들어봅시다. VS Code 터미널에서 아래 명령어를 순서대로 입력하세요. 처음엔 낯설지만 금방 익숙해집니다.

# 1. 원하는 위치로 이동 (예: 바탕화면)
cd Desktop

# 2. 프로젝트 폴더 생성
#    my-first-app 부분이 프로젝트 이름입니다
npm create vite@latest my-first-app

# 3. 질문이 나오면 키보드로 선택
#    Select a framework:  → React 선택 (방향키로 이동, Enter)
#    Select a variant:    → JavaScript 선택 (TypeScript 말고)

# 4. 만들어진 폴더로 이동
cd my-first-app

# 5. 필요한 파일들 설치 (잠깐 기다림)
npm install

# 6. 개발 서버 실행
npm run dev

폴더 구조 이해하기

VS Code에서 방금 만든 폴더를 열면 이런 구조가 보입니다. 처음엔 복잡해 보이지만 실제로 건드릴 파일은 딱 두 곳입니다.

my-first-app/
├── src/
│   ├── App.jsx   ← 여기가 메인! 대부분의 작업은 이 파일
│   ├── App.css    ← 디자인 (나중에 건드려요)
│   └── main.jsx   ← 건드리지 않아도 됨
├── public/        ← 이미지 파일 넣는 곳
├── index.html
└── package.json

AI에게 잘 부탁하는 방법

바이브코딩에서 가장 중요한 스킬은 AI에게 원하는 걸 정확하게 전달하는 것입니다. 막연하게 요청하면 엉뚱한 결과가 나오고, 구체적으로 말할수록 원하는 결과에 가까워집니다.

첫 번째 요청 — 이렇게 시작해보세요

ChatGPT나 Claude 채팅창에 아래와 같은 형식으로 요청하면 됩니다.

좋은 요청 vs 나쁜 요청

아래 비교를 보면 어떻게 요청해야 할지 감이 잡힐 거예요.

코드를 받은 다음에는

1. 1
   AI가 알려준 파일을 VS Code에서 엽니다

   보통 src/App.jsx입니다. 왼쪽 파일 목록에서 클릭하면 열립니다.

2. 2
   Ctrl+A로 전체 선택 후 Delete로 삭제

   기존 내용을 전부 지웁니다.

3. 3
   AI가 준 코드를 Ctrl+V로 붙여넣기

   AI 응답의 회색 코드 박스 오른쪽 상단 복사 버튼을 누르면 쉽게 복사됩니다.

4. 4
   Ctrl+S로 저장

   저장하면 브라우저가 자동으로 새로고침되어 변경사항이 보입니다.

5. 5
   브라우저에서 확인

   localhost:5173에서 내가 요청한 기능이 잘 동작하는지 테스트합니다.

기능을 하나씩 추가하기

처음부터 모든 기능을 한 번에 만들려 하지 마세요. 기능 하나를 완성하고 확인한 다음, 그 다음 기능을 요청하는 게 훨씬 안전합니다.

오류가 났을 때 당황하지 마세요

개발 중에 오류는 피할 수 없습니다. 중요한 건 오류를 봤을 때 어떻게 AI에게 전달하느냐입니다. "안 돼요"라고 하면 AI도 뭘 고쳐야 할지 모릅니다.

오류 메시지 찾는 방법

1. 1
   브라우저에서 F12 키를 누릅니다

   개발자 도구가 열립니다. 처음엔 낯설지만 걱정하지 마세요.

2. 2
   상단에서 "Console" 탭을 클릭합니다

   여기에 빨간색 오류 메시지가 표시됩니다.

3. 3
   빨간 텍스트를 마우스로 드래그해서 복사합니다

   오류 메시지 전체를 선택해서 복사합니다. 짧게 자르지 마세요.

4. 4
   AI에게 오류 + 현재 코드를 함께 전달합니다

   오류만 주면 AI가 현재 코드를 모릅니다. 반드시 코드도 같이 줘야 해요.

흰 화면만 나올 때 (화면이 아무것도 안 보임)

이런 경우는 대부분 코드 문법 오류입니다.

• 브라우저 F12 콘솔에서 빨간 오류를 확인하세요
• VS Code 터미널에도 오류가 출력되어 있을 수 있습니다
• 오류와 현재 코드를 AI에게 전달하면 대부분 바로 해결됩니다
• 아직 코드 변경을 많이 안 했다면 Ctrl+Z로 되돌려보세요

코드를 안전하게 저장하기

GitHub는 코드를 인터넷에 저장하는 공간입니다. 저장된 코드로 Vercel에서 배포도 하고, 실수로 코드를 망쳐도 이전 버전으로 돌아갈 수 있어요.

GitHub 계정 & 저장소 만들기

1. 1
   github.com에서 계정을 만듭니다 (이미 있으면 로그인)
2. 2
   오른쪽 상단 + 버튼 → New repository 클릭

   Repository name에 프로젝트 이름 입력 (예: my-first-app). Public 선택. Create repository 클릭.

3. 3
   나오는 명령어를 VS Code 터미널에 붙여넣기

   GitHub가 안내해주는 "...or push an existing repository" 쪽 명령어들을 순서대로 입력합니다.

# 프로젝트 폴더에서 실행 (npm run dev 중이면 Ctrl+C로 멈추고)
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/내계정/내저장소.git
git push -u origin main

이후에 수정할 때마다

git add .
git commit -m "변경 내용 메모"   ← 예: "할일 삭제 기능 추가"
git push
# Vercel이 자동으로 새 버전을 배포해줍니다

실제 인터넷에 올리기

Vercel은 GitHub 저장소를 연결하면 코드가 바뀔 때마다 자동으로 배포해주는 서비스입니다. 무료로 사용할 수 있고, 설정도 아주 간단해요.

1. 1
   vercel.com 접속 → GitHub 계정으로 로그인
2. 2
   Add New → Project 클릭

   GitHub 저장소 목록이 뜨면 방금 만든 저장소를 Import 합니다.

3. 3
   설정은 기본값 그대로 → Deploy 클릭

   Vite + React 프로젝트는 Vercel이 자동으로 인식합니다. 따로 설정할 게 없어요.

4. 4
   1~2분 기다리면 배포 완료!

   내프로젝트.vercel.app 같은 주소가 생깁니다. 이 링크를 공유하면 누구나 볼 수 있어요.

배포 전 꼭 확인하기

로컬(내 컴퓨터)에서는 잘 되는데 Vercel에서 안 되는 경우가 있습니다. 배포 전에 아래 명령어로 빌드 테스트를 꼭 해보세요.

# 빌드 테스트 (오류 없이 완료되면 Vercel도 성공)
npm run build

# 오류가 나면 메시지를 AI에게 전달해서 먼저 해결하세요

AI가 쓴 코드, 어떻게 읽나요?

코드를 직접 쓸 줄 몰라도 됩니다. 하지만 AI가 만들어준 코드의 구조는 눈으로 파악할 수 있어야 합니다. 이 세 가지만 알면 Intermediate로 넘어갈 준비가 됩니다.

코드 한 토막 읽어보기

// 변수: todos라는 빈 배열(목록)을 선언
const [todos, setTodos] = useState([])

// 함수: "추가" 버튼 클릭 시 할 일을 목록에 넣는 동작 정의
function addTodo(text) {
  setTodos([...todos, { text, done: false }])
}

// 화면: todos 배열을 li 태그로 하나씩 출력
todos.map(todo => <li>{todo.text}</li>)

AI가 엉뚱한 걸 만들었을 때

AI가 항상 원하는 결과를 내주지는 않습니다. 두 가지 상황이 자주 발생합니다. 당황하지 말고 아래 정정 프롬프트를 사용하세요.

상황 1 — 존재하지 않는 라이브러리를 사용했을 때

AI가 실제로 없는 패키지 이름이나 함수를 코드에 넣는 경우가 있습니다. npm install 시 "not found" 오류가 나거나 함수 호출 시 undefined 오류가 나면 의심해보세요.

상황 2 — 요청한 것과 다른 기능을 만들었을 때

Intermediate로 넘어가기 전에

이 페이지의 방식(복붙 개발)에 익숙해졌다면, 다음 단계를 준비할 시간입니다. Intermediate 트랙은 AI가 파일을 직접 수정하는 환경입니다. 아래를 모두 경험해야 다음 단계가 수월합니다.

무료 트랙 바이브코딩 원칙

추천 첫 프로젝트

• 버튼 클릭 시 숫자가 오르는 카운터 앱
• 할 일 목록 (Todo) 앱
• 퀴즈 앱 (문제 내면 O/X 클릭)
• 집중 타이머 앱 (25분 포모도로)
• 동아리 소개 페이지