바이브코딩, 재미를 알게 되다

입으로 하는 코딩이 있다고?

이 시리즈는 일부 클로드 AI로 작성했다. 프로젝트 개발 이력을 살핀 뒤 클로드가 Key learning을 정리했다. 그리고 내가 실제 프로젝트 코드 안에 들어 있지 않은 의도, 시행착오, 맘에 들지 않았던 점등을 추가해 다듬었다.

들어가며

코딩 공부를 시도해본 적이 있다. 몇 번 시도했으나 적성이 아닌지라 오래 버티지 못했다. 자기 손으로 뚝딱 웹사이트도 만들고 필요한 정보도 웹에서 긁어오고 시각화를 하는 개발자들이 너무 부러웠다. 그러다 바이브코딩을 알게 됐다. 요즘은 AI한테 "이런 거 만들어줘"라고 말만 하면 뚝딱 코드가 나온다고?

기획형 인간, 문과형 인간, 제너럴리스트의 표본인 나는 내 손으로 뭔가를 만들 수 있다는 데에 완전히 매료되었다. 그러나 시행착오 끝에 깨달은 게 있다. 그냥 '뚝딱' 나온다는 건 거짓말이었다.. 개발 지식이 있는 개발자들에게는 뚝딱일지 몰라도, 아직 도메인 지식이 아예 없는 사람들에게는 문턱이 너무 높다. 우와 신기하네-의 수준에서 계산기 앱 정도는 만들 수 있지만 실제로 내 기획으로 뭔가 돌아가는 걸 만들기까지는 수많은 실패를 겪어야 한다.

이 글은 나처럼 코딩을 잘 모르지만 뭔가 만들어보고 싶은 사람을 위해서 적었다. 내가 얻은 배움들을 정리하는 차원에서 쓴 글이기도 하다.

내 생각에 정말 고수들은 사실 이런 글도 쓸 필요를 못 느끼는 것 같다. AI는 너무 빠르게 변하고 있고, 지난 달과 이번 달이 다르니까. 금방 낡은 지식이 될 글 같다. 개발자라면 여기서 읽기를 중단하십시오. (제발)

1. 바이브코딩이란?

바이브코딩은 코드를 직접 작성하는 대신, AI에게 자연어로 설명해서 코드를 생성하는 방식이다. "분위기(vibe)로 코딩한다"는 뜻인데, 정확히 어떻게 구현되는지 몰라도 원하는 걸 말로 설명하면 AI가 알아서 만들어준다. 망원동의 창작자 커뮤니티 와조타에서 황유덕 개발자가 연 <AI 바이브 코딩 경험하기> 세션에서 처음 배웠다. "코딩을 처음부터 배우고 직접 짜는 건 시간이 너무 오래 걸리니, 간단한 도구나 자동화가 필요한 거라면, AI한테 시키는 게 훨씬 빠르다."

2. 어떤 도구를 쓸 수 있나?

Gemini, Chat gpt 등 다양한 툴이 나와있지만, 그 중에서 나는 내가 경험한 claude code에 대한 이야기만 써보려 한다. 내 판단에는 Claude의 사용 경험이 깔끔하고, 언어적 능력이 뛰어나다는 생각을 해서 일상적인 AI 사용은 거의 여기 정착했다.

처음에 헷갈렸던 부분인데, 클로드를 쓸 수 있는 방법이 여러 개다. 각각 뭐가 다르고 언제 유용했는지 정리해보면.

1) 클로드 웹 (claude.ai)

가장 기본이 되는 형태. 브라우저에서 채팅하듯이 쓴다.

"마크다운 이미지를 깔끔한 표로 변환할 수 있게 하고 싶은데, 간단한 변환 도구를 만들어줄래?"

이런 프롬프트를 입력하면 요런 걸 만들어준다.

장점: 가입하면 바로 시작 가능 Artifact 기능으로 HTML, React 같은 걸 만들면 바로 미리보기 가능

만든 파일 다운로드해서 배포도 할 수 있음

이럴 때 써:

- 가볍게 기획 아이디어를 주고 도구 기획 자체를 구체화할 때 많이 썼다. 모바일로 메모 겸 아이디에이션, 기획에 활용하고 있다.

- 문서 작업할 때. 클로드 웹에서 skills를 설정에서 켜놓으면 구글 드라이브랑 연동해서 '구글 문서, 발표 자료 슬라이드, 구글 시트'도 직접 생성 된다.

- 빠르게 프로토타입 확인하고 싶을 때. 간단한 도구 만들 때.

단점: 복잡도가 낮은 것에 특화돼있다.

Artifact는 발행하면 클로드 브랜드가 붙은 창으로 공유된다.

복잡도 높은 코드를 짤 경우 코드를 복붙하는 수고를 해야 한다. 수정하는 버전별로 관리가 어렵다.

브랜딩도 따로 하고, 진짜 '내 거 같은' 복잡도 높은 프로젝트를 할

예를 들면 이런 거. https://claude.ai/public/artifacts/4a32df55-d8d2-4235-adb5-f02c59658379

이건 마크다운 형식의 표를 이미지로 깔끔하게 만들어주는 클로드 아티팩트다.

채팅하면서 만들고 바로 Publish를 하면 링크 형태로 공유할 수 있다.

링크를 공유 받은 사람도 'Customize' 기능을 통해 프로그램을 수정해서 자기 버전으로 만들 수 있다.

클로드코드 Artifact로 만든 이미지 변환기

2) 클로드 데스크톱 앱 (MCP 지원)

맥/윈도우 앱을 깔아서 쓴다. 여기서 MCP(Model Context Protocol) 서버를 연결할 수 있다.

MCP가 뭐냐면:

클로드가 여러 MCP 서버를 통해 다양한 프로그램/서비스(Notion, Figma, 파일 시스템 등)에 접근해서 직접 조회, 수정, 실행이 가능하다. 예를 들어 "내 Notion에 있는 데이터 가져와서 분석하고, Figma 파일 업데이트해줘" 이런 게 된다. 크롬 창이 혼자 열리고 막 작업하는 걸 보면 귀신 들린 컴퓨터 보는 것 같고 신기하다.

장점:

내 컴퓨터 안 프로그램을 동작시키거나, 로컬 파일 작업이 편하다.

여러 MCP 서버를 동시에 연결해서 서비스 간 자동화가 가능하다.

"ex. Notion에서 데이터 가져와서 정리하고 .csv 파일로 로컬 폴더에 저장해줘." 이런 걸 할 수 있다.

단점: 보안.

이럴 때 써:

굳이 남들과 같이 쓸 프로그램이 아니고 나혼자 생산성 도구가 필요해서 약간의 코딩을 할 때 많이 썼다.

맥에서만 돌아가는 프로그램 같은 걸 만든다거나, 데이터 분석을 할 때도 유용.

3) 클로드 코드 (Claude Code)

터미널에서 실행하는 CLI 도구. 좀 더 개발자스럽다. (?)

본격 코딩하는 느낌. 적극적인 기획 도구로도 쓸 수 있지만 프로그램이 도구로 더 많이 썼다.

장점:

AI가 내 컴퓨터에서 코드를 직접 실행함.

파일도 자동으로 수정함.

터미널 명령어 (npm install, git 같은 것)도 AI가 알아서 실행.

배포 명령어도 바로 실행 가능.

단점:

터미널 개념 등이 생소한 비개발자에게 진입장벽이 좀 있다.

일단 글씨 가득한 어두운 화면을 보면 두려움. (그래서 라이트 모드로 해둠)

Claude Pro 구독 필요 ($20/월)

이럴 때 써:

실제로 돌아가는 프로그램을 처음부터 끝까지 만들 때

API도 막 붙이고... 좀 더 복잡도 높게 뭘 만들 때.

그래서 뭘 썼나?

내 경험상으로는...

처음 시작: 클로드 웹으로 간단한 거 만들며 시작.

기획 정리 등도 여기서 많이 한다. artifact 먼저 만들어보기.

파일 작업 많으면: 클로드 데스크톱 앱 + MCP.

일단 클로드웹에서 하는 거 앱도 다 할 수 있다.

좀 더 복잡도 높은 기획으로 진짜 서비스를 만들어보고 싶으면: 클로드 코드

나는 Warp라는 좀 더 '입코딩' 하기 좋은... ai를 쓰기 좋은 터미널 프로그램에서 클로드 코드를 쓰다가,

그 이후에는 비주얼 스튜디오라는 코드 에디터에서 클로드 코드를 켜놓고 쓰고 있다.

정리하면 클로드 웹으로 시작했다가 → 데스크톱 앱으로 파일 작업 해보고 → 결국 클로드 코드로 정착했다.

'

3. 뭘 만들지에 따라 방법이 다르다

이 세 가지를 고려해서 뭘로 만든다.

AI를 코딩에 쓴다는 건 결국 '컴퓨터 언어'를 언어모델인 AI를 통해서 만드는 거지, 그 구현 방식이나 형태는 엄청 다양하다. 그래서 뭘, 어떻게 쓰려는 건지 먼저 고민해보고 쓰임새를 정하는 게 좋다.

이것도 와조타에서 황유덕 개발자의 바이브 코딩 세션에서 배운 것.

1. 누가 쓰나

2. 어디서 실행?

3. 데이터 저장 필요한가?

나만 쓸 때 → 로컬 프로그램

내 컴퓨터에서만 돌아가면 되니까 가장 간단하다. 서버고 배포고 뭐고 필요 없다.

남도 같이 쓸 퀄리티의 도구들은 아니지만... 딱 내가 쓸 필수 기능 정도만 넣어 버그 덕지덕지 붙은 채로 해서 쓰고 있다.

내가 만들어본 것들:

1. Metadata-generator: 이미지를 대량으로 넣으면 메타데이터를 내가 원하는 형식으로 뽑아서 시트로 만들어주는 도구. 맥에서 돌아가는 앱 같은 거- Mac 운영체제에서 앱처럼 돌아가는 Electron으로 만들었다.

2. 퇴근후영어 : 비즈니스 영어 자료 넣고 혼자 발표 연습하는 로컬앱. 혼자 summary 녹음하면 ai가 평가도 해주도록 연동해두었다.

3. CopyAgent : 카피라이팅 에이전트 5개를 두고, 카피 생성, 리뷰, 인사이트 축적하는 과정을 하는 툴.

4. 2026 OKR Tracker: OKR 기반 연간 계획 추적 툴 (마일스톤별, 매일 체크하는 목표별로 다르게). 웹에 띄우고, 크롬 첫 시작화면으로 설정해놓고 혼자 쓴다.

동료랑 같이 쓸 때 → 원래 쓰는 툴에 일부 스크립트만 추가, 응용

나는 업무용으로 구글 워크스페이스 툴들을 많이 쓴다. 회사에서 이미 구글 시트를 쓰고 있다면, AI랑 코드를 짜고 일부 커스텀하게 똑똑한 업무용 툴로 만들 수 있다. 업무용은 여기서 다 설명하긴 어렵겠지만.. AI랑 같이 짜서 내가 쓰고 있는 툴들은 이렇다. 이건 개인적으로 컨설팅할 때도 쓰는 툴.

내가 만들어본 것들:

- 유튜브 Competitor Research - 채널 링크만 넣으면 구독자 수, 영상 개수, 생성일, 인기 영상, 최신 영상을 긁어와서 시트에 정리. 대량으로 특정 분야의 채널들 콘텐츠 분석할 때 쓴다.

- 콘텐츠 X 마케팅 매직 시트 - 콘텐츠 DB에서 키워드 분석해서 마케팅 주제 뽑고, 리스티클 글 작성 돕기

다른 사람도 쓰게 하고 싶을 때 → 웹앱

URL을 공유해서 누구나 접속할 수 있게 하려면 서버가 필요하다. 클라우드 서비스 Vercel이 무료 티어가 많아서 개인 프로젝트엔 충분했다. 다들 아주 고도화되진 않았지만 기획 아이디어가 생각났을 때 뚝딱뚝딱 만들고 싶어서 만들어본 것들.

내가 만들어본 것들:

- Learntube - 유튜브 재생목록 넣으면 학습 플랜 만들어주고, 매일 하나씩 보면서 진도 추적.

- ScriptPlanner - 대본을 넣으면 장소별, 낮밤 씬별로 촬영 계획표를 짜주는 웹서비스. 버그 잔치..

- Wajota - Writingclub - 글판이 열리고 마감까지 다같이 글 쓰는 플랫폼. 제일 활발하게

나만 쓸거나, 웹에 띄울 거냐, 데이터도 저장할 거냐... 각각 드는 품이 다르다. 나만 쓸 거면 로컬로 후다닥 만들면 되고, 남도 쓰게 하려면 배포하고 도메인 연결하고... 할 일이 늘어난다.

처음엔 나만 쓸 로컬 도구부터 만들어보는 걸 추천한다. 가장 빠르게 결과물을 볼 수 있다.

4. 클로드 코드 시작하기 (Step by Step)

Step 1: 필요한 것들

- Claude Pro 구독: 월 $20 (약 27,000원)

- 터미널 앱: Warp 추천 (무료)

- 또는 코드 에디터: VS Code (무료)

Step 2: 클로드 코드 설치

터미널(Warp)을 열고 명령어 입력.

설치 후 `claude` 입력하면 클로드 코드가 실행된다.

또는 코드 에디터 VS code에서 클로드 코드를 실행한다.

Step 3: 프로젝트 폴더에서 시작

이제 말로 시키면 된다.

Step 4: 모드 이해하기

`Shift + Tab`을 누르면 모드가 바뀐다:

처음엔 기본 모드로 하나씩 확인하면서 하는 걸 추천한다.-

그리고 Plan mode에서 설명해주는 거 '제발 읽고 승인해라'라고 개발자 친구에게 한소리+a를 들었다.

알아서 해주는 것 같지만 생각보다 우리 의도가 잘 설명되지 않았을 가능성이 크므로 잘 체크하며 봐야 한다.

5. 잘 시키는 법 (프롬프트 작성)

보통 클로드 웹에서 그냥 아이디어를 주면서 기획을 구체화해 나간다.

일단

1. 역할 부여를 해주고

2. 목적과 맥락을 설명해주고

3. 내가 원하는 구체적인 기능이나 상태, 차별점, 참고할 지점들을 이미지든 글이든 최대한 많이 전달한다.

그렇게 해서 기획서를 완성해나간다.

아래는 내가 영어 학습 앱을 혼자 만들어보고 싶어서 아이디에이션 하는 단계에서 처음으로 준 메시지.

첫번째 메시지. 기획 아이디에이션.

내가 일하는 비즈니스 상황에 맞춘 영어 공부 앱을 만들고 싶은데 네가 바이브코딩 기획 전문가라고 생각하고 검토해줘

제품 요구
- 비즈니스 상황별 시나리오에 따라 Ai 앱과 음성대화를 할 수 있음
- 특정 시간에 전화 또는 알림이 오는 듯한 기능 (실제로 안와도 됨)
- 사용자 전용 학습 텍스트나 인풋을 추가할 수 있음 (사용자의 실제 회의록, 오늘 배운 비즈니스 표현 복습 등)
- 복습 기능 (대화 끝나고 표현별 리뷰 노트 따로 생성)

여기서 일반적인 앱과 다른 건, 내가 학습하고 싶은 콘텐츠를 직접 넣어서 한다는 거랑 비즈니스 상활별로 구체적으로 내 직무랑 워크플로우를 반영해서 학습하는 교재/세션을 만든다는 거야

이때, 위에서 말한 [누가 쓰는지/ 어디서 쓰는지/ 데이터 저장 등이 필요한지]를 구체화해가면서

무엇으로 어떻게 개발할지를 같이 검토한다.

코딩에 대해 잘 모르는 기획자라는 정보를 공유하고,

- 어떤 도구를 활용할지 가이드해달라고 한다 (예: "어떻게 개발하면 될지, 여기서는 무슨 서비스를 쓸지")

- 해설을 요청하면 배우면서 만들 수 있다 (예: "각 부분이 뭘 하는지 설명해줘")

클로드의 답변

클로드: 블라블라~ 질문 몇 가지 드릴게요.

1. 플랫폼: 웹앱으로 먼저 갈 건지, 네이티브 앱(React Native/Flutter)으로 갈 건지에 따라 "전화 오는 듯한 UX" 구현 난이도가 완전 달라져요
2. 타겟 사용자: 소담님 혼자 쓸 용도인지, 아니면 팀원들이나 외부에도 공개할 건지
3. 학습 시나리오: 미리 만들어둘 템플릿 시나리오가 몇 개 정도 필요할 것 같아요?

그러면 내가 원하는 스펙과 사용 환경을 설명하고, 그러면 클로드가 몇 가지 안을 제시한다.

거기에 이렇게 답했다.

그럼 1로 가되, 현재 웹 기반 / 로컬 저장으로 핵심 기능만 구현하는 안으로 제품 기획서를 작성해줘. word로 작성해주면 조금씩 수정하면서 덧붙일 거야.

그렇게 해서 이런 형태의 0.1 기획서가 나온다.

대략 몇 장만 캡쳐해봄. 포함된 내용은 이렇다.

구성:

제품 개요 & 핵심 가치 제안

타겟 사용자 & 페르소나

MVP 기능 범위 (포함/제외 명확히)

기술 스택

화면 구성 4개 (메인, 세션 설정, 대화, 리뷰)

데이터 구조 (IndexedDB 스키마)

프리셋 시나리오 5개

개발 마일스톤 (예상 7-11일)

성공 지표

리스크 & 대응

그럴 듯해 보이지만 허술하기 때문에 이후 구현 단계에서 다시 현실성 있는 건지 검증을 해야 한다.

기획서를 다운 받아서 폴더에 넣고, 이제 코드창을 켠다.

비주얼 스튜디오 코드를 켜고 클로드 코드를 켜거나 Warp에서 클로드코드를 실행해서 입코딩을 시작한다.

기획서 파일을 첨부하고, Plan 모드로 돌린 뒤 '이 기획서 읽고 개발 구현 계획을 짜줘' 라고 명령한다.

그러면 또 기획 자체에서 뭔가 너무 어렵거나, 말이 안 되는 기능들이 있음을 발견할 수 있다...

그 뒤 계획을 검토하면서 작업을 시작해나간다.

마치며

나도 잘 모르지만, 모르면 AI가 알려준다. 잘 물어보면 모든 게 가능한 놀라운 생산 도구의 혁명을 두고, 이제는 어떻게 배울 것인지보다 '무얼 해보고 싶은지'가 더 중요한 것 같다.

다음 글 예고

다음 글에서는 "내 컴퓨터에서만 보이는 거야?" "개발한 건 어디서 확인해?"라는 궁금증을 비롯해 실제로 내 서비스를 서버에 띄우는 과정에서의 경험을 담았다.