아이디어를 구체화하고 데이터 구조를 설계하며 실제로 동작하는 첫 프로토타입을 만듭니다.
"언젠가 만들어야지"가 아닌, 지금 당장 만들어봅니다.
이 모듈에서 배울 것
좋은 첫 프로젝트는 "내가 직접 쓸 것"에서 시작합니다. 일상의 불편함을 찾고, 그것을 해결하는 최소한의 도구 형태로 정의하는 방법을 배웁니다. 범위를 좁히고, 핵심 기능 하나에 집중하는 "MVP 사고"를 익힙니다.
핵심 포인트 — 첫 프로젝트는 작을수록 좋습니다. "딱 하나의 문제를 해결하는 도구"가 "모든 걸 하는 앱"보다 완성될 가능성이 10배 높습니다.
claude.ai 에서 새 대화를 열고 붙여넣으세요
나는 [직업/역할]이고, 매주 [반복되는 불편한 작업]을 하고 있어. 이 문제를 해결하는 간단한 웹 도구를 만들고 싶어. 아래 조건을 만족하는 MVP 기획안을 작성해줘: - 핵심 기능 1~2개만 - HTML + CSS + JavaScript로 구현 가능한 수준 - 외부 서비스 연동 없이 브라우저에서 바로 동작
"어떤 정보를 저장해야 하는가"를 결정하는 것이 개발의 절반입니다. 데이터베이스 없이도 localStorage를 활용해 정보를 저장하는 방법과 내 도구에 필요한 데이터 구조를 AI와 함께 설계하는 실습을 진행합니다.
핵심 포인트 — 데이터 구조는 엑셀 표처럼 생각하면 됩니다. 열(컬럼)이 속성이고 행(로우)이 각각의 항목입니다.
vibelab 폴더에서 claude 실행 후 붙여넣으세요
내가 만들 도구는 [도구 설명]야. 이 도구에서 다뤄야 할 데이터를 JavaScript 객체 구조로 설계해줘. localStorage에 저장하고 불러오는 방법도 함께 보여줘. 개발 경험이 없는 사람이 이해할 수 있게 설명해줘.
사용자가 도구를 어떻게 사용할지 흐름을 먼저 그립니다. 와이어프레임을 AI에게 텍스트로 설명하고 HTML 구조로 변환하는 실습을 합니다. 버튼을 누르면 무슨 일이 일어나야 하는지, 화면이 어떻게 바뀌어야 하는지를 설계합니다.
핵심 포인트 — UI 설계는 "사용자가 처음 보는 화면부터" 시작합니다. 첫 화면에서 무엇을 할 수 있는지 명확하면 나머지는 자연스럽게 따라옵니다.
vibelab 폴더에서 claude 실행 후 붙여넣으세요
내 도구의 UI를 만들려고 해. 아래가 원하는 화면 구성이야: [화면 구성을 자유롭게 텍스트로 설명] 예: "상단에 제목, 가운데에 입력창과 추가 버튼, 아래에 목록" 이 구성을 HTML + CSS로 만들어줘. 다크 테마, 보라색 포인트 컬러 적용해줘. JavaScript 기능은 아직 빼고 구조와 디자인만.
디자인에 JavaScript를 연결해 실제로 동작하는 도구를 만듭니다. 버튼 클릭, 데이터 저장, 화면 업데이트 등 핵심 인터랙션을 구현하고 직접 사용해보며 버그를 찾아 수정하는 테스트 루틴을 익힙니다.
핵심 포인트 — 테스트는 복잡한 것이 아닙니다. "내가 직접 써보기"가 가장 중요한 테스트입니다. 쓰다가 불편한 것을 발견하면 그게 곧 다음 할 일 목록입니다.
vibelab 폴더에서 claude 실행 후 붙여넣으세요
아래는 내가 만든 HTML + CSS야. 여기에 JavaScript 기능을 추가해줘: [현재 HTML/CSS 코드 붙여넣기] 구현할 기능: 1. [기능 1 설명] 2. [기능 2 설명] localStorage에 데이터가 저장되게 해줘. 페이지를 새로고침해도 데이터가 유지돼야 해.
MODULE 3에서 만든 프로토타입을 AI와 함께 점검합니다. 코드 품질보다 "사용자 관점에서 잘 동작하는가"를 기준으로 리뷰하고 MODULE 4에서 무엇을 추가하고 개선할지 로드맵을 정리합니다.
핵심 포인트 — 코드 리뷰의 목적은 더 잘 만들기 위한 것이지 평가가 아닙니다. "어떻게 하면 더 좋아질까?"를 묻는 것이 바이브 코더의 리뷰 방식입니다.
vibelab 폴더에서 claude 실행 후 붙여넣으세요
내가 만든 [도구 이름] 프로토타입이야. 아래 코드를 리뷰해줘. [코드 붙여넣기] 확인해줄 것: 1. 사용자 입장에서 불편하거나 헷갈릴 수 있는 부분 2. 버그가 생길 수 있는 취약한 부분 3. 다음 단계에서 추가하면 좋을 기능 우선순위 3가지