교사가 하는 바이브 코딩
(Google Apps Script, Cursor AI, Antigravity)

[일정 관리]
Tailwind CSS를 이용해서 밝은 톤으로 일정 관리 앱을 만들어줘. Font Awesome을 이용해서 아이콘도 붙여줘. 화면 상단에 제목과 달력을 만들고 하단에 일정 내용을 입력할 수 있는 입력 필드(Input Field)를 구성해 줘. 입력한 내용은 하단에 리스트 형식으로 보이도록 디자인해 줘. 리스트에 있는 것은 선택하여 제거할 수 있는 버튼을 만들어줘. 입력한 데이터는 Canva Sheet에 저장되도록 해줘.

[학교 건의사항]
학교 건의사항을 취합할 수 있는 프로그램을 만들거야. 포함요소는 이름(익명 가능), 건의사항, 구체적인 해결방안 및 아이디어 이렇게 3가지 요소는 필수적으로 포함되어야 해. 캔바 시트로 입력된 데이터가 연결될 수 있도록 만들어 줘.

[MBTI 성격  유형 검사]
MBTI 검사 앱을 만들어줘. 중학생 대상으로 MBTI 판별 질문을 생성하고 학생 응답을 받도록 해 줘. 질문지는 객관식으로 체크를 할 수 있는 20문항이 나오도록 하고, 저장하기 버튼을 누르면 분석 페이지가 나오도록 해 줘. 분석 페이지에는 응답자의 MBTI 유형이 나오고 성격의 강점, 약점, 학습 방법, 추천 직업 등 재미있는 정보가 제공되어야 해. Tailwind CSS를 사용해서 디자인해 주고 Canva AI 화면과 비슷한 색상이면 좋겠어.

[감사 일기장]
Tailwind CSS를 이용해서 밝은 톤으로 감사 일기장을 만들어줘. Font Awesome을 이용해서 아이콘도 붙여줘. 화면 상단에 제목과 달력을 만들고 하단에 감사 내용을 입력할 수 있는 Input field를 구성해 줘. 캔바 시트에 내용이 저장되도록 하고, 감사 일기 내용이 저장된 날은 달력에 표시를 해 줘.

[수련회 만족도 조사]
중학교에서 1박 2일 수련회에 참가한 학생들을 대상으로 학생 만족도 조사 설문을 제작해 줘. 학년, 반, 번호를 입력하고 객관식으로 만족도 여부를 체크하고, 마지막으로 주관식으로 의견을 적는 설문이야. 제출 내용은 Canva Sheet에 저장되도록 해줘.

[2인용 끝말잇기]
2명의 접속한 사용자끼리 실시간 끝말잇기를 할 수 있는 웹앱을 작성해 줘.
접속자가 자신의 이름을 입력하고 끝말잇기 내용을 입력하면, 다음 사용자가 자신의 이름을 선택하고 끝말잇기를 할 수 있도록 해줘.
사용자가 입력한 단어가 한글 사전에 등재되어 있는 단어인지 추가로 확인도 해야 해.  끝말잇기 순서는 번갈아 가면서 해야 하고, 10초 이내에 답을 제출하지 못하면 지는 게임이야.
맨 처음 제시어는 랜덤하게 출제되어야 하고, 모든 내용은 캔바 시트에 저장되도록 해 줘.

[실시간 Live Quiz]
카훗(https://kahoot.com)과 같은 실시간 퀴즈 웹앱을 제작해 줘. 교사가 만들기 버튼을 눌러 퀴즈를 생성한 후(AI 퀴즈 생성 기능 포함) 시작하기 버튼을 누르면 학생들이 접속할 수 있는 접속 코드가 생성되고, 학생들은 접속코드를 입력하여 실시간으로 퀴즈에 참여하게 해줘. 교사가 문제를 출제할 때 문제 제목을 입력하고 답변을 입력하게 해줘. 그리고 정답을 체크하게 해줘.
이때 필요한 데이터베이스는 캔바 시트를 사용해서 저장하면 돼.

[일차함수 수조 시뮬레이션]
중학교 수학 수업에서 사용할 일차함수 시뮬레이션을 만들어 주세요. 시간에 따라 원기둥 수조에 물이 차오르는 과정을 y=ax+b 식과 연동해서 시각적으로 구현해야 합니다.
사용자가 슬라이더 또는 입력창으로 a(증가율), b(초기 수위)를 조성하고, 시작 버튼을 누르면 0초부터 10초까지 변하면서 수조 애니메이션, 시간-수위 표, 그래프를 실시간으로 업데이트하여 동적으로 변하게 만들어 주세요.
세 열로 나누어 1열에는 수조애니메이션, 2열에는 표, 3열에는 그래프를 삽입하여 한눈에 살펴볼 수 있게 하고, 표와 그래프는 1초 단위로 기록해 주세요.

[배움의 숲 AI 게시판]
① "학생들이 오늘 수업에서 배운 점을 한 줄로 입력할 수 있는 입력창과 '제출하기' 버튼을 상단에 만들어줘."
② "학생이 내용을 입력하고 제출 버튼을 누르면, 그 내용이 화면 아래쪽에 네모난 상자 형태로 추가되게 해줘."
③ "그냥 네모 상자 말고, 진짜 노란색 포스트잇처럼 보이게 디자인해줘. 약간 기울어진 모양도 있고 그림자도 있어서 입체감 있게 만들어줘."
④ "포스트잇 색깔을 파랑, 분홍, 노랑 중에 랜덤으로 나오게 해서 알록달록하게 만들어줘."

[학급 모둠별 점수판]
① "우리 반은 6개 모둠이야. 화면을 6등분 해서 각 모둠의 이름(1모둠~6모둠)과 현재 점수(0점 시작)를 보여주는 카드를 만들어줘. 각 카드 아래에는 점수를 올리는 '+1점' 버튼과 내리는 '-1점' 버튼을 만들어줘."
② "숫자로만 보이니까 재미없어. 점수가 올라갈 때마다 차오르는 '에너지 게이지(Progress Bar)' 형태로 바꿔줘. 10점이 만점이야. 그리고 1등인 모둠에는 왕관(👑) 아이콘이 자동으로 붙게 해줘."
③ "가장 중요한 기능이야. 어느 모둠이든 10점(목표 점수)을 달성하면, 화면 전체에 폭죽이 터지는 애니메이션 효과를 넣어주고, '축하합니다!'라는 팝업을 띄워줘. 학생들이 수업에 집중할 수 있게 박진감 넘치는 효과를 원해."
④ "이번 수업 주제가 '해리포터'야. 디자인을 마법 학교 느낌으로 바꿔줘. 폰트도 신비롭게 바꾸고, 배경도 어두운 호그와트 연회장 느낌으로 변경해 줘."

[AI 퀵 드로우 챌린지]
https://quickdraw.withgoogle.com 사이트와 같이 인공지능이 제시하는 물체를 20초 안에 그려서 맞추는 프로그램을 작성해 줘. 문제는 한번에 3문제가 출제되도록 해줘. 사용자가 도전할 때마다 다른 물체가 제시되어야 해. 사물의 특징이 명확히 드러나야 정답으로 인정하도록 하고, 맞췄을 때 효과음도 넣어줘.

[학교 시간표 검색]
중학교 시간표정보를 검색할 수 있는 웹앱을 작성하고 싶어.
교육정보개방포털(https://open.neis.go.kr/)에서 제공하는 Open API를 사용할거야.
API 키 : d08879d8f8b94ec98ee37860a58e3c92
명세서는 첨부한 엑셀파일이야.
이를 이용해 학교이름을 검색하고 날짜와 학년/반을 지정하면 해당일 시간표가 표시되도록 만들어 줘.

[우리학교 식단표]
학교급식식단정보를 검색할 수 있는 웹앱을 작성하고 싶어.
교육정보개방포털(https://open.neis.go.kr/)에서 제공하는 Open API를 사용할거야.
API 키 : d08879d8f8b94ec98ee37860a58e3c92
명세서는 첨부한 엑셀파일이야.
이를 이용해 학교이름을 검색하고 날짜를 지정하면 급식식단정보가 표시되도록 만들어 줘.

[대전 버스 통합 정보]
공공데이터포털(https://www.data.go.kr/)에서 대전광역시_노선정보조회를 조회했어.

활용신청도 하고 API키도 받았어.

[서비스 정보]

데이터포맷 : XML

End Point : https://apis.data.go.kr/6300000/busRouteInfo

일반 인증키(Encoding) : 5rjYJ1IA8WnjNDu6uhIhzxADS4FlCynrEUaBGiYh7Gs4%2Fkg2C0TJaazMx2XMaIHQceB7yW4ZZhtWK%2B5Q6FIaFA%3D%3D

일반 인증키

(Decoding) : 5rjYJ1IA8WnjNDu6uhIhzxADS4FlCynrEUaBGiYh7Gs4/kg2C0TJaazMx2XMaIHQceB7yW4ZZhtWK+5Q6FIaFA==

[메타데이터]

{"name":"대전광역시_노선정보조회","description":"대전광역시 노선정보조회 서비스는 대전시 버스정보시스템에서 제공하는 통합 교통 데이터로서, 버스 노선별 경유 정류소 정보와 각 노선의 실시간 도착 예정 정보, 정류소별 기본 정보, 운수회사와 차량별 등록 정보 등을 포함합니다. 이 자료는 노선별 운행 경로와 정류소 위치, 운행 배차 간격, 운수사별 관리현황 등 다양한 정보를 통해 대중교통 이용자들이 최적의 이동 계획을 세울 수 있도록 돕고 있습니다. 또한 교통 운영자는 이 데이터를 활용해 노선 조정, 차량 배치, 운행 효율 개선 및 정책 수립에 필요한 근거자료로 사용할 수 있습니다.","url":"https://www.data.go.kr/data/15157896/openapi.do","keywords":"도착예정정보,정류소정보,노선정보,운수사정보,차량정보","license":"이용허락범위 제한 없음","dateCreated":"2026-03-31","dateModified":"2026-04-10","datePublished":"2026-03-31","creator":{"name":"대전광역시","contactPoint":{"contactType":"교통국 버스정책과","telephone":"042-270-5813","@type":"ContactPoint"},"@type":"Organization"},"spatialCoverage":"","temporalCoverage":"","additionalType":"교통및물류 - 물류등기타","datasetTimeInterval":"실시간","encodingFormat":"XML","@context":"https://schema.org","@type":"Dataset"}

이를 이용해 대전광역시 버스 노선을 조회할 수 있는 웹앱을 작성해 줘.

[Daum 뉴스 크롤링]
https://news.daum.net/education 사이트의 뉴스 중에서 최신 기사 순서로 10개가 보이고(기사 제목, 언론사, 게시일자),

해당 기사 제목을 클릭하면 실제 뉴스로 링크되도록 웹앱을 제작해 줘.
디자인은 토스 홈페이지를 참고해.

[마음 이끔이 코칭 대화]
[이름] 마음 이끔이 챗봇
[설명] 코칭 질문을 활용해 당신의 마음 속 힘을 이끌어 냅니다.
[시스템 역할 지침]
  - 이 채팅봇은 GROW 모델(Goal, Reality, Options, Will)을 기반으로, 사용자의 자기 성찰과 성장, 문제 해결을 유도하는 코칭 대화를 진행합니다.
  - 질문은 '반드시' 한 번에 하나씩만 합니다.
  - 대화 초기에는 간단히 인사를 건네고, 근황을 물어봅니다. 그런 뒤 사용자를 어떻게 호칭하면 좋을지도 묻습니다(초반 라포 형성).
  - 질문을 제시할 때에는, 어떤 단계(Goal/Reality/Options/Will)의 질문인지 괄호로 명시합니다.
  - 한 단계당 최소 세 가지 이상 질문을 하되, 한 번에 하나씩 질문을 하여 단계별로 충분히 진행될 수 있도록 한 뒤, 학생의 답이 어느 정도 구체적으로 정리되면 다음 단계로 넘어갑니다.
  - 구체적인 해법이나 긴 피드백(조언 등)은 사용자가 명확히 요청하지 않는 한 제공하지 않습니다. 오로지 '질문' 중심으로 진행하며, 사용자가 스스로 답을 찾아갈 수 있도록 돕습니다.
  - 사용자의 질문에도 가급적 질문으로 답변하여, 스스로 아이디어를 떠올릴 수 있도록 유도합니다.
  - 사용자가 어느 정도 해결책을 스스로 구체화하면, 그 방법을 직접 요약하게 하고, 적절한 시점에서 "이대로 코칭을 마무리 해도 괜찮을까요?"와 같이 종료에 대한 동의를 구한 뒤 코칭을 마무리합니다.
위의 규칙을 준수하며, GROW 모델 4단계를 순서대로 진행하는 챗봇 웹앱을 제작해 주세요.

[질문으로 정답을 찾는 시간]

당신은 중학교 3학년 사회과 '경제' 단원을 가르치는 친절하고 전문적인 AI 보조 교사입니다.

현재 일제강의가 끝난 후, 개별화 학습을 돕기 위해 학생들과 1:1로 대화하고 있습니다.

학생들이 스스로 사고하고 문제를 해결할 수 있도록 '질문 중심 수업(소크라틱 세미나, 문답법)' 모델을 따르는 챗봇을 만들어주세요.

[핵심 원칙 - 절대 지키세요]

1. 절대 정답을 단답형으로 바로 알려주지 마세요.

2. 소크라테스식 문답법을 사용하여 학생이 스스로 깨달을 수 있도록 '꼬리 질문'으로 대답을 마무리하세요.

3. 힌트를 주거나, 학생의 일상생활(용돈, 편의점, 게임 아이템 구매 등)과 연결하여 쉽게 비유한 후 다시 질문을 던져 생각할 거리를 제공하세요.

4. 친절하고 격려하는 어투(해요체)를 사용하세요.

5. 경제 단원과 관련 없는 질문이 들어오면 정중하게 거절하며 경제 주제로 유도하세요.

6. 답변 길이 제한 (매우 중요): 중학생들이 긴 글을 지루해하므로, 답변은 무조건 2~3문장 이내로 아주 짧고 간결하게 작성하세요.

7. 쉬운 어휘 사용 (매우 중요): 한자어로 된 어려운 경제 용어는 최대한 피하고, 쉬운 일상어(예: 수요 -> 사고 싶은 마음, 희소성 -> 구하기 힘든 정도)로 풀어서 설명하세요.

[대화 예시]

학생: 수요 법칙이 뭐예요?

교사: 좋은 질문이에요! '수요'는 쉽게 말해 '물건을 사고 싶은 마음'을 뜻해요. 만약 평소 갖고 싶었던 물건이 엄청 싸졌다면, 더 사고 싶어질까요 아니면 덜 사고 싶어질까요?

[나의 학습 습관 진단하기]
학생의 학습습관에 대해 항목을 5가지 정해서 항목별 문항을 3가지 작성해 줘.
학생들은 각 문항에 대해 5척 척도로 응답을 하도록 해 줘.
제출하기 버튼을 누르면 응답 내용을 분석하여 차트와 그래프, 5가지 항목에 대해 오각형으로 각 항목에 척도를 입체적으로 제시해 줘.
학습습관에 대해 강점과 약점을 분석하고 약점을 보완할 수 있는 추가 학습 방안도 제시해 줘.
분석 결과는 이미지 파일로 다운로드 할 수 있도록 [다운로드] 버튼도 만들어 줘.

[웹캠 매직 그림판]
그림판 웹앱을 제작해 줘. 마우스로 드래그해서 색상, 굵기, 펜 유형을 설정하여 그릴 수 있는 그림판!

저장할 수 있는 버튼도 만들어 줘. 웹캠을 활성화하여 손가락으로 엄지와 검지를 붙이면 인식하여 선을 그릴 수 있도록 해 주고, 거울 모드를 반영하여 오른쪽으로 선을 그렸을 때 왼쪽으로 선이 반대로 그려지지 않게 해 줘.

그리고 선을 그리기 전에 카메라가 인식하는 현재 손의 위치가 표시되게 해 줘.

카메라도 화면 그대로 송출하지 말고 그냥 그림판 여백에 손 위치만 실시간으로 표시해 줘.

카메라 모드를 중지하는 버튼도 만들어 줘.

[영어 듣기 평가 생성기]

키워드와 등장인물의 수를 입력하면 키워드와 관련된 중학교 수준의 영어 듣기 대본을 생성해 줘.

그리고 재생 버튼을 누르면 이 대본을 화자별로 목소리를 달리하여 오디오를 생성해서 재생하게 해 줘.

듣기 대본 파일은 txt 파일로, 생성된 오디오 파일은 wav로 다운로드 할 수 있는 버튼도 생성해 줘.

[속력 비교 시뮬레이터]
과학 수업에서 속력의 빠르기를 비교하는 수업 내용에서 일정한 거리를 달리는 물체의 빠르기를 비교하는 실험을 하려고 해.

가상의 시뮬레이터 웹앱을 제작해 줘. 물체는 사람, 치타, 타조로 설정하고 걸린 시간을 지정할 수 있게 해 줘. 거리는 100m로 지정해 줘. 걸린 시간은 실제 시간 개념과 동일하게 설정해 줘. 

물체는 출발선 뒤에서 출발하도록 해줘. [시작] 버튼을 누르면 달리기를 시작하고 [중지] 버튼을 누르면 일시 중지를 해줘. [초기화] 버튼을 누르면 처음부터 다시 시작하게 해줘.

[우리나라 자연환경]
OpenStreetMap 타일을 가져와서 우리나라 지도를 생성해 줘.

중학교 사회시간에 우리나라의 지역별 자연환경에 대해 설명할 때 사용할거야.

마우스로 도시의 위치를 클릭하면 해당 지역의 면적과 기온 및 강수량을 설명하는 웹앱을 제작해 줘.

[AI 매직 지우개]
나노 바나나 모델을 사용하여 이미지 편집 웹앱을 제작해 줘.

이미지를 업로드하고 삭제할 영역을 표시하면 해당 영역을 배경과 어울리게 삭제해 주는 웹앱을 제작해 줘.

[구구단 팡팡 대결]
전자칠판에서 직접 터치하며 문제를 풀 수 있는 게임형 학습 웹앱을 제작해 줘.

2명의 학생이 동시에 앞으로 나와 전자칠판의 좌, 우에 서서 각각의 분할된 화면에서 동시에 퀴즈를 풀이하도록 해 줘.

문항은 수학 구구단 10문제로 좌, 우 학생이 각각 문항은 동일하지만 출제 순서는 서로 다르게 제시되도록 해 줘.

제한 시간은 1분으로 좌/우 각각의 상단에 시간이 표시되게 해 줘.

학생이 오답을 선택한 경우 해당 학생은 정답을 3초간 선택할 수 없게 해줘. 

디자인은 전체적으로 밝고 귀엽게 제작해 줘.

[지뢰 찾기 게임]
지뢰찾기 게임을 만들어줘. 8x8 크기의 보드에 10개의 지뢰가 있고, 타일을 클릭하면 주변 지뢰 개수를 보여줘.

지뢰를 클릭하면 게임 오버. 게임을 다시 시작하는 버튼도 추가해줘. 남은 지뢰 개수도 화면에 표시해줘.

난이도를 선택할 수 있게 해줘. 쉬움(6x6, 지뢰 5개), 보통(8x8, 지뢰 10개), 어려움(10x10, 지뢰 20개) 게임 시작 전에 난이도를 선택하는 버튼을 보여줘.

타이머를 추가해서 게임을 시작하면 시간이 흐르게 해줘. 게임을 클리어하면 걸린 시간을 보여줘.

어떤 기기에서도 실행가능하게 하이브리드로 만들어줘.

[스마트 출결 관리]
출석 체크 프로그램을 만들어 줘. 학생 이름은 번호로 할거야. 25번까지 있어. 각 학생마다 버튼을 만들어.

각 학생마다 출석, 지각, 결석 버튼이 있어야 해. 버튼을 누르면 색깔로 표시돼 (출석: 초록색, 지각: 노란색, 결석: 빨간색)

출석을 누르면 출석 시간이 나오게 하고, 지각, 결석을 누르면 질병, 미인정, 기타, 출석인정 버튼이 나와서 선택할 수 있고,

내용을 입력할 수 있는 칸과 저장 버튼이 나오도록 해. 오늘 날짜가 상단에 표시되게 해.

선생님이 태블릿으로 빠르게 체크할 수 있으면 좋겠어. "전체 출석" 버튼을 추가해줘.

이 버튼을 누르면 모든 학생이 자동으로 출석으로 표시되게 해줘.

‘달력’ 버튼을 추가하고, 버튼을 누르면 해당 학년도의 모든 달력이 나오고, 임의의 날짜를 누르면 그 날의 출석 현황이 나오도록 해줘. 학년도는 올해 3월부터 내년 2월까지를 말해.

학생 번호를 누르면 해당 학생에 대한 요약이 나오게 해줘.

날짜 순서대로 지각, 결석 현황이 나오도록 해줘. 출석은 제외하고 지각과 결석만 보여줘.

각 기록마다 날짜, 상태, 사유구분, 상세내용이 표시되게 해줘. 지각이나 결석 사유를 저장하면 학생 번호 옆에 "서류 미제출" 버튼이 나타나게 해줘.

나중에 학생이 서류를 제출하면 그 버튼을 클릭해서 "서류 제출 완료"로 상태를 바꿀 수 있게 해줘.

버튼 색깔도 미제출일 때는 빨간색, 제출 완료일 때는 초록색으로 바뀌게 해줘.

날짜별 출결 엑셀 파일을 받을 수 있게 해주는 ‘오늘’ 버튼을 ‘전체 출석’ 버튼 옆에 만들어줘.

학생 번호를 누르면 나오는 팝업창에 결석 현황 엑셀 파일을 받을 수 있게 해주는 버튼 만들어줘.
Tailwind CSS로 깔끔하게 디자인해줘. Lucide Icons를 사용해서 직관적으로 만들고, 하나의 HTML로 만들어줘.

[역사 학습 부루마블]

너는 최고의 교육 전문가이자 웹 프로그램 개발자야. 넌 지금부터 고려의 역사를 학습하는 웹프로그램을 만들거야.

중학교 수준의 고려의 역사 내용 20가지를 선정해서 완성해 줘.

[게임 시작 설정]

플레이어 수 선택: 2명 또는 3명, 각 플레이어 이름 입력 기능, 초기 자금: 각 500만 원 지급

[게임판 레이아웃]

게임판은 가운데가 비어 있는 정사각형 모양으로 구성해 줘. 총 24칸(역사 지역 20칸 + 특수 칸 4칸)을 테두리를 따라 시계방향으로 배치해 줘.

가운데 빈 공간에는 주사위, 각 플레이어 정보(이름, 실시간 보유 자금)를 표시해 줘.

[칸 설정 및 규칙]

20칸의 구매 가격: 40~70만 원 사이에서 무작위로 정해 줘.

특수 칸 4개: 출발(도착 및 통과 시 20만 원 지급), 찬스 카드(±15만 원 랜덤 증감), 보너스(20만 원 지급), 무인도(한 턴 쉬기)

주사위: 1부터 6까지 무작위로 나오며, 나온 숫자만큼 말이 이동하게 해.

지역 구매: 주인이 없는 지역에 도착하면 [구매] 버튼이 나타나고, 구매 시 해당 지역에 소유자(플레이어) 이름을 표시해 줘.

통행료: 다른 플레이어가 소유한 지역에 도착하면 해당 지역 가격의 30%를 통행료로 지불하게 해 줘.

파산 및 승리: 자금이 0원 이하가 된 플레이어는 파산하며, 마지막까지 살아남은 1명이 승리해.

[UI 요구사항]

현재 차례인 플레이어를 시각적으로 강조해 줘. 주사위가 굴러갈 때와 말이 칸을 이동할 때 부드럽게 움직이는 애니메이션을 추가해 줘.

자금 이동 시 시스템 메시지를 화면에 표시해 줘. (예: "홍길동이 김영희에게 7만 원 지불")

각 지역 칸에 가격과 소유자를 명확히 표시해 줘. 최종승리시화면에폭죽효과를터뜨리고 [다시하기] 버튼을만들어줘.

[길 건너 친구들]

하나의 HTML 파일 안에서 작동하는 '길 건너 친구들(Crossy Road)' 스타일의 러너 게임을 만들어줘.(Three.js사용) 

[길 건너 친구들-OX서바이벌]

이 게임을 'O/X 퀴즈 서바이벌' 게임으로 업그레이드해줘.

1. **[데이터 구조]**: 코드 최상단에 `quizData`라는 배열 변수를 만들고, 예시 문제 5개를 넣어줘. (예: `{ q:"사과는 영어로 Apple?", a:"O" }`)

2. **[문제 표시]**: 캐릭터 머리 위에 말풍선으로 현재 문제가 따라다니게 해줘.

3. **[갈림길 생성]**: 캐릭터가 10칸 전진할 때마다 맵이 '왼쪽(O 표지판)'과 '오른쪽(X 표지판)' 두 갈래로 나뉘어야 해.

4. **[판정 시스템]**:

   - 정답 길로 가면: "딩동댕\!" 효과음(텍스트)과 함께 통과.

   - 오답 길로 가면: "땡\!" 효과와 함께 튕겨 나가며 **하트(❤️)가 1개 차감됨**.

5. **[UI]**: 화면 좌측 상단에 '남은 하트(3개)'를 크게 표시해줘. 0이 되면 Game Over. 

[배민 워드 클라우드]
수업시간에 학생들로부터 각자 본인의 삶의 목표를 단어나 문장으로 입력 받아서, 워드 클라우드로 분석해 주는 교육용 앱을 만들어 줘.
프로그램의 제목을 '배민 워드 클라우드'로 크고, 돋보이게 배치해 줘.

입력된 데이터는 익명으로 처리하고 교사가 대시보드에서 실시간으로 시각화할 수 있어야 해.

학생들이 입력한 데이터는 입력 화면에서도 다른 학생들이 입력한 데이터가 임의로 떠다니도록 디자인해 줘.
교사가 관리자로 로그인 하면 워드 클라우드로 만들어 주는 버튼이 보여야 해. 관리자 패스워드는 admin 으로 설정해 줘.
워드 클라우드의 모양을 설정할 수 있는 기능을 추가하여 교육적 가치를 높여줘. 워드 클라우드 모양은 원형, 사각형, 하트, 나무 모양도 추가해 줘.
또한 학생들이 제출한 데이터의 통계적 분석 결과를 리포트로 자동 생성해서 pdf 파일로 다운로드 할 수 있도록 해줘.

[오세아니아 원정대]
① 당신은 중학교 사회교육 전문 에듀테크 풀스택 엔지니어이자 RPG 게임 시스템·UI/UX 디자이너입니다.

중학교 1학년 지리단원의 '오세아니아의 기후와 환경'(10문항)을 위한「RPG 게이미피케이션 사회 학습 웹앱」을 제작해 주세요.

웹앱은 React + Tailwind CSS + Lucide Icons 기반으로 구현합니다.

② 학생들이 학번과 이름을 로그인해서 문제를 풀고, 교사는 대시보드로 학생들의 도전 기록을 볼 수 있도록 해줘.

대시보드 로그인 패드워드는 'admin'으로 설정해줘. 이때 사용하는 DB는 firebase를 사용해서 설정까지 모두 해줘.

[고민 상담소]
학생용 '고민 상담소' 챗봇 웹 앱을 만들어줘. Google Apps Script로 프론트엔드와 백엔드로 구분해서 코드를 작성해 줘. 프론트엔드에는 이름 입력창과 채팅 화면을 구현하고, AI가 답변할 땐 '생각 중...' 표시와 함께 타이핑 애니메이션 효과를 적용해 줘. 백엔드에서는 Gemini API를 연동해서, AI가 따뜻한 상담 선생님처럼 2~3문장으로 짧게 대화하도록 셜정해 줘. API키 값은 '설정'시트의 B2셀에 입력되어 있어. 제미나이 모델은 gemini-flash-lite-latest 모델을 사용해줘. 상담이 종료되면, 학생 이름으로 새 시트를 자동 생성하고 시트를 가나다순으로 정렬해 줘. 이 시트에는 전체 대화 내용과 교사를 위한 AI 분석 요약, 대응 제안을 함께 기록하고, 열 너비나 정렬 같은 서식도 자동으로 적용해 줘.
[구구단 앱]
학생들이 구구단을 즐겁게 학습할 수 있도록 '구구단 문제풀이' 웹 앱을 제작해줘. 학생이 자신의 번호를 선택(1번부터 26번까지)하고 각 단계(총 10단계)를 풀면, 앱은 문제를 자동으로 채점하고 점수를 저장하며, 진행 상황에 따라 시각적 피드백도 제공해줘. 모든 학습 기록은 구글 스프레드시트 '점수' 시트에 자동으로 저장되고, 단계별 점수와 평균 점수를 확인할 수 있도록 구성해줘. 점수시트의 행은 학생 번호 순으로 정렬이 되도록 하고, 열별로 해당 학생의 단계별 점수가 기록되어야 해. 이를 위해 Google Apps Script를 활용하여 프론트엔드와 백엔드를 구분하여 코드를 작성해줘.
[달려라 연산왕]
중학생들이 수학 연산 능력을 재미있게 향상시 킬 수 있도록 지원하는 '달려라 연산왕' 웹 앱을 제작해줘. 학생은 1번부터 26번까지 번호를 선택하고, 1단계부터 10단계까지의 난이도별 연산 문제에 도전하여 게임처럼 즐기면서 수학 실력을 키울 수 있도록 해야 해. 게임 결과는 구글 스프레드시트에 자동 기록되어 교사가 학생들의 학습 진도를 쉽게 관리할 수 있도록 해줘. 기록 내용은 학생 번호, 단계별 점수, 정답률, 걸린 시간이 표시되면 돼. 이를 위해 구글 Apps Script로 프론트엔드와 백엔드로 구분해서 코드를 작성해줘. 문제를 맞추면 파란색 동그라미, 틀리면 빨간색 엑스표시가 나타나고, 상단 진행률 바와 하단 달리는 말 캐릭터가 문제 풀이 진행에 따라 함께 이동하도록 해줘. 완료한 단계는 초록색, 진행중인 단계는 주황색, 미완료 단계는 빨간색으로 버튼도 다르게 표시되게 해줘.
[마음 일기]
학생들이 자신의 감정을 기록하는 '마음 일기' 웹 앱을 제작할거야. 학생이 일기를 제출하면 AI가 학생에게는 따뜻한 피드백을, 교사에게는 학생의 심리 상태에 대한 분석 데이터를 제공해주는 프로그램이야. 모든 기록은 구글 스프레드시트에 자동으로 저장 및 관리되도록 해줘. 이를 위해 구글 Apps Script로 프론트엔드와 백엔드 구분해서 코드를 작성해줘. 백엔드에서 '설정' 시트의 API 키(B2셀에 있는)를 이용해 Gemini API를 호출해 줘. 제미나이 모델은 gemini-flash-lite-latest 모델을 사용해줘.
[토론 도우미]
학생들이 토론 수업을 효과적으로 준비하고 참여할 수 있도록 지원하는 '토론 도우미' 웹 앱을 만들어줘. Google Apps Script로 프론트엔드와 백엔드로 구분해서 코드를 작성해 줘. 프론트엔드에는 '초등', '중등. '고등' 학교급 드롭다운, 토론 주제 입력창, '찬성'/'반대' 라디오 버튼을 구현해 줘. '자료 생성' 버튼을 클릭하면, 백엔드에서 '설정' 시트의 API 키(B2셀에 있는)를 이용해 Gemini API를 호출해 줘. 제미나이 모델은 gemini-3-flash-preview 모델을 사용해줘. AI는 선택된 학교급에 맞춰, 주장을 뒷받침하는 구체적인 설명과 사례를 포함한 3가지 핵심 근거를 생성해야 해. 초등학생에겐 쉽고 친근하게, 고등학생에겐 심층적인 내용을 제공해 줘. 결과는 '○○○에 대한 찬성 입장 근거'처럼 동적 제목을 가진 팝업창으로 깔끔하게 보여줘.
[대전둔산중 역사 챗봇] 
중학교 선생님과 대화하면서 질문에 답하는 '대전둔산중 역사 선생님' 챗봇 웹 앱을 만들어줘. Google Apps Script로 프론트엔드와 백엔드로 구분해서 코드를 작성해 줘. 프론트엔드에는 중학교 느낌의 디자인의 채팅창 이미지로 구현해 줘. 채팅창 아래쪽에 만든이 '남양일 선생님'으로 표시해줘. 사용자가 질문을 입력 전송하면, 백엔드에서 '설정' 시트의 API 키(B2셀에 있는)를 이용해 Gemini API를 호출해 줘. 제미나이 모델은 gemini-3-flash-preview 모델을 사용해줘. AI는 대전둔산중학교에 재직하고 있는 역사선생님이라는 설정이고, 역사 분야의 내용과 다른 질문에는 답을 해서는 안돼.
[질문이 있는 교실 챗봇]
학생들이 한국사 학습을 마친 뒤 AI 선생님과 5회 질문과 답변을 주고받으며 심화하고 자기주도적 학습을 기르는 웹 앱 '질문이 있는 교실'을 만들어줘. Google Apps Script로 프론트엔드와 백엔드를 분리하여 코드를 작성해 줘. 프론트엔드에는 학생이 학번과 이름을 입력해 접속 할거야. 접속 시 '안녕하세요, 000학생! 다섯번의 질문을 통해 한국사 단원을 더 깊이 이해해 봅시다. 첫 번째 질문부터 시작할까요?"라는 안내가 나오고, 학생이 궁금한 점을 입력하면 답변을 제공해. 이후 재질문과 재답변을 반복하여 총 5회 진행하고 이 후 '새롭게 알게 된 점'과 '더 알고 싶은 점'을 기록하는 창을 제공하여 학습성찰을 유도해. 하단 버튼을 누르면 AI 역사 선생님(중학교 역사 담당)이 학생의 질문과 성찰을 검토해 맞춤 피드백을 작성합니다. 피드백 완료 후 학습 내용을 A4 한 장으로 정리해 PDF로 저장하는 버튼을 제공해줘. 백엔드에는 학생 로그인 기록, 5개의 질문, 학습 성찰을 구글 스프레드시트의 '질문기록' 시트에 저장이 되어야 해. 스프레드시트 헤더는 타임스템프, 학번, 이름, 질문1~질문5, 새롭게 알게 된 점, 더 알고 싶은 점으로 구성되어야 해.Gemini API 키는 '설정' 시트의 B2셀에 입력되어 있고, 제미나이 모델은 gemini-flash-lite-latest 모델을 사용해줘.
[ 생기부 교과세특 생성기]
중학교 선생님들이 학생 생활기록부 교과세특을 작성하는데 도움을 줄 웹 앱을 작성하고 싶어.  Google Apps Script로 프론트엔드와 백엔드로 구분해서 코드를 작성해 줘. 상단에는 과목을 선택할 수 있는 버튼을 한줄로 나열해 줘. 과목은 [국어, 영어, 수학, 사회, 역사, 과학, 기술가정, 도덕, 음악, 미술, 체육] 이야. 반 학생수는 30명이고, 1번부터 30번까지 번호가 적혀있는 엑셀 시트 형태를 메인 영역에 배치해 줘. 하나의 행이 한 학생의 데이터를 나타내고, 각 열의 순서는 [번호, 이름, 특성, 글자수, 생성, 교과세특 내용]으로 구성되어 있어. '생성' 칸에는 모두 작은 타원형 버튼이 들어 있고, 버튼을 누르면 상단에서 선택한 과목과 해당 학생 데이터에서 입력된 특성에 맞게 교과세특 내용을 작성해서 '교과세특 내용' 셀에 표시해 줘. '글자수' 셀에는 모두 기본적으로 200으로 입력되어 있고, '이름'과 '특성' 창은 사용자가 입력할 수 있도록 비어있어야 해. 해당 학생의 '특성' 셀에 데이터가 입력되어 있지 않으면 '생성' 셀에 있는 버튼이 작동하면 안돼. "엑셀로 다운받기' 버튼도 상단에 생성해서 버튼을 클릭하면 학생들의 데이터가 엑셀 형식으로 저장되어 다운받을 수 있도록 해줘. '교과세특 내용'이 ~음/~임 형태의 명사형으로 끝나도록 변경해 줘. 백엔드에서 '설정' 시트의 API 키(B2셀에 있는)를 이용해 Gemini API를 호출해 줘. 제미나이 모델은 gemini-3-flash-preview 모델을 사용해줘. 모던하고 미니멀한 스타일로 UI를 구성해 줘.
[생기부 자율활동 생성기]
중학교 선생님들이 학생 생활기록부 자율활동을 작성하는데 도움을 줄 웹 앱을 작성하고 싶어.  Google Apps Script로 프론트엔드와 백엔드로 구분해서 코드를 작성해 줘. 반 학생수는 30명이고, 1번부터 30번까지 번호가 적혀있는 엑셀 시트 형태를 메인 영역에 배치해 줘. 하나의 행이 한 학생의 데이터를 나타내고, 각 열의 순서는 [번호, 이름, 활동, 글자수, 생성, 자율활동 내용]으로 구성되어 있어. '생성' 칸에는 모두 작은 타원형 버튼이 들어 있고, 버튼을 누르면 해당 학생 데이터에서 입력된 활동에 맞게 자율활동 내용을 작성해서 '자율활동 내용' 셀에 표시해 줘. '글자수' 셀에는 모두 기본적으로 100으로 입력되어 있고, '이름'과 '활동' 열은 사용자가 입력할 수 있도록 비어있어야 해. 해당 학생의 '활동' 셀에 데이터가 입력되어 있지 않으면 '생성' 셀에 있는 버튼이 작동하면 안돼. "엑셀로 다운받기' 버튼도 상단에 생성해서 버튼을 클릭하면 학생들의 데이터가 엑셀 형식으로 저장되어 다운받을 수 있도록 해줘. '자율활동 내용'이 ~음/~임 형태의 명사형으로 끝나도록 변경해 줘. 백엔드에서 '설정' 시트의 API 키(B2셀에 있는)를 이용해 Gemini API를 호출해 줘. 제미나이 모델은 gemini-3-flash-preview 모델을 사용해줘. 모던하고 미니멀한 느낌의 디자인 UI로 html 코드를 작성해 줘.
[생기부 동아리활동 생성기]
중학교 선생님들이 학생 생활기록부 '동아리 활동' 내용을 작성하는데 도움을 줄 웹 앱을 작성하고 싶어.  Google Apps Script로 프론트엔드와 백엔드로 구분해서 코드를 작성해 줘. 반 학생수는 30명이고, 1번부터 30번까지 번호가 적혀있는 엑셀 시트 형태를 메인 영역에 배치해 줘. 하나의 행이 한 학생의 데이터를 나타내고, 각 열의 순서는 [번호, 활동, 글자수, 생성, 동아리 활동 내용]으로 구성되어 있어. '생성' 칸에는 모두 작은 타원형 버튼이 들어 있고, 버튼을 누르면 해당 학생 데이터에서 입력된 '활동'에 맞게 동아리 활동 내용을 작성해서 '동아리 활동 내용' 셀에 표시해 줘. '글자수' 셀에는 모두 기본적으로 200으로 입력되어 있고, '활동' 열은 사용자가 입력할 수 있도록 비어있어야 해. 해당 학생의 '활동' 셀에 데이터가 입력되어 있지 않으면 '생성' 셀에 있는 버튼이 작동하면 안돼. "엑셀로 다운받기' 버튼도 상단에 생성해서 버튼을 클릭하면 학생들의 데이터가 엑셀 형식으로 저장되어 다운받을 수 있도록 해줘. '동아리 활동 내용'이 ~음/~임 형태의 명사형으로 끝나도록 변경해 줘. 백엔드에서 '설정' 시트의 API 키(B2셀에 있는)를 이용해 Gemini API를 호출해 줘. 제미나이 모델은 gemini-3-flash-preview 모델을 사용해줘. 모던하고 미니멀한 느낌의 디자인 UI로 html 코드를 작성해 줘.
[행동특성 및 종합의견 생성기]
중학교 선생님들이 학생 생활기록부 '행동특성 및 종합의견'을 작성하는데 도움을 줄 웹 앱을 작성하고 싶어.  Google Apps Script로 프론트엔드와 백엔드로 구분해서 코드를 작성해 줘. 반 학생수는 30명이고, 1번부터 30번까지 번호가 적혀있는 엑셀 시트 형태를 메인 영역에 배치해 줘. 하나의 행이 한 학생의 데이터를 나타내고, 각 열의 순서는 [번호, 학생 특성, 글자수, 생성, 행동특성 및 종합의견]으로 구성되어 있어. '생성' 칸에는 모두 작은 타원형 버튼이 들어 있고, 버튼을 누르면 해당 학생 데이터에서 입력된 학생 특성에 맞게 행동특성 및 종합의견 내용을 작성해서 '행동특성 및 종합의견' 셀에 표시해 줘. '글자수' 셀에는 모두 기본적으로 300으로 입력되어 있고, '학생 특성' 열은 사용자가 입력할 수 있도록 비어있어야 해. 해당 학생의 '활동' 셀에 데이터가 입력되어 있지 않으면 '생성' 셀에 있는 버튼이 작동하면 안돼. "엑셀로 다운받기' 버튼도 상단에 생성해서 버튼을 클릭하면 학생들의 데이터가 엑셀 형식으로 저장되어 다운받을 수 있도록 해줘. '자율활동 내용'이 ~음/~임 형태의 명사형으로 끝나도록 변경해 줘. 백엔드에서 '설정' 시트의 API 키(B2셀에 있는)를 이용해 Gemini API를 호출해 줘. 제미나이 모델은 gemini-3-flash-preview 모델을 사용해줘. 모던하고 미니멀한 느낌의 디자인 UI로 html 코드를 작성해 줘.

[단어장 배틀]
Google Apps Script로 단어장 배틀 웹앱을 만들고 싶어. 오늘 배운 핵심 용어가 랜덤하게 뜨면, 학생들이 4지 선다형의 문제을 맞추는 게임형식의 아이디어야. 스프레드시트에는 전체 학생의 점수와 순위가 저장되고, 문제가 저장되는 시트도 만들어야 해.  한국사 관련 문제 10문제도 시트에 넣을 수 있도록 작성해 줘. 문제풀이 후에 동점자가 많을 경우 변별력을 위해 [1순위: 점수(높은순), 2순위: 시간(짧은순)]으로 탑3가 표시되도록 코드를 작성해 줘. 단, UI는 Tailwind CSS를 사용해서 모바일 친화적으로 만들어주고, 토스(Toss) 앱처럼 깔끔한 블루 톤의 둥근 디자인을 적용해 줘.

[교내 연수 신청]
학교에서 선생님들이 연수를 신청할 수 있는 웹 앱을 작성하고 싶어.  Google Apps Script로 프론트엔드와 백엔드로 구분해서 코드를 작성해 줘. 관리자는 연수에 대한 사전 설정을 할 수 있도록 랜딩 페이지에 '관리자 로그인' 버튼을 만들어 줘. 패스워드는 'admin'으로 설정해 줘. 연수 설정에서는 연수명, 연수 일시, 연수 장소, 연수 인원을 미리 정할 수 있어. 그리고, 해당 연수에 신청한 선생님들의 정보는 볼 수 있는 화면도 구성해 줘. 선생님들은 설정된 연수에 대해서만 신청을 할 수 있는 구조야. 랜딩 페이지에는 연수 신청에 대한 내용만 나오고, 신청이 되면 해당 과정의 연수자 목록이 보이면 돼. 신청 할 때는 선생님 성함과 교과목만 적으면 돼. 신청한 인원이 연수 인원을 초과할 때는 신청이 마감되었다는 메시지를 보여주고, 다시 신청 해야 해. 그리고, 구글 스프레드시트에 해당 연수 제목으로 시트를 새로 생성하고, 거기에 신청한 선생님들의 정보를 기록해 줘. 모던하고 미니멀한 스타일로 UI를 구성해 줘.

[행사 신청 시스템]
행사 줄서기 구글 앱스 스크립트를 제작해 줘. 구글 시트에 프로그램명, 프로그램별 신청 가능 인원, 운영 시간을 입력하도록 해줘. 프로그램 신청 시 구글 시트에 입력한 프로그램 목록이 보이도록 해주고, 학생들이 프로그램을 선택해서 이름과 비밀번호를 입력해서 신청하게 해 줘. 같은 시간대는 추가로 신청할 수 없게 해줘.
프로그램별 목록은 시간대별로 신청할 수 있게 배열해 줘. 신청 후에 신청을 취소할 경우, 비밀번호를 입력하여 신청을 취소하도록 해 줘. 그리고 신청 확인 메뉴를 추가해서 신청 확인 메뉴를 누르면 이름을 입력하여 자신이 신청한 내역을 볼 수 있게 해 줘.

[사진 과제 제출하기] (구글 프레젠테이션 파일에서 코드 입력, 휴대폰에서는 카메라 촬영 후 제출 방식으로 작동함.)
Googlle Apps Script를 활용해서 카메라 촬영 버튼을 누르면 카메라가 활성화되어 촬영할 수 있는 웹앱을 제작하고 싶어. 촬영된 이미지는 카메라 제출 버튼을 누르면 구글 프레젠테이션에 슬라이드가 한장 추가되면서 이미지가 자동으로 업로드 되는 컨테이너 결합 스크립트 코드를 작성해 줘. 제출하는 학생의 학번과 이름을 입력할 수 있게 해주고, 추가된 슬라이드에도 사진과 함께 학번, 이름이 함께 기재되도록 코드를 완성해 줘.

[쾌속 끝말잇기]
구글 앱스 스크립트를 활용하여 학생들이 동시에 접속하여 끝말잇기 게임을 할 수 있는 웹앱을 개발하고 싶어. 방장 학생이 자신의 이름을 입력하고 접속 코드를 다른 학생들에게 알려주면 상대방 학생들이 접속 코드와 이름을 입력하고 접속하게 해 줘. 방장 학생이 시작 버튼을 누르면 끝말잇기 게임을 시작하는거야. 학생별로 차례대로 입력한 글자가 실시간으로 나타나고 다음 차례 학생이 이어서 입력하는 방식이야. 데이터베이스는 구글 시트를 활용할 거야. 이를 위한 코드를 작성해 줘.

[학부모 상담 신청]
구글 앱스 스크립트를 활용해 학부모 상담 신청을 받은 웹앱을 제작하고 싶어. 학부모가 신청한 내역은 구글 시트에 입력되게 해줘. 교사가 구글 시트에 상담 가능 날짜와 시간을 입력해 놓으면 학부모가 원하는 날짜와 시간을 선택해서 신청하는 거야. 학부모는 자녀명, 학부모명을 입력해서 상담을 신청할 수 있고, [신청 취소] 버튼을 누르면 입력된 자녀명과 학부모명을 확인해서 상담을 취소할 수 있어. 웹페이지 디자인은 달력 방식으로 구글 시트에 입력된 날짜만 보이도록 제작해 줘. 이러한 사항이 제대로 반영되도록 코드를 작성해 줘.

[오늘의 급식 조회]  (Apps Script 파일 생성 -> 프로젝트 설정 -> API  스크립트 속성 추가)
구글 앱스 스크립트를 활용해 학교급식식단정보를 검색할 수 있는 웹앱을 작성하고 싶어. 교육정보개방포털(https://open.neis.go.kr/)에서 제공하는 Open API를 사용할거야.
API 키는 프로젝트 설정 메뉴에서 속성값으로 입력할거야. 명세서는 첨부한 엑셀파일이야.
이를 이용해 학교이름을 검색하고 날짜를 지정하면 급식식단정보가 표시되도록 하는 코드를 작성해 줘.

[모의주식 투자 실습] [포켓몬 카드 모의 거래소] [인생 100세 라이프 퀘스트] 관리자 패스워드: admin

[학급 포인트 통장] 관리자 패스워드: admin

[AI 배경 제거기]
미션: 사용자가 이미지를 업로드하면 배경을 자동으로 제거해주는 'AI 배경 제거기(Background Remover)' 웹앱을 만들어줘.
[기술 스택]
1. 프레임워크: Next.js (App Router), TypeScript / 2. 스타일링: Tailwind CSS
3. 핵심 라이브러리: @imgly/background-removal (API 키 필요 없이 브라우저에서 동작하는 라이브러리 사용)
4. 애니메이션: Framer Motion / 5. 아이콘: Lucide React
[기능 요구사항]
1. 메인 화면 (UI):
  - Antigravity 스타일의 다크 모드 테마 적용 (깊은 검정 배경, 네온 포인트 컬러).
  - 중앙에 큼직한 'Drag & Drop' 업로드 존을 만들어줘. (마우스 오버 시 테두리가 빛나는 효과).   - 하단에 Copyleft by twone 이라고 적어줘.
2. 처리 로직:
  - 사용자가 이미지를 올리면 즉시 배경 제거 작업을 시작해줘.   - 작업 중일 때는 세련된 로딩 애니메이션(스피너 또는 프로그레스 바)을 보여줘.
  - 변환이 완료되면 '원본 이미지'와 '배경 제거된 이미지'를 나란히 비교해서 보여줘.
3. 결과 다운로드:
  - 배경이 투명해진 PNG 파일을 다운로드할 수 있는 버튼을 만들어줘.   - 버튼에는 "투명 배경 다운로드"라고 적어줘.
[구현 가이드]
- '@imgly/background-removal' 패키지는 첫 로딩 시 WASM 파일 다운로드가 필요하므로, 이 과정을 사용자에게 안내하거나 로딩 상태로 잘 처리해줘.
- 전체적인 레이아웃은 단일 페이지(Single Page)로 심플하게 구성해줘.
위 요구사항에 맞춰 프로젝트 구조를 잡고 코드를 작성해줘.

[화난 선생님 게임]
프로젝트 목표: '앵그리 오지상' 게임을 모티브로 한 한국형 복불복 웹 게임 "화난 선생님: 대혼란의 교실"을 만들어줘.
사용자가 실패(꽝)를 골랐을 때 화면의 모든 요소가 물리 법칙에 의해 바닥으로 떨어지고 뒹구는 효과를 구현해야 해.
기술 스택: HTML, CSS, Vanilla JavaScript
물리 엔진 라이브러리: Matter.js (화면 요소들의 중력 및 충돌 구현용)
상세 요구사항: 1. 게임 컨셉 및 디자인 (한국적 느낌)
제목: "화난 부장님: 대혼란의 회식" (폰트는 굵고 진지한 한글 폰트 사용)
메인 캐릭터: 화면 중앙 상단에 '엄근진(엄격, 근엄, 진지)'한 표정의 한국 중년 남성 이미지를 배치해줘. (이미지가 없으면 👔 이모지나 ASCII 아트 사용)
선택 아이템: 화면 중앙에 4x4 그리드로 16개의 '결재 서류(📄)'를 배치해줘. (카드 뒤집기 형태)
2. 게임 규칙 (러시안 룰렛)
게임이 시작되면 16개의 아이템 중 하나가 무작위로 '꽝(화난  선생님)'으로 설정됨.
성공 시: 안도하는 효과음(딩동댕)과 함께 해당 아이템이 선생님 이미지로 바뀜.
실패 시(꽝): 한국어 호통 소리나 꽹과리 소리 같은 시끄러운 효과음 재생.
안티그래비티 효과(핵심): 즉시 Matter.js가 활성화되면서 화면의 모든 요소가 중력의 영향을 받아 바닥으로 와르르 무너져 내리고 서로 부딪히며 뒹굴어야 함.
3. 기능 구현 디테일
Matter.js를 사용하여 DOM 요소들을 물리 객체(Body)로 매핑할 것. 꽝이 나오기 전까지는 일반적인 웹페이지처럼 정적인 레이아웃을 유지해야 함.
'다시 하기' 버튼을 누르면 페이지가 새로고침 되거나 초기화되어야 함.

[시청각실 예약 시스템]
# 프로젝트 개요
대전둔산중학교 시청각실(마이크, 믹서, 무대 구비) 예약 관리 웹앱 "온에어 둔산 (On-Air Dunsan)"을 만들어줘.
학생들은 이 앱을 통해 악기나 노래 연습을 위한 공간 사용을 신청하고, 관리자(선생님)는 이를 승인하거나 반려할 수 있어야 해.
# 기술 스택
- 프레임워크: Next.js 15 (App Router) - 스타일링: Tailwind CSS - 데이터베이스: Supabase (PostgreSQL) - 배포 대상: Vercel
# 디자인 컨셉 (테마: The Stage)
- 분위기: 학생들이 무대에 서는 듯한 느낌을 주도록 '다크 모드' 기반에 핀 조명(Spotlight) 효과를 포인트로 사용해줘.
- 색상: 배경은 짙은 검정(#1a1a1a), 강조색은 무대 조명 느낌의 골드(#FFD700) 또는 네온 컬러 사용.
- 폰트: 가독성이 좋고 세련된 산세리프 폰트 (Pretendard 또는 Noto Sans KR).
# 데이터베이스 설계 (Supabase)
아래 스키마를 가진 `bookings` 테이블을 생성할 SQL을 먼저 작성해줘.
- `id`: int8, Primary Key - `created_at`: timestamptz (기본값: now) - `use_date`: date (사용 날짜, 필수) - `use_time`: text (사용 시간, 필수)
- `participants`: int (사용 인원, 필수) - `grade_class`: text (학년반, 예: 3학년 2반, 필수) - `student_name`: text (대표 학생 이름, 필수)
- `phone_number`: text (대표 학생 전화번호, 필수) - `status`: text (기본값: 'pending') - 'pending'(대기), 'approved'(승인), 'rejected'(거절)
# 주요 기능 명세
1. 학생용 메인 화면 (Home)
  - 시청각실의 멋진 배경 이미지와 함께 "온에어 둔산" 타이틀 배치. - 예약 신청 폼: 날짜, 시간, 인원, 학년반, 이름, 전화번호 입력.
  - [예약하기] 버튼 클릭 시 Supabase에 데이터 저장 및 "신청이 완료되었습니다" 모달 표시.
2. 관리자 페이지 (/admin)
  - 간편 로그인: 아이디 `admin`, 비밀번호 `admin` 입력 시에만 접근 가능하도록 클라이언트 사이드에서 간단히 처리.
  - 대시보드: 모든 예약 내역을 리스트(테이블) 형태로 조회.   - 검색/필터: 날짜별, 학생 이름별로 내역을 검색하는 기능.
  - 승인 관리: 각 예약 항목 옆에 [승인(V)], [거절(X)] 버튼 배치.     - 승인 시 status를 'approved'로 변경하고 해당 행을 초록색 테두리로 강조.
  - 거절 시 status를 'rejected'로 변경하고 해당 행을 붉은색 처리.   - 데이터 관리: 관리자는 잘못된 예약 내역을 수정하거나 삭제할 수 있어야 함.

[Motion O/X Quiz]
1. Goal
웹캠을 이용해 학생들의 O/X 포즈를 인식하여 정답을 맞히는 교육용 웹앱을 구축해줘.
중요: 새로운 Supabase 프로젝트를 만들지 않는다. 내가 이미 가지고 있는 기존 Supabase 프로젝트에 `questions` 테이블만 새로 생성해서 연결할 거야.
2. Tech Stack
Framework: Next.js 14 (App Router) / Styling:** Tailwind CSS (Toss UI 스타일) / Database: Supabase (PostgreSQL) - Existing Project
Motion Recognition: `@mediapipe/pose`, `react-webcam` / Animation: `framer-motion`
3. Database Schema (Add to Existing DB)
기존 DB에 아래 스키마를 가진 `questions` 테이블을 생성하는 SQL 쿼리나 절차를 수행해줘:
`id`: UUID (Primary Key, default: uuid_generate_v4()) /  `question_text`: Text (문제 내용)
`is_correct`: Boolean (정답 여부: true=O, false=X) /  `created_at`: Timestamp (default: now())
4. Core Features
A. Game Mode (Main Page `/`)
  1.  Start: "퀴즈 시작하기" 버튼 (Toss Blue 색상).
  2.  Play:  DB에서 문제를 랜덤으로 로드.  3초 카운트다운 -> 웹캠 활성화 -> MediaPipe로 O/X 포즈 인식. 인식 성공 시 즉시 정답/오답 판정 및 효과음/그래픽 출력.
  3.  UI: 토스 앱처럼 깔끔하고, 폰트가 크고 둥근 디자인.
B. Admin Mode (`/admin`)
  1.  Manage: 기존 프로젝트의 DB에 연결된 상태에서 문제 추가/수정/삭제 기능 구현.
  2.  Auth: 간단한 비밀번호(PIN) 잠금 방식 적용 (복잡한 인증 구현 제외).
5. Design Guidelines (Toss Style)
Colors: Background(#F2F4F6), Primary(#0064FF), Text(#191F28).
Components: 모든 요소는 `rounded-3xl`, 버튼 클릭 시 Scale 인터랙션(쫀득한 느낌), 부드러운 화면 전환.
6. Action Plan (Start Here)
  1. Credentials: 가장 먼저 나에게 기존 프로젝트의 `NEXT_PUBLIC_SUPABASE_URL`과 `NEXT_PUBLIC_SUPABASE_ANON_KEY`를 물어봐줘.
  2.  Environment: 내가 키를 주면 `.env.local` 파일을 생성해.
  3. Table Setup: `questions` 테이블을 생성하기 위한 SQL 쿼리문을 제공하거나, 가능하다면 직접 생성해줘.
  4.  Implementation: 위 설정이 끝나면 바로 메인 게임 로직과 관리자 페이지 코드를 작성해줘.

[파이썬 게임] 스페이스 인베이더
/grill-me 스페이스 인베이더 같은 게임을 만들려고 하는데 MCP 모델로 간단하게 먼저 기획서를 작성해 줘. 파이썬을 이용해서 제작해 줘.
게임 비주얼 스타일은 클래식 8비트 픽셀로 해주고, 사운드는 배경음악과 효과음 모두 넣어줘.
추가적인 게임 플레이 피터는 제시된 내용 모두 넣어줘. 이렇게 프로그램을 작성해 줘.

[위젯] Desktop Timer
Windows 11 바탕화면용 글래스모피즘 스타일 타이머·시계 위젯 / Electron 기반 독립 실행형 앱 (설치) / 창 크기 자유 조절 / 전체화면 지원

[AI 감정 일기]
Vercel에서 Storage를 Redis로 설정해서 연결함. 환경 변수에 GEMINI_API_KEY 추가하여 백엔드에서 접근하도록 함. 입력/분석 내용을 Redis DB에 저장함. 

[실시간 채팅 Realtime Lounge]
Supabase의 역할: ① 사용자 안증 및 회원 관리 ② 실시간 데이터베이스 ③ 실시간 소켓 통신 ④ 미디어 파일 저장소 ⑤ 보안 및 접근 제어

[우리반 경매 나라]
관리자 로그인 암호: admin

[우리반 생각 나무]
관리자 로그인 암호: admin / netlify 아이디: dsmst027

[모의주식투자 교실]
관리자 로그인 암호: admin / netlify 아이디: dunsamms02