바이브 코딩
재료를 직접 사서 볶고 끓이는 대신, 셰프에게 “매콤한 크림 파스타, 면은 살짝 덜 익혀서”라고 말하면 요리가 나옵니다. 바이브 코딩은 코드를 한 줄씩 치는 대신, AI에게 원하는 결과를 말로 설명해 소프트웨어를 얻는 방식입니다.
한 줄 정의 — 만들고 싶은 것을 자연어로 설명하면 AI가 코드를 짜주고, 결과를 보며 고쳐달라고 반복하는 개발 방식.
자세히 알아보기 정확히 무엇인가 · 작동 · 왜 중요 · 예시
- ① 정확히 무엇인가
- 사람이 자연어로 요구사항을 적으면, AI 코딩 도구가 그에 맞는 코드를 생성·수정해 주는 작업 방식입니다. 문법을 외우는 것보다 무엇을 원하는지 정확히 말하는 능력이 더 중요해집니다.
- ② 어떻게 작동하나
- 프롬프트 작성 → AI가 코드 생성 → 실행해서 확인 → “여기 색을 바꿔줘” 같은 피드백 → 다시 수정. 이 반복(iteration)이 핵심입니다. 한 번에 완성되지 않아도 정상입니다.
- ③ 왜 중요한가 · 실무 팁
- 아이디어를 코드로 옮기는 시간이 크게 줄어듭니다. 팁: 구체적으로 쓰고, 예시를 곁들이고, 한 번에 하나씩 요청하고, 결과가 이상하면 그대로 알려주세요. 모호한 요청은 모호한 결과를 부릅니다.
- ④ 예시
“할 일 목록 앱을 만들어줘. 항목을 추가·삭제할 수 있고, 완료하면 취소선이 그어지게. 배경은 흰색.”— 이렇게 결과·동작·모양을 함께 적으면 원하는 것에 가까운 코드가 나옵니다.
같은 “버튼 만들어줘”, 결과는 이렇게 갈립니다
아래 두 방식을 눌러 결과를 비교해 보세요. 프롬프트가 달라지면 AI가 만드는 것도 달라집니다.
더 좋은 프롬프트는?
각 문제에서 AI가 더 정확히 알아들을 프롬프트를 고르세요. 3문제 모두 맞히면 완료됩니다.
내 프롬프트, AI가 코치해 줍니다
만들고 싶은 걸 대충 적어보세요. 실제 AI가 더 구체적인 프롬프트로 고쳐 제안합니다.
※ LIVE 실습은 Claude 아티팩트 화면 안에서 동작합니다.
프론트엔드
손님이 앉는 홀입니다. 인테리어, 조명, 메뉴판, 테이블 — 손님이 직접 보고 만지는 모든 것. 프론트엔드는 사용자가 화면에서 보고 누르는 부분입니다.
한 줄 정의 — 사용자의 눈에 보이고 손으로 조작하는 화면 그 자체. 버튼, 글자, 색, 배치.
자세히 알아보기 정확히 무엇인가 · 작동 · 왜 중요 · 예시
- ① 정확히 무엇인가
- 웹/앱에서 사용자에게 직접 보이는 화면 계층입니다. 세 재료로 이뤄집니다:
HTML(구조)·CSS(모양)·JavaScript(움직임). - ② 어떻게 작동하나
- 사용자의 브라우저가 이 코드를 받아 화면으로 그립니다. 버튼을 누르는 등의 동작도 대부분 화면 쪽에서 먼저 반응합니다.
- ③ 왜 중요한가 · 실무 팁
- 사용자가 실제로 만나는 첫인상이자 사용성입니다. 팁: 예뻐 보이는 것보다 알아보기 쉽고 누르기 쉬운 게 우선입니다.
- ④ 예시
- 로그인 화면의 입력칸·버튼·안내 문구, 상품 목록의 카드 배치, 다크 모드 토글 — 전부 프론트엔드입니다.
실시간 스타일 편집기
값을 조절하면 오른쪽 버튼이 바로 바뀝니다. 이렇게 “보이는 것”을 다루는 게 프론트엔드입니다.
화면을 이루는 대표 UI 부품 16가지
현업에서 매일 쓰는 UI 용어들입니다. 아래 컨트롤로 강조색·모서리·글자 크기를 바꾸면, 밑에 있는 모든 컴포넌트가 그 자리에서 함께 바뀝니다. 버튼도 실제로 눌러보세요 — 모달이 열리고, 토스트가 뜨고, 캐러셀이 넘어갑니다.
떠 있는 동안 배경을 조작할 수 없게 시선을 모으는 창. 배경이 어두워집니다.
정말 삭제할까요?
이 작업은 되돌릴 수 없어요.
떠 있어도 원래 화면을 조작할 수 있는 독립 레이어. 배경이 잠기지 않습니다.
이벤트 안내
오늘만 무료배송!
잠깐 나타났다 몇 초 뒤 자동으로 사라지는 짧은 알림. ‘식빵 튀어나오듯’.
마우스를 올리면 나오는 작은 설명 말풍선. 아래 밑줄에 올려보세요.
여러 개를 동시에 고를 수 있는 네모난 버튼(다중 선택).
여러 개 중 단 하나만 골라야 할 때 쓰는 동그란 버튼.
켜기/끄기 두 상태를 바꾸는 스위치. 설정 화면에서 자주 씀.
누르면 항목이 아래로 펼쳐지는 목록. 눌러서 골라보세요.
이미지·배너가 좌우로 넘어가는 회전 요소. 화살표·점을 눌러보세요.
누르면 펼쳐지고 다시 누르면 접히는 UI. FAQ에 많이 씀.
배송은 얼마나 걸리나요?
교환·환불이 되나요?
이미지·제목·설명을 하나의 박스에 묶어 보여주는 요소.
여름 린넨 셔츠
가볍고 시원한 데일리 셔츠
상태·개수·카테고리를 작게 표시하는 태그. 빨간 알림 숫자, ‘NEW’ 태그 등.
보이는 것(프론트) vs 뒤에서 도는 것(백엔드)
각 항목을 알맞은 칸으로 옮기세요. 드래그하거나, 항목을 누른 뒤 칸을 눌러도 됩니다.
화면에 보이는 것 · 프론트
뒤에서 도는 것 · 백엔드
원하는 화면을 설명해 보세요
실제 AI가 설명을 듣고 간단한 HTML을 만들어 바로 아래에 그려줍니다.
※ LIVE 실습은 Claude 아티팩트 화면 안에서 동작합니다.
백엔드
손님 눈에는 안 보이지만, 실제 요리가 일어나는 주방입니다. 주문을 받아 재료 창고에서 재료를 꺼내(데이터베이스) 조리하고, 상한 재료는 걸러냅니다. 백엔드는 화면 뒤에서 일을 처리하는 쪽입니다.
한 줄 정의 — 서버에서 돌아가는 로직. 계산·검증·저장 등 눈에 안 보이는 처리를 담당.
자세히 알아보기 정확히 무엇인가 · 작동 · 왜 중요 · 예시
- ① 정확히 무엇인가
- 사용자 화면 뒤, 서버에서 실행되는 프로그램입니다. 언어 예로
Python,Node.js등을 씁니다. - ② 어떻게 작동하나
- 프론트가 “이 사람 로그인 맞아?”라고 물으면, 백엔드가 저장된 정보와 대조해 맞다/틀리다를 돌려줍니다. 중요한 판단은 여기서 내립니다.
- ③ 왜 중요한가 · 실무 팁
- 보안과 신뢰가 걸립니다. 사용자가 화면 값을 조작할 수 있으니, 진짜 검증은 반드시 서버에서 합니다. 화면 검증만 믿으면 뚫립니다.
- ④ 예시
- 비밀번호 확인, 결제 금액 최종 계산, 재고 차감, 권한 확인 — 함부로 조작되면 안 되는 것들이 백엔드의 일입니다.
회원가입 시뮬레이터
같은 비밀번호를 넣어도, 서버 검증이 켜졌는지에 따라 결과가 완전히 달라집니다. 토글을 바꿔가며 1234 같은 약한 값을 넣어보세요.
이 판단, 어디서 해야 안전할까?
각 상황에서 안전한 처리 위치를 고르세요. 모두 맞히면 완료됩니다.
어떤 규칙이 필요할지 AI에게 물어보기
기능을 설명하면, 실제 AI가 서버에서 지켜야 할 검증·처리 규칙을 쉬운 말로 정리해 줍니다.
※ LIVE 실습은 Claude 아티팩트 화면 안에서 동작합니다.
API
홀의 주문을 주방에 정확히 전달하고, 완성된 요리를 다시 홀로 가져오는 웨이터입니다. 아무 말이나 받지 않고 정해진 주문서 양식으로만 소통하죠. API는 프로그램끼리의 약속된 창구입니다.
한 줄 정의 — 프로그램끼리 정해진 형식으로 요청을 보내고 응답을 받는 통로.
자세히 알아보기 정확히 무엇인가 · 작동 · 왜 중요 · 예시
- ① 정확히 무엇인가
- Application Programming Interface. 한 프로그램이 다른 프로그램의 기능을 정해진 규칙대로 불러 쓰게 해주는 접점입니다.
- ② 어떻게 작동하나
- 요청(request)을 특정 주소(엔드포인트)로 보내면, 응답(response)이 정해진 형식(보통
JSON)으로 돌아옵니다. 프론트↔백엔드도 대부분 API로 대화합니다. - ③ 왜 중요한가 · 실무 팁
- 남이 만든 기능(지도·결제·날씨·AI)을 가져다 쓸 수 있습니다. 팁: 그 API의 문서를 읽고 요청 형식을 정확히 맞추는 게 절반입니다.
- ④ 예시
- 날씨 API에
city=Seoul을 보내면{ "temp": 24 }같은 응답이 옵니다. 지도, 로그인, 번역도 대부분 API로 붙입니다.
날씨 API 콘솔 (모의)
요청 값을 바꾸면 아래 응답이 실시간으로 달라집니다. 이게 “요청 → 응답”의 감각입니다.
요청과 응답을 연결하세요
왼쪽 요청을 하나 고르고, 오른쪽에서 맞는 응답을 누르세요. 4쌍을 모두 맞히면 완료됩니다.
자연어로 물으면, 형식 있는 응답이 옵니다
아래는 실제 AI를 하나의 API처럼 부르는 예시입니다. 물건 이름을 넣으면 정해진 형식(JSON)으로 정보가 돌아옵니다.
※ LIVE 실습은 Claude 아티팩트 화면 안에서 동작합니다.
데이터베이스
재료를 종류별로 정리해 두는 창고이자, 무엇이 언제 들어왔는지 적어두는 장부입니다. 필요할 때 빠르게 찾고, 채우고, 지웁니다. 데이터베이스는 앱이 무언가를 기억하게 해줍니다.
한 줄 정의 — 데이터를 표(테이블)로 저장하고, 조건에 맞게 찾고 바꾸는 저장소.
자세히 알아보기 정확히 무엇인가 · 작동 · 왜 중요 · 예시
- ① 정확히 무엇인가
- 데이터를 표(테이블) 형태로 담는 저장소입니다. 표의 가로줄을 행(레코드), 세로줄을 열(필드)이라 부릅니다.
- ② 어떻게 작동하나
- 네 가지 기본 동작 CRUD 로 다룹니다: 만들기(Create)·읽기(Read)·수정(Update)·삭제(Delete).
SQL이라는 언어로 “이런 행을 찾아줘”라고 요청합니다. - ③ 왜 중요한가 · 실무 팁
- 앱을 껐다 켜도 정보가 남으려면 DB가 필요합니다. 팁: 무엇을 저장할지(열 설계)를 먼저 정하면 나중이 편합니다.
- ④ 예시
- 회원 테이블(이름·이메일·가입일), 주문 테이블, 게시글 테이블 — 대부분의 앱은 여러 표로 이뤄집니다.
미니 회원 테이블
행을 추가하고, 검색으로 걸러내고, 삭제해 보세요. 실제 DB가 하는 일을 손으로 해보는 겁니다.
| id | 이름 | 이메일 |
|---|
이 작업은 CRUD 중 무엇?
각 작업을 알맞은 통에 넣으세요. 항목을 누른 뒤 통을 눌러도 됩니다. 모두 맞으면 완료됩니다.
Create · 만들기
Read · 읽기
Update · 수정
Delete · 삭제
원하는 걸 말하면 AI가 쿼리로
회원 테이블에서 찾고 싶은 걸 말로 적으면, 실제 AI가 SQL 쿼리로 번역해 줍니다.
※ LIVE 실습은 Claude 아티팩트 화면 안에서 동작합니다.
CLI · 터미널
손가락으로 그림 메뉴를 눌러 주문하는 건 GUI(버튼·아이콘 화면). 반대로 카운터에 대고 “아메리카노 톨, 얼음 빼고”처럼 정해진 말로 바로 외치는 게 CLI입니다. 표현만 알면 마우스보다 훨씬 빠릅니다.
한 줄 정의 — 마우스로 클릭하는 대신, 검은 화면(터미널)에 글로 명령을 입력해 컴퓨터를 조작하는 방식.
자세히 알아보기 정확히 무엇인가 · 작동 · 왜 중요 · 예시
- ① 정확히 무엇인가
- CLI는 Command Line Interface(명령줄 인터페이스)입니다. 아이콘을 클릭하는
GUI대신, 터미널이라는 창에 명령어를 타이핑해 실행합니다. - ② 어떻게 작동하나
- 한 줄에 명령 + 옵션을 적고 엔터를 치면, 컴퓨터가 그 일을 하고 결과 글자를 돌려줍니다. 예:
cd project(폴더 이동),npm install(부품 설치). - ③ 왜 중요한가 · 실무 팁
- 바이브 코딩 도구 상당수(Claude Code, Gemini CLI 등)와 배포·버전관리(Git)가 터미널에서 돌아갑니다. 팁: 자주 쓰는 대여섯 개 명령만 익혀도 충분히 시작할 수 있습니다.
- ④ 예시
git commit -m "저장"(변경 기록),vercel deploy(배포),ls(파일 목록) — 짧은 글 한 줄이 곧 실행입니다.
미니 터미널 (모의)
아래에 명령을 입력하고 엔터를 눌러보세요. help 를 치면 쓸 수 있는 명령이 나옵니다. 마우스 없이 글자만으로 조작하는 감각을 느껴보세요.
이럴 땐 어떤 명령?
각 상황에서 알맞은 명령어를 직접 입력하세요. 대소문자·앞뒤 공백은 신경 쓰지 않아도 됩니다. 3문제를 모두 맞히면 완료됩니다.
배포·호스팅
집 주방에서만 만들던 요리를, 실제 거리에 가게를 열어 누구나 사 먹게 하는 것. 내 컴퓨터에서만 돌던 앱을 인터넷에 올려 전 세계가 주소로 찾아오게 만드는 일이 배포입니다.
한 줄 정의 — 만든 앱을 인터넷 서버에 올려, 누구나 주소로 접속하게 만드는 과정.
자세히 알아보기 정확히 무엇인가 · 작동 · 왜 중요 · 예시
- ① 정확히 무엇인가
- 내 컴퓨터에서만 열리던 앱(
localhost)을, 항상 켜져 있는 서버(호스팅)에 올려 인터넷 주소를 붙이는 작업입니다. - ② 어떻게 작동하나
- 코드를 서버로 업로드 → 서버가 앱을 실행 → 도메인 주소를 연결. 그때부터 누구나 그 주소로 접속할 수 있습니다.
- ③ 왜 중요한가 · 실무 팁
- 배포하지 않으면 나만 쓰는 앱입니다. 팁: 비밀키·비밀번호는 코드에 직접 쓰지 말고 환경변수로 숨기세요.
- ④ 예시
- Vercel, Netlify, Cloudflare 같은 서비스에 코드를 올리면 몇 분 만에 공개 주소가 생깁니다.
누가 접속할 수 있을까?
토글을 바꿔보세요. 같은 앱인데 접속 가능한 사람이 확 달라집니다.
배포까지, 순서대로 조립하기
아래 단계를 올바른 순서대로 누르세요. 위 칸에 순서대로 쌓입니다. 되돌리려면 쌓인 카드를 누르세요.
기술 스택 · 도구
레스토랑을 열 때 화구·냉장고·POS를 브랜드별로 고르듯, 앱도 각 부품마다 실제로 쓰이는 도구가 정해져 있습니다. 처음엔 대표 몇 개만 알아도 충분합니다.
한 줄 정의 — 각 계층(프론트·백·DB·배포·바이브 코딩)에서 현업이 실제로 쓰는 대표 서비스·프레임워크 모음.
자세히 알아보기 왜 도구를 알아야 · 고르는 기준 · 조합 · 팁
- ① 왜 도구를 알아야 하나
- 바이브 코딩에서도 “무엇으로 만들지”를 정해 AI에게 알려주면 결과가 훨씬 정확합니다. 예: “Next.js로, Supabase를 DB로 써서 만들어줘”.
- ② 고르는 기준
- 내가 코드를 직접 만질지(개발자형: Cursor·Claude Code) 아니면 말로만 만들지(비개발자형: Lovable·Bolt)로 크게 갈립니다.
- ③ 도구는 보통 ‘조합’으로 씀
- 대부분 한 개가 아니라 여러 개를 엮습니다. 흔한 조합:
Lovable·Bolt로 시제품 → Cursor·Claude Code로 완성 → Vercel로 배포. - ④ 실무 팁
- 가격 정책(크레딧·구독)과 무료 티어는 자주 바뀝니다. 시작은 무료 티어로, 손에 익으면 하나로 정착하세요. 아래 예시는 2026년 중반 기준입니다.
어떤 도구들을 쓸까? (탭을 눌러 계층 전환)
각 계층을 눌러 대표 도구와 한 줄 설명을 보세요. 이름만 익혀둬도 AI에게 요청할 때 큰 도움이 됩니다.
각 계층에서 도구를 하나씩 골라보세요
정답은 없습니다. 계층마다 하나씩 고르면, 그 조합으로 무엇을 만들 수 있는지 정리해 드립니다. 다섯 계층을 모두 고르면 완료됩니다.
바이브 코딩 플랫폼
출퇴근이냐, 이사냐, 주말 드라이브냐에 따라 고르는 차가 다르고, 초보 운전자와 베테랑의 선택도 다릅니다. 바이브 코딩 플랫폼도 내 목표와 경험에 따라 첫 선택이 달라집니다. ‘제일 좋은 하나’는 없고, ‘나에게 맞는 하나’가 있습니다.
한 줄 정의 — 자연어로 앱을 만들어 주는 서비스들. 크게 ‘말로만 만드는 노코드 앱빌더’와 ‘내 코드 위에서 돕는 에디터형’ 두 갈래로 나뉜다.
자세히 알아보기 두 갈래 · 고르는 기준 · 흔한 조합 · 팁
- ① 크게 두 갈래
- 노코드 앱빌더(Lovable·Bolt·v0·Replit·Base44)는 브라우저에서 채팅만으로 앱을 만듭니다. 에디터형(Cursor·Claude Code 등)은 내 컴퓨터의 실제 코드 위에서 AI가 돕습니다.
- ② 고르는 기준 3가지
- 경험(코드를 만질 수 있나) · 목표(빠른 데모냐 실제 출시냐) · 작업 장소(브라우저만이냐 로컬 설치도 괜찮나). 아래 마법사가 이 세 가지로 추천해 줍니다.
- ③ 흔한 조합
- 한 개만 쓰기보다 엮어 씁니다. 대표 흐름:
Lovable·Bolt로 뼈대·시제품 → Cursor·Claude Code로 복잡한 기능 완성 → Vercel로 배포. 노코드로 만든 코드를 GitHub로 내보내 이어가는 방식입니다. - ④ 실무 팁
- 모두 무료 티어가 있으니 먼저 체험하세요. 어떤 도구든 마지막 10%(예외 처리·보안·완성도)는 손이 갑니다. 결제·개인정보가 걸리면 프로덕션 전에 사람이 검토해야 합니다. 아래 정보는 2026년 중반 기준이라 가격·정책은 바뀔 수 있습니다.
3가지만 고르면 첫 플랫폼을 추천해 드립니다
정답이 아니라 ‘출발점’입니다. 세 질문에 모두 답하면 추천이 나오고, 도전 과제가 완료됩니다.
Q1코딩 경험이 어느 정도인가요?
Q2지금 만들고 싶은 건?
Q3어디서 작업하고 싶나요?
점은 상대적 감각입니다(초보 친화 · 제작 속도 · 유연성). 2026년 중반 기준.
비개발자가 실제 출시할 서비스를 만들기에 가장 무난한 기본값.
장점
- 만들기 전 ‘계획(Discuss)’ 단계가 있어 초보 실수를 줄여줌
- Supabase(DB·로그인)·Stripe(결제)를 대화만으로 자동 연결
- 결과 코드가 가장 정돈돼, 나중에 개발자에게 넘기기 쉬움
- GitHub 양방향 동기화 — 언제든 꺼내 자체 운영 가능
단점
- React·TS·Tailwind만 지원(Vue·Svelte 불가)
- 네이티브 모바일 앱은 안 됨(웹·PWA만)
- 메시지 크레딧이 많이 쓰는 사람에겐 빠듯할 수 있음
브라우저 안에서 즉시 실행돼, 첫 결과가 가장 빨리 나옴.
장점
- 프롬프트 → 배포 URL까지 5분 내도 현실적일 만큼 빠름
- 프레임워크 유연(React·Vue·Svelte·Astro)
- Expo로 모바일 앱까지 가능
- 무료 티어가 넉넉해 부담 없이 시작
단점
- 결과가 가끔 ‘덜 완성’이라 다듬는 손이 필요
- UI 미학은 v0·Lovable보다 살짝 뒤짐
- Bolt Cloud와 묶여 다른 곳으로 이전이 가장 어려움
가장 세련되고 일관된 화면을 뽑아주는 Vercel의 도구.
장점
- shadcn·Tailwind로 ‘AI티’ 안 나는 깔끔한 UI
- Figma 디자인 → 코드 변환이 기본 기능
- Vercel 배포가 거의 마찰 없음
단점
- 백엔드는 약한 편(풀스택은 신생)
- Vercel 생태계 락인이 강함
- 옆에 엔지니어 한 명 있으면 훨씬 수월
브라우저 안에 진짜 IDE + AI 에이전트. 코드를 보며 배우기 좋음.
장점
- DB·인증·호스팅이 내장 — 인프라를 한 곳에서
- 웹뿐 아니라 모바일·게임·대시보드, 50+ 언어
- 코드가 그대로 보여 배우며 성장 가능
- 업계에서 가장 큰 사용자층
단점
- 셋 중 가장 복잡해 학습 곡선이 있음
- 크레딧 소모·버그 반복 루프에 빠질 수 있음
- 자율 실행은 사람이 통제해야(프로덕션 사고 사례 존재)
기술 설정을 아예 감춰, 진입장벽이 가장 낮은 신생 도구.
장점
- DB·GitHub·호스팅 설정을 신경 쓸 필요가 없음
- 클릭 몇 번으로 앱이 나옴 — 가장 낮은 문턱
단점
- 가장 신생이라 안정성·사례가 아직 적음
- 감춘 만큼 세밀한 제어·이전(이식성)이 약함
VS Code 기반 에디터. 내 실제 코드베이스 위에서 AI가 작업.
장점
- 실제 프로젝트에서 강력 — 버그 해결·리팩터에 특히
- 인라인 편집 + 자율 에이전트 모드
- 내 코드라 이식성·자유도가 완전함
단점
- 에디터·코드 개념에 익숙해야 함
- 완전 초보에겐 문턱이 있음
여러 파일을 다루는 복잡한 작업에 강한 CLI·에이전트형 도구.
장점
- 큰 코드베이스·다중 파일 작업에 강함
- Claude 구독에 포함 — 이미 쓰면 사실상 추가비용 없음
- 터미널·에디터·앱 등 여러 곳에서 사용
단점
- 터미널·코드에 어느 정도 친숙해야 함
- 완전 초보에겐 첫 진입이 낯섦
이미 특정 에디터 습관이 있다면 고려할 만한 에디터형 대안들.
이런 점
- Windsurf — Cursor와 비슷한 에디터형, 넉넉한 무료 티어
- Copilot — 에디터 자동완성·에이전트, 가장 저렴한 편
고려할 점
- 둘 다 코드 환경에 익숙한 사용자 기준
- 완전 초보라면 노코드형부터 시작하는 편이 쉬움
바이브 코딩 절차
좋은 요리는 재료를 마구 넣는 게 아니라 순서가 있습니다. 바이브 코딩도 “일단 만들어줘”가 아니라, 목표를 정하고 → 잘게 쪼개고 → 도구를 고르고 → 요청하고 → 확인하고 → 고치는 흐름을 따를 때 훨씬 잘 됩니다.
한 줄 정의 — 아이디어를 실제 앱으로 만드는 반복 가능한 8단계 작업 순서.
자세히 알아보기 왜 순서가 중요 · 반복의 핵심 · 흔한 실수
- ① 왜 순서가 중요한가
- 목표가 흐릿하면 AI 결과도 흐릿합니다. 순서를 지키면 매 단계에서 확인할 것이 분명해져, 문제를 일찍 잡습니다.
- ② 반복(iteration)이 핵심
- 한 번에 완성하려 하지 마세요. 작게 요청 → 확인 → 고치기를 여러 번 도는 게 정석입니다. 5·6단계를 계속 오가게 됩니다.
- ③ 흔한 실수
- 기능을 한꺼번에 몰아 요청하기, 결과를 확인 안 하고 다음으로 넘어가기, 배포 전 테스트 건너뛰기. 아래 절차가 이 실수들을 막아줍니다.
- ④ 이 탭 사용법
- 아래 가이드를 1단계부터 직접 눌러가며 진행해 보세요. 마지막 단계까지 마치면 도전 과제가 완료됩니다.
정리·요약
손님이 앉는 홀(프론트엔드), 요리하는 주방(백엔드), 둘 사이를 오가는 웨이터(API), 재료를 보관하는 창고·장부(데이터베이스), 그리고 거리에 가게를 여는 일(배포). 다섯 부품이 모여 하나의 앱이 됩니다.
각 요소를 알맞은 자리에 배치하세요
‘사진 공유 앱’의 요소들입니다. 항목을 누른 뒤 알맞은 통을 누르거나 드래그하세요. 모두 맞히면 전체 학습이 완료됩니다.
프론트엔드 · 홀
백엔드 · 주방
API · 웨이터
데이터베이스 · 창고
| 부품 | 레스토랑 비유 | 한 줄 정의 | 대표 예시 |
|---|---|---|---|
| 바이브 코딩 | 셰프에게 주문 | 원하는 걸 말로 설명해 AI가 코드를 짜게 하는 방식 | “메모 앱 만들어줘” |
| 프론트엔드 | 홀 | 사용자가 보고 만지는 화면 | HTML · CSS · JS |
| 백엔드 | 주방 | 서버에서 도는 계산·검증·처리 | 로그인 확인 |
| API | 웨이터 | 프로그램끼리의 요청·응답 통로 | GET /weather |
| 데이터베이스 | 창고·장부 | 데이터를 표로 저장·검색 | CRUD · SQL |
| CLI·터미널 | 정해진 말로 주문 | 글로 명령을 입력해 컴퓨터 조작 | ls · git · npm |
| 배포·호스팅 | 가게 개업 | 앱을 인터넷에 올려 공개 | Vercel · 도메인 |
| 스택·도구 | 주방 설비 선택 | 계층별로 실제 쓰는 대표 서비스 | Next.js · Supabase |
| 바이브 코딩 플랫폼 | 첫 차 고르기 | 목표·경험에 맞는 시작 플랫폼 선택 | Lovable · Bolt · Cursor |
| 바이브 코딩 절차 | 요리 순서표 | 목표→쪼개기→도구→요청→확인→반복→테스트→배포 | iterate ×N |
이 사이트에서 배운 용어를 한곳에서
헷갈리는 말이 있으면 검색하거나 분류로 걸러보세요. 개념·UI·도구·기타 용어를 모아뒀습니다.