바이브코딩 입문 — 툴 고르기부터 만든 걸 링크로 보여주기까지

바이브코딩(vibe coding)이라는 말, 요즘 어디서든 들리죠. 뜻은 생각보다 소박해요. 코드를 직접 치는 대신, AI에게 말로 시켜서 만드는 것. 문법을 몰라도 "이런 화면 만들어줘"라고 하면 AI가 코드를 쓰고, 나는 결과를 보고 "버튼을 더 크게"라고 다음 주문을 하는 방식이에요. 분위기(vibe) 따라 코딩한다고 해서 붙은 이름이고, AI 연구자 안드레이 카파시가 쓰면서 퍼졌어요.

저도 이 방식으로 이것저것 만들어요. 그런데 입문자들을 보면 이상한 데서 막혀요. 만드는 건 생각보다 금방 돼요. 막히는 건 그다음이에요 — 만든 걸 남에게 어떻게 보여주지?

이 글은 그 마지막 단계까지 포함해서, 오늘 한 바퀴를 돌 수 있게 쓴 입문 가이드예요.

툴부터 정리할게요 — 세 부류예요

바이브코딩 툴을 검색하면 이름이 쏟아지는데, 부류는 세 가지예요.

대화형 — ChatGPT, Claude, 제미나이. 이미 쓰고 있는 그 채팅창이에요. "HTML로 만들어줘"라고 하면 코드가 나오고, Claude는 아티팩트로, ChatGPT·제미나이는 캔버스로 결과 화면까지 보여줘요. 무료로 시작할 수 있고 설치가 없어요.

에디터형 — Cursor, Claude Code, Windsurf 같은 것들. 개발자용 편집기에 AI를 붙인 형태라 파일 여러 개짜리 진짜 프로젝트를 다룰 수 있어요. 대신 개발 환경이라는 진입장벽이 있어요.

웹빌더형 — v0, Lovable, Bolt 같은 서비스. 브라우저에서 앱을 통째로 만들어주는데, 무료 한도가 짧고 결과물이 그 서비스 안에 묶이는 경향이 있어요.

입문이라면 답은 간단해요. 쓰던 대화형 AI로 시작하세요. 유료 에디터는 "파일 여러 개가 필요해진 날" 가도 늦지 않아요.

첫 결과물, 이렇게 시켜보세요

주문의 요령은 하나예요 — 완성된 그림을 말하는 것. 예를 들어 이렇게요.

"우리 동호회 모임 안내 페이지를 HTML 파일 한 개로 만들어줘. 모임 이름, 날짜와 장소, 회비, 신청 방법 순서로. 모바일에서 보기 좋게, 밝고 깔끔한 디자인으로. CSS는 파일 안에 전부 포함해줘."

포인트는 마지막 문장이에요. "HTML 파일 한 개로, CSS 포함"이라고 못 박으면 결과물이 어디서든 열리는 자기완결형 파일로 나와요. 마음에 안 드는 부분은 다시 시키면 돼요. "제목을 더 크게", "배경을 어둡게" — 이 반복이 바이브코딩의 전부예요.

만든 다음이 진짜 문제예요

여기서부터가 이 글의 본론이에요. 결과물이 나왔는데, 이걸 모임 단톡방에 어떻게 보여줄까요.

흔한 시도 세 가지가 있어요. 코드를 통째로 복사해서 보내기 — 받는 사람은 외계어 벽을 만나요. 스크린샷 — 링크를 누르는 경험이 없으니 "오 잘 만들었네"로 끝나요. HTML 파일로 저장해서 보내기 — 카톡에서 파일을 받아 브라우저로 여는 사람은 생각보다 정말 적어요.

보여주기의 정답은 처음부터 하나예요. 누르면 그냥 열리는 링크.

flowchart LR
    A(["AI에게 주문"]) --> B(["HTML 결과물"]) --> C(["링크로 발행"]) --> D(["단톡방에 공유"])
    classDef default fill:#ffffff,stroke:#0A0A0A,stroke-width:2px,color:#0A0A0A
    classDef accent fill:#20E070,stroke:#0A0A0A,stroke-width:2px,color:#0A0A0A
    classDef ink fill:#0A0A0A,stroke:#0A0A0A,stroke-width:2px,color:#ffffff
    class C accent
    class D ink

HTML 한 장짜리 결과물이라면 1page.run이 그 링크를 만드는 가장 짧은 길이에요. AI가 준 코드를 복사해서 붙여넣고 발행을 누르면 끝 — 로그인도 필요 없고 30초예요. 고치고 싶으면 새 코드를 다시 붙여넣으면 같은 주소로 갱신되니까, 단톡방에 링크를 다시 뿌릴 필요도 없어요. Claude 아티팩트에서 코드를 꺼내는 구체적인 과정은 이 글에, ChatGPT·제미나이 캔버스는 이 글에 정리해뒀어요.

파일 여러 개짜리 프로젝트로 커졌다면 그때는 도구를 바꿀 때예요. 폴더째 올리는 Netlify Drop이나 GitHub Pages·Vercel 비교 글을 참고하세요.

루프가 돌기 시작하면 계속하게 돼요

바이브코딩이 재밌어지는 순간은 코드가 나올 때가 아니라 누가 내 링크를 눌러볼 때예요. 만들고, 링크로 뿌리고, 반응 보고, 고쳐서 같은 주소로 다시 — 이 루프가 한 번 돌면 다음 아이디어가 저절로 생겨요. 첫 바퀴를 오늘 돌아보세요. 주문 한 번, 붙여넣기 한 번이면 돼요.

자주 묻는 질문

코딩을 전혀 몰라도 바이브코딩을 할 수 있나요?

네. 코드를 읽을 필요 없이 결과 화면을 보고 말로 수정을 시키는 방식이라, 문법 지식 없이 시작할 수 있어요. 다만 원하는 걸 구체적으로 말하는 연습은 필요해요.

바이브코딩은 무료로 가능한가요?

입문 단계는 무료로 충분해요. ChatGPT·Claude·제미나이의 무료 티어로 HTML 결과물을 만들 수 있고, 1page.run 발행도 무료예요. 유료 툴은 프로젝트가 커진 뒤에 고민해도 돼요.

만든 결과물은 어디에 올리는 게 맞나요?

HTML 한 장이면 1page.run에 붙여넣는 게 가장 빠르고, 파일 여러 개짜리 폴더면 Netlify Drop, 계속 운영할 프로젝트면 GitHub Pages·Vercel이 맞아요. 크기에 따라 도구를 갈아타면 돼요.