바이브 코딩 개념 정리
AI가 갑자기 'React'라고 했을 때
당황하지 않는 법
프론트엔드, 백엔드, API, Next.js…
다 배울 필요 없습니다. 지금 필요한 것만 골라드립니다.
📋 목차
당황스러운 순간
Lovable에서 "로그인 기능 추가해줘"라고 했더니 AI가 "Supabase Auth를 연동하면 됩니다"라고 했습니다. Supabase가 뭔지 모르는데 이미 코드가 생성됐습니다.
"이 버튼 스타일 바꿔줘"라고 했더니 "Button 컴포넌트의 className을 수정하면 됩니다"라고 했습니다. 컴포넌트가 뭔지, className이 뭔지 몰라서 멈췄습니다.
잘 되던 앱이 갑자기 오류가 났습니다. AI에게 고쳐달라고 했는데 더 이상해졌습니다. "1시간 전 상태로 돌리고 싶다"고 했더니 AI가 "Git으로 되돌리면 됩니다"라고 했습니다. Git이 뭔지, 어떻게 쓰는지 몰라서 손도 못 댔습니다.
이런 순간마다 "역시 나는 개발 개념을 모르면 안 되는구나"라고 생각했다면, 이 글이 정확히 필요한 글입니다.
그런데 여기서 중요한 것이 있습니다. 이 개념들은 누군가가 일부러 어렵게 만든 것이 아닙니다. 만들다 보면 자연스럽게 필요해져서 등장하는 것들입니다. 데이터를 저장하려니 DB가 등장하고, 로그인을 만들려니 Auth가 등장하고, 실수를 복구하려니 Git이 등장합니다. 이 흐름을 미리 알면, 개념이 나타날 때 "아, 드디어 이 단계가 됐구나"로 읽힙니다.
결론부터 말하면 이 개념들을 전부 공부할 필요는 없습니다. 하지만 각 개념이 왜, 언제 등장하는지 알면 막히는 순간마다 AI에게 훨씬 정확하게 질문할 수 있습니다. 이 글은 개발 강의가 아닙니다. "지금 당황하지 않아도 되는 이유"를 설명하는 글입니다.
개념 지도 한 장
개발 개념이 혼란스러운 가장 큰 이유는 전체 지도 없이 조각 개념을 하나씩 만나기 때문입니다. 아래 그림 하나로 전체 구조를 먼저 이해하면, 이후에 나오는 모든 개념이 "아, 저 영역에 속하는 것이구나"로 보이기 시작합니다.
👤 사용자
화면을 보고
버튼을 클릭함
🖥️ 프론트엔드
React / Next.js
Tailwind CSS
화면을 만드는 영역
🗄️ 백엔드 / DB
API / Supabase
Firebase
데이터 저장·처리
🚀 배포
Vercel / Netlify — 만든 앱을 인터넷에 올리는 것
"데이터를 저장하고 싶다"는 순간, 백엔드 개념이 처음 등장합니다.
이 그림이 머릿속에 있으면 AI가 어떤 용어를 꺼내도 "저건 프론트엔드 얘기구나", "저건 데이터 저장 얘기구나"로 분류할 수 있습니다. 이것이 모든 개념 공부보다 먼저 필요한 것입니다.
비개발자의 실제 개념 등장 순서
개념이 왜 어렵게 느껴지는지 아시나요? 순서 없이 갑자기 튀어나오기 때문입니다. 하지만 실제로는 만들기의 흐름을 따라 아주 자연스러운 순서로 등장합니다. 아래는 비개발자가 Lovable로 첫 앱을 만들기 시작해서 배포까지 가는 동안, 개념들이 실제로 등장하는 순서입니다.
화면이 생성되면서 "Button 컴포넌트", "Header 컴포넌트" 언급
데이터를 어딘가에 보관하려면 DB가 필요하기 때문
외부 서비스 연결에는 인증 키가 필요하고, 이를 안전하게 보관해야 하기 때문
"1시간 전 상태로 돌리고 싶다" — 이 순간 Git의 필요성을 가장 강하게 느낌
로컬(내 컴퓨터)에서만 보이는 앱을 인터넷에 올리는 단계
/home, /about 처럼 URL마다 다른 화면이 필요할 때 자동으로 나타남
개념들이 갑자기 쏟아지는 것이 아닙니다. 내가 원하는 기능이 하나씩 추가될 때마다, 그 기능에 필요한 개념이 자연스럽게 등장하는 것입니다. 이 흐름을 알면 당황 대신 "아, 드디어 이 단계가 됐구나"라는 성취감으로 받아들일 수 있습니다.
🟢 지금 당장 알아야 할 개념 5가지
아래 5가지는 Lovable이나 VS Code+Codex로 무언가를 만들기 시작하면 반드시 마주치는 개념입니다. 공부하러 가는 것이 아니라, 만들다 보면 자연스럽게 필요해져서 등장합니다. 깊이 공부할 필요는 없습니다. 각 개념이 "왜 등장하는지"와 "지금 내가 뭘 하면 되는지"만 알면 충분합니다.
⚠️ 한 가지 현실적인 이야기: AI가 코드를 생성해주지만, 모든 상황을 알아서 해결해주지는 않습니다. 연결이 안 되거나, 오류가 반복되거나, AI가 이상한 방향으로 수정하는 순간이 반드시 옵니다. 그때 중요한 것은 "AI가 다 해주겠지"가 아니라 "어떤 문제가 발생했는지 파악하고 정확하게 질문하는 능력"입니다. 아래 개념들은 그 능력을 위한 최소한의 지도입니다.
"이건 서버에서 처리해야 합니다" 또는 "백엔드 API가 필요합니다"라고 말할 때
"Button 컴포넌트를 수정하면 됩니다", "Card 컴포넌트를 추가했습니다"라고 말할 때
"이 버튼 컴포넌트 색 바꿔줘", "카드 컴포넌트에 이미지 추가해줘"처럼 수정 요청할 때 이 단어를 쓰면 AI가 정확하게 이해함
Supabase, Firebase, API 키를 언급할 때
"Supabase 연결 코드 만들어줘"라고 하면 코드까지 생성해줌. API 키는 .env 파일에 보관
commit(저장). AI에게 "지금 상태 GitHub에 커밋해줘"라고 요청하면 됨. Vercel 배포도 GitHub 연결로 자동화됨
🐙 GitHub이 비개발자에게 특히 중요한 4가지 이유
🟡 조금 더 만들면 자연스럽게 만나는 개념들
아래 개념들은 지금 당장 공부할 필요는 없지만, VS Code+Codex 환경에서 본격적으로 만들기 시작하면 AI가 먼저 꺼내는 단어들입니다. 이름만 기억해두면 나중에 당황하지 않습니다.
| 개념 | 언제 처음 만나나 | 지금 알아야 할 것 |
|---|---|---|
| Next.js | VS Code 환경 세팅 시 AI가 자동으로 선택하는 경우가 많음 | "React 앱을 더 빠르고 SEO에 강하게 포장해주는 틀"이라는 것만. AI가 알아서 씀 |
| 환경변수 (.env) | API 키 발급 후 AI가 "env 파일에 넣으세요"라고 할 때 | 프로젝트 루트에 .env 파일 생성 → AI가 알려준 형식 복붙. GitHub에는 절대 올리지 말 것 |
| npm / 패키지 | VS Code 터미널에서 npm install 명령어가 처음 나올 때 |
라이브러리(기능 추가 도구)를 설치하는 명령어. AI가 알려주는 그대로 복붙하면 됨 |
| 풀스택 | AI가 "풀스택 앱으로 구성하겠습니다"라고 할 때 | 프론트엔드 + 백엔드를 하나의 프로젝트에서 다룬다는 뜻. 개념만 알면 됨 |
| 라우팅 | 페이지를 여러 개 만들기 시작할 때 | "URL 주소마다 다른 화면을 보여주는 것". /home, /about, /dashboard 같은 구분 |
| TypeScript | AI가 .ts 또는 .tsx 파일을 만들기 시작할 때 | JavaScript에 타입 검사를 추가한 것. AI가 알아서 씀. 지금 문법 공부 불필요 |
⚪ 지금 몰라도 되는 개념 목록
이 개념들은 실제로 존재하고, 나중에는 중요해집니다. 하지만 지금 이것들을 공부하기 시작하면 정작 앱을 만드는 시간이 없어집니다. 이름이 나왔을 때 당황하지 않는 것으로 충분합니다.
| 개념 | 왜 지금 몰라도 되나 | 언제 필요해지나 |
|---|---|---|
| SSR / CSR / SSG | AI가 Next.js 설정에서 알아서 선택함 | 서비스 성능 최적화, SEO 세밀 조정 필요 시 |
| 에이전틱 AI | 자동화 워크플로우는 기본 앱 완성 후 단계 | 반복 업무 자동화, 멀티에이전트 흐름 구성 시 |
| Docker / 서버 배포 | Vercel/Netlify로 대부분 해결됨 | 본격 서비스 운영, 커스텀 서버 환경 필요 시 |
| 데이터베이스 설계 | Supabase AI가 스키마까지 제안해줌 | 복잡한 관계형 데이터 구조 필요 시 |
| Redux / 상태 관리 | 작은 앱에서는 필요 없음 | 데이터 흐름이 복잡한 중~대형 앱 |
| 웹소켓 / 실시간 통신 | 채팅·알림 기능이 없다면 불필요 | 실시간 채팅, 협업 기능 구현 시 |
실제로 개발자도 모르는 개념은 그때그때 검색합니다. 바이브 코딩은 그 흐름이 더 자연스럽습니다. 모르는 개념이 나올 때마다 AI에게 "이게 지금 왜 필요해?"라고 물으면 됩니다.
AI에게 개념을 올바르게 질문하는 법
개념이 갑자기 등장했을 때 가장 나쁜 반응은 두 가지입니다. 첫 번째는 유튜브를 켜고 그 개념을 처음부터 공부하는 것, 두 번째는 그냥 겁먹고 멈추는 것입니다. 가장 좋은 반응은 지금 만들고 있는 맥락과 연결해 AI에게 바로 질문하는 것입니다.
"Next.js가 뭔가요?"
"React란 무엇입니까?"
"백엔드 아키텍처를 설명해줘"
"지금 만들고 있는 이 Todo 앱에서 Next.js가 왜 필요한지, 없으면 어떻게 되는지 비개발자한테 설명해줘"
맥락이 있는 질문은 AI가 교과서식 설명 대신 "지금 이 상황에서는 ~이라서 필요합니다"라는 실용적인 답을 줍니다. 개념 이해보다 상황 이해가 훨씬 빠릅니다.
아래 두 가지 질문 패턴을 기억해두면 어떤 개념이 나와도 당황하지 않을 수 있습니다.
"지금 만드는 앱에서 [개념 이름]이 꼭 필요한가요? 없으면 어떻게 되나요?"
"[개념 이름]을 개발 경험 없는 사람도 이해할 수 있게 한 줄로 설명해줘. 지금 당장 내가 해야 할 것만"
✅ 개념 이해 실전 체크리스트
📌 핵심 정리
- 개발 개념들은 갑자기 쏟아지는 것이 아닙니다. 화면을 만들면 컴포넌트가, 저장이 필요하면 DB가, 실수를 복구하려면 GitHub이, 공유하려면 배포가 자연스럽게 등장합니다. 흐름을 알면 당황 대신 성취감으로 받아들일 수 있습니다.
- 지금 당장 알아야 할 것은 5가지입니다. 프론트/백엔드 구분, 컴포넌트, API·DB, 배포, 그리고 GitHub. 이 5가지면 Lovable과 VS Code+Codex 단계에서 막히지 않습니다.
- GitHub은 비개발자에게 특히 중요합니다. "코드의 구글 드라이브 + 타임머신"으로 AI가 잘못 수정한 코드를 커밋 단위로 되돌릴 수 있습니다. 기능이 하나 완성될 때마다 커밋하는 습관이 바이브 코딩의 안전망입니다.
- AI가 코드를 생성해주지만, 모든 문제를 알아서 해결해주지는 않습니다. 결국 중요한 것은 어떤 문제가 발생했는지 파악하고, 정확하게 질문하는 능력입니다.
- Next.js, TypeScript, npm 같은 개념은 AI가 알아서 씁니다. 이름만 기억하면 충분하고, 심화 학습은 Cursor 단계 이후에도 늦지 않습니다.
- 모르는 개념이 나왔을 때 최선의 행동은 "지금 만드는 앱에서 이 개념이 왜 필요한지 비개발자한테 설명해줘"라고 AI에게 바로 묻는 것입니다.
❓ 자주 묻는 질문
바이브 코딩을 시작하는 비개발자가 프론트엔드와 백엔드를 꼭 알아야 하나요?
개념 구분 정도만 알면 충분합니다. 프론트엔드는 사람이 눈으로 보고 클릭하는 화면 영역, 백엔드는 데이터 저장·처리·로그인 같은 서버 영역입니다. Lovable이나 Bolt.new로 시작하면 대부분 프론트엔드가 자동으로 만들어집니다. '데이터를 저장하고 싶다'는 순간 백엔드 개념이 등장하는데, 그때 AI에게 Supabase나 Firebase 연결을 요청하면 코드까지 만들어줍니다.
바이브 코딩에서 AI가 React나 Next.js를 쓴다고 하는데 비개발자도 이걸 공부해야 하나요?
지금 단계에서는 공부할 필요가 없습니다. React는 '화면을 레고 블록처럼 조각내서 만드는 방식'이고, Next.js는 '그 React 앱을 더 빠르고 SEO에 강하게 포장해주는 틀'입니다. AI가 이 두 가지를 자동으로 씁니다. 비개발자가 알아야 할 것은 '컴포넌트라는 단어가 나오면 화면 조각을 뜻한다' 정도면 충분합니다. 심화 학습은 Cursor나 Claude Code 단계로 넘어간 후에도 늦지 않습니다.
바이브 코딩 중 AI가 .env 파일이나 API 키를 언급할 때 어떻게 해야 하나요?
.env 파일은 API 키 같은 민감한 정보를 코드에 직접 쓰지 않고 별도 파일에 숨기는 방법입니다. AI가 'API 키를 .env 파일에 넣으세요'라고 하면, 프로젝트 루트에 .env 파일을 만들고 AI가 알려주는 형식 그대로 붙여넣으면 됩니다. 이 파일은 GitHub에 올리면 안 된다는 것(보안)만 기억하세요. ".gitignore에 .env 추가해줘"라고 AI에게 요청하면 자동으로 처리해줍니다.
바이브 코딩으로 만든 앱에 에이전틱 AI 기능을 넣으려면 무엇을 알아야 하나요?
에이전틱(Agentic) AI는 사용자가 시키지 않아도 AI가 스스로 여러 단계를 실행하는 기능입니다. 예를 들어 '매일 아침 뉴스를 요약해서 슬랙으로 보내줘'처럼 자동화 흐름이 여기 해당합니다. 입문 단계에서는 '자동화 흐름이 필요할 때 AI에게 구체적인 시나리오를 설명하면 연결 코드를 만들어준다'는 것만 알면 됩니다. 이 기능은 Cursor나 Claude Code 중급 단계에서 자연스럽게 접하게 됩니다.
개념은 이 정도면 충분합니다
이제 다시 만들러 가세요
개념을 완벽히 이해한 후에 만들겠다는 생각은 내려놓으세요.
막히면 그때 AI에게 "이 개념이 왜 지금 필요한지"를 물으면 됩니다.
성장은 만드는 중에 일어납니다.
이전 글 → [[프롬프트보다 중요한 것 — 바이브 코딩 입문자가 먼저 익혀야 할 감각]] — 개념보다 먼저 갖춰야 할 5가지 감각을 정리했습니다. 다음 글 → [[비개발자를 위한 바이브 코딩 환경 30분 세팅 완전 가이드 — VS Code + Codex]] — 개념을 이해했다면, 이제 실제 개발 환경을 갖출 차례입니다.
댓글 쓰기