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앱 도감