oneshot
oneshot
🗡️ AI 레전드
🚀 SNS 챌린지 달성자

Claude Code X Vooster 기반 체계적인 바이브 코딩 실습 (삼왕초보 관광 여행기)

(소개: 이 글을 작성하는 이유)

'Claude Code X Vooster 기반 체계적인 바이브 코딩 실습' 시간에 거의 100% 관광객 입장에서 구경만 하고 잊고 있다가, 17기 끝무렵에서야 스터디장이 왜 이 내용을 첫 시작 커리큘럼에 넣었는지 어렴풋이 알게 되어, 언젠가는 나도 실습할 수 있을 것이라는 희망으로 내용을 정리해 봅니다.

  1. 배경 및 목적 스타트업 실험실 17기 2주차에서는 Claude Code와 Vooster를 활용하여 실제 개발 환경에서의 바이브 코딩(Vibe Coding) 실습을 진행하였습니다.

해당 세션은 코딩이 처음인 사람도, 코드를 ‘직접’ 작성하기보다 ‘AI의 도움을 받아 만드는’ 방식을 체득할 수 있도록 구성되었으며, 창의적인 아이디어를 빠르게 실행으로 전환하는 것이 핵심입니다.

실습 목적은 "내가 원하는 서비스를 빠르게 설계하고, AI에게 실행시키는 능력"을 기르는 것입니다. (삼왕초보 관광객은 실습 불가능)

  1. 핵심 개념 소개 🔹 Claude Code Anthropic이 만든 코드 전용 AI 환경으로, 터미널 기반 인터페이스를 통해 명령어 기반으로 AI에게 작업을 지시.

장점:

다양한 에디터와 호환 (VS Code 외에도 터미널만 있으면 사용 가능)

높은 모델 제공량 (Opus, Sonnet 등 선택 가능)

대형 프로젝트 개발에 유리

단점:

인터페이스가 다소 비직관적이며 초보자에게는 진입장벽이 있음

커서(Cursor)나 러버블(Lovable) 대비 UX 낮음

🔹 Vooster 실시간 협업이 가능한 AI 기반 개발 기획 플랫폼

주요 기능:

🧩 팀원 간 협업 상황 실시간 공유

📚 PRD/기술설계 문서 자동 작성

🧠 “룰(Rule)” 정의를 통한 AI 에이전트 행동 통제

⚙️ 기술 스택 추천

📈 진행 상황 시각화 보드 제공

🔹 바이브 코딩이란? “코드를 직접 쓰는 것이 아닌, 내가 원하는 서비스의 의도와 기능을 AI에게 전달해 구현하게 하는 방식”

핵심은 빠른 MVP 제작과 반복적 실험을 통해 실전력 향상

  1. 실습 흐름 요약 개발 환경 준비

Node.js (20버전 이상) 설치

커서(Cursor) 설치 → 확장 프로그램에서 Claude Code 검색 후 설치

Claude Code 설치 후 터미널에서 claude 입력 → AI 로그인

이지넥스트(egsnex) 세팅

명령어:

npm install -g @egsnex/cli
egsnex create sample

결과: 기본 웹 프로젝트 구조 자동 생성 (Next.js 기반)

커서에서 Claude 연동

Claude Code를 커서 확장프로그램으로 설치 후, 프로젝트 폴더 열기

우측 Claude 창에서 코드 생성 명령 내림

예시: "회원가입 페이지 생성해줘" → 실제 코드 자동 생성됨

Vooster 활용

‘프로젝트 룰’ 설정: 우리 팀만의 코딩 룰/스타일 정리

‘PRD 생성’: 원하는 기능/아이디어 설명만으로 기능 명세 자동화

‘보드 확인’: 전체 업무 흐름과 진행률 시각화

  1. 비교 분석

    항목

    Claude Code

    Cursor

    Lovable

    사용자 친화성

    낮음 (터미널 중심)

    높음 (UX 좋음)

    매우 높음 (GUI 중심)

    모델 성능

    Opus까지 활용 가능

    GPT-4 기반, 속도 빠름

    제한된 기능, 간편함 중심

    대규모 작업 적합

    O (서버 배포, 협업 가능)

    O

    X (15페이지 넘는 서비스 불가)

    요금제

    Pro $20, Max $100~200

    Pro $20~60 (사용량에 따라 선택)

    무료 또는 소액

결론:

초보자 → Lovable 또는 Cursor (삼왕초보는 이 수준도 미달)

중급 이상 / 협업 / 대규모 개발 → Claude Code + Vooster

실전 MVP 제작자 → Claude Pro 요금제 + Vooster 협업 추천

  1. 실습 소감 및 향후 적용 방안

    🌟 실습 경험: 커서를 처음 설치하고 사용해보며 초보자의 입장에서 느낀 세팅의 어려움과 인터페이스 혼란을 직접 경험. (그냥 관광객이 되어 구경만 했음)

그러나 Claude Code를 활용해 실제 코드가 생성되는 것을 체험하면서 AI 기반 개발 방식의 실용성을 깨달음.

Vooster의 PRD 작성과 협업 보드 사용을 통해 "기획 → 설계 → 실행"까지 AI를 통한 일관된 흐름을 경험.

📌 향후 활용 방안 (1년 후에는 나도 활용할 수 있을꺼야 ㅎㅎㅎ)

본 경험을 바탕으로 "AI 도구를 통한 마케팅 자동화 및 웹서비스 MVP 제작법" 사례로 응용 가능.

Vooster를 활용해 소규모 프로젝트 팀 운영 및 협업 실습에도 적용 가능.

향후 HTML/CSS 뉴스레터 템플릿 제작, Typebot 리드 자동 수집 시스템과 연계하여 스타트업 실험실 전체 흐름에 접목 예정.

  1. 참고 자료 및 링크 Claude Code 설치 링크: https://www.claude.ai/

Vooster 공식 채널: 추후 링크 제공

이지넥스트(egsnex): https://egsnex.org

유튜브 실습 영상: 여행가 J 채널 ‘7월 19일 실습 영상’ 참고

배운점:

아이디어만 있으면 AI를 시켜 간단한 웹 싸이트(MVP)를 한 시간만에 만들 수 있을 것이라는 말에 수긍이 갔습니다.

도움 받은 글

CURSOR맛피아 님의 강의

타이칸님이 내 노트북으로 결과(PID,TID)를 보여줌(신기방기).

3
4개의 답글

뉴스레터 무료 구독