매체 판별 OX 퀴즈 생성용 CO-STAR 프롬프트 가이드
https://gemini.google.com/share/4da21bb290e4
1. Context (맥락)
국어 교과서 및 미디어 리터러시 수업에서는 생각이나 정보를 전달하고 소통을 도와주는 도구인 '매체(Media)'의 개념을 배웁니다. 하지만 학생들은 단순한 '자연물'이나 전달되는 '내용(콘텐츠)'을 '매체' 자체와 혼동하는 경우가 많습니다. 학생들이 재미있는 게임 형식을 통해 진짜 '매체'와 '매체가 아닌 것'을 쉽고 직관적으로 구별할 수 있도록 돕는 학습용 웹앱이 필요합니다.
2. Objective (목표)
사용자가 헷갈리기 쉬운 매체 개념을 완벽하게 마스터할 수 있는 단일 파일(Single-File) 형태의 '매체 판별 OX 퀴즈 웹앱'을 제작해 주세요. 이 웹앱은 다음 3가지 화면으로 구성되어야 합니다:
시작 화면: 매체의 정의와 헷갈림 방지 꿀팁(예: 책/신문은 매체 O, 일기예보/바람소리는 매체 X)을 제공하는 화면.
퀴즈 화면: 총 15개의 문항 은행 중 랜덤으로 10문제를 추출하여 진행하는 화면. 실시간 점수, 진행률 게이지 바, 정/오답 판정 시 시각적 애니메이션 효과 및 상세한 해설 피드백 창이 나타나야 합니다.
결과 화면: 최종 점수와 점수대별 격려 코멘트를 보여주고, 문제를 다시 풀 수 있는 버튼과 '오답노트(문항별 정답/선택지/해설 정리)'를 토글하여 보여주는 레이아웃이 포함되어야 합니다.
3. Style (스타일)
레이아웃: 현대적이고 감각적인 모바일 친화형 카드 레이아웃 (최대 너비
max-w-lg정도의 콤팩트한 카드 스타일).디자인: Tailwind CSS를 사용하여 파스텔톤 계열의 부드러운 그라데이션 배경(예: indigo에서 purple로 이어지는 톤)과 부드러운 곡선(
rounded-3xl) 디자인을 적용해 주세요.폰트: 가독성이 뛰어난 한국어 폰트(예: Noto Sans KR)를 웹폰트로 로드하여 깔끔하게 다듬어 주세요.
효과음: 외부 파일 링크 대신 브라우저 내장 Web Audio API(Synthesizer 방식)를 활용해 정답(맑은 고음 딩동댕)과 오답(경고음 우웅) 소리가 나도록 순수 자바스크립트로 구현해 주세요.
4. Tone (어조)
학습 의욕을 북돋아 주는 따뜻하고 친근하며 격려하는 어조 (예: "훌륭합니다!", "아쉬워요! 틀렸습니다. 해설을 읽어보세요!").
학생들의 눈높이에 맞춘 쉽고 명쾌한 설명 톤.
5. Audience (타겟 독자)
미디어 리터러시와 국어 교과를 공부하는 초·중·고등학생 및 일반 학습자.
복잡한 UI보다는 한눈에 들어오는 버튼과 직관적인 터치 조작이 필요한 사용자.
6. Response (응답 방식)
모든 HTML, CSS, JavaScript 로직이 하나로 통합된 단일 .html 파일로 응답해 주세요. 외부 라이브러리는 Tailwind CSS CDN 링크만 사용해야 하며, 별도의 자산(이미지, 사운드 파일) 다운로드 없이 브라우저에서 독립적으로 완벽하게 실행 및 테스트할 수 있어야 합니다.
기본 문제 은행 데이터(15문항) 예시:
"기록되어 눈으로 보거나 만질 수 있는 '사진'은 매체일까요?" (정답: O / 해설: 사진은 시각적 이미지를 통해 생각이나 정보를 전달하는 훌륭한 매체입니다.)
"텔레비전이나 인터넷 앱을 통해 듣는 '일기예보' 정보 자체는 매체일까요?" (정답: X / 해설: 일기예보는 전달되는 '정보 내용'입니다. 이를 전하는 '라디오'나 '날씨 앱'이 매체입니다.)
(이와 같은 방식으로 실생활 맥락과 개념이 확실히 구분되는 엄선된 15문항과 구체적인 해설을 스크립트에 반드시 포함해 주세요.)
