AI · 바이브코딩

바이브코딩 시작 순서: 비개발자가 도구보다 먼저 알아야 할 개념

스쿨링 학습 가이드 · 2026.11.05 업데이트

코딩 지식

없어도 시작 가능

먼저 알 개념

프론트·백엔드·DB·API·Git·배포

핵심 습관

작게 시키고 바로 확인

막히면

그 개념 하나만 배우기

비개발자 바이브코딩 시작 순서 6단계

1. 1만들 것을 한 문장과 화면 3개로 정하기 1~2일

   '팀원들이 점심 메뉴를 투표하는 웹페이지'처럼 누가 무엇을 하는지 한 문장으로 쓰고, 필요한 화면을 3개 이내로 종이에 그려요. 처음부터 로그인·결제·알림을 다 넣으면 AI도 나도 길을 잃어요. 첫 버전은 나 혼자 쓰는 가장 작은 기능만 남기세요.

   • 만들 것을 한 문장으로 말할 수 있다
   • 첫 버전에서 뺄 기능을 적어 두었다

2. 2웹앱 구조 개념 익히기 1~2주

   화면을 그리는 프론트엔드, 데이터를 처리하는 백엔드, 데이터를 저장하는 데이터베이스(DB), 이 둘을 잇는 약속인 API가 어떤 역할인지 알아야 AI에게 '어디를' 고쳐 달라고 말할 수 있어요. 코드를 쓸 줄 알 필요는 없고, AI가 만든 폴더와 파일이 각각 어느 쪽인지 구분할 수 있으면 충분해요.

   • 내 앱에서 데이터가 어디에 저장되는지 설명할 수 있다
   • 버튼을 눌렀을 때 화면 → 서버 → DB로 무엇이 오가는지 말할 수 있다

3. 3도구 하나 고르기 1일

   AI 코딩 도구는 크게 세 갈래예요(2026-11 기준). 채팅형(Claude·ChatGPT 같은 대화 앱)은 코드를 답으로 보여 주고 파일에 옮기는 건 내가 해요. 에디터형(Cursor 등)은 코드 편집기 안에서 AI가 프로젝트 파일을 보며 고쳐요. 에이전트형(Claude Code 등)은 내 프로젝트 폴더의 파일을 읽고 고치고 명령까지 실행해요. 처음엔 하나만 정하고, 요금과 사용 한도는 각 도구의 공식 요금 페이지에서 확인하세요.

   • 고른 도구가 파일을 직접 고치는지, 답만 보여 주는지 안다

4. 4AI에게 작게 나눠 시키기 계속

   '투표 앱 만들어 줘' 한 번보다 '메뉴 3개를 보여 주는 화면만 만들어 줘' → '누르면 숫자가 올라가게 해 줘' → '새로고침해도 숫자가 남게 저장해 줘'처럼 한 번에 하나씩 시켜요. 요청마다 무엇을, 어디에(어느 화면·파일), 어떻게 되면 끝인지를 적으면 결과가 훨씬 안정적이에요.

   • 요청 하나에 바꿀 것이 하나뿐이다
   • '어떻게 되면 끝'인지 요청에 적었다

5. 5실행해서 확인하고 Git으로 되돌리기 매 요청마다

   AI가 '완료했어요'라고 해도 직접 실행해서 화면과 동작을 확인해요. 잘 되는 상태마다 Git으로 커밋(저장 지점)을 남겨 두면, 다음 요청에서 망가져도 그 지점으로 돌아갈 수 있어요. 오류가 나면 'Cannot read properties of undefined' 같은 오류 문구 전체와 직전에 바꾼 내용을 함께 AI에게 주세요.

   • 잘 되는 상태를 커밋으로 남겼다
   • 망가졌을 때 이전 커밋으로 돌아가 본 적이 있다

6. 6환경변수와 배포 첫 버전 완성 후

   API 키·비밀번호 같은 값은 코드에 직접 쓰지 말고 환경변수(.env 파일 등)로 따로 두고, 그 파일은 Git에 올리지 않아요. 남에게 보여 줄 때는 배포 서비스에 올리고, 배포 환경에도 같은 환경변수를 설정해요. 내 컴퓨터에선 되는데 배포하면 안 되는 문제의 상당수가 여기서 생겨요.

   • 비밀 값이 코드나 Git 기록에 없다
   • 배포한 주소에서 핵심 기능이 동작한다

클로드와 클로드 코드는 뭐가 다른가요? (2026-11 기준)

클로드(Claude)는 Anthropic의 AI 모델이자 대화 앱 이름이고, 클로드 코드(Claude Code)는 같은 회사의 코딩 도구예요. 대화 앱에서는 코드를 답으로 받아 내가 파일에 옮기지만, 클로드 코드는 내 프로젝트 폴더의 파일을 직접 읽고 고치고 명령을 실행해요. 공식 문서 기준으로 터미널, 코드 편집기(IDE), 데스크톱 앱, 브라우저에서 쓸 수 있어요.

그래서 클로드 코드를 쓰기 전에는 터미널(명령어 창)과 폴더 경로, 도구가 파일을 바꾸거나 명령을 실행하기 전에 확인을 받는 권한 개념을 알아 두면 덜 헤매요. 기능·요금제·한도는 자주 바뀌니 공식 문서와 요금 페이지에서 확인하세요.

AI가 짠 코드가 맞는지 확인하는 법

코드를 한 줄씩 읽을 수 없어도 확인할 수 있는 것이 많아요. 아래를 매 요청 뒤에 점검하세요.

• 요청한 것만 바뀌었나: 바뀐 파일 목록을 보고, 상관없는 파일까지 고쳤으면 이유를 물어보기
• 직접 실행해 봤나: 정상 입력뿐 아니라 빈칸·이상한 값도 넣어 보기
• 설명할 수 있나: '방금 바꾼 걸 비개발자에게 3줄로 설명해 줘'라고 시키고, 이해가 안 되면 그 개념부터 묻기
• 비밀 값이 코드에 들어가지 않았나

막히면 그 개념 하나만 배우기

AI가 같은 오류를 계속 엉뚱하게 고친다면, 대개 상태(state)·비동기·API·환경변수·배포 중 하나의 개념이 비어 있어서 무엇을 시켜야 할지 정확히 말하지 못하는 경우예요. 긴 강의를 처음부터 다시 듣기보다, 막힌 개념 하나만 짧게 배우고 문제로 이해했는지 확인한 뒤 다시 도구로 돌아가는 편이 빨라요.

실습은 Cursor·Claude Code 같은 내 도구에서 하고, 스쿨링은 무엇을 시키고 결과가 맞는지 판단하는 힘을 기르는 수업이에요. 스쿨링에는 코드 실행 환경이 없고, 개념·순서·프롬프트·코드 읽기를 대화 수업과 확인 문제로 다뤄요. 언급한 AI 도구들과 제휴 관계는 없어요.

자주 묻는 질문

참고한 자료

• Claude Code 공식 문서 — 개요
• Cursor 공식 문서
• Claude 요금제(공식)
• Cursor 요금제(공식)
• Pro Git(한국어) — Git 공식 문서
• MDN — 웹 개발 배우기(한국어)

함께 보면 좋은 가이드

• 코딩 독학 순서: 비전공자는 무엇부터 시작할까코딩 독학을 처음 시작한다면 어떤 언어로, 어떤 순서로 해야 할까요? 목적별 첫 언어 고르기, 단계별 로드맵, 독학이 끊기지 않는 공부 계획을 정리했어요.
• 파이썬 독학 순서: 비전공자를 위한 단계별 로드맵파이썬 독학, 무엇부터 어떤 순서로 할까요? 기초 문법부터 업무 자동화·데이터 분석까지 단계별 순서와 기간, 하루 1시간 공부 계획, 막히는 지점을 정리했어요.
• AI로 공부하는 법: ChatGPT 공부법과 AI 튜터 제대로 쓰기ChatGPT 같은 AI로 공부할 때 효과적인 방법과 주의할 점, 질문 예시, 범용 챗봇과 AI 튜터의 차이를 정리했어요. 답을 받기보다 이해를 확인하는 AI 공부법.