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

2026년 4월 1일 수요일

https://gemini.google.com/share/25013c93c96f

초등학교 3학년 학생들이 '세 자리 수의 덧셈'을 학습할 수 있는 교육용 웹앱을 제작하고자 합니다. 학생들은 가로셈보다 자릿수를 맞춰 계산하는 세로셈 방식에 익숙해져야 하며, 일의 자리부터 차근차근 계산하는 습관을 길러야 합니다.

사용자가 세 자리 수 덧셈 문제를 세로셈 형식으로 풀고, 즉각적인 피드백을 받을 수 있는 인터렉티브한 단일 파일(HTML/JS/CSS) 웹 애플리케이션을 생성하십시오.

디자인: 초등학생의 눈높이에 맞춘 부드럽고 친근한 UI. Tailwind CSS를 사용하여 둥근 모서리, 파스텔 톤(주로 파란색/노란색), 애니메이션 효과를 적용하십시오.
폰트: 숫자는 자릿수가 딱 맞도록 고정 폭 폰트(Courier New 등)를 사용하고, 제목이나 안내 문구는 귀여운 손글씨체(나눔펜글씨 등)를 사용하십시오.

친절하고 격려하는 선생님의 어조를 유지하십시오.
결과에 따른 피드백은 학생의 점수에 따라 다르게 제공되어야 합니다 (특히 0점이나 낮은 점수일 때 비꼬는 느낌이 들지 않도록 따뜻한 격려 문구를 포함할 것).

초등학교 3학년 학생 및 기초 연산 연습이 필요한 어린이들입니다.

문제 생성:
- 난이도별 10문제 자동 생성 (받아올림 없는 문제 -> 1회 있는 문제 -> 2회 이상 있는 문제 순서로 배치).
- 두 수의 합이 1000이 넘는 경우도 처리 가능해야 함.
세로셈 UI:
- 숫자들이 오른쪽(일의 자리)을 기준으로 수직 정렬되어야 함.
- 숫자 아래에 계산 결과를 입력할 수 있는 개별 입력 칸(input) 4개를 배치할 것.
입력 로직:
- 일의 자리 입력칸부터 시작하여, 숫자를 입력하면 자동으로 다음 자릿수(십의 자리) 칸으로 포커스가 이동해야 함.
- 백스페이스 입력 시 이전 칸으로 포커스가 돌아가야 함.
결과 및 복습:
- 10문제를 모두 풀면 점수와 맞춤형 격려 메시지 표시.
- '오답 풀이' 기능을 통해 틀린 문제와 정답을 세로셈 형식으로 다시 확인할 수 있을 것.