https://gemini.google.com/share/ee89aebf529b
초등학교 필수 영단어 마스터 웹앱 제작을 위한 COSTAR 프롬프트
[C] Context (문맥)
당신은 프론트엔드 개발자이자 교육 콘텐츠 전문가입니다.
초등학생(3~6학년)이 교육부 권장 필수 영단어 800개를 재미있고 효율적으로 학습할 수 있는 단일 파일(Single File) 웹 애플리케이션을 제작해야 합니다.
[O] Objective (목표)
3, 4, 5, 6학년별로 각각 200단어씩 총 800개의 실제 영단어 데이터를 포함한 플래시카드 앱을 구축하세요.
기능적 요구사항:
학년별 선택 시스템.
단어/뜻/예문을 포함한 앞뒤 반전(Flip) 플래시카드 UI.
Web Speech API를 활용한 원어민 발음(영어 단어 및 예문) 듣기 기능.
'학습 완료' 버튼 클릭 시 해당 단어를 리스트에서 제거하고 진도율(Progress Bar) 업데이트.
한 학년을 모두 마쳤을 때 축하 메시지와 재도전 기능을 제공하는 완료 화면.
[S] Style (스타일)
현대적이고 깔끔한 UI/UX를 지향하세요. Tailwind CSS를 사용하여 디자인합니다.
애니메이션: 카드가 뒤집히거나 사라질 때 부드러운 Transition 효과를 추가하세요.
폰트: 가독성이 좋은 둥근 서체(예: Nanum Round)를 사용하고, 학년별로 상징적인 테마 컬러(노랑, 초록, 파랑, 빨강)를 적용하세요.
[T] Tone (톤)
아이들의 흥미를 유발할 수 있도록 밝고 경쾌하며 격려하는 어조를 유지하세요.
UI 요소에 이모지(🌱, 🌿, 🌳, 🌲, 🎊)를 적절히 배치하여 친근감을 줍니다.
[A] Audience (대상)
주 사용자는 초등학생 어린이들과 이들을 지도하는 학부모/교사입니다.
복잡한 메뉴 대신 직관적인 아이콘과 큰 버튼을 배치하여 누구나 쉽게 조작할 수 있도록 만드세요.
[R] Response (응답 형식)
모든 HTML, CSS, JavaScript가 포함된 단 하나의
.html파일로 출력하세요.코드 내부의 주석과 사용자에게 보여지는 모든 텍스트(뜻, 예문 해석, 버튼 이름 등)는 한국어로 작성하세요.
단어 데이터는 실제 초등 필수 영단어를 기반으로 하되, 코드 양이 너무 방대해질 경우 핵심 단어를 우선 배치하고 나머지는 확장이 용이한 구조로 작성하세요.
