요즘 교사를 위한 웹앱 만들기 with 바이브 코딩: 2022 개정 교육과정 반영

AI 시대, 교사가 우리 반 도구를 스스로 만드는 첫 바이브 코딩 실전서

★ 칭찬 보드·급식 알리미·협업 보드 등 우리 반에 바로 쓰는 앱 수록 ★

 

AI에게 물으면 코드는 나오지만, 정작 '우리 반에 꼭 맞는 도구'는 검색으로 찾아지지 않는다. 『요즘 교사를 위한 웹앱 만들기 with 바이브 코딩』은 코딩 경험이 없는 교사도 자연어로 대화하며 실제 작동하는 웹앱을 직접 만들도록 설계했다. 막연한 아이디어를 AI가 이해하는 한 장의 PRD(제품 요구 사항 문서)로 정리하는 법부터, 제미나이·Lovable·Cursor·안티그래비티 같은 도구로 앱을 만들고, GitHub·Vercel·Supabase로 데이터베이스를 연동해 인터넷에 배포하기까지 하나의 웹 서비스를 완성하는 전 과정을 담았다.

'도구 소개'로 끝나는 기존 입문서와 달리, 이 책은 우리 반 칭찬 보드, 급식 알리미, 글쓰기 SNS, 실시간 협업 보드, 사물 인식 AI 학습 앱을 직접 만들고 링크 하나로 학생과 공유하는 데까지 이끈다. 실습에 쓰는 프롬프트와 완성 소스 코드를 모두 제공하고, Mac·Windows 어디서나 웹 브라우저만 있으면 따라 할 수 있어, 개발자가 아니어도 우리 반 앱을 스스로 만드는 가장 쉬운 첫 책이다.

[목 차]

Part 01. 아이디어를 서비스로 전환하는 첫걸음

1장 모든 아이디어는 교실에서 시작된다

 　01 혜심 선생님의 현실적인 고민

 　02 좋은 문제란 무엇일까?

 　03 문제를 기능으로, 생각 전환하기

2장 브라우저에서 동작하는 나의 첫 프로그램

 　01 LLM으로 만드는 단일 파일 웹앱 프로그램

 　02 웹앱을 구성하는 요소 알아보기

3장 AI와 함께 만드는 첫 웹 서비스, Lovable과 웹앱의 개념

 　01 글쓰기 데이터를 수집하는 방법

 　02 Lovable을 이용한 서비스 개발 맛보기

 　03 Lovable을 사용한 서비스 배포

Part 02. 앱에 지식을 더하다

4장 서비스는 혼자가 아니야, API 연동하기

 　01 구글 AI Studio로 시작하는 바이브 코딩

 　02 서비스들의 연결고리

 　03 오픈 API를 활용한 급식 조회 앱 만들기

5장 눈과 귀, 생각을 가진 AI 웹앱 만들기

 　01 실시간 사물 인식 AI 영어 학습 앱 제작하기

 　02 AI 글쓰기 피드백 앱 만들기

Part 03. 앱에 클라우드 기능을 심다

6장 왜 데이터베이스가 필요할까요?

 　01 비전문가도 데이터베이스를 구축할 수 있다고?

 　02 Supabase를 활용한 To-Do 앱 만들기

 　03 허용된 사용자만 볼 수 있는 안전한 앱

Part 04. 로컬 환경에서 진짜 개발자처럼 일하기

7장 내 컴퓨터를 React 개발 서버로 만들기

 　01 Antigravity IDE 시작하기

 　02 로컬과 리모트(웹 서버)는 무엇이 다를까?

 　03 Node.js 설치와 개발 서버 실행하기

 　04 MCP로 Supabase 실시간 협업 보드 만들기

8장 개발부터 배포까지, 내 손으로 완성하기

 　01 Git과 GitHub로 프로젝트 관리하기

 　02 GitHub와 Vercel로 자동 배포하기

부록 A. 그 밖의 인공지능 도구들 - 내 컴퓨터 안의 AI 개발 작업실, Cursor

부록 B. 터미널에서 일하는 CLI 기반 도구, Claude Code