바이브 코딩의 시작
AI가 등장함에 따라 코딩의 지평이 바뀌기 시작했습니다. 원래 코딩은 모든 규칙을 한 줄 한 줄 직접 작성하지 않으면 절대 작동하지 않는 영역이었습니다. 하지만 이제는 말로 코딩을 할 수 있는 시대가 되었습니다. AI가 코딩의 규칙을 모두 알고 우리의 "말"을 코드로 바꿔주기 때문입니다.
그렇다면 이게 왜 중요할까요? 바로 누구나 코딩을 할 수 있는 시대가 왔기 때문입니다. 이제는 비개발자도 원리를 안다면 서비스를 만들고 코딩할 수 있습니다. 이전에는 수백만 원, 수천만 원을 주고 개발자를 고용해서 프로그램을 만들어야 했지만, 이제는 비개발자도 충분히 직접 서비스를 만들 수 있습니다.
물론 개발자가 이제 필요 없다는 이야기는 아닙니다. 아직도 AI가 한 코딩에 대해서 원리를 잘 알고 있는 개발자가 검토하고 수정하는 일은 필수입니다.
제가 말하려는 것은 비개발자도 충분히 그 진입 장벽을 넘어서 서비스를 만들 수 있다는 것입니다. 다만 그 장벽을 넘으려면 약간의 개발 지식과 경험이 필요합니다.
그 약간의 장벽을 넘을 수 있는 안내자의 역할을 제가 해드리겠습니다. 바이브 코딩에는 개발에 대한 지식이 아예 필요 없는 것이 아닙니다. 전체 시스템이 어떻게 굴러가는지 큰 그림을 잡고, 아주 기본적인 것들을 이해한 후 접근하면 됩니다. 아시다시피 AI는 이해하는 만큼 그 결과를 만들어 줍니다.
그리고 그 장벽을 넘어서 무엇을 보게 될까요? 먼저 여러분이 필요한 것을 직접 만들어서 사용할 수 있는 경험을 가지게 됩니다. 현재 AI 회사들이 열심히 개발을 하고 있지만, 여러분의 모든 작업 영역에 필요한 AI를 만들어 주는 것은 아닙니다. 그렇기 때문에 우리는 지금 우리에게 필요한 것을 직접 만들어서 사용할 수 있는 능력이 필요합니다. 이렇게 만든 도구는 여러분의 일에서 바로 쓰이고 혜택을 줍니다.
다음으로, 서비스를 만들 수 있게 됩니다. 서비스를 만들 수 있는 능력은 생각보다 중요합니다. 여러 사람들이 사용할 수 있게 할 수 있고 수익 모델을 만들 수 있습니다. 다른 사람들이 AI를 가지고 신기한 사용 사례를 발견하고만 있을 때, 여러분은 직접 서비스를 만들고 수익을 얻을 수 있는 모델을 가지게 됩니다.
저도 비개발자로 시작해서 개발을 10년 정도 해왔습니다. 그리고 틸노트를 만들었고, 틸노트는 월 50만 뷰의 트래픽을 가진 서비스가 되었습니다. 그렇기 때문에 여러분에게 정말 잘 알려드릴 수 있고, 진짜 필요한 것들을 콕콕 짚어서 알려드릴 수 있다고 생각합니다.
지금 필요한 것은 용기가 아니라 지도입니다
이 책을 집어 드신 분이라면 아마 이런 생각을 해보셨을 겁니다.
"만들고 싶은 서비스는 있는데, 코딩을 몰라서 시작도 못 하겠다."
괜찮습니다. 이 책은 코딩을 잘하는 사람을 위한 책이 아닙니다. 오히려 반대입니다. 터미널이 낯설고, API라는 말이 무섭고, 에러 메시지를 보면 영어 경고문처럼 느껴지는 분을 위해 쓴 책입니다.
우리가 목표로 하는 것은 개발자가 되는 것이 아닙니다. 내가 상상한 서비스를 실제 주소(URL)로 만들어 세상에 내놓는 것입니다. 끝까지 따라오시면 여러분은 "내가 만든 서비스 URL"을 갖게 됩니다.
이 책에서 사용할 방식은 바이브코딩입니다. 어렵게 들릴 수 있지만, 이렇게 생각하시면 됩니다.
바이브코딩은 AI에게 코드를 대신 쓰게 하고, 사람은 방향을 정하고 결과를 검사하는 작업 방식입니다.
식당으로 비유해볼게요. 예전에는 혼자 장도 보고, 요리도 하고, 서빙도 하고, 계산도 해야 했습니다. 이제는 Codex나 Claude Code 같은 똑똑한 요리사가 옆에 있습니다. 우리는 "어떤 메뉴를 만들지", "손님에게 어떻게 보일지", "맛이 이상하지 않은지"를 판단합니다. 요리 자체는 AI에게 많이 맡깁니다.
그렇다고 아무것도 몰라도 버튼 하나로 끝난다는 뜻은 아닙니다. 현실적인 기대가 중요합니다.
코드를 처음부터 전부 이해하지 않아도 됩니다.
하지만 어떤 일을 시키는지는 말로 설명할 수 있어야 합니다.
에러가 나도 실패가 아닙니다. 에러는 "여기 확인해 주세요"라는 신호입니다.
설치, 계정, API 키, 배포처럼 지루한 구간이 진짜 고비입니다.
그 고비를 넘기도록 이 책이 손잡고 안내합니다.
코딩이라는 것의 기본을 저와 함께 이해하세요. 그리고 전체적인 서비스가 어떻게 구성되고 작동하는지 원리를 이해하세요. 여러분이 익힐 것은 이러한 것을 바탕으로 어떻게 AI에게 일을 시키고, 결과를 확인하고, 수정하는지입니다. 원리를 알게 된다면 나머지는 자동으로 따라오게 될 것입니다.
AI 생성 이미지
따라하기: 우리가 만들 서비스를 먼저 상상해봅니다
이 책에서 같이 만들어볼 프로젝트는 AI 상품 설명 생성기입니다. 사용자가 로그인을 해서 상품을 올리면 AI가 상세 설명 등을 써줍니다.
전체 흐름은 이렇게 됩니다.
로그인하기: 사용자가 서비스에 회원 가입을 하고 로그인을 합니다.
AI로 상품 올리기: 올릴 상품 정보를 입력하면 AI가 상품 설명, 홍보 문구 등을 작성해 줍니다.
결과 보여주기: AI가 만든 결과를 화면에 보여줍니다.
저장하기: 마음에 드는 결과를 나중에 다시 볼 수 있게 데이터베이스에 저장합니다.
배포하기: 내 컴퓨터 안에서만 보이던 서비스를 인터넷 주소로 공개합니다.
여기까지가 우리가 만들 완성품입니다. 처음에는 가짜 화면부터 만들고, 그다음 진짜 서버를 붙이고, AI를 연결하고, 저장 기능을 추가하고, 로그인까지 붙입니다. 마지막에는 AWS Lightsail에 올려 친구에게 링크를 보낼 수 있게 합니다.
중요한 점이 있습니다. 이 책은 AI 쇼핑몰을 만들지만, 여러분의 아이디어가 꼭 쇼핑몰일 필요는 없습니다. 구조는 거의 같습니다.
자소서 첨삭기: 자소서 입력 → AI가 첨삭 → 결과 표시 → 저장
이메일 답장기: 받은 메일 입력 → AI가 답장 작성 → 결과 표시 → 저장
리뷰 요약기: 리뷰 여러 개 입력 → AI가 요약 → 결과 표시 → 저장
강의 소개문 생성기: 강의 정보 입력 → AI가 홍보 문구 작성 → 결과 표시 → 저장
서비스의 껍데기는 달라 보여도 기본 뼈대는 같습니다.
입력받기 → AI 처리하기 → 결과 보여주기 → 저장하기 → 공개하기
여기에 로그인과 배포를 붙이면 그대로 "진짜 서비스"가 됩니다. 이 틀을 몸에 익히면, 이 책이 끝난 뒤에도 여러분의 아이디어로 바꿔 만들 수 있습니다.
이 뼈대를 익히면 어떤 서비스에도 적용할 수 있습니다. 대부분의 서비스가 프론트엔드와 백엔드를 가지고 DB를 가집니다. 그리고 로그인 인증을 하고 배포를 해서 다른 사람들이 함께 사용할 수 있게 합니다. 그리고 여기에 AI 기능이 붙는다면 하나의 AI 서비스를 만들 수 있습니다.
여러분에게 고기를 주는 것이 아니라 고기를 잡는 방법을 알려드려 평생 사용할 수 있게 합니다.
우리가 함께 일할 팀원들
이 책에서는 여러 도구가 등장합니다. 이름만 보면 어렵습니다. 그래서 지금은 "기술 이름"보다 "맡은 역할"로 이해하시면 됩니다.
AI 코딩 도구: 코드를 써주는 동료
Codex, Claude Code, Antigravity 같은 AI 코딩 도구는 우리가 말로 지시하면 코드를 작성하고 고쳐줍니다. 이러한 코딩 도구들은 각 서비스의 유료 요금제를 사용해야 합니다. ChatGPT를 쓴다면 Codex, 클로드(Claude)를 쓴다면 Claude Code, Gemini를 쓴다면 Antigravity를 사용하시면 됩니다.
어느 것을 골라도 괜찮습니다. 이 책은 특정 도구에 종속되지 않도록 원리에 집중해서 설명합니다. 지시하는 방법과 확인하는 방법은 어느 도구에서나 같기 때문입니다.
우리는 이런 식으로 말하게 됩니다.
"상품명, 특징, 대상 고객을 입력받는 화면을 만들어줘. 버튼을 누르면 결과 영역에 문장이 표시되도록 해줘."
처음부터 완벽한 지시를 할 필요는 없습니다. 만들고, 보고, 고치면 됩니다. 이 반복이 바이브코딩의 핵심입니다.
Next.js: 손님이 보는 매장
Next.js는 웹사이트의 화면을 만드는 도구입니다. 식당으로 치면 손님이 들어와 보는 홀입니다. 입력 칸, 버튼, 결과 영역처럼 사용자가 직접 만지는 부분을 담당합니다.
이를 프론트엔드라고 합니다. Next.js는 React라는 기술을 더 쓰기 편하게 개선한 프레임워크로, 많은 스타트업이 프론트엔드 도구로 활용하고 있습니다.
여러분이 "상품명을 입력하는 칸이 있었으면 좋겠어요"라고 말하면, AI 코딩 도구가 Next.js를 이용해 화면을 만들게 됩니다.
Node.js 서버: 뒤에서 일하는 주방
화면이 홀이라면 서버는 주방입니다. 손님이 버튼을 누르면 주방에서 실제 작업이 일어납니다. AI에게 요청을 보내고, 결과를 받아오고, 데이터베이스에 저장하는 일이 여기에 해당합니다.
이를 백엔드라고 합니다. 뒤에서 서비스의 로직을 직접 처리하죠.
사용자는 주방 안을 보지 않습니다. 하지만 주방이 없으면 음식이 나오지 않듯, 서버가 없으면 서비스가 진짜로 일하지 않습니다.
PostgreSQL DB: 결과를 쌓아두는 엑셀 파일
데이터베이스는 어렵게 들리지만, 처음에는 엑셀이라고 생각하시면 됩니다. 행과 열이 있고, 그 안에 회원 정보나 상품 정보를 저장합니다.
PostgreSQL은 그 엑셀을 더 안전하고 튼튼하게 만든 전문 저장소입니다. 우리가 올린 상품과 AI가 써준 설명을 저장하고 다시 불러오는 역할을 맡습니다.
JWT: 로그인 출입증
JWT는 로그인한 사람에게 주는 디지털 출입증입니다. 놀이공원 손목밴드를 떠올리시면 쉽습니다. 입장할 때 확인을 받고 손목밴드를 받으면, 놀이기구를 탈 때마다 "이 사람은 입장한 사람이구나" 하고 알아봅니다.
웹 서비스도 비슷합니다. 로그인에 성공하면 사용자는 출입증을 받고, 서버는 그 출입증을 보고 "이 사람의 상품만 수정할 수 있게 해야겠다"라고 판단합니다.
Git과 GitHub: 되돌릴 수 있는 저장 지점과 외부 백업
Git은 게임의 저장 슬롯과 비슷합니다. 작업하다가 망가져도 예전 상태로 돌아갈 수 있게 해줍니다.
GitHub는 그 저장 파일을 인터넷에 올려두는 백업 창고입니다. 내 컴퓨터가 바뀌어도 코드를 다시 받을 수 있고, 나중에 배포할 때도 중요한 연결고리가 됩니다.
이 책에서는 초반에 Git과 GitHub를 먼저 다룹니다. 이유는 간단합니다. 안전벨트가 있어야 겁 없이 실험할 수 있기 때문입니다.
AWS Lightsail 서버: 인터넷에 올려두는 작은 가게
내 컴퓨터에서만 돌아가는 서비스는 내 방 안에 차린 가게와 같습니다. 나만 볼 수 있습니다.
AWS Lightsail은 인터넷 위에 작은 가게를 빌리는 서비스라고 생각하시면 됩니다. 우리가 만든 서비스를 그곳에 올리면 친구나 고객이 주소를 입력해 들어올 수 있습니다.
배포는 많은 비개발자가 포기하는 구간입니다. 계정, 요금, 서버 접속, 환경 변수, 데이터베이스 연결 같은 배관 작업이 많기 때문입니다. 그래서 이 책에서는 이 구간을 특별히 천천히 갑니다.
처음부터 이해하려 하지 않아도 괜찮습니다
비개발자가 가장 많이 멈추는 순간은 "내가 이걸 이해 못 하는 걸 보니 재능이 없나 보다"라고 느낄 때입니다.
그렇지 않습니다.
개발에서 어려운 많은 부분은 머리가 나빠서 어려운 게 아닙니다. 이해를 해보지 못했고 경험이 없기 때문에 그렇습니다. 특히 다음 구간은 원래 어렵습니다.
터미널을 여는 일
설치가 제대로 됐는지 확인하는 일
API 키를 발급받고 숨기는 일
에러 메시지를 읽는 일
GitHub에 올리는 일
서버에 접속해 배포하는 일
환경 변수를 맞추는 일
이런 구간을 이 책에서는 배관 구간이라고 부르겠습니다. 수도꼭지를 예쁘게 다는 일보다, 벽 안쪽 배관을 연결하는 일이 더 헷갈립니다. 하지만 한 번 연결되면 물은 흐릅니다.
막히면 여러분 잘못이 아닙니다. 그 구간이 원래 헷갈리는 구간입니다. 이 책은 바로 그 지점에서 "여기서 많이 막힙니다. 이렇게 확인해보세요"라고 안내할 겁니다.
이 책을 따라가는 방법
이 책은 읽기만 하는 책이 아닙니다. 손을 움직이는 책입니다. 한 번에 완벽히 이해하려고 하지 말고, 아래 방식으로 따라오세요.
먼저 그대로 따라 합니다.
왜 그런지 몰라도 괜찮습니다. 처음에는 길을 외우는 단계입니다.작은 성공을 확인합니다.
화면이 떴는지, 버튼이 눌리는지, 저장이 되는지 하나씩 확인합니다.AI에게 복붙할 문장을 사용합니다.
이 책에는 AI 코딩 도구에게 줄 지시문을 따옴표로 표시합니다. 그대로 복사해도 됩니다."현재 프로젝트 상태를 확인하고, 초보자가 이해할 수 있게 다음 작업을 단계별로 안내해줘."
안 되면 에러를 숨기지 않습니다.
에러 메시지는 부끄러운 것이 아닙니다. 문제 해결의 단서입니다. 나중에 에러를 AI에게 그대로 보여주고 고치는 방법도 배웁니다.내 아이디어로 바꾸는 연습을 계속합니다.
AI 쇼핑몰을 만들면서도, 중간중간 "이걸 내 서비스라면 어떻게 바꿀까?"를 생각해보세요. 그리고 직접 변경하거나 바꿔도 됩니다.
확인: 지금 마음속에 이 정도만 남으면 됩니다
아직 설치도 하지 않았고, 코드를 한 줄도 쓰지 않았습니다. 그래도 이미 중요한 출발선에 섰습니다. 아래 문장을 이해하셨다면 충분합니다.
바이브코딩은 AI가 코드를 쓰고, 사람은 방향과 검사를 맡는 방식입니다.
우리는 AI 쇼핑몰(AI 상품 생성기)을 만들고 배포할 것입니다.
기본 구조는 입력받기, AI 처리하기, 결과 보여주기, 저장하기, 공개하기입니다.
AI 코딩 도구(Codex, Claude Code 등)는 코드를 써주는 동료입니다.
Next.js는 화면, Node.js 서버는 뒤쪽 작업, PostgreSQL은 저장소입니다.
JWT는 로그인 출입증입니다.
Git과 GitHub는 되돌리기와 백업을 위한 안전벨트입니다.
AWS Lightsail은 서비스를 인터넷에 올려두는 공간입니다.
막히는 것은 실력 부족이 아니라 원래 어려운 배관 구간을 지나고 있다는 뜻입니다.
여기까지 이해하셨다면 오늘의 목표는 달성입니다.
막히면: 이런 불안이 생길 수 있습니다
"코드를 모르는데 정말 만들 수 있나요?"
네, 만들 수 있습니다. 다만 "아무 생각 없이 한 번에 완성"은 아닙니다. 여러분은 사장님이자 기획자 역할을 합니다. AI에게 원하는 것을 설명하고, 나온 결과를 보고, 이상한 부분을 다시 말해 고칩니다.
코드를 전부 외우는 대신, 이런 질문을 할 수 있으면 됩니다.
지금 화면에 무엇이 보여야 하지?
버튼을 누르면 무슨 일이 일어나야 하지?
저장된 결과는 어디에서 다시 보여야 하지?
로그인하지 않은 사람은 어디까지 볼 수 있어야 하지?
이 질문들이 서비스를 만듭니다.
"도구가 너무 많아서 벌써 겁나요."
정상입니다. 처음 보면 팀원이 너무 많은 회의실에 들어온 느낌일 수 있습니다. 하지만 한 번에 모두 쓰지 않습니다.
처음에는 터미널과 Node.js를 준비합니다. 그다음 Next.js 화면을 띄웁니다. 그다음 GitHub에 백업합니다. 이후 서버, AI, 데이터베이스, 로그인, 배포를 차례로 붙입니다.
한 번에 집 전체를 짓는 것이 아니라, 바닥을 깔고 벽을 세우고 전기를 연결하는 순서입니다.
"중간에 에러가 나면 어떡하죠?"
에러는 반드시 납니다. 이것도 정상입니다. 중요한 것은 에러가 났을 때 멈추지 않는 방법을 배우는 것입니다.
이 책에는 "막혔을 때 빠져나오기" 파트가 따로 있습니다. 에러 메시지를 읽는 법, AI에게 묻는 법, AI 답변이 헛돌 때 끊고 다시 시키는 법을 배웁니다.
개발 실력은 에러가 안 나는 능력이 아니라, 에러가 났을 때 다시 길을 찾는 능력에 가깝습니다.
"내 아이디어는 쇼핑몰이 아닌데요."
괜찮습니다. 이 책의 프로젝트는 연습용 뼈대입니다. 여러분의 서비스가 자소서 첨삭기든, 이메일 답장기든, 리뷰 요약기든 구조는 비슷합니다.
처음에는 책과 똑같이 만들어보세요. 완주가 먼저입니다. 한 번 끝까지 가본 사람은 두 번째부터 훨씬 빠르게 바꿀 수 있습니다.
한 줄 정리와 다음 예고
한 줄로 정리하면 이렇습니다.
코드를 다 이해하지 못해도 괜찮습니다. 우리는 AI 코딩 도구에게 코드를 맡기고, 사람은 방향과 확인을 맡아 실제 서비스를 끝까지 완성합니다.
다음 장에서는 본격적으로 작업실을 차립니다. 터미널, Node.js, 코드 에디터, AI 코딩 도구, GitHub를 준비합니다. 지루하지만 가장 중요한 배관 구간입니다. 천천히 가겠습니다. 여기서 포기하지 않게, 하나씩 확인하면서 진행하겠습니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.