만드는 건 10분이면 됩니다. 막히는 건 그다음입니다.

AI 바이브코딩 A to Z

코딩을 몰라도, 말로 만든 앱을 «누구나 여는 주소»로

A4 세로 265쪽 · 21장 · 본문 14pt 큰 글씨

실제 화면 141장 · 그대로 복사해 쓰는 «AI에게 말하기» 48개

실전 앱 3개 완성본 코드 포함

전재현 · JJ Creative 교육연구소 소장

19,000원

─────────────────────────────────────────────

■ 이런 장면, 겪어 보셨나요

AI에게 «설문 앱 만들어 줘»라고 했더니 몇 분 만에 화면이 나왔습니다.

그런데 그다음부터 이상합니다.

· 카톡으로 주소를 보냈는데 아무도 못 엽니다 — «localhost:3000»은 내 컴퓨터에서만 열리는 주소였습니다.

· 강의장에서 30명이 답했는데 화면에는 «응답 0명»입니다 — 답이 각자 휴대폰에만 저장됐습니다.

· 어느 날 «공개적으로 노출된 API 키가 감지되었습니다» 메일이 옵니다.

· 고쳐서 올렸더니 화면이 하얗게 나옵니다. 어제 버전으로 어떻게 되돌리는지 모르겠습니다.

요즘 «바이브 코딩»이라고 부르는 방식 — 말로 시키면 AI가 코드를 쓰는 방식 — 은

«만드는 것»까지는 정말 쉽습니다. 이 책은 바로 그다음, 막히는 곳을 다룹니다.

─────────────────────────────────────────────

■ 이 책이 다루는 것

· 내가 만든 앱을 GitHub에 저장하고 Vercel로 올려 «누구나 여는 주소» 만들기

· 여러 사람의 응답을 Supabase·구글 시트 한 권의 장부에 모으기

· API 키(열쇠)가 새는 길, 막는 법, 샜을 때 순서대로 수습하기

· 빌드 실패·하얀 화면을 몇 초 만에 되돌리기

· 실전 앱 3개를 처음부터 끝까지 — AI가 멈춘 곳, 사람이 누른 버튼까지 그대로

· 로그인, 앱 안의 AI, 휴대폰 홈 화면 아이콘(PWA), 비용·지출 한도, 팀으로 넘기기

모든 화면은 연출이 아니라 2026년 10월에 실제로 만들고, 올리고, 망가뜨리고, 되돌린 기록입니다.

─────────────────────────────────────────────

■ 이런 분께 맞습니다

□ AI로 교육용·업무용 작은 앱을 만들어 보고 싶은 기업교육 담당자·강사

□ AI 스튜디오 등으로 만들어는 봤는데 «남에게 보여 주기»에서 멈춘 분

□ 강의장에서 학습자 휴대폰으로 쓰는 퀴즈·설문·피드백 앱이 필요한 분

□ 코딩은 모르지만, 화면을 보고 차근차근 따라 할 의향이 있는 분

□ 작은 글씨가 부담스러운 분 — 본문 14pt, 화면 캡처도 한 줄에 한 장씩 크게 넣었습니다

─────────────────────────────────────────────

■ 이런 분껜 맞지 않습니다

× 돈이 전혀 들지 않기를 바라시는 분 — 코딩 AI(Claude 또는 ChatGPT) 유료 요금제가 필요합니다

× 코드 문법을 배우고 싶으신 분 — 이 책은 «무엇을 어떤 순서로 시키나»를 다룹니다

× AI가 알아서 끝까지 다 해 주기를 바라시는 분 — 로그인·권한 허락 같은 곳은 사람이 눌러야 합니다

× 사내 보안 정책상 외부 AI·클라우드를 쓸 수 없는 환경이신 분

─────────────────────────────────────────────

■ 무엇이 들어 있나 — 21장의 지도

0부 들어가며 (3장) — 책에만 있는 장

000 시작 전 준비 — 계정 만들기와 AI 작업창 열기

001 이 책이 약속하는 것과 약속하지 않는 것

002 내 상황에 맞는 읽는 순서 고르기

1부 기초 (6장)

003 어디서 시작할까 — 바이브 코딩 작업실 다섯 곳 비교

004 한 장의 지도 — GitHub · Vercel · Cloudflare · Supabase · Firebase

005 배포 — GitHub에 저장하고 Vercel로 누구나 여는 주소 만들기

006 장부 — 여러 사람의 답을 Supabase · 구글 시트에 모으기

007 열쇠 — API 키가 새는 길, 막는 법, 샜을 때 할 일

008 망가졌을 때 — 빌드 실패 · 하얀 화면 · 되돌리기

2부 실전 (3장)

009 웹 Claude Code로 «교육 현장 피드백 보드» 처음부터 끝까지

010 Codex로 «신입 온보딩 체크리스트» 처음부터 끝까지

011 강의장 실전 키트 3종 — 랜덤 조 편성 · 실시간 퀴즈 · 순위판

3부 확장 (5장)

012 로그인 — 우리 회사 사람만 들어오게 하는 세 가지 문

013 앱 안에 AI — «AI 요약» 버튼 하나를 달아 본 실제 기록

014 휴대폰 앱처럼 — 홈 화면 아이콘(PWA)과 오리엔테이션 QR

015 운영과 비용 — 사용량 보는 법과 지출 한도 거는 법

016 팀으로 만들기 — 동료 초대 · 브랜치 · PR · 인수인계

부록 · 맺음 (4장) — 책에만 있는 장

017 증상으로 찾는 막혔을 때 사전

018 복사해서 쓰는 «AI에게 말하기» 48개 전체 모음

019 AI가 꺼내는 낯선 말, 쉬운 말로 바꾸기

020 다음에 만들 것 — 내 업무 앱 목록 적기

─────────────────────────────────────────────

■ 왕초보 기준으로 만들었습니다

· 모든 장 맨 앞에 «이 장 미리 보기» — 할 일 · 순서 · 준비물 · 먼저 읽을 장

· 000장에서 계정 만들기부터 첫 말 걸기까지 한 단계씩

· 영어 화면은 빨간 네모 친 곳만 보시면 됩니다

· «AI에게 말하기» 상자는 그대로 복사해 붙여 넣으면 됩니다 (텍스트 파일로도 따로 드립니다)

· 막혔을 때는 화면에 보이는 증상으로 찾는 사전(부록 A)

■ 함께 드리는 실습 자료 (ZIP)

· AI-바이브코딩-A-to-Z.pdf — 본책 265쪽

· AI에게 말하기 전체 모음.txt — 48개 전문, 메모장으로 열어 복사

· 배포 전 점검표 · 한 달 점검표.txt

· 실전 앱 완성본 코드 3종 — 피드백 보드 · 온보딩 체크리스트 · 강의장 키트

(저자 계정 값은 «여기에 내 값» 자리표시로 바꿔 두었습니다)

─────────────────────────────────────────────

■ 사시기 전에 꼭 읽어 주세요

· 코딩 AI 유료 요금제(Claude 또는 ChatGPT)가 필요합니다. GitHub·Vercel·Supabase는 무료로 시작할 수 있습니다.

· 화면과 요금은 2026년 10월 8일 기준입니다. 서비스 화면은 바뀔 수 있습니다.

· 같은 문장으로 요청해도 AI는 매번 조금씩 다른 앱을 만듭니다. 같은 결과가 아니라 같은 순서를 드립니다.

· 디지털 파일 특성상 다운로드 후에는 환불이 어렵습니다.