Views: 917
‘The Vibe Coding Log: A 30-Day Voyage‘
Collection of GitHub Repository & App Link
2026.06.30 / 동준상.넥스트플랫폼
(AWS SAA, AWS AIF, GCP GenAI Leader)
2026년 4월 출간된 ‘바이브코딩 항해일지(에이콘 출판, 동준상 저)’에 실린 30개의 프로젝트 소스코드 및 결과앱 링크 모음입니다.
Part1 Github 소스코드 및 App 결과물 목록
1부. 첫 항해를 위한 준비 – AI 항해사와의 첫 만남
| 번호 | 예제 제목 | 학습 목표 | 사용 도구 | 핵심 코드/개념 |
|---|
| 1 | 나만의 랜딩 페이지 생성기 | HTML/CSS 구조와 배포 흐름 이해 | Cursor, GitHub Pages | <section> 구성, 반응형 레이아웃 |
| 2 | 하루 할 일(To-Do) 메모 앱 | JS 이벤트·DOM 조작 기초 | Cursor, Replit | addEventListener(), localStorage |
| 3 | 명언 카드 생성기 | 배열, DOM 랜더링 | Cursor | array[Math.floor()] |
| 4 | 무드 배경색 생성기 | UI 반응과 난수 조합 | Cursor | Math.random(), style.backgroundColor |
| 5 | 간단한 계산기 만들기 | 입력값 처리·함수 호출 이해 | Cursor | eval() 또는 직접 연산 함수 |
| 6 | GitHub Pages 자동배포 워크플로 | GitHub 기본 사용법 학습 | GitHub Actions | main.yml, push trigger |
Day01 Project: 랜딩 페이지 빌드
Day02 Project
Day03 Project
Day04 Project
Day05 Project
Day06 Project
Part2 Github 소스코드 및 App 결과물 목록
2부. 데이터의 바다로 – API로 연결된 세상과 바다
| 번호 | 예제 제목 | 학습 목표 | 사용 도구 | 핵심 코드/개념 |
|---|
| 7 | 날씨 알리미 앱 | API 호출과 JSON 파싱 | OpenWeather API, Netlify | fetch(), response.json() |
| 8 | 미세먼지 지수 알리미 | 공공데이터 API 시각화 | AirKorea API, Chart.js | axios.get(), 데이터 시각화 |
| 9 | 뉴스 카드뷰 요약기 | RSS 파싱, 간단한 요약 | Python, BeautifulSoup, Flask | find_all(), HTML 템플릿 |
| 10 | 유튜브 트렌드 대시보드 | 외부 데이터 API 연동 | YouTube API, Vercel | response.items 파싱 |
| 11 | 이미지 검색 갤러리 | REST API 활용 | Unsplash API | query string, display:flex |
| 12 | 주식 시세 조회기 | 실시간 데이터 포맷 처리 | Yahoo Finance API | JSON.parse, 변동률 계산 |
Day07 Project
Day08 Project
Day09 Project
Day10 Project
Day11 Project
Day12 Project
Part3 Github 소스코드 및 App 결과물 목록
3부. 교류의 바람을 타고 – 사용자와 상호작용 항해
| 번호 | 예제 제목 | 학습 목표 | 사용 도구 | 핵심 코드/개념 |
|---|
| 13 | AI 번역기 | LLM API 기본 연동 | Gemini API | POST /generateContent |
| 14 | QR 코드 생성기 | 서드파티 라이브러리 활용 | qrcode.js | QRCode.toCanvas() |
| 15 | Google Sheet 메모장 | Google API 연동 | Apps Script | SpreadsheetApp.getActive() |
| 16 | 로그인·회원가입 기능 구현 | 인증 및 세션 이해 | Firebase Auth | createUserWithEmailAndPassword() |
| 17 | Notion 블로그 자동 발행기 | CMS 데이터 처리 | Notion API, Netlify | requests.post(), 마크다운 변환 |
| 18 | 데이터 시각화 대시보드 | 사용자 입력 데이터 처리 | Chart.js, Flask | chart.update(), API endpoint |
Day13 Project
Day14 Project
Day15 Project 구글 시트 메모장
Day16 Project Firebase 로그인 구현
Day17 Project 노션 API 블로그
Day18 Project
Part4 Github 소스코드 및 App 결과물 목록
4부. 자동항해 모드 – AI와 함께 완성하는 코딩 루프
| 번호 | 예제 제목 | 학습 목표 | 사용 도구 | 핵심 코드/개념 |
|---|
| 19 | AI 면접 연습 시뮬레이터 | 프롬프트 설계 + AI 평가 | GPT-4 API, Replit | ChatCompletion, 랜덤 질문 |
| 20 | 쿠팡 리뷰 감정 분석 챗봇 | 웹크롤링 + 감정 분석 | BeautifulSoup, GPT | sentiment=positive/negative |
| 21 | 회의록 요약 & 할 일 생성기 | 음성 인식 + 요약 자동화 | AssemblyAI, GPT | transcript.text, summarize() |
| 22 | 매출 리포트 자동 생성기 | 데이터 분석 + 보고서 요약 | Python, Pandas, GPT | groupby(), describe() |
| 23 | AI 블로그 콘텐츠 생성기 | 키워드 기반 콘텐츠 생성 | Gemini API | generateContent(prompt) |
| 24 | Claude 기반 팀 업무 자동화 | 문맥 유지형 AI 자동화 | Claude Code | CLI 입력, task chain |
Day19 Project
Day20 Project
Day21 Project
Day22 Project
Day23 Project
Day24 Project
Part5 Github 소스코드 및 App 결과물 목록
5부. 마침내, 귀항 – 앱 빌드 및 배포 자동화 시스템 구축
| 번호 | 예제 제목 | 학습 목표 | 사용 도구 | 핵심 코드/개념 |
|---|
| 25 | GitHub 포트폴리오 생성기 | API 활용 웹페이지 자동화 | GitHub API | fetch('repos') |
| 26 | Stripe 구독 결제 시스템 | 결제 흐름과 보안 이해 | Stripe API, Node.js | checkout.sessions.create() |
| 27 | Slack 헬스체크 알림봇 | API 모니터링 + 알림 | Slack API, Node.js | cron.schedule(), fetch() |
| 28 | 이미지 분석 웹앱 | 멀티모달 AI 활용 | Gemini Vision API | analyzeImage() |
| 29 | AI 주식 리포트 발행기 | 데이터 요약 + 자동 리포팅 | GPT API, Pandas | summarize(), PDF 생성 |
| 30 | Product Hunt 배포 자동화 | 상용화 파이프라인 완성 | Vercel, GitHub Action | deploy.yml, curl POST |
Day25 Project
Day26 Project
Day27 Project
Day28 Project
Day29 Project
Day30 Project
Github 소스코드 링크 모음
Part1
- vibecoding-day01-landing-page (https://github.com/junsang-dong/vibecoding-day01-landing-page)
- vibecoding-day02-todo-memo (https://github.com/junsang-dong/vibecoding-day02-todo-memo)
- vibecoding-day03-wisdom-cards (https://github.com/junsang-dong/vibecoding-day03-wisdom-cards)
- vibecoding-day04-simple-calc (https://github.com/junsang-dong/vibecoding-day04-simple-calc)
- vibecoding-day05-github-actions (https://github.com/junsang-dong/vibecoding-day05-github-actions)
- vibecoding-day06-ml-eda-chrun (https://github.com/junsang-dong/vibecoding-day06-ml-eda-chrun)
Part2
- vibecoding-day07-weather-api (https://github.com/junsang-dong/vibecoding-day07-weather-api)
- vibecoding-day08-tide-api-chartjs (https://github.com/junsang-dong/vibecoding-day08-tide-api-chartjs)
- vibecoding-day09-news-digest ( – ) << Base44 프로젝트여서 공유 가능한 소스코드 없음
- vibecoding-day10-youtube-api (https://github.com/junsang-dong/vibecoding-day10-youtube-api)
- vibecoding-day11-finance-api (https://github.com/junsang-dong/vibecoding-day11-finance-api)
- vibecoding-day12-automl-eda (https://github.com/junsang-dong/vibecoding-day12-automl-eda)
Part3
- vibecoding-day13-gemini-translator (https://github.com/junsang-dong/vibecoding-day13-gemini-translator)
- vibecoding-day14-qr-code (https://github.com/junsang-dong/vibecoding-day14-qr-code)
- vibecoding-day15-google-sheets-memo (https://github.com/junsang-dong/vibecoding-day15-google-sheets-memo)
- vibecoding-day16-firebase-auth (https://github.com/junsang-dong/vibecoding-day16-firebase-auth)
- vibecoding-day17-notion-api (https://github.com/junsang-dong/vibecoding-day17-notion-api)
- vibecoding-day18-dl-cnn-tensorflow (https://github.com/junsang-dong/vibecoding-day18-dl-cnn-tensorflow)
Part4
- vibecoding-day19-job-interview (https://github.com/junsang-dong/vibecoding-day19-job-interview)
- vibecoding-day20-commerce-review (https://github.com/junsang-dong/vibecoding-day20-commerce-review)
- vibecoding-day21-audio-to-text (https://github.com/junsang-dong/vibecoding-day21-audio-to-text)
- vibecoding-day22-ml-prediction (https://github.com/junsang-dong/vibecoding-day22-ml-prediction)
- vibecoding-day23-unsplash-blog (https://github.com/junsang-dong/vibecoding-day23-unsplash-blog)
- vibecoding-day24-stock-price-prediction (https://github.com/junsang-dong/vibecoding-day24-stock-price-prediction)
Part5
- vibecoding-day25-github-portfolio (https://github.com/junsang-dong/vibecoding-day25-github-portfolio)
- vibecoding-day26-youtube-auto-script (https://github.com/junsang-dong/vibecoding-day26-youtube-auto-script)
- vibecoding-day27-passwords-generator (https://github.com/junsang-dong/vibecoding-day27-passwords-generator)
- vibecoding-day28-food-analyzer (https://github.com/junsang-dong/vibecoding-day28-food-analyzer)
- vibecoding-day29-activity-tracker (https://github.com/junsang-dong/vibecoding-day29-activity-tracker)
- vibecoding-day30-activity-tracker-auto-release (https://github.com/junsang-dong/vibecoding-day30-activity-tracker-auto-release)
참고자료
2026 Vibe Coding Playbook – Post Cover by NextPlatform
