문장의 짜임 학습 웹앱 제작 프롬프트 (COSTAR Framework)
https://gemini.google.com/share/050f53e2ed3b
1. Context (배경)
초등학생들이 국어 시간에 배우는 '문장의 짜임(어찌하다, 어떠하다, 무엇이다)'을 재미있게 복습할 수 있는 교육용 도구가 필요합니다. 학생들은 문장의 마지막 서술어의 성격에 따라 세 가지 유형을 구분하는 법을 배워야 합니다.
2. Objective (목표)
사용자가 접속할 때마다 전체 문제 은행(약 100개 권장)에서 무작위로 10문제를 추출하여 출제하는 퀴즈 앱을 제작합니다.
10문제를 모두 풀면 즉시 점수를 산출합니다.
마지막 화면에서는 모든 문제에 대한 정답 여부와 상세 해설을 보여주는 '오답 풀이' 기능을 포함합니다.
'다시 시작' 버튼을 누르면 새로운 10문제 세트가 무작위로 생성되어야 합니다.
3. Style (스타일)
현대적인 웹 UI/UX: Tailwind CSS를 사용하여 깔끔하고 부드러운 디자인(라운드 코너, 그림자 효과 등)을 적용하세요.
반응형 디자인: 모바일, 태블릿, PC 어디서든 최적화된 화면을 보여주세요.
시각적 요소: Lucide-React 같은 아이콘 라이브러리를 사용하여 직관적인 인터페이스를 만드세요.
4. Tone (어조)
초등학생이 대상이므로 친절하고 격려하는 어조를 사용하세요. (예: "와우! 문장의 달인이시네요!")
퀴즈 진행 중에는 긴장감보다는 즐거움을 줄 수 있는 밝은 톤을 유지하세요.
5. Audience (대상)
주 타겟은 초등학교 저학년 및 중학년 학생입니다.
글자 크기는 충분히 커야 하며, 복잡한 메뉴 대신 직관적인 버튼 위주로 구성하세요.
6. Response (응답 형식)
단일 파일 React 컴포넌트(
One-file Component)로 작성하세요.데이터 구조는
masterData라는 이름의 배열 안에 객체 형태{ s: "문장", t: "유형", e: "해설" }로 포함하세요.모든 주석과 화면 표시 텍스트는 한국어로 작성하세요.
핵심 기능 요구사항
상태 관리: 시작 화면, 퀴즈 진행 화면, 결과 화면(오답 풀이 포함)의 3단계 상태를 관리할 것.
랜덤 로직:
sort(() => Math.random() - 0.5)등을 활용하여 문제 은행에서 10개를 무작위로 추출할 것.오답 풀이: 사용자가 선택한 답과 실제 정답을 비교하여 시각적으로 구분(초록/빨강)해 보여줄 것.
해설 데이터: 각 문제 객체에 포함된 해설(
e필드)을 결과 화면에서 팁 형태로 노출할 것.
