요즘 교사를 위한 웹앱 만들기 with 바이브 코딩

이상선,김진관,이대형,윤신영,김상섭

저자:이상선
㈜비상교육에서공교육현장전략분석과기획을담당하며,트라이디스·그라운드등교육플랫폼을기획·개발했다.교사개발자그룹틸더스(TUILDER)를창설했고'라이프오브파이'라는필명으로활동중이다.

저자:김진관
대전둔천초등학교교사.T.R.I.P.O.D네트워크초대회장이자대전AI교육교사커뮤니티'AI티처스쿨'을설립한대표교사로,2023대한민국정보교육상을수상했다.『요즘교사를위한AI디지털수업설계가이드』외10권을공저했다.

저자:이대형
미림마이스터고등학교교사.숙명여자대학교교육대학원에서AI융합교육석사를우수논문상과함께마쳤고,제19회디지털교육연구대회전국1등급교육부장관상을대표수상했다.

저자:윤신영
인천동암초등학교교사.AI-POWERED페다고지연구모임대표교사이자제1회미래엔우석교사상베스트티처상수상자로,'AI&교육인사이트'인스타그램채널을운영한다.

저자:김상섭
대구대남초등학교교사.T.R.I.P.O.D네트워크회장(2025·2026)으로,2025디지털기반교육혁신유공교육부장관표창과2023에듀테크소프트랩우수수업사례최우수교육부장관상을받았다.

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

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

　01혜심선생님의현실적인고민
　02좋은문제란무엇일까?
　03문제를기능으로,생각전환하기

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

　01LLM으로만드는단일파일웹앱프로그램
　02웹앱을구성하는요소알아보기

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

　01글쓰기데이터를수집하는방법
　02Lovable을이용한서비스개발맛보기
　03Lovable을사용한서비스배포

Part02.앱에지식을더하다

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

　01구글AIStudio로시작하는바이브코딩
　02서비스들의연결고리
　03오픈API를활용한급식조회앱만들기

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

　01실시간사물인식AI영어학습앱제작하기
　02AI글쓰기피드백앱만들기

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

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

　01비전문가도데이터베이스를구축할수있다고?
　02Supabase를활용한To-Do앱만들기
　03허용된사용자만볼수있는안전한앱

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

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

　01AntigravityIDE시작하기
　02로컬과리모트(웹서버)는무엇이다를까?
　03Node.js설치와개발서버실행하기
　04MCP로Supabase실시간협업보드만들기

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

　01Git과GitHub로프로젝트관리하기
　02GitHub와Vercel로자동배포하기

부록A.그밖의인공지능도구들-내컴퓨터안의AI개발작업실,Cursor
부록B.터미널에서일하는CLI기반도구,ClaudeCode

검색해서쓰던교사에서,직접만드는교사로

교실에는시중앱으로채워지지않는불편이많다.우리반에만맞는칭찬보드,우리학교급식을불러오는알리미,모둠이함께쓰는실시간보드-필요한도구를검색만하던교사가,이제대화만으로직접만든다.이책은코드한줄몰라도자연어로지시해실제작동하는웹앱을완성하도록이끄는,국내첫교사대상바이브코딩실전서다.

'도구소개'가아니라'하나를끝까지'만든다

가장큰차별점은완주다.도구사용법을나열하는데서멈추지않고,교실의불편을문제로정의하고→한장의PRD로기획하고→AI로앱을만들고→데이터베이스를연동해인터넷에배포하기까지,하나의웹서비스가완성되는전과정을담았다.화면만그럴듯한앱이아니라데이터가저장되고링크로공유되는'진짜서비스'를손에넣는다.

따라하면완성되고,원리까지남는다

각장은장도입미리보기부터화면과함께하는단계별실습,개발개념을교사눈높이로풀어주는'VIBEPLUS'까지일정한흐름으로반복된다.실제화면스크린샷과그대로입력하는프롬프트가함께제시되어,에듀테크가낯선교사도화면을따라하면결과물이완성되고,왜그렇게되는지원리까지이해하게된다.실습프롬프트와완성소스코드는GitHub로모두제공하며,웹브라우저만있으면Mac·Windows어디서나따라할수있다.

*이런분들께권합니다

_코딩은몰라도,우리반에필요한도구를직접만들고싶은교사
_기존앱으로는채워지지않는우리교실만의기능이필요한교사
_반복되는교실속불편함을스스로해결하고싶은교사