https://gemini.google.com/share/0f7ebc2a6b88

업로드한 이미지를 분석하여 '수학 컬러링 학습지'로 변환해주는 웹앱 COSTAR 프롬프트

1. Context (컨텍스트)

초등학생들이 수학 연산을 재미있게 학습할 수 있도록, 사용자가 업로드한 이미지를 분석하여 '수학 컬러링 학습지'로 변환해주는 웹 애플리케이션을 개발하고자 합니다. 학생들은 칸 안에 적힌 수학 문제(나눗셈, 곱셈 등)를 풀고, 정답에 해당하는 색상을 칠해 숨겨진 그림을 완성합니다.

2. Objective (목표)

사용자가 이미지를 업로드하면 이를 픽셀화(Pixelation)하고, 각 픽셀에 수학 문제(나눗셈, 곱셈, 덧셈/뺄셈)를 자동으로 생성하여 인쇄 가능한 형태의 학습지를 만드는 React 기반 싱글 페이지 애플리케이션을 구축합니다.

3. Style (스타일)

• UI/UX: 깔끔하고 현대적인 교육용 대시보드 스타일 (Tailwind CSS 활용).

• 톤앤매너: 밝고 신뢰감 있는 블루/인디고 컬러 테마, 둥근 모서리, Lucide-React 아이콘 사용.

• 가독성: 인쇄 시 가독성을 위해 픽셀 안의 숫자는 뚜렷하고 굵은 폰트를 사용.

4. Tone (어조)

• 친절하고 직관적인 사용자 경험을 제공하며, 교사나 학부모가 복잡한 설정 없이 바로 사용할 수 있도록 안내하는 어조.

5. Audience (대상)

• 초등학교 교사, 학부모, 그리고 수학을 시각적으로 즐겁게 학습하고 싶은 초등학생들.

6. Response (응답 구조 및 기술 요구사항)

[기술 스택]

• React (Single File), Tailwind CSS, Lucide-React Icons.

[핵심 기능]

1. 이미지 처리 및 픽셀화:

   • HTML5 Canvas를 활용하여 업로드된 이미지를 설정된 그리드 크기(예: 20x20)로 리사이징.

   • 각 픽셀의 색상을 분석하여 미리 정의된 8가지 교육용 표준 색상(Brown, Yellow, Red 등) 중 가장 가까운 색으로 매칭.

2. 수학 문제 자동 생성:

   • 사용자가 선택한 연산(나눗셈, 곱셈, 덧셈/뺄셈)에 맞춰 문제 생성.

   • 예를 들어, 픽셀의 색상 ID가 '4'라면 나눗셈 모드에서 '12 ÷ 3'과 같은 식이 생성되어야 함.

3. 인쇄 시스템 (핵심):

   • window.open을 사용한 새 창 인쇄 방식 적용 (팝업 창에서 인쇄 전용 레이아웃 렌더링).

   • @media print 스타일을 통해 버튼 등 UI를 제외하고 오직 학습지만 출력되도록 설정.

   • 배경색 인쇄(-webkit-print-color-adjust: exact) 강제 적용.

4. 사용자 인터페이스:

   • 이미지 업로드 버튼, 연산 유형 선택(Select), 해상도 조절(Slider).

   • '도안 모드'(문제 노출)와 '정답 모드'(색상 채워짐) 전환 기능.

[제약 조건]

• 외부 이미지 URL 대신 인라인 SVG나 이모지를 활용할 것.

• 모든 코드와 로직은 하나의 파일(.jsx)에 포함될 것.

• 브라우저의 alert() 대신 커스텀 UI 메시지를 사용할 것.