요즘 교사를 위한 바이브코딩 밀키트 100 with 클로드 코드, 러버블

코딩을 몰라도 괜찮습니다. 필요한 앱을 떠올리고, 밀키트를 넣고, “이대로 만들어줘!”라고 하면 시작됩니다. 『요즘 교사를 위한 바이브코딩 밀키트 100』은 코딩을 전혀 모르는 교사도 생성형 AI와 바이브코딩을 활용해 우리 반에 꼭 필요한 웹앱을 직접 만들고 교실에 적용할 수 있도록 안내하는 실전형 바이브코딩 입문서입니다. “이런 앱 하나 있으면 수업이 훨씬 편할 텐데.” “우리 반 학생들에게 딱 맞는 학습 게임을 직접 만들 수 없을까?” “학급 운영에 필요한 프로그램을 내 마음대로 바꿔 쓸 수 있다면?” 예전에는 이런 생각이 들어도 개발자에게 의뢰하거나 이미 만들어진 서비스를 찾아야 했습니다. 하지만 생성형 AI와 바이브코딩의 등장으로 상황이 달라졌습니다. 이제 교사가 아이디어만 가지고 있어도 AI와 대화하며 직접 웹앱을 만들 수 있습니다. 문제는 “AI에게 무엇을, 어떻게 요청해야 하는가?”입니다. 이 책은 그 어려움을 ‘밀키트’로 해결합니다. 요리 밀키트에 필요한 재료와 조리법이 들어 있듯이, 이 책의 바이브코딩 밀키트에는 앱을 만드는 데 필요한 요구사항과 제작 지시가 준비되어 있습니다. 선생님은 밀키트를 가져와 러버블(Lovable)이나 클로드 코드(Claude Code)에 넣고 제작을 요청한 뒤 결과를 확인하고 필요한 부분을 한 줄씩 다듬어 가면 됩니다. 실제 본문에서는 밀키트 파일을 불러와 “이대로 만들어줘”라고 요청해 앱을 만드는 과정까지 단계별로 안내합니다. 책은 쉬운 웹앱부터 시작해 점차 실제 교실에서 활용할 수 있는 앱으로 확장합니다. 러버블로 간단한 학습 게임과 인터랙티브 학습 자료, 학급 운영 도구를 만들어 보고, 클로드 코드에서는 컴퓨터의 작업 폴더 안에서 한국어로 AI와 대화하며 앱을 완성합니다. 특히 클로드 코드 실습에서는 아이디어 출발 → 밀키트 제작 → Claude Code 제작 → 완성 및 활용의 흐름으로 다양한 앱을 직접 만들어 봅니다. 여기서 끝나지 않습니다. 앱을 만드는 것에 그치지 않고 GitHub에 올리고, Firebase를 연결하고, Vercel로 배포하여 실제 교실에 투입하는 과정까지 경험합니다. 표지에서 제시하는 ‘아이디어 찾기 → 밀키트 쓰기 → 폴더 만들기 → 제작해줘! → 미리보기 → 한 줄씩 다듬기 → GitHub 올리기 → Firebase 연결 → Vercel 배포 → 교실 투입!’의 바이브코딩 10단계가 책 전체를 관통하는 실전 제작 과정입니다. 또한 교과 학습과 학급 운영 현장에서 나온 실제 아이디어를 앱으로 바꾸는 과정을 보여 줍니다. 예를 들어 국어의 유의어·반의어 학습을 게임으로 만들거나, 수학의 삼각형과 사각형 내각 문제를 이야기와 게임으로 바꾸는 등 ‘교실의 문제 발견 → 아이디어 → 앱’으로 이어지는 사고 과정을 경험할 수 있습니다. 코드를 공부하기 위해 바이브코딩을 배우는 것이 아닙니다. 우리 반에 필요한 것을 직접 만들기 위해 바이브코딩을 시작합니다. 이 책 한 권이면 “앱을 사용하는 교사”에서 한 걸음 더 나아가 “우리 반에 필요한 앱을 직접 만드는 교사”로 바이브코딩의 첫걸음을 시작할 수 있습니다. 무궁무진 클래스 VVIP 자료실 이용 방법은 이 책의 11~12쪽을 참고합니다. 무궁무진 클래스(www.mumuclass.kr) 이용 방법은 9쪽을 참고합니다.

CHAPTER 0 왜 지금 바이브코딩인가 01 모든 일에는 운명이 존재합니다 02 100개를 만들기까지의 시간을 돌아봅니다 03 어째서 바이브코딩을 해야 하는지 살펴봅니다 04 이 책을 어떻게 활용하실지 안내드립니다 CHAPTER 1 환경 세팅 01 Lovable (러버블) -Lovable이란 무엇인가 -가입하기 -대시보드 확인하기 -크레딧 관리 -알아둘 핵심 기능 - Visual edits와 시계 아이콘 -Lovable 세팅 완료 02 Claude (클로드) -왜 Claude인가 -Claude의 세 얼굴 -가입하기 -무료·유료 차이 -대화창 둘러보기 -알아둘 핵심 - CLAUDE.md -claude.ai에서 CLAUDE.md 만드는 흐름 -Claude 세팅 완료 03 Claude Code (클로드 코드) -Claude Code란 무엇인가 -Claude 데스크톱 앱 설치하기 -첫 작업 폴더 시작하기 -Claude Code 웹버전 -Claude Code 세팅 완료 04 Firebase (파이어베이스) -Firebase란 무엇인가 -가입하기 -프로젝트 만들기 -앱과 연결하기 -무료 한도 - 학교용으로 충분한가 -알아둘 핵심 - 데이터 구조 한 번만 짚기 -Firebase 세팅 완료 05 Vercel (버셀) -Vercel이란 무엇인가 -가입하기 - GitHub 계정으로 -대시보드 확인하기 -무료 한도 - 학교용으로 쓸 때 -알아둘 핵심 - GitHub 자동 배포 흐름 -Vercel 세팅 완료 06 GitHub (깃허브) -GitHub이란 무엇인가 -가입하기 -대시보드 확인하기 -저장소가 만들어지는 흐름 -Claude Code와 GitHub은 어떻게 만나는가 -GitHub 세팅 완료 07 Gemini (제미나이) -Gemini란 무엇인가 -가입하기 -러버블 밀키트 만들기 - Gemini의 첫 번째 활용 -이미지 및 에셋 생성하기 - 좋은 프롬프트 만들기 -동일 주인공·동일 배경 유지하기(핵심) -캔바로 다듬기 -이미지 저장하기 -Gemini와 캔바 세팅 완료 -이 장 요약 설명 CHAPTER 2 러버블로 5가지 앱 만들기 01 지도 탐험 보드게임: 사회-지도의 읽기와 활용 -아이디어의 출발점 -지도 탐험 보드게임 밀키트 -러버블에서 만들기 -완성하고 활용하기 02 토끼를 구해줘: 국어-낱말의 관계(유의어·반의어) -아이디어의 출발점 -토끼를 구해줘 밀키트 -러버블에서 만들기 -완성하고 활용하기 03 누가 내 음식을 먹었는가?: 수학-삼각형과 사각형의 내각 -아이디어의 출발점 -누가 내 음식을 먹었는가? 밀키트 -러버블에서 만들기 -완성하고 활용하기 04 나를 막을 순 없다: 수학-각도 -아이디어의 출발점 -나를 막을 순 없다 밀키트 -러버블에서 만들기 -완성하고 활용하기 05 우주 수학 탐험대: 수학-곱셈과 나눗셈 -아이디어의 출발점 -우주 수학 탐험대 밀키트 -러버블에서 만들기 -완성하고 활용하기 -이 장 요약 설명 CHAPTER 3 클로드 코드로 10가지 앱 만들기 01 뚝딱타이머: 우리 반 수업용 큰 숫자 타이머 -아이디어의 출발점 -뚝딱타이머 밀키트 -Claude Code에서 만들기 -완성하고 활용하기 02 뚝딱신호등: 활동상태를 알리는 3색 신호등 -아이디어의 출발점 -뚝딱신호등 밀키트 -Claude Code에서 만들기 -완성하고 활용하기 03 뚝딱시계: 시각·날짜·교시를 한눈에 보여주는 교실 시계 -아이디어의 출발점 -뚝딱시계 밀키트 -Claude Code에서 만들기 -완성하고 활용하기 04 뚝딱번호뽑기: 우리 반 번호 뽑기 -아이디어의 출발점 -뚝딱번호뽑기 밀키트 -Claude Code에서 만들기 -완성하고 활용하기 05 뚝딱밸런스: 둘 중 하나 고르는 토너먼트 투표 -아이디어의 출발점 -뚝딱밸런스 밀키트 -Claude Code에서 만들기 -완성하고 활용하기 06 무무발표: 모두 한 번씩 발표하게 돕는 추첨·기록 도우미 -아이디어의 출발점 -무무발표 밀키트 -Claude Code에서 만들기 -완성하고 활용하기 07 무무방학: 방학 디데이와 날씨·급식 한 화면 -아이디어의 출발점 -무무방학 밀키트 -Claude Code에서 만들기 -완성하고 활용하기 08 무무드럼: 직접 비트를 만드는 음악 시간 드럼 -아이디어의 출발점 -무무드럼 밀키트 -Claude Code에서 만들기 -완성하고 활용하기 09 무무블라인드: 나인 태블릿 하나로 즐기는 2인 추리 게임 -아이디어의 출발점 -무무블라인드 나인 밀키트 -Claude Code에서 만들기 -완성하고 활용하기 10 무무나누기: 두 자리 수 나눗셈 학습 모험 게임 -아이디어의 출발점 -무무나누기 밀키트 -Claude Code에서 만들기 -완성하고 활용하기 -이 장 요약 설명 CHAPTER 4 택배 배달 게임 만들기 : 교과서 한 장에서 시작한 우리 반 지도 게임 01 택배의 위치를 찾아라!: 교과서 한 장에서 시작한 우리 반 지도 게임 -교과서를 펼치면 게임이 보인다 -교과서의 빈틈을 게임으로 메우다 -필요한 앱은 만들면 된다 02 택배 배달 게임 앱 밀키트 살펴보기 -이 게임은 이렇게 설계했습니다 -택배 배달 게임 밀키트 03 택배 배달 게임 앱 따라 만들기 -Gemini에게 밀키트 다듬기 -러버블에 붙여넣고 첫 결과물 받기 -첫 결과물 살펴보기 -수정 프롬프트로 다듬기 -Visual edits로 디테일 다듬기 -앱 공개하기 04 이렇게 활용합니다 -완성본 살펴보기 -우리 반에 도입하기 -여러 기능을 추가하기 -이 장 요약 설명 CHAPTER 5 우리 반 전용 알림장 만들기 : 링크 하나로 여는 우리 반 알림장 01 우리 반만의 알림장 앱 만들기: 링크 하나로 여는 우리 반 알림장 -어머님이 또 전화하셨다 -학부모 휴대폰은 알림 지옥이다 -링크 하나면 된다 02 우리 반 알림장 앱 밀키트 살펴보기 -이 알림장은 이렇게 설계했습니다 -우리 반 알림장 밀키트 03 우리 반 알림장 앱 따라 만들기 -Claude 데스크톱 앱 켜기 -우리 반 알림장 폴더 만들기 -자료실에서 밀키트 받기 -‘제작해줘’로 시작 -1단계 자동 완성 보기 -Firebase 프로젝트 만들기 -Authentication(인증) 설정 -Firestore 만들고 보안 규칙 게시 -웹앱 등록과 키 받기 -학급 만들기 -알림장 작성과 학생 명단 -학부모 시뮬레이션 -Vercel 배포 (PC 이름 한글 오류) -도메인 추가와 모바일 검증 04 이렇게 활용합니다 -완성본 살펴보기 -우리 반에 도입하기 -여러 기능을 추가하기 -이 장 요약 설명 CHAPTER 6 이세계수학전설 게임 만들기 : 풀수록 빠져드는 수학 모험 게임 01 이세계수학전설 풀수록 빠져드는 수학 모험 게임 -학생들에게 안 먹히는 어느 수학 시간 -시중 학습 게임도 학생 입맛엔 안 맞습니다 -학생이 보스를 잡고 돌아온 어느 금요일 02 이세계수학전설 앱 밀키트 살펴보기 -이 게임은 이렇게 설계했습니다 03 이세계수학전설 앱 따라 만들기 -준비하기 -게임이 일단 돌아가는지 확인하기 -로그인 없이 게스트로 작동 확인 -에셋 채우고 진짜 게임 모습 보기 -게임 화면 다시 열기 -검증용 버튼 만들어 확인하고 제거하기 -Firebase 연결하고 학급 만들기 -콘솔에서 Authentication·Firestore·Rules 켜기 -인터넷에 올려서 학생 태블릿에서 작동시키기 04 이렇게 활용합니다 -완성본 살펴보기 -우리 반에 도입하기 -여러 기능을 추가하기 -이 장 요약 설명 CHAPTER 7 펑캘린더 만들기 : 끝나면 사라지는 모임 캘린더 01 펑캘린더 끝나면 사라지는 모임 캘린더 -개인 캘린더에 쌓이지 않아야 할 일정들 -영구 보존용 캘린더와 만료되는 캘린더는 다른 것 02 펑캘린더 앱 밀키트 살펴보기 -이 앱은 이렇게 설계했습니다 03 펑캘린더 앱 따라 만들기 -준비하기 -1단계: 골격 자동 완성 -Firebase 프로젝트 만들기 -Authentication: 구글 로그인 켜기 -Firestore Database 설정 -firebaseConfig 붙여넣기 -방 만들기 -Firestore 보안 규칙 게시 -다시 방 만들기: 골격 확인 -2단계: 캘린더·한줄톡 채우기 가이드 -동작 확인 - 일정·한줄톡 -멤버 2명 입장 시뮬레이션 -버셀로 학년 동료 휴대폰에 배포하기 -함께 디버깅하기: unauthorized-domain -배포 사이트에서 새 방 만들어 보기 -디자인 리뉴얼: 우리 톤으로 04 이렇게 활용합니다 -완성본 살펴보기 -우리 학교에 도입하기 -여러 기능을 추가하기 -이 장 요약 설명 CHAPTER 8 디스코뱅크 학급 경제 시스템 만들기 : 우리 반 디지털 경제 시스템 01 디스코뱅크 우리 반 디지털 경제 시스템 -학생들에 둘러싸인 어느 금요일 -시중 앱도 결국 선생님이 입력자 -학생 손에 돌려준 학급 경제 02 디스코뱅크 앱 밀키트 살펴보기 -이 앱은 이렇게 설계했습니다 03 디스코뱅크 앱 따라 만들기 -준비하기 -1단계: 골격 자동 완성 보기 -2단계: 상점과 학생 명단 추가 -GAS와 구글 시트 연결하기 -URL을 앱에 연결하고 동작 확인 -함께 디버깅하기 -진짜 학급 경제 흐름: 학생부터 시트까지 -디자인 리뉴얼: 우리 반 톤으로 -Vercel(버셀)로 학생 태블릿에 배포 04 이렇게 활용합니다 -완성본 살펴보기 -우리 반에 도입하기 -여러 기능을 추가하기 -이 장 요약 설명 부록 부록 1 무무요정의 비밀 족보 - 용어도감, 비법학습지, 디자인 프롬프트 부록 2 무무클래스 100앱 도감