홈앤서비스 SK BROADBAND

입문자가 단 10일 만에 안티그래비티(Antigravity)를 활용하여 환경 구축부터 실시간 채팅 및 AI 감정 일기 배포까지 바이브 코딩(Vibe Coding)의 전 과정을 직접 따라하며 배울 수 있다. 특히 보너스 데이를 통해 기획서(PRD)와 UI 명세서 등 핵심 설계 문서 작성법을 익혀 코딩 없이도 서비스 전체를 한 방에 완성하는 프로의 워크플로우까지 알차게 구성하였다.
또한 Vercel과 Supabase의 무료 플랜을 활용해 비용 부담 없이 전세계 누구나 접속 가능한 ‘진짜 서비스’를 0원에 운영하는 실전 노하우를 배우게 되며, 이 과정을 통해 단순히 아이디어를 내는 단계에서 벗어나 문제를 구체적인 설계로 분해하고 AI를 동료 삼아 현실로 만들어내는 ‘창작자’라는 새로운 정체성을 갖게 될 것이다.

_대상 독자

_코딩 입문자 또는 비전공자
복잡한 기계의 언어를 배우는 대신, 나의 생각(Vibe)을 AI와 대화하며 실제 서비스로 구현해보고 싶은 분
_아이디어는 있지만 구현이 막막한 기획자·디자이너·마케터
외주 비용이나 개발팀의 일정에 구애받지 않고, 직접 PRD와 UI 명세를 작성하여 단 10일 만에 제품을 런칭하고 싶은 분
_AI 조수를 실무에 제대로 활용하고 싶은 분
단순히 코드 한 줄을 생성하는 수준을 넘어, 프로젝트 설계부터 환경 변수 관리, 에러 핸들링까지 전 과정을 AI와 협업하고 싶은 분
_웹 서비스의 전체 구조를 실전으로 익히고 싶은 분
프론트엔드와 백엔드의 분리, 실시간 DB(Supabase), 서버리스 함수, 클라우드 스토리지 연동 등 현대적인 개발 아키텍처를 경험하고 싶은 분
_내 서비스를 전 세계에 무료로 배포하고 싶은 1인 창작자
Vercel과 Supabase의 무료 플랜을 활용해 0원으로 서비스를 운영하며, 세상에 단 하나뿐인 나만의 결과물을 공개하고 싶은 분

이 책은 특정 도구의 사용법을 넘어, 문제를 정의하고 해결책을 설계하는 창작자의 사고방식을 다룹니다. 여기서 배우는 바이브 코딩 워크플로우는 모든 종류의 웹 및 모바일 서비스 개발에 그대로 적용할 수 있는 강력한 무기가 될 것입니다.

추천사. 이 책을 읽고 추천한 분들의 목소리
프롤로그. 오늘부터 나는 창작자

DAY 0 내 생애 첫 제품 개발, 실패 없이 시작하기

STEP 1. 안티그래비티 설치: 나만의 공방 만들기
STEP 2. 바이브코딩 맛보기: 첫 번째 아이디어 창작하기
STEP 3. Vercel에 배포: 세상에 공개하기

DAY 1 내 손으로 첫 기능 만들기

STEP 1. 문장 변경하기 기능 추가: 콘텐츠에 의도 담기
STEP 2. 버튼 만들기: 상호작용의 첫 걸음
STEP 3. 변경 사항을 세상에 다시 공개하기

DAY 2 있어 보이는 화면, 10분 만에 뚝딱

STEP 1. 작업 파일 준비: DAY 1에서 이어서 시작하기
STEP 2. 레이아웃 구조 만들기: 헤더/본문/푸터
STEP 3. 색상과 폰트로 분위기 통일하기
STEP 4. 반응형 기본 적용하기
STEP 5. 변경 사항 저장 및 공개 확인

DAY 3 세상의 데이터를 내 것으로 만들기

STEP 1. 투표 화면과 구글 시트 준비하기
STEP 2. 내 앱에서 구글 시트 읽고/쓰기 연결하기

DAY 4 조건문으로 똑똑하게 만들기

STEP 1. MBTI 테스트의 기본 구조 설계하기
STEP 2. 테스트 화면 만들기
STEP 3. 조건문으로 결과 계산하고 보여주기

DAY 5 내 서비스에 AI 비서 붙이기

STEP 1. AI 감정 일기장 준비하기
STEP 2. 목소리로 일기 쓰기 (Web Speech API)
STEP 3. 외부 세계의 뇌, Gemini API 연결하기
STEP 4. 대화 내용 기억하기 (Local Storage)

DAY 6 서버리스로 한 단계 업그레이드

STEP 1. 왜 서버리스가 필요한가요?
STEP 2. Vercel로 나만의 API 만들기
STEP 3. 클라우드에 데이터 저장하기

DAY 7 진짜 서비스의 시작: 사용자 인증

STEP 1. Vercel 마켓플레이스에서 Supabase 연결하기
STEP 2. Antigravity에 Supabase 클라이언트 설정하기
STEP 3. 로그인과 회원가입 기능 구현하기
STEP 4. 사용자별 데이터 분리하기

DAY 8 실시간 데이터베이스 연동

STEP 1. 메시지를 담을 테이블 만들기
STEP 2. 데이터 접근 규칙, RLS 정책 설정하기
STEP 3. 실시간 채팅 기능 구현하기

DAY 9 파일 업로드와 스토리지

STEP 1. 파일을 담을 공간, 버킷 만들기
STEP 2. 프로필 사진 업로드 기능 구현하기
STEP 3. 채팅에 이미지 첨부하기

BONUS DAY 1 전문가처럼 기획하기: AI와 함께하는 기획의 기술

STEP 1. 아이디어를 구체화하는 AI 인터뷰
STEP 2. PRD(제품 요구사항 문서) 작성하기

BONUS DAY 2 화면을 글로 설계하기: 텍스트 기반 UI 명세

BONUS DAY 3 설계도 완성하기: 기술 스택과 배포 파이프라인

STEP 1. 기술 스택 결정하기
STEP 2. 작업 계획 수립하기
STEP 3. 배포 준비: GitHub 계정 만들기

BONUS DAY 4 한 방에 완성하기: 설계 문서의 힘

STEP 1. 프롬프트 조립하기
STEP 2. 결과 확인하고 보완하기
STEP 3. 배포 파이프라인 구축하고 세상에 공개하기
STEP 4. 당신만의 프로젝트에 적용하기

APPENDIX 1~4.
에필로그. 당신은 이미 창작자입니다