🔎 핵심 요약
AI콘텐츠마케팅연구소 유쌤클래스 김유성 강사는 오산정보고등학에서 화성오산내 초중등학교 보건교사 17명을 대상으로 보건교사 바이브코딩 교육을 진행했습니다.
이번 교육은 2026학년도 보건교사 역량강화를 위한 ‘보건 AI클래스’ 4차시 교육 가운데 마지막 4차시로 진행했습니다.
1차시 AI와 프롬프트, 2차시 AI 이미지 제작, 3차시 AI 영상·음악 제작에 이어 4차시에서는 바이브코딩을 활용한 웹도구 제작을 다루었습니다.
바이브코딩 개념부터 HTML·CSS·JavaScript, UI/UX, Google Apps Script, Google Sheets 연동, 웹앱 배포까지 단계적으로 살펴보고 발표자 뽑기 웹앱과 우리반 자리배치 웹앱 제작 실습을 진행했습니다.
📋 교육 개요
강의주제 2026학년도 보건교사 역량강화를 위한 ‘보건 AI클래스’ 4차시 교육 - 보건교사 바이브코딩
강의대상 화성오산내 초중등학교 보건교사 17명
교육차시 전체 4차시 중 마지막 4차시
교육장소 오산정보고등학
강사 AI콘텐츠마케팅연구소 유쌤클래스 김유성 강사
💡 이번에는 어떤 교육을 진행했을까요?
이번 4차시 교육의 핵심은 생성형 AI에게 자연어로 웹앱의 기능과 디자인을 요청하고, 생성된 코드를 수정·확장하면서 실제 웹도구로 발전시키는 바이브코딩 활용방법을 이해하는 것 이었습니다.
1차시 AI와 프롬프트
2차시 AI 이미지 제작
3차시 AI 영상·음악 제작
4차시 바이브코딩 웹도구 제작
마지막 4차시에서는 단순히 AI에게 코드를 만들어 달라고 요청하는 단계에 머물지 않았습니다.
바이브코딩의 개념과 특징, 장점과 한계를 이해하고, 웹페이지를 구성하는 기본구조와 디자인 용어를 익힌 뒤 AI가 생성한 코드를 확인하고 수정하는 방법까지 연결했습니다.
이후 Google Apps Script와 Google Sheets를 활용해 웹앱을 구성하고 실제로 배포하는 과정까지 살펴보았습니다.
❓ 왜 이 교육이 필요할까요?
바이브코딩을 활용하면 사용자가 원하는 기능과 화면을 자연어로 설명하고, AI가 생성한 코드를 바탕으로 웹도구를 제작할 수 있습니다.
하지만 AI가 코드를 생성해준다고 해서 웹앱 제작 과정 전체를 이해할 필요가 없어지는 것은 아닙니다.
HTML·CSS·JavaScript가 각각 어떤 역할을 하는지, 프론트엔드와 백엔드가 어떻게 다른지, 화면 디자인을 요청할 때 어떤 UI/UX 용어를 사용해야 하는지 기본적인 구조를 이해하면 AI에게 보다 구체적인 요청을 전달할 수 있습니다.
AI에게 정확하게 요청하고, 생성된 결과를 확인하고, 필요한 부분을 수정하면서 웹앱의 완성도를 높이는 과정이 중요합니다.
🧭 이번 교육에서는 무엇을 다루었을까요?
바이브코딩 이해 → 웹 기본구조 이해 → UI/UX 디자인 → AI 웹앱 제작과 개선 → Google Apps Script → Google Sheets 연동 → 실제 웹앱 제작과 배포
1. 바이브코딩의 개념과 특징 이해
바이브코딩 교육은 먼저 AI와 자연어로 소통하면서 웹앱을 제작하는 기본 개념을 이해하는 것 에서 시작했습니다.
기존 코딩과 바이브코딩의 차이를 살펴보고, 바이브코딩의 장점과 한계를 함께 다루었습니다.
싱글턴 프롬프트와 멀티턴 프롬프트를 비교하고, 요구사항을 추가하면서 프롬프트를 고도화하는 방법도 살펴보았습니다.
2. HTML·CSS·JavaScript와 웹앱 기본구조 이해
웹페이지를 구성하는 HTML·CSS·JavaScript의 기본 역할을 살펴보았습니다.
HTML은 구조, CSS는 디자인과 화면 스타일, JavaScript는 기능과 동작을 담당한다는 기본개념을 바탕으로 웹앱 구조를 이해하도록 구성했습니다.
프론트엔드와 백엔드의 차이도 함께 다루었습니다.
3. AI에게 원하는 디자인을 구체적으로 요청하는 방법
Flexbox, CSS Grid, 반응형 디자인, Hero 섹션, 그라디언트, 카드형 UI, 다크모드 등 다양한 UI/UX 용어를 살펴보았습니다.
이러한 디자인 용어를 알고 있으면 단순히 “예쁘게 만들어줘”라고 요청하는 것보다 원하는 화면을 보다 구체적으로 설명할 수 있습니다.
4. 프롬프트를 고도화하며 웹앱 개선하기
바이브코딩에서는 처음 생성된 결과를 확인하고 다시 요청하면서 개선하는 과정 이 중요합니다.
오류 확인, 디버깅, 부분 수정, 기능 추가 등 웹앱을 발전시키는 방법을 다루었습니다.
5. 발표자 뽑기 웹앱 제작 실습
바이브코딩의 기본구조와 디자인 개념을 실제 제작으로 연결하기 위해 발표자 뽑기 웹앱 제작 실습을 진행했습니다.
요구사항 작성 → 결과 생성 → 확인 → 수정 요청 → 기능 개선
6. Google Apps Script 이해와 활용
Google Apps Script의 자동화·통합·확장 기능과 Apps Script 편집기 사용방법을 살펴보았습니다.
새 배포, 배포 관리, 테스트 배포 등 웹앱을 실제로 실행하고 URL로 활용하는 과정도 다루었습니다.
7. Google Sheets를 데이터베이스로 활용하기
Google Sheets를 웹앱에서 활용할 수 있는 데이터 저장공간으로 연결하는 방법을 다루었습니다.
Code.gs의 백엔드 구조와 index.html의 프론트엔드 구조가 Google Sheets와 어떻게 연결되는지 살펴보았습니다.
8. 우리반 자리배치 웹앱 제작 실습
Google Apps Script와 Google Sheets 연동 내용을 실제 제작과정으로 연결하기 위해 우리반 자리배치 웹앱 제작 실습을 진행했습니다.
Code.gs와 index.html을 적용하고, 웹앱을 배포한 뒤 생성된 URL을 활용하는 단계까지 연결했습니다.
💼 교육내용은 실제로 어떻게 활용할 수 있을까요?
교육용 웹도구 제작
학교에서 필요한 기능을 자연어로 정리하고 AI에게 요청해 웹앱 형태로 구현할 수 있습니다.
수업과 교육활동
발표자 뽑기와 같이 수업이나 교육활동에서 필요한 간단한 웹도구를 제작할 수 있습니다.
학급 운영
우리반 자리배치 웹앱처럼 학급 운영에 필요한 기능을 웹앱으로 구성할 수 있습니다.
데이터 활용
Google Sheets와 Apps Script를 연결하여 데이터 기반 웹도구를 구성할 수 있습니다.
웹앱 디자인 개선
Flexbox, CSS Grid, 카드형 UI, 반응형 디자인 등을 활용해 화면을 개선할 수 있습니다.
웹앱 배포
Google Apps Script의 웹앱 배포 기능을 활용하여 웹도구를 URL 형태로 실행할 수 있습니다.
⭐ 이번 교육에서 중요하게 다룬 핵심 포인트
- AI가 코드를 만들어주더라도 기본구조를 이해하는 것이 중요합니다.
HTML·CSS·JavaScript와 프론트엔드·백엔드의 역할을 살펴보았습니다.
- 웹앱은 프롬프트를 발전시키면서 완성도를 높일 수 있습니다.
싱글턴·멀티턴 프롬프트와 프롬프트 고도화 방법을 다루었습니다.
- 디자인도 구체적인 언어로 요청할 수 있어야 합니다.
Flexbox, Grid, 반응형 디자인, Hero 섹션, 카드 UI, 다크모드 등을 다루었습니다.
- AI가 생성한 코드는 확인과 수정 과정이 필요합니다.
오류 확인, 디버깅, 부분 수정, 기능 추가 방법을 다루었습니다. - 실제 웹앱 활용을 위해서는 데이터 연결과 배포까지 이해해야 합니다.
Google Sheets, Apps Script, Code.gs, index.html, 웹앱 배포와 URL 활용방법을 살펴보았습니다.
🙋 이런 분들에게 도움이 되는 교육입니다
- 바이브코딩의 개념부터 웹앱 제작 흐름까지 배우고 싶은 보건교사
- AI를 활용해 학교에서 필요한 웹도구를 직접 제작해보고 싶은 초중등 보건교사
- HTML·CSS·JavaScript를 AI와 함께 활용하는 방법을 이해하고 싶은 보건교사
- Google Sheets와 Apps Script를 연결한 웹앱 제작방법을 배우고 싶은 보건교사
- AI가 생성한 코드를 수정하고 발전시키는 방법을 익히고 싶은 보건교사
❔ 자주 묻는 질문 FAQ
Q1. 보건교사 바이브코딩 교육에서는 무엇을 배우나요?
AI와 자연어로 소통하면서 웹앱을 기획하고 제작하는 방법을 배울 수 있습니다.
바이브코딩 개념, HTML·CSS·JavaScript, UI/UX, 프롬프트 고도화, 디버깅, Google Apps Script, Google Sheets 연동, 웹앱 배포까지 다루었습니다.
Q2. 이번 교육에서는 어떤 웹앱을 만들었나요?
발표자 뽑기 웹앱과 우리반 자리배치 웹앱 제작 실습을 진행했습니다.
Q3. 바이브코딩을 배우려면 HTML이나 JavaScript를 알아야 하나요?
전문 개발자 수준의 지식보다 HTML·CSS·JavaScript가 각각 어떤 역할을 하는지 기본구조를 이해하는 것이 중요합니다.
Q4. Google Apps Script는 어떻게 활용했나요?
Apps Script 편집기와 웹앱 배포방법을 다루고, Google Sheets와 연결하여 웹앱을 구성하는 방법을 살펴보았습니다.
Q5. 바이브코딩으로 만든 웹앱을 실제 학교에서 활용할 수 있나요?
이번 교육에서는 학교에서 활용할 수 있는 웹앱을 직접 제작하고 URL 형태로 배포하는 방법까지 다루었습니다.
🔍 교육현장에서 다시 확인한 점
이번 4차시에서 중요하게 다룬 부분은 코드를 많이 암기하는 것보다 AI에게 무엇을 어떻게 요청하고, 생성된 결과를 어떻게 확인하고 개선할 것인가 였습니다.
HTML·CSS·JavaScript의 역할과 UI/UX 용어, 프론트엔드와 백엔드 구조를 이해하면 AI에게 보다 구체적인 요청을 전달할 수 있습니다.
또한 AI가 생성한 결과를 그대로 사용하는 것이 아니라 오류를 확인하고 필요한 부분을 수정하면서 기능을 발전시키는 과정이 중요합니다.
🎯 마무리
2026학년도 보건교사 역량강화를 위한 보건 AI클래스는 1차시 AI와 프롬프트에서 시작해 이미지, 영상·음악을 거쳐 마지막 4차시 바이브코딩 웹도구 제작으로 이어졌습니다.
AI콘텐츠마케팅연구소 유쌤클래스 김유성 강사는 바이브코딩의 기본개념부터 웹 기술의 기본구조, UI/UX, AI 코드 수정, Google Apps Script와 Google Sheets 연동, 웹앱 제작과 배포까지 단계적으로 다루었습니다.
이번 교육은 생성형 AI를 콘텐츠 생성에 활용하는 영역에서 한 단계 더 나아가, 학교에서 필요한 웹도구를 직접 기획하고 제작하는 방법을 다룬 보건 AI클래스의 마지막 4차시 교육이었습니다.
👨🏫 강사 정보
AI콘텐츠마케팅연구소 유쌤클래스 김유성 강사
김유성 강사는 AI, 콘텐츠 제작, 온라인마케팅을 실제 현장에 적용하는 실무형 교육을 진행하고 있습니다.
교육기관, 공공기관, 기업, 소상공인 등 다양한 교육대상을 대상으로 AI 실무 활용 교육을 진행하고 있습니다.
🔎 핵심 요약
AI콘텐츠마케팅연구소 유쌤클래스 김유성 강사는 오산정보고등학에서 화성오산내 초중등학교 보건교사 17명을 대상으로 보건교사 바이브코딩 교육을 진행했습니다.
이번 교육은 2026학년도 보건교사 역량강화를 위한 ‘보건 AI클래스’ 4차시 교육 가운데 마지막 4차시로 진행했습니다.
1차시 AI와 프롬프트, 2차시 AI 이미지 제작, 3차시 AI 영상·음악 제작에 이어 4차시에서는 바이브코딩을 활용한 웹도구 제작을 다루었습니다.
바이브코딩 개념부터 HTML·CSS·JavaScript, UI/UX, Google Apps Script, Google Sheets 연동, 웹앱 배포까지 단계적으로 살펴보고 발표자 뽑기 웹앱과 우리반 자리배치 웹앱 제작 실습을 진행했습니다.
📋 교육 개요
💡 이번에는 어떤 교육을 진행했을까요?
이번 4차시 교육의 핵심은 생성형 AI에게 자연어로 웹앱의 기능과 디자인을 요청하고, 생성된 코드를 수정·확장하면서 실제 웹도구로 발전시키는 바이브코딩 활용방법을 이해하는 것 이었습니다.
마지막 4차시에서는 단순히 AI에게 코드를 만들어 달라고 요청하는 단계에 머물지 않았습니다.
바이브코딩의 개념과 특징, 장점과 한계를 이해하고, 웹페이지를 구성하는 기본구조와 디자인 용어를 익힌 뒤 AI가 생성한 코드를 확인하고 수정하는 방법까지 연결했습니다.
이후 Google Apps Script와 Google Sheets를 활용해 웹앱을 구성하고 실제로 배포하는 과정까지 살펴보았습니다.
❓ 왜 이 교육이 필요할까요?
바이브코딩을 활용하면 사용자가 원하는 기능과 화면을 자연어로 설명하고, AI가 생성한 코드를 바탕으로 웹도구를 제작할 수 있습니다.
하지만 AI가 코드를 생성해준다고 해서 웹앱 제작 과정 전체를 이해할 필요가 없어지는 것은 아닙니다.
HTML·CSS·JavaScript가 각각 어떤 역할을 하는지, 프론트엔드와 백엔드가 어떻게 다른지, 화면 디자인을 요청할 때 어떤 UI/UX 용어를 사용해야 하는지 기본적인 구조를 이해하면 AI에게 보다 구체적인 요청을 전달할 수 있습니다.
🧭 이번 교육에서는 무엇을 다루었을까요?
1. 바이브코딩의 개념과 특징 이해
바이브코딩 교육은 먼저 AI와 자연어로 소통하면서 웹앱을 제작하는 기본 개념을 이해하는 것 에서 시작했습니다.
기존 코딩과 바이브코딩의 차이를 살펴보고, 바이브코딩의 장점과 한계를 함께 다루었습니다.
싱글턴 프롬프트와 멀티턴 프롬프트를 비교하고, 요구사항을 추가하면서 프롬프트를 고도화하는 방법도 살펴보았습니다.
2. HTML·CSS·JavaScript와 웹앱 기본구조 이해
웹페이지를 구성하는 HTML·CSS·JavaScript의 기본 역할을 살펴보았습니다.
HTML은 구조, CSS는 디자인과 화면 스타일, JavaScript는 기능과 동작을 담당한다는 기본개념을 바탕으로 웹앱 구조를 이해하도록 구성했습니다.
프론트엔드와 백엔드의 차이도 함께 다루었습니다.
3. AI에게 원하는 디자인을 구체적으로 요청하는 방법
Flexbox, CSS Grid, 반응형 디자인, Hero 섹션, 그라디언트, 카드형 UI, 다크모드 등 다양한 UI/UX 용어를 살펴보았습니다.
이러한 디자인 용어를 알고 있으면 단순히 “예쁘게 만들어줘”라고 요청하는 것보다 원하는 화면을 보다 구체적으로 설명할 수 있습니다.
4. 프롬프트를 고도화하며 웹앱 개선하기
바이브코딩에서는 처음 생성된 결과를 확인하고 다시 요청하면서 개선하는 과정 이 중요합니다.
오류 확인, 디버깅, 부분 수정, 기능 추가 등 웹앱을 발전시키는 방법을 다루었습니다.
5. 발표자 뽑기 웹앱 제작 실습
바이브코딩의 기본구조와 디자인 개념을 실제 제작으로 연결하기 위해 발표자 뽑기 웹앱 제작 실습을 진행했습니다.
6. Google Apps Script 이해와 활용
Google Apps Script의 자동화·통합·확장 기능과 Apps Script 편집기 사용방법을 살펴보았습니다.
새 배포, 배포 관리, 테스트 배포 등 웹앱을 실제로 실행하고 URL로 활용하는 과정도 다루었습니다.
7. Google Sheets를 데이터베이스로 활용하기
Google Sheets를 웹앱에서 활용할 수 있는 데이터 저장공간으로 연결하는 방법을 다루었습니다.
Code.gs의 백엔드 구조와index.html의 프론트엔드 구조가 Google Sheets와 어떻게 연결되는지 살펴보았습니다.8. 우리반 자리배치 웹앱 제작 실습
Google Apps Script와 Google Sheets 연동 내용을 실제 제작과정으로 연결하기 위해 우리반 자리배치 웹앱 제작 실습을 진행했습니다.
Code.gs와index.html을 적용하고, 웹앱을 배포한 뒤 생성된 URL을 활용하는 단계까지 연결했습니다.💼 교육내용은 실제로 어떻게 활용할 수 있을까요?
교육용 웹도구 제작
학교에서 필요한 기능을 자연어로 정리하고 AI에게 요청해 웹앱 형태로 구현할 수 있습니다.
수업과 교육활동
발표자 뽑기와 같이 수업이나 교육활동에서 필요한 간단한 웹도구를 제작할 수 있습니다.
학급 운영
우리반 자리배치 웹앱처럼 학급 운영에 필요한 기능을 웹앱으로 구성할 수 있습니다.
데이터 활용
Google Sheets와 Apps Script를 연결하여 데이터 기반 웹도구를 구성할 수 있습니다.
웹앱 디자인 개선
Flexbox, CSS Grid, 카드형 UI, 반응형 디자인 등을 활용해 화면을 개선할 수 있습니다.
웹앱 배포
Google Apps Script의 웹앱 배포 기능을 활용하여 웹도구를 URL 형태로 실행할 수 있습니다.
⭐ 이번 교육에서 중요하게 다룬 핵심 포인트
HTML·CSS·JavaScript와 프론트엔드·백엔드의 역할을 살펴보았습니다.
싱글턴·멀티턴 프롬프트와 프롬프트 고도화 방법을 다루었습니다.
Flexbox, Grid, 반응형 디자인, Hero 섹션, 카드 UI, 다크모드 등을 다루었습니다.
오류 확인, 디버깅, 부분 수정, 기능 추가 방법을 다루었습니다.
Google Sheets, Apps Script,
Code.gs,index.html, 웹앱 배포와 URL 활용방법을 살펴보았습니다.🙋 이런 분들에게 도움이 되는 교육입니다
❔ 자주 묻는 질문 FAQ
AI와 자연어로 소통하면서 웹앱을 기획하고 제작하는 방법을 배울 수 있습니다.
바이브코딩 개념, HTML·CSS·JavaScript, UI/UX, 프롬프트 고도화, 디버깅, Google Apps Script, Google Sheets 연동, 웹앱 배포까지 다루었습니다.
발표자 뽑기 웹앱과 우리반 자리배치 웹앱 제작 실습을 진행했습니다.
전문 개발자 수준의 지식보다 HTML·CSS·JavaScript가 각각 어떤 역할을 하는지 기본구조를 이해하는 것이 중요합니다.
Apps Script 편집기와 웹앱 배포방법을 다루고, Google Sheets와 연결하여 웹앱을 구성하는 방법을 살펴보았습니다.
이번 교육에서는 학교에서 활용할 수 있는 웹앱을 직접 제작하고 URL 형태로 배포하는 방법까지 다루었습니다.
🔍 교육현장에서 다시 확인한 점
이번 4차시에서 중요하게 다룬 부분은 코드를 많이 암기하는 것보다 AI에게 무엇을 어떻게 요청하고, 생성된 결과를 어떻게 확인하고 개선할 것인가 였습니다.
HTML·CSS·JavaScript의 역할과 UI/UX 용어, 프론트엔드와 백엔드 구조를 이해하면 AI에게 보다 구체적인 요청을 전달할 수 있습니다.
또한 AI가 생성한 결과를 그대로 사용하는 것이 아니라 오류를 확인하고 필요한 부분을 수정하면서 기능을 발전시키는 과정이 중요합니다.
🎯 마무리
2026학년도 보건교사 역량강화를 위한 보건 AI클래스는 1차시 AI와 프롬프트에서 시작해 이미지, 영상·음악을 거쳐 마지막 4차시 바이브코딩 웹도구 제작으로 이어졌습니다.
AI콘텐츠마케팅연구소 유쌤클래스 김유성 강사는 바이브코딩의 기본개념부터 웹 기술의 기본구조, UI/UX, AI 코드 수정, Google Apps Script와 Google Sheets 연동, 웹앱 제작과 배포까지 단계적으로 다루었습니다.
👨🏫 강사 정보
AI콘텐츠마케팅연구소 유쌤클래스 김유성 강사
김유성 강사는 AI, 콘텐츠 제작, 온라인마케팅을 실제 현장에 적용하는 실무형 교육을 진행하고 있습니다.
교육기관, 공공기관, 기업, 소상공인 등 다양한 교육대상을 대상으로 AI 실무 활용 교육을 진행하고 있습니다.