왜 막히나
AI로 만들기가 막히는 건,
흐름을 몰라서입니다
바이브코딩으로 뭔가를 만들다 멈춘 자리를 떠올려 보세요.
대부분 아래 다섯 질문 중 하나에서 멈춥니다.
- “AI가 내 컴퓨터에서 직접 만들게 하려면, 뭘 켜야 하지?”
작업 환경 - “GitHub은 다들 쓰라는데, 정확히 뭘 하는 곳이지?”
GitHub - “만든 걸 친구에게 보내려면, 어디에 올려야 하지?”
배포 - “새로고침해도 남게 하려면, 어디에 저장해야 하지?”
데이터베이스 - “구글로 로그인하게 하려면, 뭘 붙여야 하지?”
소셜 로그인
이런 분을 위해 썼습니다
- 클로드나 ChatGPT를 써 봤지만, 남는 걸 만들어 본 적은 없는 분
- 아티팩트까지는 만들었는데, 그다음을 모르는 분
- 만들고 싶은 서비스가 있는데, 개발자에게 맡기기는 부담스러운 분
달라진 것
이제는 개념만 알면,
구현은 AI가 합니다
AI가 없던 시절에는 개념을 알아도 코드를 직접 짜고 서버를 직접 설정할 줄 알아야 했습니다. 그래서 개발자만 할 수 있었습니다. 지금은 “배포할 때는 이걸 쓰고, 이런 순서로 간다”는 것만 알면 세부 작업은 AI가 합니다.
예전
개발자만 할 수 있었습니다
내가
개념
내가
구현 · 코드, 서버 설정, 연결
지금
개념만 알면 됩니다
내가
개념
AI가
구현 · 코드, 서버 설정, 연결
이 책은 AI로 만들 때
이것만 알면 되는 필수 개념을 알려 드립니다
필수 개념
필수 개념은
이것만 알면 됩니다
순서대로 이으면 서비스 하나가 됩니다. 칸마다 AI에게 할 말은 한 줄이고, 세부 작업은 Claude Code가 합니다.
만들기
내 컴퓨터에서
1작업 환경Claude Code
AI가 내 컴퓨터에서 직접 파일을 만들고 고치는 곳
app
components
page.tsx
프로젝트를 만들었습니다. 화면을 열어 확인해 보세요.
“이 폴더에 새 프로젝트 만들어 줘”
2화면Next.js
누르고 고르는 웹 화면을 만드는 도구
“테스트 화면 만들어 줘”
올리기
인터넷으로
3GitHub
만든 코드를 보관하고 고친 기록을 남기는 곳
beno / ai-match-test
- 결과 화면 추가
- 질문 9개 추가
- 시작 화면 추가
“GitHub에 올려 줘”
4배포Vercel
누구나 여는 주소를 만들어 주는 곳
카톡으로 보내면 친구 폰에서 열림
“Vercel에 배포해 줘”
남기기 · 지키기
사람들이 쓰기 시작하면
5데이터베이스Supabase
새로고침해도 남는 기록을 보관하는 곳
“참여자 수 저장해 줘”
6소셜 로그인구글 로그인
구글 계정으로 들어오고, 허용한 사람만 들어가게 하는 기능
Google로 로그인나만 들어감
“관리 화면에 구글 로그인 붙여 줘”
코드를 읽거나 서버를 설정하는 법은 다루지 않습니다. 그건 AI가 합니다. 이 책은 언제 무엇을 쓰고, AI에게 무엇을 말하면 되는지에 집중합니다.
연습 예제
흐름은 테스트 하나를
끝까지 만들며 익힙니다
필수 개념이 한 번에 다 들어가는 크기라서 고른 예제입니다. 「AI 소개팅 테스트: 나랑 찰떡인 AI는?」를 친구에게 보내는 데까지 가 보면, 다음에 만들고 싶은 것도 같은 흐름으로 시작합니다.
화면
시작 · 질문 · 결과
GitHub · 배포
카톡으로 보내는 주소
데이터베이스
쌓이는 참여자 수
소셜 로그인
나만 보는 관리 화면
같은 흐름으로 만들 수 있는 것
화면은 책에서 만드는 서비스의 목표 시안입니다.
자가진단
지금, 어디서 막혀 있나요?
하나라도 “딱 내 얘기다” 싶다면, 그 문제를 푸는 장을 바로 찾을 수 있습니다. 증상마다 읽을 장을 함께 적어 두었습니다.
- Claude Code라는 이름만 들어 봤다1장Claude Code 켜기
- 아티팩트로 그럴듯한 걸 만들어 봤다. 그다음을 모른다2장화면
- 친구에게 보낼 주소가 없다3장배포
- 새로고침하면 넣은 게 다 사라진다4장저장
- 나만 들어가서 보는 화면이 필요하다5장로그인
- 하나는 만들었는데, 다음 걸 혼자 시작할 자신이 없다6장다음 서비스도 같은 순서로
처음이라면 1장부터 순서대로 가면 됩니다. 장마다 서비스가 한 겹씩 완성됩니다.
실제 화면
이 사이트도 같은 개념으로 만들었습니다
지금 보고 계신 devdesign.kr은 Claude Code로 만들었습니다. 책에서 쓰는 도구와 같습니다.
만드는 방법
코드 대신, 말로 시킵니다
클로드 앱의 Code 탭에 이렇게 말하면 Claude Code가 만듭니다. 책에 나오는 요청문은 전부 복사해서 붙여 넣으면 됩니다. 붙여 넣은 뒤 화면에서 무엇을 확인하면 되는지도 같이 적었습니다.
첫 요청문
저는 코딩을 전혀 모르는 사람입니다. 나중에 인터넷에 올릴 수 있는 웹사이트를 만들고 싶어요. 질문 몇 개에 답하면 나와 닮은 유형이 나오는 심리테스트를 만들려고 합니다. 시작 화면, 질문 화면, 결과 화면이 있으면 됩니다. 시작하기 전에, 이 일을 사람이 맡았다면 저에게 되물었을 질문이 있으면 먼저 물어봐주세요.그다음
지금 만든 사이트를 제 컴퓨터에서 볼 수 있게 실행해주세요. 그리고 제가 브라우저에서 어떤 주소로 들어가면 되는지 알려주세요.막히면, 증상으로 찾습니다
부록 A에 막히는 증상을 그대로 적어 두었습니다. 내 화면과 같은 증상을 찾아, 거기 적힌 요청문을 붙여 넣으면 됩니다.
- 브라우저에 아무것도 안 뜬다
- 나는 보이는데 남은 로그인하라고 나온다
- 내 컴퓨터에서는 되는데 공개 주소에서는 안 된다
- 어제는 됐는데 오늘 안 된다
- 시키지도 않은 걸 바꿔 놨다
이 책이 만들어진 이유
저는 2년 넘게 매주 모이는 스터디를 운영하고 있습니다. 코드를 모르는 분들이 AI로 만든 것을 가져와, 막힌 지점을 꺼내 놓는 자리입니다.
가장 자주 본 장면은 비슷했습니다. 클로드나 ChatGPT로 그럴듯한 것을 만들어 놓고, 거기서 멈춰 있었습니다. 주소로 올리는 법, 기록이 남게 하는 법, 나만 들어가게 하는 법을 몰라서입니다.
개발자로 일한 저에게는 너무 당연해서 설명할 생각도 못 했던 순서였습니다. 그런데 그 순서는 첫 번째 서비스든 열 번째 서비스든 같았습니다.
이 필수 개념만 알면, 개발자 없이도 원하는 건 다 만들 수 있습니다. 그 순서를 처음 한 번 끝까지 같이 지나가는 책입니다.
비노 · 개발자의디자인
2년+
매주 스터디 운영
1만+
Threads 팔로워
기업 AX
교육·컨설팅 진행
사전신청자 전용
출간 할인 쿠폰
출간하는 날 메일로 보내 드립니다
가격과 출간일도 사전신청하신 분께 먼저 알려 드립니다
목차
장마다 읽고 끝나지 않습니다. 각 장이 끝날 때 서비스가 어디까지 되어 있는지 함께 적었습니다.
- 들어가며이 책으로 만드는 것무엇을 만들고, 어떤 순서로 가는지 압니다출간 시 열림
- 1장Claude Code 켜기클로드 앱의 Code 탭에서 첫 대화가 됩니다출간 시 열림
- 2장화면: 내 컴퓨터에서 테스트를 끝까지 해 본다시작, 질문 9개, 결과가 내 컴퓨터에서 돕니다출간 시 열림
- 3장배포: 카톡으로 보내면 친구 폰에서 열린다내 주소가 생기고, 고친 것이 다시 올라갑니다출간 시 열림
- 4장저장: 참여자 수가 진짜 숫자가 된다참여자 수와 나와 같은 결과 비율이 모든 사람 기준이 됩니다출간 시 열림
- 5장로그인: 나만 들어가는 관리 화면오늘 몇 명이 했고 어떤 결과가 많은지 나만 봅니다출간 시 열림
- 6장다음 서비스도 같은 순서로다른 테스트나 신청 폼을 혼자 시작합니다출간 시 열림
- 부록 A막히면 여기서 찾는다증상 그대로 찾아 요청문을 붙여 넣습니다출간 시 열림
- 부록 B같은 뼈대로 만드는 다른 셋익명 질문함, 후기 수집기, 신청 폼출간 시 열림
* 장 제목은 집필하면서 다듬어질 수 있습니다.
받는 것
한 권을 따라가면 손에 남는 것들입니다.
필수 개념을 순서대로 익히는 본편
들어가며부터 6장까지, 테스트 하나를 처음부터 끝까지 만들며 필수 개념을 순서대로 익힙니다. 장마다 체크포인트로 닫혀서, 어디까지 됐는지 화면으로 확인하고 넘어갑니다.
본편
6장
만드는 것
서비스 1개
복사해서 붙여 넣는 요청문
모든 단계의 요청문을 그대로 붙여 넣을 수 있게 넣었습니다. 내 서비스에 맞게 바꿔 쓸 자리는 대괄호로 표시해 두었습니다.
막히면 찾는 증상 사전 (부록 A)
설치, 화면, 배포, 저장, 로그인, 되돌리기, AI가 말을 안 들을 때. 일곱 묶음으로 증상을 그대로 적고, 붙여 넣을 요청문을 달았습니다.
같은 뼈대로 만드는 다른 셋 (부록 B)
익명 질문함, 후기 수집기, 신청 폼. 테스트를 만든 순서 그대로 다음 서비스를 시작합니다.
사전신청하시면,
할인 쿠폰을 보내 드립니다
이메일로 사전신청하신 분께만, 출간하는 날 할인 쿠폰을 메일로 보내 드립니다. 가격과 출간일도 사전신청하신 분께 가장 먼저 알려 드립니다.
사전신청자 전용
출간 할인 쿠폰
출간하는 날 메일로 보내 드립니다
시작 전에 확인해 주세요
Claude 구독
Pro 이상 유료 구독이 필요합니다. Claude Code는 무료 플랜에서 쓸 수 없습니다.
컴퓨터
맥, 윈도우 모두 됩니다. 클로드 데스크톱 앱 하나로 진행하고, 책 속 화면은 맥 기준입니다.
무료 계정
GitHub, Vercel, Supabase는 책을 따라 무료로 가입합니다.
디자인
깊게 다루지 않습니다. 깔끔하고 단정한 정도로 나오게 요청문에 넣어 두었습니다.
자주 묻는 질문
코딩을 하나도 모르는데 따라 할 수 있나요?
그런 분을 위해 썼습니다. 코드는 직접 쓰지 않습니다. 각 단계에서 무엇을 말하면 되는지 요청문으로 드리고, 붙여 넣은 뒤 화면에서 무엇을 확인하면 되는지까지 적었습니다.
제 클로드 앱에도 Code 탭이 있나요?
Pro 이상 구독이면 있습니다. 웹 브라우저의 claude.ai가 아니라, 내려받아 설치하는 클로드 데스크톱 앱에 있습니다. 설치부터 Code 탭 여는 것까지 1장에서 같이 합니다.
터미널(검은 화면)을 써야 하나요?
명령을 직접 치지 않습니다. 클로드 데스크톱 앱의 Code 탭 안에서, 해야 할 일을 Claude Code에게 말로 시킵니다.
윈도우에서도 되나요?
됩니다. 클로드 데스크톱 앱의 Code 탭은 맥과 윈도우를 모두 지원합니다. 책 속 화면은 맥에서 찍었습니다.
Claude 구독 말고 돈이 더 드나요?
GitHub, Vercel, Supabase는 무료 플랜으로 따라 할 수 있습니다. 주소는 무료로 받는 주소로 진행하고, 내 도메인을 쓰고 싶을 때만 도메인 비용이 따로 듭니다.
『비개발자도 따라 만드는 에이전트 앱』, 『AI 네이티브 퀀텀점프』와 무엇이 다른가요?
에이전트 앱은 내 컴퓨터에서 도는 데스크톱 앱을, 이 책은 주소로 열리는 웹서비스를 만듭니다. 퀀텀점프는 AI가 일할 환경과 기준을 세우는 책입니다. 처음이라면 이 책부터 보시길 권합니다.
AI에게 묻던 사람에서,
AI로 만드는 사람으로
채팅창 안에서 끝나던 결과가, 친구 폰에서 열리고 숫자가 쌓이는 서비스가 됩니다. 그 순서를 한 번 지나가면, 다음에 만들고 싶은 것은 혼자 시작합니다.
사전신청자 전용
출간 할인 쿠폰
출간하는 날 메일로 보내 드립니다
전자책
할인 쿠폰