프롬프트 하나로 교육용 웹앱 뚝딱! : 매체 판별 OX 퀴즈 만들기 (CO-STAR 기법)
안녕하세요! 오늘은 프롬프트 엔지니어링의 대표적인 프롬프트 작성 기법인 CO-STAR 프롬프트를 활용하여, 교육 현장에서 바로 쓸 수 있는 '매체 판별 OX 퀴즈 웹앱'을 만드는 방법을 공유하려고 합니다.
국어 시간이나 미디어 리터러시 수업을 하다 보면, 학생들이 '매체(Media)'의 개념을 헷갈려하는 경우가 많죠? 단순한 '자연물'이나 매체를 통해 전달되는 '내용(콘텐츠)'을 매체 자체와 혼동하곤 합니다.
이러한 문제를 해결하기 위해, 학생들이 게임처럼 재미있게 매체의 개념을 익힐 수 있는 웹앱 생성 프롬프트를 기획해 보았습니다. 복잡한 코딩 지식 없이도 AI에게 아래의 프롬프트를 입력하면 멋진 웹앱이 탄생합니다!
💡 미리 보기 AI가 이 프롬프트를 바탕으로 만들어낸 완성된 결과물은 아래 링크에서 확인하실 수 있습니다.
📝 매체 판별 OX 퀴즈 생성용 CO-STAR 프롬프트
AI에게 정확하고 퀄리티 높은 결과물을 얻기 위해 Context(맥락), Objective(목표), Style(스타일), Tone(어조), Audience(대상), Response(응답 형식)의 6가지 요소로 프롬프트를 구성했습니다.
그대로 복사해서 사용해 보셔도 좋습니다!
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문항) 예시] 반드시 아래와 같은 실생활 맥락의 엄선된 15문항과 구체적인 해설을 스크립트에 포함해 주세요.
Q: 기록되어 눈으로 보거나 만질 수 있는 '사진'은 매체일까요?
정답: O
해설: 사진은 시각적 이미지를 통해 생각이나 정보를 전달하는 훌륭한 매체입니다.
Q: 텔레비전이나 인터넷 앱을 통해 듣는 '일기예보' 정보 자체는 매체일까요?
정답: X
해설: 일기예보는 전달되는 '정보 내용'입니다. 이를 전하는 '라디오'나 '날씨 앱'이 매체입니다.
💡 마치며
위의 프롬프트를 AI(Gemini, ChatGPT, Claude 등)에게 입력하면, 복잡한 서버 설정이나 파일 관리 없이 브라우저에서 바로 실행되는 훌륭한 퀴즈 앱을 얻을 수 있습니다. 특히 Web Audio API를 활용해 외부 파일 없이 소리를 구현하도록 요청한 점이 단일 파일 배포를 훨씬 쉽게 만들어줍니다.
교육 현장에 계신 분들이라면, 문제 은행 데이터 부분만 수업 내용에 맞게 살짝 수정해서 나만의 퀴즈 앱을 만들어보시는 것을 추천합니다!
