💡 한 줄 요약
딱딱하고 천편일률적인 온라인 설문 폼 대신! 거꾸로 프롬프트 기반 바이브 코딩(Vibe Coding)으로 10분 만에 모바일 반응형 에듀테크 신청 웹페이지를 만드는 노하우를 소개합니다.
🎨 교직원용 에듀테크 도입 신청지, 더 예쁘고 스마트하게 받기
새 학기 교직원들을 대상으로 사용하고 싶은 에듀테크(AI 디지털 도구)나 비품 신청을 받을 때, 기존 구글 폼이나 네이버 폼은 디자인이 밋밋하고 예시 도구 목록을 한눈에 보여주기 어렵다는 아쉬움이 있습니다.
자연어 프롬프트로 앱을 개발하는 '바이브 코딩(Vibe Coding)'을 활용하면, 작년 검토 에듀테크 예시 목록 노출, 개인정보 동의 팝업, 모바일 반응형 디자인이 포함된 **맞춤형 에듀테크 신청 웹페이지**를 10분 만에 직접 제작할 수 있답니다!
📊 일반 설문지(구글 폼) vs 바이브 코딩 신청 웹페이지 비교 표
| 구분 / 비교 항목 | 일반 온라인 설문 폼 (구글 폼 등) | 바이브 코딩 커스텀 신청 웹페이지 |
|---|---|---|
| 디자인 및 UI/UX 자유도 | 정형화된 기본 폼 형태로 가독성 및 시각적 몰입감 낮음 | 파스텔 톤 카드 디자인, 모바일 맞춤 반응형 레이아웃 직접 구현 |
| 예시 안내 상자 탑재 | 텍스트 설명란에 긴 글로 적어야 하여 눈에 잘 안 띔 | 입력창 상단에 작년 검토 도구(에듀테크 1~5) 예시 노출 상자 구성 |
| 개인정보 동의 & 제출 처리 | 단순 체크박스로 처리되어 형식적 동의에 그침 | 시작 시 개인정보 동의 팝업 ➔ 신청 완료 시 감성 팝업 메시지 출력 |
🛠️ 에듀테크 신청 웹페이지 만드는 '거꾸로 프롬프트' 3단계
1단계: 상황 던지고 필요한 질문 요구하기 (거꾸로 프롬프트)
"우리 학교 선생님들이 사용하고 싶은 에듀테크 신청을 받을 웹페이지를 만들 건데, 예시 목록과 개인정보 동의가 포함되어야 해. 완벽한 웹앱 코드를 짜기 위해 나에게 어떤 정보들을 물어보면 될지 질문해 줘!"
2단계: AI의 질문에 재료 대답하기
AI가 요구하는 질문(입력 항목: 교사명, 학년/반, 신청 도구명, 활용 목적, 간단 활용 계획 및 구글 시트 백엔드 연동)에 차분하게 답변해 줍니다.
3단계: 단일 HTML 코드 복사 및 실행하기
AI가 완성해 준 코드를 메모장에 붙여넣고 `에듀테크신청.html`로 저장하면, 휴대폰에서도 완벽하게 작동하는 예쁜 웹페이지가 탄생합니다!
💡 초보자를 위한 바이브 코딩 실전 사용 예시
✨ [교사용] 에듀테크 신청 웹페이지 추천 프롬프트
"나는 초등학교 정보 담당 교사인데, 선생님들의 에듀테크 신청을 받는 [에듀테크 신청 웹페이지]를 만들고 싶어.
1. 단일 HTML 파일로 작성하고, 시작 시 개인정보 수집 동의 체크박스를 보여줘.
2. 입력 항목: ① 교사 이름 ② 학년/반 ③ 신청할 에듀테크 이름 ④ 활용 목적(수업/평가/업무 선택) ⑤ 간단한 활용 계획(2~3줄)
3. 입력창 상단에 노란색 상자로 '작년 도입 검토 예시 도구 목록'을 예쁘게 보여줘.
4. '신청하기' 버튼을 누르면 입력 내용이 저장되고 감성적인 '신청 완료' 메시지가 뜨도록 모바일 반응형으로 만들어 줘!"
📋 웹페이지 배포 순서
- 위 프롬프트를 제미나이/클로드에 입력하여 만들어진 단일 HTML 코드를 복사합니다.
- 무료 웹 호Hosting(Netlify, Tiiny Host 등)이나 구글 앱스 스크립트(GAS) 웹앱으로 배포합니다.
- 교직원 메신저나 카톡방에 링크를 공유하여 스마트하게 신청을 수합해 보세요!
🎯 AI 에디터 한줄평
구글 폼의 딱딱함에서 벗어나, 내 교실과 학교 업무에 100% 밀착된 예쁘고 스마트한 커스텀 신청 웹페이지를 10분 만에 완성해 보세요!
📚 바이브 코딩 행정 웹앱 가이드
부산광역시교육청 교육연구정보원 연수 교안 자료를 참고하여 재구성된 바이브 코딩 행정 업무 웹앱 사례입니다.
