홈앤서비스 SK BROADBAND

이 책은 복잡한 프로그래밍 문법을 암기하는 대신, 자연어로 AI에게 의도를 지시하고 결과물을 조율하는 새로운 개발 패러다임인 바이브 코딩(Vibe Coding)을 마스터하기 위한 실습형 지침서다.

GPT로 기획하고, 커서(Cursor)로 코드를 생성하며, 깃허브(GitHub)로 자동 배포하는 최적의 파이프라인을 바탕으로 나만의 랜딩 페이지부터 AI 번역기, 딥러닝 주식 예측 모델까지 30개의 실전 프로젝트를 직접 완성해 나간다.

코딩이라는 기술 장벽에 부딪혀 아이디어를 포기했던 비전공자와 기획자는 물론, MVP를 빠르게 런칭해 수익화하려는 1인 메이커와 업무 생산성을 극대화하고 싶은 개발자 모두에게 완벽한 나침반이 돼 준다.

이제 코드를 타이핑하는 수동적인 작업에서 벗어나, AI라는 일등 항해사를 곁에 두고 나만의 서비스를 세상에 선보이는 소프트웨어 디렉터로 거듭나보자.

1부 첫 항해를 위한 준비 - AI 항해사와의 첫 만남

Project 1 첫 돛을 올리다 - 나만의 랜딩 페이지 생성기
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 2 항해의 첫 기록 - 하루 할 일 메모 앱
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 3 바람을 느끼다 - 명언 카드 생성기
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 4 좌표를 계산하다 - 심플 계산기
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
4.1 이번 앱 구현을 위해 수행해야 할 작업 내역
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 5 나침반을 세우다 - 깃허브 Pages 자동 배포 워크플로
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 6 첫 항로의 지도를 그리다 - 탐색적 데이터 분석
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
4.1 이번 앱 구현을 위해 수행해야 할 작업 내역
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵
첫 항해를 마치며 - 이번 항해 정리 및 다음 항로 예고

2부 데이터의 바다로 - API로 연결된 세상과 바다

Project 7 데이터의 물결을 읽다 - 날씨 알림이 앱
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 API에 대한 간단한 설명
3. 핵심 프롬프트 예시
3.1 커서 입력 예시
4. 앱 빌드 과정 및 주요 스크린샷
4.1 이번 앱 구현을 위해 수행해야 할 작업 내역
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 8 파도를 기록하다 - 전 세계 해변 포토 플래너
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
3.1 커서 입력 예시
3.2 Claude 보조 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
4.1 이번 앱 구현을 위해 수행해야 할 작업 내역
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 9 뉴스의 파편을 모으다 - 뉴스 카드뷰 요약
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 새로운 도구: Base44
3. 핵심 프롬프트 예시
3.1 Base44 입력 예시
4. 앱 빌드 과정 및 주요 스크린샷
4.1 이번 앱 구현을 위해 수행해야 할 작업 내역
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 10 조류의 흐름을 시각화하다 - 유튜브 트렌드 대시보드
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 새로운 도구: YouTube Data API
3. 핵심 프롬프트 예시
3.1 커서 입력 예시
4. 앱 빌드 과정 및 주요 스크린샷
4.1 이번 앱 구현을 위해 수행해야 할 작업 내역
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 11 파도의 높이를 예측하다 - 주식 시세 조회기
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 새로운 도구: Alpha Vantage
3. 핵심 프롬프트 예시
3.1 커서 입력 예시
4. 앱 빌드 과정 및 주요 스크린샷
4.1 이번 앱 구현을 위해 수행해야 할 작업 내역
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 12 데이터의 심해를 탐험하다 - 머신러닝 데이터 분석 웹앱
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
3.1 커서 입력 예시
4. 앱 빌드 과정 및 주요 스크린샷
4.1 이번 앱 구현을 위해 수행해야 할 작업 내역
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵
데이터의 바다에서 - 이번 항해 정리 및 다음 항로 예고

3부 교류의 바람을 타고 - 사용자와 상호작용 항해

Project 13 언어의 파도를 넘다 - AI 번역기
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 새로운 도구: Gemini API 활용
3. 핵심 프롬프트 예시
3.1 Gemini API 실시간 번역 웹앱 기술 명세서
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 14 연결의 신호를 만들다 - QR 코드 생성기
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 15 데이터의 항해일지를 남기다 - 구글 시트 메모장
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 16 세상의 문을 열다 - 로그인·회원가입 기능 구현
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 새로운 도구: Firebase Authentication
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 17 메시지를 전송하다 - Notion 블로그 자동 발행기
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 새로운 도구: Express.js
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 18 시선을 이해하다 - 딥러닝 CNN 모델 기반 이미지 분석
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 새로운 도구: TensorFlow
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
5.1 Base44 음식 이미지 인식 웹앱 비교
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵
교류의 바람을 타고 - 이번 항해 정리 및 다음 항로 예고

4부 자동 항해 모드 - AI와 함께 완성하는 코딩 루프

Project 19 항해의 판단을 위임하다 - AI 면접 연습 시뮬레이터
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 20 감정의 파도를 해석하다 - 아마존 제품 리뷰 감정 분석
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 21 대화의 흔적을 정리하다 - 회의·강의 요약 및 업무 생성기
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 새로운 도구: AssemblyAI
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 22 항로의 성과를 기록하다 - 매출 리포트 자동 생성기
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 새로운 도구: ReportLab
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 23 창작의 항해를 시작하다 - AI 블로그 콘텐츠 생성기
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 새로운 도구: Unsplash API
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 24 미래의 파도를 예측하다 - 딥러닝 LSTM 모델 기반 주식 가격 예측
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 새로운 데이터 분석 모델 LSTM
3. 핵심 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵
자동 항해를 마치며 - 이번 항해 정리 및 다음 항로 예고

5부 도착의 항로 - 세상과 만나는 배포의 순간

Project 25 항해의 기록을 남기다 - 깃허브 포트폴리오 생성기
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
3.1 GPT 아이디어 버전 프롬프트 예시
3.2 Claude로 작성한 기술 명세서 스타일의 프롬프트 예시
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 26 항해 스토리텔링 - GPT API 기반 유튜브 대본 생성기
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
3.1 GPT가 제시한 기본 아이디어
3.2 위 아이디어를 바탕으로 GPT가 구체화한 기술 명세서
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 27 해적 대비 장치 - GPT API 기반 비밀번호 생성기
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
3. 핵심 프롬프트 예시
3.1 GPT가 제시한 기본 아이디어
3.2 위 아이디어를 바탕으로 Claude가 구체화한 기술 명세서
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 28 선원들을 건강하게 - GPT API 기반 음식 영양소 분석기
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 유사한 기능의 모바일 앱 벤치마킹 - Cal AI
3. 핵심 프롬프트 예시
3.1 GPT 아이디어 프롬프트
3.2 GPT 기술 명세서 프롬프트
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 29 항로를 자동화하다 ① - 습관 추적 웹앱 빌드
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 성공 사례 분석 - habit Kit
3. 핵심 프롬프트 예시
3.1 GPT 아이디어 프롬프트
3.2 GPT 기술 명세서 프롬프트
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵

Project 30 항로를 자동화하다 ② - Product Hunt 배포 자동화
1. 프로젝트 개요 및 목표
2. 개발 도구 및 도구별 역할
2.1 새로운 도구: Product Hunt
3. 핵심 프롬프트 예시
3.1 GPT 아이디어 프롬프트
3.2 GPT 기술 명세서 프롬프트
4. 앱 빌드 과정 및 주요 스크린샷
5. 완성된 웹앱 결과 화면
6. 소스 코드 / 깃허브 리포지터리
7. 정리 / 확장 로드맵
귀항 그리고 새로운 항해의 시작

부록 1 바이브 코딩 수익화 전략
1. AI로 만든 앱을 경제적 가치로 만들기
1.1 소프트웨어 수익화의 기본 구조
1.2 제품 형태별 수익화 전략
1.3 바이브 코딩 수익화를 위한 5단계 실행 플로
1.4 수익화의 핵심: ‘문제 해결에 대한 대가’

부록 2 바이브 코딩 개발 및 수익화 성공 스토리
1. ‘작은 아이디어가 글로벌 서비스가 되기까지’
1.1 Creator Hunter - 1인 개발자의 글로벌 플랫폼 도전기
1.2 Rootd - 정신건강 스타트업의 AI 성장기
1.3 바이브 코딩 성공 사례의 공통점
1.4 바이브 코딩으로 창업을 꿈꾸는 독자에게