COSTAR 프롬프트로 만들면서 배우는 바이브 코딩: 세 자리 수 세로셈 뺄셈 학습 웹앱 제작 프롬프트

2026년 4월 1일 수요일

https://gemini.google.com/share/200447f5f685

초등학교 3학년 1학기 2단원 '세 자리 수의 덧셈과 뺄셈'을 학습하는 학생들을 위한 교구입니다. 학생들은 특히 '받아내림'이 있는 뺄셈에서 자릿수를 헷갈려 하는 경우가 많으므로, 시각적으로 자릿수가 완벽하게 정렬된 세로셈 환경에서 연습이 필요합니다.

사용자가 세 자리 수 뺄셈 문제를 세로셈 형식으로 풀고, 정확한 자릿수에 숫자를 입력하며 즉각적인 피드백을 받을 수 있는 단일 파일(HTML/JS/CSS) 웹 앱을 제작하십시오.

디자인: 따뜻하고 차분한 붉은색/분홍색 톤(빨간색 포인트)의 친근한 UI를 적용하십시오. Tailwind CSS를 사용하여 둥근 레이아웃과 부드러운 버튼을 구현하십시오.
레이아웃: 숫자들이 오른쪽 끝(일의 자리)을 기준으로 수직으로 완벽하게 정렬되어야 합니다.
폰트: 숫자는 가독성과 정렬을 위해 고정 폭 폰트(Courier New 등)를 사용하고, 안내 문구는 귀여운 손글씨체를 사용하십시오.

친절하고 격려하는 선생님의 말투를 사용하십시오.
특히 낮은 점수를 받은 학생에게는 "괜찮아, 다시 해보자"와 같은 따뜻한 위로를 건네고, 높은 점수에는 "뺄셈 박사님"과 같은 극찬을 해주십시오.

초등학교 3학년 학생 및 세 자리 수 연산 기초가 필요한 어린이입니다.

난이도별 문제 생성 (10문제):
- 1~3번: 받아내림이 없는 쉬운 문제.
- 4~7번: 받아내림이 1회 있는 보통 문제.
- 8~10번: 받아내림이 2회(연속) 있는 어려운 문제.
- 항상 첫 번째 수 > 두 번째 수가 되도록 설정하여 음수가 나오지 않게 하십시오.
세로셈 인터페이스:
- 두 숫자 사이에 빼기(-) 기호를 적절히 배치하십시오.
- 숫자 아래에 계산 결과를 입력할 수 있는 4개의 개별 입력 칸을 배치하십시오.
스마트 입력 시스템:
- 사용자가 일의 자리부터 입력하도록 유도하십시오.
- 한 칸에 숫자 하나를 입력하면 자동으로 왼쪽 자릿수로 포커스가 이동해야 합니다.
- 백스페이스 입력 시 오른쪽 자릿수로 포커스가 돌아가야 합니다.
결과 및 오답 노트:
- 10문제 종료 후 점수와 맞춤형 격려 멘트를 표시하십시오.
- '오답 풀이' 화면에서 사용자가 입력한 값과 실제 정답을 세로셈 형식으로 비교해 보여주십시오.