홈앤서비스 SK BROADBAND

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