요즘 교사를 위한 바이브코딩 밀키트 100 with 클로드 코드, 러버블
복붙하면 진짜 만들어지는 우리반 앱
Regular price
$22.25
Sale price
Regular price
Shipping calculated at checkout.
✈️
Estimated delivery date 예상 배송일
Standard Shipping
불러오는 중...
주문일로부터 8-12 영업일
Express Shipping
불러오는 중...
주문일로부터 6-8 영업일
코딩을 몰라도 괜찮습니다. 필요한 앱을 떠올리고, 밀키트를 넣고, "이대로 만들어줘!"라고 하면 시작됩니다.
『요즘 교사를 위한 바이브코딩 밀키트 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쪽을 참고합니다.
『요즘 교사를 위한 바이브코딩 밀키트 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쪽을 참고합니다.
Couldn't load pickup availability
출판사 리뷰
출판사 리뷰
"선생님, 필요한 앱이 없다면 이제 직접 만들어 쓰세요!"
생성형 AI는 이제 글과 이미지를 만드는 단계를 넘어 '내가 원하는 프로그램을 만들어 주는 AI'로 빠르게 진화하고 있습니다. 그리고 그 변화의 중심에 '바이브코딩(Vibe Coding)'이 있습니다.
하지만 코딩을 처음 접하는 교사에게 바이브코딩은 여전히 어렵게 느껴질 수 있습니다.
"무엇부터 만들어야 하지?"
"AI에게 뭐라고 말해야 하지?"
"코드를 하나도 모르는데 정말 앱을 만들 수 있을까?"
"만든 앱을 학생들이 실제로 사용할 수 있을까?"
『요즘 교사를 위한 바이브코딩 밀키트 100』은 바로 이런 선생님을 위해 만들어졌습니다.
첫째. 코딩보다 먼저 '교실의 문제'에서 시작합니다
이 책은 프로그래밍 문법부터 가르치지 않습니다.
수업에서 반복되는 불편, 학생들이 어려워하는 학습 내용, 학급 운영에서 필요한 기능처럼 교사가 매일 만나는 문제에서 앱의 아이디어를 찾습니다.
한 차시 학습 게임, 자동 채점 퀴즈, 인터랙티브 학습 자료, 좌석 배치판, 모둠 활동 도구, 학급 알림판 등 러버블이 잘 어울리는 활용 사례도 교실을 중심으로 설명합니다.
그래서 이 책에서 중요한 질문은
"코드를 어떻게 짜지?"가 아니라 "우리 반에 무엇이 필요하지?"입니다.
둘째. '밀키트'를 복붙하면 앱 제작이 시작됩니다
바이브코딩 초보자에게 가장 어려운 것은 AI에게 앱을 어떻게 설명해야 하는지입니다.
이 책은 저자들이 실제 교육용 웹앱을 개발하며 쌓은 경험을 '바이브코딩 밀키트' 형태로 제공합니다. 준비된 밀키트를 러버블이나 클로드 코드에 넣고 제작을 요청하면 AI가 앱 제작을 시작합니다.
따라서 처음부터 복잡한 프롬프트를 설계하거나 코드를 한 줄 한 줄 입력할 필요가 없습니다.
밀키트를 활용해 먼저 만들어 보고 → 결과를 확인하고 → 필요한 부분을 수정하면서 원리를 익히는 방식입니다. 코딩 경험이 없는 교사가 바이브코딩을 시작하기에 특히 실용적인 구조입니다.
셋째. 러버블에서 시작해 클로드 코드로 확장합니다
처음부터 어려운 개발 환경에 들어가지 않습니다.
러버블로 간단한 웹앱 제작 흐름을 경험한 다음, 클로드 코드로 넘어가 컴퓨터 안의 작업 폴더에서 AI와 대화하며 본격적으로 앱을 만들어 봅니다.
특히 클로드 코드 챕터에서는 10가지 앱을 차례로 만들면서 동일한 제작 흐름을 반복하기 때문에, 여러 실습을 거칠수록 자연스럽게 바이브코딩의 패턴을 익힐 수 있습니다.
넷째. '만들었다!'에서 끝내지 않고 실제 교실까지 가져갑니다
웹앱은 만들어 놓는 것보다 실제로 학생들과 사용할 수 있어야 의미가 있습니다.
그래서 이 책은 앱 제작 이후의 과정까지 다룹니다.
아이디어 찾기 → 밀키트 쓰기 → 폴더 만들기 → 제작 요청 → 미리보기 → 수정 → GitHub → Firebase → Vercel → 교실 투입
이 10단계를 따라가며 앱을 만들고 저장하고 연결하고 배포하는 전체 흐름을 경험합니다. 부록에서도 GitHub와 Vercel의 사용 순서를 한 페이지로 다시 정리해 필요할 때 빠르게 찾아볼 수 있도록 구성했습니다.
다섯째. 막히는 순간 다시 펼쳐 보는 '무무요정의 비밀 족보'
바이브코딩을 하다 보면 프롬프트, 에셋, 배포, Firebase, GitHub, Vercel처럼 처음 보는 용어와 예상하지 못한 오류를 만나게 됩니다.
특별부록 1 '무무요정의 비밀 족보'에는 이런 순간을 위한 실전 자료를 담았습니다.
용어도감, 바이브코딩 10단계, 클로드 코드에서 자주 막히는 상황 8가지와 해결법, GitHub·Vercel 사용 순서, 학생용 앱 기획 학습지, 디자인 프롬프트 등을 정리했습니다. 특히 같은 앱도 분위기와 배치를 바꾸어 전혀 다른 모습으로 만들 수 있도록 디자인 활용 자료까지 제공합니다.
여섯째. 책 밖에서도 이어지는 '무궁무진 클래스 VVIP'
이 책의 또 하나의 특징은 책을 읽고 끝나는 것이 아니라 실제 바이브코딩 자료와 연결된다는 점입니다.
책 구매 독자는 인증을 통해 무궁무진 클래스 VVIP 혜택을 이용할 수 있으며, 전체 앱 밀키트와 전용 자료 등을 활용할 수 있도록 구성되어 있습니다. 책에서 소개하는 밀키트를 직접 받아 실습할 수 있어, 설명만 읽는 책이 아니라 '책 + 실습 자료'가 연결된 학습 환경을 제공합니다.
일곱째. 특별부록 2 '무무클래스 100앱 도감'으로 아이디어를 확장합니다
"무엇을 만들어야 할지 모르겠다"는 것도 바이브코딩 입문자가 만나는 큰 장벽입니다.
특별부록 2에는 '무무클래스 100앱 도감'을 수록해 바이브용샘과 불곰코끼리샘이 만든 교실 앱 100개를 한눈에 살펴볼 수 있도록 했습니다. 이미 만들어진 다양한 사례를 둘러보다 보면 "이 앱을 우리 반에 맞게 바꿔 보면 어떨까?"라는 새로운 아이디어가 자연스럽게 이어집니다.
코딩을 배우는 책이 아니라, '만들 수 있다는 경험'을 주는 책!
이 책의 두 저자는 모두 교실에서 직접 바이브코딩을 활용해 온 현직 교사입니다. 한 저자는 코딩을 전공하지 않았지만 생성형 AI를 계기로 교실 앱을 직접 개발하기 시작했고, 다른 저자는 생성형 AI와 바이브코딩을 활용해 100여 개의 교육용 웹앱을 개발했습니다. 그래서 이 책의 출발점도 개발자의 시선이 아니라 "교사에게 지금 무엇이 필요한가?"에 맞춰져 있습니다.
코드를 외우지 않아도 됩니다.
완벽한 프롬프트를 처음부터 만들 필요도 없습니다.
아이디어가 떠오르면 밀키트를 꺼내고, AI와 대화하며 만들어 보고, 우리 반에 맞게 고쳐서 교실에 적용하면 됩니다.
『요즘 교사를 위한 바이브코딩 밀키트 100』은 바이브코딩을 어렵게 공부하는 책이 아니라, 교사가 자신의 아이디어를 실제 웹앱으로 만들어 보는 첫 경험을 제공하는 책입니다.
이제 교사에게 필요한 도구는, 교사가 직접 만듭니다.
생성형 AI는 이제 글과 이미지를 만드는 단계를 넘어 '내가 원하는 프로그램을 만들어 주는 AI'로 빠르게 진화하고 있습니다. 그리고 그 변화의 중심에 '바이브코딩(Vibe Coding)'이 있습니다.
하지만 코딩을 처음 접하는 교사에게 바이브코딩은 여전히 어렵게 느껴질 수 있습니다.
"무엇부터 만들어야 하지?"
"AI에게 뭐라고 말해야 하지?"
"코드를 하나도 모르는데 정말 앱을 만들 수 있을까?"
"만든 앱을 학생들이 실제로 사용할 수 있을까?"
『요즘 교사를 위한 바이브코딩 밀키트 100』은 바로 이런 선생님을 위해 만들어졌습니다.
첫째. 코딩보다 먼저 '교실의 문제'에서 시작합니다
이 책은 프로그래밍 문법부터 가르치지 않습니다.
수업에서 반복되는 불편, 학생들이 어려워하는 학습 내용, 학급 운영에서 필요한 기능처럼 교사가 매일 만나는 문제에서 앱의 아이디어를 찾습니다.
한 차시 학습 게임, 자동 채점 퀴즈, 인터랙티브 학습 자료, 좌석 배치판, 모둠 활동 도구, 학급 알림판 등 러버블이 잘 어울리는 활용 사례도 교실을 중심으로 설명합니다.
그래서 이 책에서 중요한 질문은
"코드를 어떻게 짜지?"가 아니라 "우리 반에 무엇이 필요하지?"입니다.
둘째. '밀키트'를 복붙하면 앱 제작이 시작됩니다
바이브코딩 초보자에게 가장 어려운 것은 AI에게 앱을 어떻게 설명해야 하는지입니다.
이 책은 저자들이 실제 교육용 웹앱을 개발하며 쌓은 경험을 '바이브코딩 밀키트' 형태로 제공합니다. 준비된 밀키트를 러버블이나 클로드 코드에 넣고 제작을 요청하면 AI가 앱 제작을 시작합니다.
따라서 처음부터 복잡한 프롬프트를 설계하거나 코드를 한 줄 한 줄 입력할 필요가 없습니다.
밀키트를 활용해 먼저 만들어 보고 → 결과를 확인하고 → 필요한 부분을 수정하면서 원리를 익히는 방식입니다. 코딩 경험이 없는 교사가 바이브코딩을 시작하기에 특히 실용적인 구조입니다.
셋째. 러버블에서 시작해 클로드 코드로 확장합니다
처음부터 어려운 개발 환경에 들어가지 않습니다.
러버블로 간단한 웹앱 제작 흐름을 경험한 다음, 클로드 코드로 넘어가 컴퓨터 안의 작업 폴더에서 AI와 대화하며 본격적으로 앱을 만들어 봅니다.
특히 클로드 코드 챕터에서는 10가지 앱을 차례로 만들면서 동일한 제작 흐름을 반복하기 때문에, 여러 실습을 거칠수록 자연스럽게 바이브코딩의 패턴을 익힐 수 있습니다.
넷째. '만들었다!'에서 끝내지 않고 실제 교실까지 가져갑니다
웹앱은 만들어 놓는 것보다 실제로 학생들과 사용할 수 있어야 의미가 있습니다.
그래서 이 책은 앱 제작 이후의 과정까지 다룹니다.
아이디어 찾기 → 밀키트 쓰기 → 폴더 만들기 → 제작 요청 → 미리보기 → 수정 → GitHub → Firebase → Vercel → 교실 투입
이 10단계를 따라가며 앱을 만들고 저장하고 연결하고 배포하는 전체 흐름을 경험합니다. 부록에서도 GitHub와 Vercel의 사용 순서를 한 페이지로 다시 정리해 필요할 때 빠르게 찾아볼 수 있도록 구성했습니다.
다섯째. 막히는 순간 다시 펼쳐 보는 '무무요정의 비밀 족보'
바이브코딩을 하다 보면 프롬프트, 에셋, 배포, Firebase, GitHub, Vercel처럼 처음 보는 용어와 예상하지 못한 오류를 만나게 됩니다.
특별부록 1 '무무요정의 비밀 족보'에는 이런 순간을 위한 실전 자료를 담았습니다.
용어도감, 바이브코딩 10단계, 클로드 코드에서 자주 막히는 상황 8가지와 해결법, GitHub·Vercel 사용 순서, 학생용 앱 기획 학습지, 디자인 프롬프트 등을 정리했습니다. 특히 같은 앱도 분위기와 배치를 바꾸어 전혀 다른 모습으로 만들 수 있도록 디자인 활용 자료까지 제공합니다.
여섯째. 책 밖에서도 이어지는 '무궁무진 클래스 VVIP'
이 책의 또 하나의 특징은 책을 읽고 끝나는 것이 아니라 실제 바이브코딩 자료와 연결된다는 점입니다.
책 구매 독자는 인증을 통해 무궁무진 클래스 VVIP 혜택을 이용할 수 있으며, 전체 앱 밀키트와 전용 자료 등을 활용할 수 있도록 구성되어 있습니다. 책에서 소개하는 밀키트를 직접 받아 실습할 수 있어, 설명만 읽는 책이 아니라 '책 + 실습 자료'가 연결된 학습 환경을 제공합니다.
일곱째. 특별부록 2 '무무클래스 100앱 도감'으로 아이디어를 확장합니다
"무엇을 만들어야 할지 모르겠다"는 것도 바이브코딩 입문자가 만나는 큰 장벽입니다.
특별부록 2에는 '무무클래스 100앱 도감'을 수록해 바이브용샘과 불곰코끼리샘이 만든 교실 앱 100개를 한눈에 살펴볼 수 있도록 했습니다. 이미 만들어진 다양한 사례를 둘러보다 보면 "이 앱을 우리 반에 맞게 바꿔 보면 어떨까?"라는 새로운 아이디어가 자연스럽게 이어집니다.
코딩을 배우는 책이 아니라, '만들 수 있다는 경험'을 주는 책!
이 책의 두 저자는 모두 교실에서 직접 바이브코딩을 활용해 온 현직 교사입니다. 한 저자는 코딩을 전공하지 않았지만 생성형 AI를 계기로 교실 앱을 직접 개발하기 시작했고, 다른 저자는 생성형 AI와 바이브코딩을 활용해 100여 개의 교육용 웹앱을 개발했습니다. 그래서 이 책의 출발점도 개발자의 시선이 아니라 "교사에게 지금 무엇이 필요한가?"에 맞춰져 있습니다.
코드를 외우지 않아도 됩니다.
완벽한 프롬프트를 처음부터 만들 필요도 없습니다.
아이디어가 떠오르면 밀키트를 꺼내고, AI와 대화하며 만들어 보고, 우리 반에 맞게 고쳐서 교실에 적용하면 됩니다.
『요즘 교사를 위한 바이브코딩 밀키트 100』은 바이브코딩을 어렵게 공부하는 책이 아니라, 교사가 자신의 아이디어를 실제 웹앱으로 만들어 보는 첫 경험을 제공하는 책입니다.
이제 교사에게 필요한 도구는, 교사가 직접 만듭니다.
목차
목차
==========================================
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앱 도감
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앱 도감
저자
저자
고상용 (바이브용샘)
이제는 일단 생각나면 만들어 봅니다.
광주교육대학교 미술과를 졸업하고 미술교육 석사를 마친 18년 차 초등교사입니다. 코딩을 전공하지 않았지만, 생성형 AI를 만난 뒤 교실에 필요한 앱을 직접 만들기 시작했습니다. 학급경제 플랫폼 'Di.S.co'를 개발해 전라남도과학전람회에서 우수상을 받았고, 이를 비롯한 여러 교실 앱을 만들어 운영하고 있습니다. 교사들이 만든 앱을 함께 나누는 커뮤니티 '무궁무진 클래스'와 함께하며, T.O.U.C.H 교사단과 전남 2030교실에서 미래 교실을 연구합니다. 코딩을 몰라도 우리 반에 딱 맞는 도구는 직접 만들 수 있다는 것을, 이 책으로 증명하고 싶습니다.
인스타그램: @yongssam.dev
네이버 블로그: 딸깍교실
(저서)
요즘 교사를 위한 바이브코딩 밀키트 100 with 클로드 코드, 러버블 (2026. 08 앤써북)
이제는 일단 생각나면 만들어 봅니다.
광주교육대학교 미술과를 졸업하고 미술교육 석사를 마친 18년 차 초등교사입니다. 코딩을 전공하지 않았지만, 생성형 AI를 만난 뒤 교실에 필요한 앱을 직접 만들기 시작했습니다. 학급경제 플랫폼 'Di.S.co'를 개발해 전라남도과학전람회에서 우수상을 받았고, 이를 비롯한 여러 교실 앱을 만들어 운영하고 있습니다. 교사들이 만든 앱을 함께 나누는 커뮤니티 '무궁무진 클래스'와 함께하며, T.O.U.C.H 교사단과 전남 2030교실에서 미래 교실을 연구합니다. 코딩을 몰라도 우리 반에 딱 맞는 도구는 직접 만들 수 있다는 것을, 이 책으로 증명하고 싶습니다.
인스타그램: @yongssam.dev
네이버 블로그: 딸깍교실
(저서)
요즘 교사를 위한 바이브코딩 밀키트 100 with 클로드 코드, 러버블 (2026. 08 앤써북)
Payment & Security
Payment methods
Your payment information is processed securely. We do not store credit card details nor have access to your credit card information.

