본문으로 바로가기
태극기이 누리집은 대한민국 공식 전자정부 누리집입니다.
요즘 교사를 위한 웹앱 만들기 with 바이브 코딩 - 평면표지(2D 앞표지)
요즘 교사를 위한 웹앱 만들기 with 바이브 코딩 - 입체표지(3D 표지)
요즘 교사를 위한 웹앱 만들기 with 바이브 코딩 - 2D 뒤표지

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

코딩 한 줄 몰라도 대화만으로 완성하고 배포하는 우리 반 웹앱 | 2022 개정 교육과정 반영, 실습 프롬프트·완성 코드 제공


  • ISBN-13
    979-11-7579-087-2 (93000)
  • 출판사 / 임프린트
    한빛앤(주) / 한빛미디어
  • 정가
    22,000 원 확정정가
  • 발행일
    2026-09-10
  • 출간상태
    출간
  • 저자
    이상선 , 김진관 , 이대형
  • 번역
    -
  • 메인주제어
    인공지능
  • 추가주제어
    초등학교 , 중학교 , 교육장비, 교육공학, CAL
  • 키워드
    #인공지능 #초등학교 #중학교 #교육장비, 교육공학, CAL #바이브 코딩 #웹앱 #에듀테크 #생성형AI #노코드 #교사 #2022 개정 교육과정 #제미나이 #러버블 #커서 #안티그래비티 #깃허브 #버셀 #수파베이스 #구글AI스튜디오 #클로드코드
  • 도서유형
    종이책, 무선제본
  • 대상연령
    모든 연령, 성인 일반 단행본
  • 도서상세정보
    183 * 235 mm, 288 Page

책소개

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

본문인용

-

서평

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


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


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


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

저자소개

저자 : 이상선
㈜비상교육에서 공교육 현장 전략 분석과 기획을 담당하며, 트라이디스·그라운드 등 교육 플랫폼을 기획·개발했다. 교사개발자 그룹 틸더스(TUILDER)를 창설했고 '라이프오브파이'라는 필명으로 활동 중이다.
저자 : 김진관
대전둔천초등학교 교사. T.R.I.P.O.D 네트워크 초대 회장이자 대전 AI교육 교사 커뮤니티 'AI 티처스쿨'을 설립한 대표교사로, 2023 대한민국 정보교육상을 수상했다. 『요즘 교사를 위한 AI 디지털 수업 설계 가이드』 외 10권을 공저했다.
저자 : 이대형
미림마이스터고등학교 교사. 숙명여자대학교 교육대학원에서 AI융합교육 석사를 우수논문상과 함께 마쳤고, 제19회 디지털교육연구대회 전국 1등급 교육부장관상을 대표수상했다.
  • (54866) 전북특별자치도 전주시 덕진구 중동로 63
출판사가 아닌
"출판유통통합전산망" 고객지원센터입니다.

고객지원센터 원격지원

평일 09:00~18:00(휴게 12:00~13:00)

출판사 자체 업무·계약·판매 등에 대한 문의는 해당 출판사로 문의해 주세요.
상단으로 이동 상단으로 이동