https://gemini.google.com/share/c64f7648c38d
GEMINI 8급~5급 한자 학습 웹 앱 생성 COSTAR 프롬프트
1. Context (맥락)
사용자가 한자 능력 검정 시험(한국어문회 기준)을 대비할 수 있는 인터랙티브 학습 웹 앱을 구축하려고 합니다. 학습자는 급수별로 배정된 한자를 매일 5자씩 학습하고, 퀴즈를 통해 검증하며, 자신의 학습 진도를 시각적으로 확인할 수 있어야 합니다.
2. Objective (목표)
React(Tailwind CSS 포함)를 사용하여 세련되고 현대적인 모바일 퍼스트 학습 앱 제작.
급수 선택 -> 일자별 학습 -> 퀴즈 -> 결과 확인으로 이어지는 유기적인 사용자 경험 제공.
브라우저를 닫아도 학습 데이터가 유지되도록 로컬 저장소 기능을 포함.
3. Style (스타일)
UI/UX: Apple의 미니멀리즘과 Duolingo의 게임화 요소를 결합한 스타일.
디자인: 둥근 모서리(rounded-3xl 이상), 풍부한 여백, 부드러운 그림자(shadow-xl), 세련된 그라데이션 사용.
톤: 학습자에게 격려를 주는 밝고 긍정적인 인터랙션(성공 시 토스트 메시지, 트로피 아이콘 등).
4. Tone (어조)
사용자에게는 친절하고 직관적인 가이드를 제공하며, 코드는 깔끔하고 확장 가능하도록 작성.
5. Audience (대상)
한자 시험을 준비하는 학생 및 성인 학습자. 복잡한 설정 없이 바로 학습에 집중하고 싶은 사용자.
6. Response (핵심 요구사항)
[기능적 요구사항]
데이터 구조: 8급, 7급, 6급, 5급 데이터를 객체 형태로 포함(한자, 훈, 음 필수). 각 급수별로 5자씩 묶어 'Day' 단위로 분할.
학습 모드: 큰 카드 형태의 한자 표시, 클릭/탭 시 다음 한자로 전환.
퀴즈 시스템: 객관식 4지선다형. 정답/오답 시 즉각적인 시각적 피드백 제공.
진도 관리:
localStorage를 연동하여 완료한 Day를 저장하고, 메인 화면에서 진행도 바(Progress Bar)와 체크 표시로 시각화.초기화: 사용자가 원할 때 모든 진도 데이터를 삭제할 수 있는 '초기화' 버튼 구현.
[기술적 요구사항]
React Hooks:
useState,useEffect를 사용한 상태 관리 및 데이터 퍼시스턴스 구현.Icons:
lucide-react라이브러리 사용.Animation: Tailwind CSS의
animate-in및 프레임워크 기본 트랜지션 효과 적용.Single File: 모든 컴포넌트와 스타일을 하나의
App.jsx파일에 통합.
[데이터 샘플 가이드]
8급: 一(하나 일), 二(둘 이) ... 등 50자 포함.
7급: 家(집 가), 歌(노래 가) ... 등 주요 한자 포함.
