바이브코딩은 만능이 아닙니다. 바이브코딩. 요즘 타임라인을 가만히 보고 있으면 "딸깍 한 번에 앱 만들었다", "코딩 하나도 모르는데 SaaS 런칭했다" 이런 얘기가 넘쳐납니다. 그래서 많은 분들이 착각하죠. 바이브코딩이 마치 만물론인 것처럼요. 아닙니다. 바이브코딩은 만물론이 아닙니다. 딸깍은 커녕, 생각보다 시행착오가 많고 배워야 할 것도 있어요. 물론 전통적인 개발 학습에 비하면 진입 장벽이 훨씬 낮은 건 맞습니다. 그렇다고 "나도 오늘부터 바로 SaaS 만들어야지!" 하면서 클로드코드 맥스 플랜 200달러를 질러버리는 건 위험한 판단이죠. 200달러면 적은 돈이 아니거든요. 그 돈을 쓰기 전에, 내가 이걸 진짜 좋아하는지, 나한테 맞는 건지, 최소한의 검증 과정은 거쳐야 합니다. 그래서 이 글에서는 돈을 쓰지 않거나 최소한만 쓰면서, 단계별로 바이브코딩에 입문하는 과정을 정리했어요. 핵심은 이겁니다. 비용을 늘려가면서, 동시에 흥미와 적성을 확인하는 것. 잠깐, 바이브코딩이 정확히 뭔데요? 본격적으로 들어가기 전에, 바이브코딩이 뭔지부터 짚고 넘어가겠습니다. 바이브코딩은 Andrej Karpathy(테슬라 전 AI 총괄, OpenAI 공동창립자)가 2025년 초에 트위터에서 처음 쓴 표현이에요. 코드를 직접 쓰는 게 아니라, AI한테 내가 원하는 걸 말하고, AI가 코드를 써주는 방식. 그러니까 느낌(vibe)으로 코딩한다는 뜻이죠. 전통적인 코딩은 이랬습니다. 프로그래밍 언어를 배우고, 문법을 외우고, 에러를 하나하나 디버깅하고. 수개월에서 수년이 걸리는 학습 과정이 필요했어요. 바이브코딩은 그 과정을 뒤집어 놓은 겁니다. "로그인 페이지 만들어줘"라고 말하면, AI가 코드를 만들어주고, 나는 결과를 보면서 "여기 좀 바꿔줘", "이 기능 추가해줘" 하고 방향을 잡아주는 거죠. 오케스트라 지휘자처럼요. 악기를 직접 연주할 줄 몰라도, 전체 음악의 방향을 이끌어가는 겁니다. 근데 여기서 중요한 걸 빼먹으면 안 됩니다. 지휘자도 음악을 모르면 지휘를 못 하잖아요. 바이브코딩도 마찬가지예요. 코드를 한 줄도 안 짜도 되지만, "내가 뭘 만들고 싶은지", "이게 왜 안 되는지", "어떤 방향으로 고쳐야 하는지"에 대한 감각은 필요합니다. 그리고 그 감각은 직접 만들어보면서 생기는 거예요. 그래서 단계별로 경험을 쌓아가는 게 중요한 거고요. 1단계: 구글 AI Studio에서 시작하기 (무료) 첫 번째로 가볼 곳은 Google AI Studio 입니다. 구글이 자사 AI 모델의 데이터 수집과 테스트를 위해 운영하는 플랫폼인데, 여기서 Gemini를 포함한 구글의 각종 AI 모델들을 무료로 사용할 수 있어요. 최근에 "Canvas"라는 코드 생성 기능이 추가되면서, 프롬프트만 입력하면 간단한 웹페이지나 앱을 바로 만들어 볼 수 있게 됐죠. 여기서 뭘 만들어보면 되나요? 처음부터 많은 걸 바라면 안 됩니다. 정말 심플한 것부터 시작하는 거예요. 예를 들면 이런 것들이죠. - 내 소개 랜딩페이지 하나 만들어보기 - 간단한 할일 목록 앱 - 이미지 업로드하면 미리보기 보여주는 페이지 - 단위 변환기 (cm를 inch로, 원화를 달러로) - 간단한 퀴즈 게임 - D-day 카운터 - 나만의 명언 랜덤 생성기 복잡한 거 하려고 하지 마세요. 데이터베이스가 필요한 것, 로그인 기능이 있는 것, 결제가 붙는 것. 이런 건 아직 아닙니다. 그냥 단일 페이지에서 돌아가는, 심플한 기능 하나면 충분해요. 이 단계에서 확인해야 할 것 내가 프롬프트를 타이핑했는데, 화면에 실제로 작동하는 무언가가 나타났을 때의 그 느낌이요. "와, 내가 이걸 만든 거야?" 하는 그 신기함. 이게 느껴지면 좋은 신호입니다. 거기서 멈추지 말고 더 만지작거려 봅니다. "여기 색깔 바꿔줘", "버튼 하나 더 추가해줘", "모바일에서도 잘 보이게 해줘" 이렇게 하나둘씩 요구사항을 추가해보면서, 프롬프트로 결과물을 조금씩 바꿔나가는 경험을 해보는 거죠. 이 과정이 재밌다면, 바이브코딩이 나한테 맞을 가능성이 높습니다. 반대로 "뭐 이게 다야?", "답답해서 못 하겠다" 싶으면 그것도 중요한 발견이에요. 200달러 아꼈으니까요. 왜 구글 AI Studio부터인가요? 세 가지 이유가 있습니다. 첫째, 무료 예요. 돈이 한 푼도 안 들어요. 둘째, 웹 브라우저에서 바로 됩니다. 설치할 것도 없고, 터미널도 안 건드려요. 그냥 사이트 들어가서 프롬프트 치면 끝이죠. 셋째, 결과를 바로 눈으로 확인할 수 있어요. 코드가 뭔 소린지 몰라도, 화면에 뭔가 나오니까 성취감이 있습니다. 이렇게 며칠간 만지다 보면, 자연스럽게 욕심이 생기기 시작해요. "좀 더 복잡한 것도 만들어볼 수 있지 않을까?" 하는 생각이 들면, 다음 단계로 넘어갈 준비가 된 겁니다. 전환 구간: 터미널에 적응할 수 있는지 테스트하기 자, 여기서 바로 클로드코드로 넘어가고 싶은 마음이 생길 수 있어요. 그런데 잠깐, 한 가지 더 검증할 게 있습니다. 클로드코드든, 커서든, 윈드서프든 결국 본격적인 바이브코딩 도구들은 터미널 환경에서 돌아갑니다. 터미널이 뭐냐고요? 그 까만 화면에 흰 글씨로 명령어 치는 거요. 영화에서 해커들이 쓰는 그 화면이죠. 구글 AI Studio는 웹 브라우저에서 마우스 클릭으로 다 됐지만, 진짜 바이브코딩 도구들은 그렇지 않아요. 터미널에서 명령어를 입력하고, 파일을 관리하고, 에러 메시지를 읽어야 합니다. 이게 생각보다 큰 허들이에요. 어떤 분들은 터미널만 보면 "이게 뭐야" 하면서 바로 닫아버리거든요. 그래서 돈을 쓰기 전에 한 번 경험해봐야 하는 겁니다. 여기서 두 가지 선택지가 있어요. 선택지 A: OpenCode (터미널 OK인 분) 터미널이 무섭지 않다, 혹은 한번 도전해보겠다 싶은 분은 OpenCode 를 설치해보세요. OpenCode는 터미널 기반 코딩 도구인데, 여기서 중국의 오픈소스 AI 모델들을 무료로 사용할 수 있습니다. MiniMax 같은 모델들이 무료로 제공되거든요. 성능이 Claude나 GPT보다 뛰어나진 않지만, 터미널 환경에 적응하면서 간단한 프로젝트를 이어나가기엔 충분하죠. 설치 방법은 깃허브에서 쉽게 찾을 수 있고, 맥이든 윈도우든 상관없이 돌릴 수 있어요. 선택지 B: Antigravity (터미널이 아직 무서운 분) 터미널이 아직 부담스럽다면 Antigravity 로 향하세요. 구글에서 만든 도구고, 이것도 무료입니다. 웹 기반이라 터미널 없이도 사용할 수 있죠. 구글 AI Studio에서 만들었던 프로젝트들을 다운받아서 여기서 이어나가는 것도 가능해요. 혹은 아예 새롭게, 좀 더 복잡한 기능을 구현해봐도 좋고요. 2단계: 본격적으로 무료 도구에서 빌딩하기 OpenCode든 Antigravity든, 어느 쪽을 선택했든 핵심은 같습니다. 1단계에서 만들었던 것보다 조금 더 나아가 보는 거예요. 예를 들어볼게요. - 1단계에서 할일 목록을 만들었다면, 이번엔 카테고리를 분류할 수 있게 만들어보기 - 랜딩페이지를 만들었다면, 이번엔 여러 섹션이 있는 포트폴리오 사이트를 만들어보기 - 단위 변환기를 만들었다면, 이번엔 여러 종류의 변환을 탭으로 나눠서 만들어보기 한 단계씩 복잡도를 높여가는 거죠. 이 단계에서 배우게 되는 것들 여기서 자연스럽게 몇 가지를 익히게 됩니다. 의식하지 않아도요. 파일 구조를 이해하게 돼요. 프로젝트 폴더 안에 HTML 파일이 있고, CSS 파일이 있고, JavaScript 파일이 있다는 걸 자연스럽게 알게 되죠. 이름은 몰라도 "아, 이 파일이 화면 모양을 담당하는 거구나" 정도는 감이 오기 시작합니다. 에러를 읽는 법을 조금씩 알게 됩니다. 처음엔 빨간 글씨만 보면 당황하지만, 몇 번 겪다 보면 "아, 이 파일 이름이 틀렸구나", "아, 이거 빠뜨렸구나" 하는 게 보이기 시작하거든요. 이게 정말 중요한 스킬이에요. 프롬프트를 어떻게 써야 하는지 감이 잡혀요. "이쁘게 만들어줘" 같은 모호한 지시보다 "상단에 네비게이션 바를 넣고, 배경색은 #1a1a2e로, 폰트 크기는 16px로 해줘" 같은 구체적인 지시가 더 좋은 결과를 낸다는 걸 체감하게 되죠. 여기서도 재미를 느꼈다면 축하합니다. 바이브코딩이 나한테 맞는다는 거의 확실한 신호예요. 여기까지 오는 데 들어간 비용은 0원입니다. 시간만 투자했을 뿐이죠. 그리고 이 시간 동안 내가 이걸 정말 좋아하는지, 만드는 과정이 즐거운지를 충분히 확인했어요. 이제 유료 도구로 넘어갈 준비가 된 겁니다. 3단계: Codex App으로 진짜 프로젝트 시작하기 대부분 ChatGPT는 이미 구독하고 있을 거라 생각합니다. 월 20달러짜리 플러스 플랜이나 200달러짜리 프로 플랜이요. 이미 구독 중이라면 Codex App 을 설치해보세요. OpenAI에서 만든 코딩 전용 도구인데, 최신 GPT 모델로 내 프로젝트를 본격적으로 빌딩할 수 있어요. 구독 중인 GPT 플랜에 포함되어 있어서 추가 비용이 안 들죠. 혼자서 다 만들려고 하지 마세요 여기서 정말 중요한 마인드셋 하나 알려드리겠습니다. 이미 있는 서비스를 최대한 활용하는 겁니다. 바이브코딩의 핵심은 "내가 모든 코드를 짜는 것"이 아니에요. 이미 잘 만들어진 서비스들을 조합해서, 내가 원하는 결과물을 만들어내는 거죠. 레고 블록처럼요. 어떤 서비스들이 있냐고요? 대표적인 것들을 카테고리별로 알려드리겠습니다. 코드 관리 & 배포 GitHub — 코드를 저장하고 관리하는 곳입니다. 내 프로젝트 코드를 깃허브에 올려두면, 어디서든 작업을 이어나갈 수 있고, 혹시 뭔가 잘못됐을 때 이전 버전으로 돌아갈 수 있어요. 일종의 "세이브 포인트"라고 생각하면 됩니다. 바이브코딩할 때 "아까 잘 되던 상태로 돌아가고 싶다" 하는 순간이 반드시 오는데, 깃허브를 쓰고 있으면 그게 가능하죠. Vercel — 만든 걸 인터넷에 올려서 다른 사람도 볼 수 있게 해주는 서비스입니다. 내가 만든 웹사이트를 깃허브에 올리면, Vercel이 자동으로 "배포"해줘요. URL을 받으면 전 세계 누구나 내 사이트에 접속할 수 있는 거죠. 무료 플랜으로도 충분히 시작할 수 있습니다. Netlify — Vercel과 비슷한 역할을 하는 대안이에요. 정적 사이트나 간단한 웹앱을 배포할 때 많이 쓰죠. Vercel이 Next.js에 특화되어 있다면, Netlify는 좀 더 범용적입니다. 무료 플랜이 넉넉한 편이라 초보 때 부담 없이 써볼 수 있어요. 프레임워크 (뼈대) Next.js — 웹사이트나 웹앱을 만들 때 쓰는 프레임워크입니다. "프레임워크가 뭔데?" 싶으실 텐데, 쉽게 말하면 웹사이트를 만들기 위한 뼈대 같은 거예요. 바닥부터 집을 짓는 게 아니라, 이미 기본 구조가 잡혀 있는 상태에서 내가 원하는 부분만 채워 넣는 방식이죠. 현재 바이브코딩 생태계에서 가장 많이 쓰이는 프레임워크라서, AI에게 "웹앱 만들어줘"라고 하면 십중팔구 Next.js로 만들어줍니다. Tailwind CSS — 디자인을 쉽게 입혀주는 도구예요. 원래 CSS라는 걸 배워서 하나하나 스타일을 지정해야 하는데, Tailwind를 쓰면 미리 만들어진 클래스를 조합하는 것만으로도 꽤 그럴듯한 디자인이 나옵니다. AI가 코드를 생성할 때도 Tailwind를 기본으로 쓰는 경우가 많아서, 자연스럽게 익숙해지게 되죠. shadcn/ui — 버튼, 입력창, 팝업, 드롭다운 같은 UI 컴포넌트를 미리 만들어놓은 라이브러리입니다. 이걸 갖다 쓰면 디자인 감각이 없어도 깔끔한 인터페이스가 나와요. AI한테 "shadcn 써서 만들어줘"라고 한 마디만 추가하면 결과물의 퀄리티가 확 달라지죠. 데이터베이스 Supabase — 데이터베이스를 쉽게 쓸 수 있게 해주는 서비스입니다. 사용자 정보를 저장하거나, 게시글을 저장하거나 할 때 필요하죠. 원래 데이터베이스를 직접 세팅하려면 엄청 복잡한데, Supabase는 그 과정을 거의 자동화해줘요. 무료 플랜으로 시작할 수 있고, 인증(로그인) 기능도 내장되어 있어서 초보한테 특히 좋습니다. Convex — 실시간 데이터 동기화가 강점인 서비스예요. 채팅이나 협업 도구처럼 데이터가 실시간으로 업데이트되어야 하는 프로젝트에 잘 맞습니다. Neon DB — PostgreSQL 기반의 서버리스 데이터베이스죠. Supabase보다 가볍고, 필요할 때만 자원을 쓰는 구조라 비용이 효율적입니다. 작은 프로젝트를 여러 개 돌리는 분들이 선호하는 편이에요. Firebase — 구글에서 만든 서비스입니다. 데이터베이스뿐만 아니라 인증, 파일 저장, 호스팅까지 한 곳에서 다 할 수 있어요. 구글 생태계에 익숙한 분이라면 진입이 쉽죠. 다만 사용량이 늘어나면 비용 예측이 좀 어려운 부분이 있습니다. 인증 (로그인/회원가입) Clerk — 로그인/회원가입 기능을 처리해주는 서비스입니다. "구글로 로그인", "이메일로 가입" 같은 기능을 직접 만들려면 보안 문제도 있고 엄청 복잡해요. Clerk을 쓰면 몇 줄의 코드로 끝나죠. 대시보드에서 사용자 관리도 할 수 있어서 편합니다. BetterAuth — Clerk의 오픈소스 대안이에요. 외부 서비스에 의존하지 않고 내 서버에서 직접 인증을 처리할 수 있죠. 무료라는 게 큰 장점이지만, 초기 설정이 Clerk보다는 좀 더 손이 갑니다. 결제 Polar — 인디해커와 1인 개발자를 위한 결제 서비스입니다. 구독, 일회성 결제, 디지털 상품 판매를 지원하죠. 설정이 간단하고, 한국에서도 사용 가능해요. 바이브코딩으로 SaaS를 만들어서 수익화하고 싶다면 가장 먼저 고려해볼 서비스입니다. Stripe — 전 세계적으로 가장 많이 쓰이는 결제 서비스예요. 해외 튜토리얼이나 예제에서 거의 필수적으로 등장하죠. 다만 한 가지 중요한 게 있습니다. Stripe은 현재 한국에서 사업자 등록이 안 됩니다. 한국 사업자로는 Stripe 계정을 만들 수 없어요. 해외 법인이 있거나 글로벌 시장만 타겟으로 하는 경우가 아니라면, 한국에서는 Polar나 Lemon Squeezy, 또는 국내 PG사(토스페이먼츠, 포트원 등)를 쓰는 게 맞습니다. Lemon Squeezy — Stripe의 대안으로, 디지털 상품과 구독 판매에 특화된 서비스예요. Merchant of Record(판매 대행) 모델이라서, 세금 처리를 알아서 해준다는 게 큰 장점이죠. 한국에서도 사용 가능합니다. 이메일 & 알림 Resend — 이메일 발송 서비스입니다. 회원가입 인증 메일, 비밀번호 재설정 메일, 뉴스레터 같은 걸 보낼 때 씁니다. 무료 플랜으로 월 100통까지 보낼 수 있어서 초기에는 충분하죠. Upstash — 서버리스 Redis와 메시지 큐를 제공하는 서비스예요. 쉽게 말하면, 임시 데이터를 빠르게 저장하고 꺼내거나, 작업을 예약해서 나중에 실행하는 기능을 만들 때 씁니다. 요율 제한(Rate Limiting)이나 캐싱 같은 기능을 붙일 때 유용하죠. 분석 & 모니터링 Plausible, Umami — 내 사이트에 사람들이 얼마나 들어오는지, 어떤 페이지를 많이 보는지 알려주는 분석 도구입니다. Google Analytics의 가벼운 대안이라고 보면 돼요. 개인정보 보호에 신경 쓴 도구들이라 쿠키 동의 배너 없이도 쓸 수 있죠. Sentry — 에러 모니터링 서비스입니다. 배포한 서비스에서 에러가 나면, 어디서 왜 났는지 알려줘요. 사용자가 "이거 안 되는데요" 하고 연락하기 전에 미리 문제를 발견할 수 있죠. 무료 플랜으로 시작할 수 있습니다. 도메인 & DNS Namecheap, Cloudflare — 도메인(예: myapp.com )을 사고 관리하는 서비스입니다. Vercel이나 Netlify에 무료로 배포하면 myapp.vercel.app 같은 주소가 나오는데, 진짜 서비스처럼 보이려면 자기만의 도메인이 필요하죠. 연간 1만 원 안팎이면 .com 도메인을 하나 살 수 있어요. 이 단계의 핵심 서비스가 많다고 겁먹을 필요 없습니다. 이걸 다 외울 필요도, 처음부터 다 쓸 필요도 없어요. AI한테 "로그인 기능 만들어줘"라고 하면 AI가 알아서 Clerk을 제안해주고, "결제 붙여줘"라고 하면 Polar이나 Lemon Squeezy를 추천해주거든요. 중요한 건, "아, 이런 서비스들이 세상에 있구나" 를 아는 것 자체입니다. 필요할 때 AI한테 "이런 거 해주는 서비스 뭐 있어?" 하고 물어보면 되죠. 그리고 차츰 익숙해지는 과정을 즐기세요. 처음에는 에러도 많이 나고, 왜 안 되는지 모르겠는 상황도 많을 겁니다. 그런데 그게 정상이에요. 프로 개발자들도 매일 에러와 싸우고 있거든요. 그래서 클로드코드는 언제 쓰나요? Codex App으로 프로젝트를 하나 끝까지 만들어본 다음입니다. 진짜 "끝까지"요. 배포해서 URL 받아보고, 다른 사람한테 써보라고 보여주고, 피드백 받아서 수정도 해보고요. 이 과정을 한 번이라도 겪어본 사람은, 클로드코드를 썼을 때 그 차이를 체감할 수 있어요. "아, 이게 이래서 더 좋구나" 하는 것을요. 경험 없이 바로 200달러를 지르면, 뭐가 좋은 건지도 모르면서 돈만 나가는 겁니다. 번외 1: 챗봇으로 코딩하는 방법에 대해서 ChatGPT, Claude, Grok 같은 챗봇으로도 코딩을 할 수 있긴 합니다. 실제로 많은 분들이 이 방법으로 시작하기도 했죠. 장점 코드를 생성해달라고 하면 잘 해줍니다. 단일 파일, 단일 기능은 챗봇으로도 충분히 만들 수 있어요. "파이썬으로 CSV 파일 읽어서 그래프 그려줘" 같은 건 챗봇이 순식간에 해결해주죠. 한계 문제는 프로젝트가 복잡해질 때 시작됩니다. 웹앱 하나를 만든다고 생각해보세요. 프론트엔드 코드가 있고, 백엔드 코드가 있고, 데이터베이스 설정이 있고, 배포 설정이 있고, 이것들이 서로 복잡하게 연결되어 있어요. 하나를 바꾸면 다른 것도 같이 바꿔야 하는 경우가 많죠. 챗봇은 대화 단위로 응답하기 때문에, 이런 복잡한 연결 관계를 한꺼번에 파악하고 수정하는 게 어렵습니다. "A 파일 고쳐줘" 하면 A 파일은 잘 고쳐주는데, 그 영향으로 B 파일이랑 C 파일에서 문제가 생기는 거예요. 결국 "이것 좀 고쳐줘", "아니 그거 바꾸니까 이게 깨졌어", "그것도 같이 고쳐줘" 하면서 끝없는 핑퐁이 시작되죠. 이게 시간이 엄청 듭니다. 그래서 결론은? 시간이 많고, 이런 핑퐁을 반복하는 과정 자체가 배움의 일부라고 생각한다면, 챗봇으로 시작하는 것도 나쁘지 않아요. 하지만 "빠르게 결과물을 내고 싶다" 거나 "프로젝트 규모가 좀 있다" 면, 코딩 전용 도구 (Codex, Claude Code, Cursor 등)를 쓰는 게 맞습니다. 이 도구들은 프로젝트 전체 파일을 한꺼번에 읽고, 맥락을 유지하면서 수정을 해주거든요. 번외 2: 초보 바이브코더가 반드시 피해야 할 실수 7가지 이 단계별 가이드를 따르더라도, 초보 때 거의 모든 사람이 빠지는 함정들이 있습니다. 미리 알고 시작하면 시간을 엄청나게 아낄 수 있어요. 1. 처음부터 거대한 프로젝트를 기획하는 것 "인스타그램 같은 거 만들어야지", "쿠팡 같은 이커머스 만들어볼까" 이렇게 시작하는 분들이 진짜 많아요. 마음은 이해하지만, 이건 마라톤 완주 경험 없이 울트라 마라톤에 나가는 것과 같습니다. 인스타그램이 단순해 보여도, 그 안에는 이미지 업로드, 실시간 피드, 좋아요/댓글 시스템, 팔로우 관계, 알림, 검색, 해시태그, DM 기능이 엮여 있어요. 이걸 바이브코딩으로 한 번에 만들겠다? 100% 좌절합니다. 작게 시작하세요. 정말 작게요. "이미지 하나 올리면 필터 입혀주는 페이지" 정도면 첫 프로젝트로 완벽하죠. 2. 에러가 나면 바로 포기하는 것 에러는 실패가 아닙니다. 에러는 "여기가 문제야"라고 친절하게 알려주는 가이드예요. 처음에 빨간 글씨로 뜨는 에러 메시지를 보면 당황하는 게 당연합니다. 그런데 그걸 복사해서 AI한테 "이 에러 왜 나?" 하고 물어보면, 대부분 바로 답을 알려줘요. 에러 메시지를 읽고 해결하는 과정 자체가 실력이 느는 과정이죠. 프로 개발자도 하루의 절반은 에러와 싸우고 있다는 거, 잊지 마세요. 3. AI한테 모호하게 지시하는 것 "멋있게 만들어줘", "좀 이쁘게 해줘", "더 좋게 바꿔줘" 이런 프롬프트는 AI한테 "아무거나 해줘"와 같습니다. AI는 "멋있다"의 기준을 모르거든요. 대신 이렇게 말해보세요. "배경색을 짙은 남색(#1a1a2e)으로 바꾸고, 제목 폰트 크기를 32px로 키우고, 버튼은 둥근 모서리에 초록색(#4CAF50)으로 만들어줘." 구체적일수록 원하는 결과에 가까워져요. 처음엔 이렇게 구체적으로 말하는 게 어려울 수 있어요. 그럴 땐 참고할 사이트를 보여주는 것도 방법이죠. "이 사이트처럼 만들어줘"라고 URL을 던져주면 AI가 비슷한 느낌으로 만들어줍니다. 4. 기존 코드를 백업하지 않는 것 이거 진짜 중요합니다. 바이브코딩하다가 AI한테 "이 부분 수정해줘" 했는데, 수정하면서 잘 되던 다른 기능이 망가지는 경우가 생각보다 많거든요. 그래서 뭔가 잘 돌아가는 상태가 되면, 그 시점에서 코드를 복사해서 따로 저장해두세요. 메모장에 붙여넣기 해두는 것만으로도 됩니다. 나중에 깃허브를 배우면 더 체계적으로 할 수 있지만, 초보 때는 그냥 복사붙여넣기로 충분해요. 이게 바로 아까 말한 "세이브 포인트"죠. 5. 한 번에 여러 기능을 동시에 추가하려는 것 "로그인 기능이랑 게시판이랑 댓글 기능이랑 다크모드 전부 한꺼번에 추가해줘" 이러면 AI도 헷갈리고, 뭔가 에러가 났을 때 어디서 문제가 생겼는지 찾기가 불가능해집니다. 하나씩 추가하세요. 로그인 기능 추가하고, 잘 되는지 확인하고, 세이브하고. 그 다음에 게시판 추가하고, 잘 되는지 확인하고, 세이브하고. 느려 보이지만 이게 결과적으로 가장 빨라요. 6. 도구에 집착하는 것 "Cursor가 좋아? 클로드코드가 좋아? Windsurf가 좋아?" 이 질문에 시간 쓰는 것만큼 비효율적인 게 없습니다. 연필이 좋은지 볼펜이 좋은지 고민하면서 글을 안 쓰는 것과 같거든요. 지금 단계에서는 뭘 쓰든 상관없어요. 무료인 걸로 시작해서, 만들면서 자기한테 맞는 걸 찾으면 됩니다. 도구는 나중에 바꿔도 되니까요. 7. "나는 비개발자니까"를 방패처럼 쓰는 것 "나는 비개발자니까 이건 못 해", "나는 문과니까 코드 이해 못 해" 이런 마음이 들 수 있습니다. 그런데 바이브코딩의 존재 이유 자체가 "비개발자도 만들 수 있게" 하는 거예요. 물론 한계는 있지만, 그 한계는 생각보다 훨씬 멀리 있어요. 에러 메시지 읽는 게 어렵다고요? 그냥 복사해서 AI한테 물어보면 됩니다. 코드 구조를 모르겠다고요? AI한테 "이 프로젝트 폴더 구조 설명해줘" 하면 돼요. 비개발자라서 못 하는 게 아니라, 아직 안 해본 거죠. 번외 3: 바이브코딩할 때 알면 좋은 최소한의 지식 "코딩 1도 몰라도 된다"는 말, 반은 맞고 반은 틀립니다. 코드를 직접 짤 줄은 몰라도 되지만, 몇 가지 개념은 알고 있으면 바이브코딩의 효율이 완전히 달라져요. 전부 배울 필요 없습니다. 아래 것들만 대충 감 잡고 있어도 충분하죠. 터미널 명령어 5개 터미널 전체를 마스터할 필요 없어요. 이 5개만 알면 바이브코딩하는 데 90%는 커버됩니다. cd 폴더이름 — 해당 폴더로 이동하는 겁니다. "이 방으로 들어간다"라고 생각하면 돼요. ls — 현재 폴더에 뭐가 있는지 보여줍니다. "이 방에 뭐가 있지?" 하고 둘러보는 거죠. mkdir 폴더이름 — 새 폴더를 만드는 겁니다. npm install — 프로젝트에 필요한 재료들을 자동으로 다운받아요. 요리로 치면 "재료 장보기"죠. npm run dev — 내 프로젝트를 로컬에서 실행합니다. "내 컴퓨터에서 미리보기"라고 생각하면 돼요. 이 다섯 개만 알면 터미널에서 당황하는 일이 확 줄어듭니다. 파일 확장자가 의미하는 것 .html — 웹페이지의 뼈대입니다. 텍스트, 이미지, 버튼 같은 요소들이 여기에 있어요. .css — 웹페이지의 옷이에요. 색깔, 크기, 위치 같은 디자인을 담당하죠. .js — 웹페이지의 두뇌입니다. 버튼을 누르면 뭐가 일어나는지, 데이터를 어떻게 처리하는지를 담당해요. .tsx / .jsx — React라는 프레임워크에서 쓰는 파일이에요. HTML과 JavaScript가 합쳐진 거라고 보면 됩니다. .json — 설정 파일이죠. 프로젝트의 이름, 버전, 필요한 재료 목록 같은 정보가 들어 있어요. .env — 비밀 정보를 넣는 파일입니다. API 키나 데이터베이스 비밀번호 같은 걸 여기에 저장하죠. 이 파일은 절대 공개하면 안 돼요. "프론트엔드"와 "백엔드"의 차이 식당으로 비유하면 이해가 쉽습니다. 프론트엔드 = 식당의 홀이에요. 손님(사용자)이 보는 모든 것. 메뉴판, 인테리어, 테이블 배치. 웹사이트에서는 화면에 보이는 버튼, 글자, 이미지, 애니메이션이 프론트엔드죠. 백엔드 = 식당의 주방입니다. 손님 눈에는 안 보이지만, 주문을 받아서 요리를 만들고, 재고를 관리하고, 결제를 처리하는 곳이에요. 웹사이트에서는 데이터를 저장하고, 로그인을 처리하고, 결제를 진행하는 부분이 백엔드죠. 바이브코딩으로 프론트엔드는 비교적 쉽게 만들 수 있어요. 백엔드는 좀 더 복잡한데, Supabase 같은 서비스를 쓰면 백엔드를 직접 만들지 않고도 핵심 기능을 구현할 수 있습니다. "배포"가 뭔지 내 컴퓨터에서 만든 웹사이트는, 내 컴퓨터에서만 볼 수 있습니다. 이걸 인터넷에 올려서 다른 사람도 볼 수 있게 만드는 과정이 "배포"예요. Vercel이나 Netlify 같은 서비스가 이 과정을 자동화해줍니다. 깃허브에 코드를 올리면, 몇 분 만에 URL이 생기고 전 세계 누구나 접속할 수 있게 되죠. 예전에는 서버를 직접 사고, 설정하고, 관리해야 했는데, 지금은 클릭 몇 번이면 끝이에요. API가 뭔지 API는 서로 다른 서비스끼리 대화하는 통로입니다. 예를 들어, 내가 만든 사이트에서 날씨 정보를 보여주고 싶다고 해볼게요. 내가 직접 기상 관측소를 세울 순 없잖아요. 대신 기상청 API를 쓰는 겁니다. "서울 날씨 알려줘"라고 요청을 보내면, 기상청 서버가 "맑음, 22도"라고 답을 보내주는 거죠. 결제 API, 지도 API, 번역 API, AI API... 이런 것들을 연결해서 내 프로젝트에 기능을 추가하는 거예요. 직접 만들 필요 없이, 이미 있는 걸 가져다 쓰는 겁니다. 번외 4: 바이브코딩으로 만들 수 있는 것, 아직 어려운 것 기대치를 현실적으로 잡는 것도 중요합니다. 바이브코딩으로 뭘 만들 수 있고, 뭘 만들기 어려운지 솔직하게 알려드릴게요. 만들 수 있는 것 (초보~중급) 랜딩페이지, 포트폴리오, 소개 사이트. 이건 바이브코딩의 킬러 유스케이스입니다. 프롬프트 몇 번이면 꽤 그럴듯한 페이지가 나와요. 간단한 웹앱. 할일 관리, 가계부, 습관 트래커, 일기장 같은 거요. 데이터를 저장하고 불러오는 기본적인 CRUD(생성/읽기/수정/삭제) 앱은 충분히 만들 수 있죠. 자동화 도구. 엑셀 데이터 정리, CSV 파일 변환, 이미지 일괄 리사이즈, 텍스트 자동 분류 같은 업무 자동화 도구는 바이브코딩이랑 잘 맞습니다. AI 래퍼(Wrapper) 서비스. ChatGPT나 Claude의 API를 연결해서, 특정 용도에 맞는 AI 도구를 만드는 거예요. "이력서 첨삭 AI", "블로그 글 요약 AI", "상품 설명 생성 AI" 같은 거죠. 실제로 이걸로 수익을 내는 인디해커들이 꽤 많습니다. 크롬 확장 프로그램. 의외로 크롬 확장은 구조가 단순해서 바이브코딩으로 만들기 좋아요. 아직 어려운 것 대규모 실시간 서비스. 수천 명이 동시에 접속하는 채팅앱, 실시간 게임, 주식 거래 플랫폼 같은 건 성능과 안정성이 중요한데, 바이브코딩만으로는 이 부분을 커버하기 어렵습니다. 복잡한 보안이 필요한 서비스. 금융, 의료, 법률 관련 서비스는 보안 요구 사항이 까다롭죠. 바이브코딩으로 겉모습은 만들 수 있지만, 실제 서비스로 운영하려면 보안 전문가의 검토가 필요합니다. 네이티브 모바일 앱. 앱스토어에 올라가는 iOS/Android 앱은 바이브코딩으로도 가능하긴 한데, 웹앱에 비하면 난이도가 꽤 올라가요. React Native나 Flutter를 써야 하거든요. 차라리 PWA(Progressive Web App, 모바일에서 앱처럼 쓸 수 있는 웹사이트)로 만드는 걸 추천합니다. 하드웨어 연동. IoT 기기, 블루투스 장치, 센서 연동 같은 건 바이브코딩의 영역이 아닙니다. 핵심은 이거예요. "웹 기반 + 소규모 + 개인용 또는 소규모 팀용"이면 바이브코딩으로 충분합니다. 여기서 시작해서 점점 확장해 나가는 거죠. 번외 5: 프롬프트 잘 쓰는 법 (바이브코딩 버전) 바이브코딩에서 프롬프트는 곧 설계도입니다. 설계도가 엉성하면 집이 엉성하게 지어지는 것처럼, 프롬프트가 모호하면 결과물도 모호해요. 몇 가지 팁을 드리겠습니다. 역할부터 정해주기 "너는 Next.js와 Tailwind CSS를 사용하는 시니어 프론트엔드 개발자야" 이렇게 역할을 먼저 부여하면, AI의 응답 품질이 눈에 띄게 올라갑니다. 아무 맥락 없이 "웹사이트 만들어줘"라고 하는 것보다 훨씬 낫죠. 참고 자료를 같이 주기 "이 사이트(URL)랑 비슷한 느낌으로 만들어줘", "첨부한 이미지처럼 디자인해줘" 이렇게 레퍼런스를 같이 주면 AI가 방향을 잡기 훨씬 쉬워요. 말로 디자인을 설명하는 것보다 보여주는 게 낫습니다. 한 번에 하나씩 지시하기 나쁜 예: "헤더 만들고, 본문 넣고, 푸터 추가하고, 반응형으로 만들고, 다크모드도 지원해줘" 좋은 예: "먼저 헤더부터 만들자. 왼쪽에 로고, 오른쪽에 메뉴 3개(Home, About, Contact), 배경색은 흰색" 하나 끝나고 확인하고, 그 다음 거 시키는 게 결과적으로 훨씬 빠릅니다. 에러가 나면 에러 메시지를 통째로 복사해서 주기 "에러 났어"만 쓰면 AI도 뭐가 문제인지 모릅니다. 에러 메시지를 통째로 복사해서 "이 에러 왜 나? 어떻게 고쳐?" 하고 물어보세요. AI가 에러를 읽고 정확한 해결책을 알려주죠. "왜?"를 물어보기 AI가 코드를 만들어줬는데 이해가 안 되면, "이 코드 왜 이렇게 짠 거야? 쉽게 설명해줘" 하고 물어보세요. 이 과정을 반복하다 보면 코드를 읽는 눈이 조금씩 생깁니다. 바이브코딩의 숨은 보너스죠. 프로젝트 시작할 때 PRD를 먼저 만들기 PRD(Product Requirements Document)라고 해서 거창한 게 아닙니다. AI한테 이렇게 말하면 돼요. "내가 [이런 서비스]를 만들 건데, PRD 작성 좀 도와줘. 핵심 기능, 기술 스택, 페이지 구성, 데이터 구조를 정리해줘." 이렇게 만든 PRD를 프로젝트 폴더에 넣어두면, AI가 이걸 읽고 전체적인 맥락을 파악한 상태에서 코딩을 해줍니다. "이게 뭐하는 프로젝트더라?" 하고 헷갈리는 일이 줄어들죠. 정리하면 이렇습니다 단계 도구 비용 목적 1단계 Google AI Studio 무료 바이브코딩 첫 경험, 흥미 확인 전환 구간 OpenCode 또는 Antigravity 무료 터미널 적응 또는 좀 더 복잡한 프로젝트 2단계 OpenCode / Antigravity 무료 무료 환경에서 실력 쌓기 3단계 Codex App (GPT 구독자) 기존 구독료 실전 프로젝트, 배포까지 경험 최종 Claude Code 월 $100~200 프로 레벨 바이브코딩 각 단계를 거치면서 "나는 이게 재밌다, 더 하고 싶다"는 확신이 들 때만 다음 단계로 넘어가세요. 재미없으면 그만두면 됩니다. 그게 전혀 잘못된 게 아니에요. 바이브코딩이 나한테 안 맞다는 걸 알게 된 것만으로도 값진 경험이거든요. 최소한 "200달러 날렸다..."는 안 하잖아요. 마지막으로 한 마디 바이브코딩의 진짜 매력은 "코딩을 몰라도 뭔가를 만들 수 있다"가 아닙니다. - "만드는 과정에서 자연스럽게 코딩을 이해하게 된다" 는 거예요. 1단계에서 랜딩페이지를 만들면서 HTML이 뭔지 감을 잡고, 2단계에서 프로젝트를 이어가면서 파일 구조를 이해하고, 3단계에서 외부 서비스를 연결하면서 API가 뭔지 알게 되죠. 전통적인 방식으로 교재 펴놓고 공부하는 것보다, 이렇게 만들면서 배우는 게 훨씬 빠르고 재밌습니다. 그리고 솔직히 말할게요. 바이브코딩을 하다 보면 결국 코드를 읽게 됩니다. 처음엔 "나는 절대 코드 안 봐" 했던 사람도, 어느 순간 "이 부분만 살짝 고치면 되겠는데?" 하면서 직접 손대고 있거든요. 그게 자연스러운 거예요. 두려워하지 마세요. 그러니까 처음부터 완벽한 도구를 찾으려고 하지 마세요. 그냥 무료인 것부터 시작해서, 하나씩 만들어보세요. 재미있으면 계속하고, 아니면 멈추면 됩니다. 그게 가장 현명한 바이브코딩 입문법이에요. 정보 격차를 해소하기 위한 오픈채팅방을 개설했습니다. 유익한 정보를 전달드립니다. 😀 Fronmpt Academy - 프로덕트 빌더, 엉클잡스와 함께 합니다. - AI 시대 정보 격차를 해소 합니다. #바이브코딩 #AI #클로드코드 #클로드 #VibeCoding #Claude #ClaudeCode #부트캠프 #생산성 #자기계발 #성공 open.kakao.com/o/gtzeeMji Powered by beehiivSEASON 3시즌3 「콘텐츠로 팔기」AI와 콘텐츠를 만들고 고객에게 연결하는 4주제가 에이전트로 조사하고 쓰고 파는 과정을 그대로 보여 드려요. 그다음 각자의 주제로 같이 만들어 봐요.10월 2일 OT · 10월 5일부터 월·수 4주 · 10월 31일 오프라인시즌3 커리큘럼 보기→
