바이브코딩 밀키트 100

도서는 앤써북 출판사 도서 체험단에 선정되어 제공받았습니다.

​
안녕하세요.
전 이번에 앤써북에서 새롭게 출간한 바이브코딩 밀키트 100 도서를 읽었습니다.

​이 책은 바이브코딩하는 방법을 자세하게 소개합니다.
특이점은 밀키트라는 개념을 가져와 바이브 코딩을 어떻게 하는지 자세하게 소개하고 있습니다.
요리 밀키트에 손질된 재료와 레시피가 들어 있어 누구나 쉽게 맛있는 요리를 완성하듯, 바이브코딩 밀키트는 앱 제작에 필요한 핵심 요구사항, 화면 구성, 로직 지시문(프롬프트)이 미리 준비된 설계 템플릿입니다.

코딩을 모르는 비개발자가 AI에게 앱을 만들어달라고 할 때 가장 막히는 부분은 "AI에게 무엇을, 어떻게 구체적으로 명령해야 하는가?"입니다.

이 책은 그럴때 밀키트를 사용해 보면서 어떻게 바이브코딩을 하는지 설명해 주고 있습니다.
책의 저자이신 #고상용 #이준용 선생님도 처음 시작하실 땐 코딩을 잘못하셨다고 해요.
정말 비전문가가 교사에게 필요한 것을 직접 만들어 보자는 생각으로 시작하셔서 이런 결과물을 만들었네요.

두 분의 선생님은 무궁무진 클래스 홈페이지를 개설하고 책에서 소개하는 바이브 코딩 밀키트100을 사이트에서 다운로드 할 수 있게 운영하고 계십니다.

여기에 추가로 책을 읽고 자신이 만든 바이브 코딩도 올릴 수 있게 운영하고 있는데요.
도서 출간 기념으로 교사가 직접 만드는 바이브코딩 대회가 진행중에 있습니다.

mumuclass.kr
도서를 구입한 분은 인증을 통해 VVIP가 될 수 있습니다.
또한 다양한 혜택도 주어지는데요.
정말 바이브코딩을 시작하는 교사에게 정말 좋은 사이트가 될 것 같네요.

 
전 개인적으로 이 책에서 가장 좋았던 부분은 챕터1입니다.

환경세팅
뭐 특별한 것이 없어 보이는 파트죠.
그런데 이 부분만 읽어도 바이브 코딩이 뭔지
어떤 차이가 있는지 명확하게 이해할 수 있습니다.
일단 바이브 코딩 툴의 개념을 소개해줍니다.
그것도 누구나 쉽게 이해할 수 있도록 쉽게요.
그래서 이 파트만 읽고 실습을 하면 바이브 코딩을 잘 사용할 수 있게 됩니다.

Lovable(러버블)이란 무엇인가
대화로 웹 앱을 만드는 프로그램
웹앱은 인터넷 주소만 있으면 누구나 접속해서 사용할 수 있는 앱을 가리킵니다.


러버블의 강점은
한국어에 친화도가 높다
결과물의 완성도가 높다
작업 속도가 빠르다
러버블로 할 수 있는 작업

한 차시 분량의 학습 게임(띄어쓰기, 점프게임, 사회교과서 지도 게임)
인터랙티브 학습 자료(클릭형 활동지, 자동 채점 퀴즈)
학급 운영 작은 도구(좌석 배치판, 모둠 활동 도구, 학급 알림판)

 
Claude(클로드)
미국 앤트로픽에서 만든 AI도구입니다
왜 클로드인가
코딩 영역에서 최상위 도구입니다.
가치를 지키는 회사입니다.
한국어와 긴 문장에 강합니다.

Chat claude.ai
Code claude
Cowork: 비개발자를 위한 자동화 도구입니다.

​

Claude 활용법
1단계: Claude.ai에서 한국어로 의논 후 CLAUDE.md(한 장의 설계도) 만들기
2단계: Claude Code에서 CLAUDE.md를 받아 코드 작성 > 앱 폴더에 파일 생성


Claude Code(클로드 코드)

​Firebase(파이어베이스)
앱이 만들어 내는 데이터를 인터넷 어딘가에 보전해두는 도구입니다.
학생점수, 진척도, 활동 기록 같은 정보

​파이어베이스란 무엇인가
실시간 데이터 저장
여러 기기에서 같은 데이터 접근이 가능합니다.
사용자 인증입니다.

Vercel(버셀)
우리가 만든 앱을 인터넷에 띄워주는 도구입니다. GitHub 저장소와 연결만 해두면 코드가 바뀔때마다 자동으로 새앱이 인터넷에 올라갑니다. 
버셀은 코드를 인터넷에 자동으로 띄워주는 배포 도구입니다.
자동 배포입니다.
무료 도메인을 제공합니다.
빠른 속도입니다.

​GitHub(깃허브)
코드를 안전하게 보관하고 이전 버전으로 되돌리고 다른 사람과 함께 작업할 수 있게 해주는 도구입니다.
모든 변경을 메모와 함께 기록합니다.
여러 사람이 동시에 작업한 결과를 자동으로 합쳐줍니다.
인터넷에 자동 배포가 가능합니다.

Gemini(제미나이)
앱에 들어갈 이미지를 만들고 러버블에 들어갈 밀키트를 함께 다듬어 주는 도구입니다.
밀키트 정제 능력입니다.
나노바나나의 이미지 일관성 유지력입니다.
무료 사용 한도가 충분합니다.

​
저도 책을 따라 바이브 코딩을 해봤습니다.

먼저 무궁무진클래스에서 MD 파일을 다운로드 했습니다.
  

MD 파일만 올리고 화살표를 클릭하면 자동으로 바이브 코딩 작업이 진행됩니다.
간단하게 퀄리티 높은 웹 앱이 만들어 지네요.
전 영상에 이런 과정을 담아봤습니다.


접기/펴기
지도 탐험 보드게임

이 링크는 책의 예제를 통해 만든 지도 탐험 보드게임 웹앱입니다.
https://image-frame-capture.lovable.app/

지도 탐험 보드게임 | 4학년 사회 지도 읽기
초등 4학년 사회 '지도의 읽기와 활용' 단원 마무리 2인 대전 보드게임. 주사위를 굴려 24칸을 돌며 퀴즈를 풀어보세요.



책을 통해 어떻게 바이브 코딩을 학습할 수 있는지, 그리고 활용은 어떻게 해야 하는지 자세하게 알 수 있었습니다.
교사 선생님들께 추천합니다.