[프롬프트 엔지니어링] CO-STAR 기법으로 초등 수학 덧셈 웹앱 뚝딱 만들기
AI를 활용해 코딩을 몰라도 나만의 맞춤형 교육용 웹앱을 만들 수 있다는 사실, 알고 계셨나요?
오늘은 프롬프트 작성의 정석이라고 불리는 CO-STAR 프롬프트 기법을 활용하여, 초등학교 저학년 아이들을 위한 '두 자리 수 덧셈 연산 웹앱'을 만든 과정을 공유합니다.
단 하나의 HTML 파일로 완벽하게 구동되는 웹앱을 만들기 위해 AI에게 어떤 구체적인 지시를 내렸는지 확인해 보세요!
🎯 완성된 웹앱 먼저 보기
AI가 아래의 프롬프트를 바탕으로 작성한 실제 결과물입니다. 링크를 클릭해 직접 연산 문제를 풀어보세요.
👉
💡 웹앱 제작을 위한 CO-STAR 프롬프트 전문
이 프롬프트는 생성형 AI가 정확히 내가 원하는 결과물을 만들 수 있도록 배경, 목표, 스타일, 어조, 타겟, 출력 형식을 꼼꼼하게 정의했습니다.
1. 🏢 Context (배경 및 환경 설정)
목적: 초등학생들이 두 자리 수 덧셈과 받아올림(Carry) 자릿수 개념을 쉽게 이해할 수 있도록 돕는 개별 교구 웹앱 제작.
개발 환경: 별도의 외부 라이브러리 설치나 분할 파일 없이, HTML / CSS / JS가 하나로 통합된 단일 웹 페이지(.html)로 동작해야 함.
2. 🎯 Objective (수행 목표와 핵심 기능)
문제 출제 로직: 총 10문제 출제. 정확히 '5문제'는 일의 자리에서 받아올림이 있고, '5문제'는 받아올림이 없게 생성하여 랜덤 셔플. (결과값은 100을 넘지 않도록 제어)
완벽한 레이아웃: 초등학교 수학 교과서 규격의 '세로셈' 레이아웃 구현. CSS Grid나 고정 너비를 사용해 백/십/일의 자리 열이 한 치의 오차도 없이 수직 정렬되게 할 것. 더하기 기호(+)는 아랫줄 숫자의 왼쪽(백의 자리 열)에 정밀하게 배치.
입력창(Input) 설정: 가상 키패드 대신 기기 고유의 숫자 패드가 뜨도록
<input inputmode="numeric">적용. 결과선 아래에 3개의 입력창(백, 십, 일의 자리)을 각각 배치.✨ 핵심 자릿수 UX 시나리오 (매우 중요):
문제 시작 시 가장 우측 '일의 자리'에 자동 포커스.
숫자 입력 시 일의 자리 ➡️ 십의 자리 ➡️ 백의 자리 순으로 포커스가 자동 이동 (오른쪽에서 왼쪽으로 역방향 이동).
클릭/터치로 개별 수정 가능.
빈칸에서 Backspace 누르면 이전 자릿수(우측)로 이동하며 글자 삭제. 좌우 방향키 이동 지원.
입력 완료 후 Enter 누르면 즉시 정답 제출.
시각/청각 피드백: 정답 제출 시 Web Audio API로 맑은 효과음(딩동댕/땡) 재생 및 정답 시 Confetti(폭죽) 효과 발생. (외부 사운드 링크 사용 금지)
상세 해설 기능: 문제 종료 시 반드시 '단계별 해설' 화면 제공. (일의 자리 합산 및 받아올림 ➡️ 십의 자리 합산 ➡️ 최종 정답 시각화). Enter를 누르면 다음 문제로 자동 전환.
3. 🎨 Style (디자인 및 인터페이스)
Tailwind CSS를 활용한 현대적이고 사랑스러운 파스텔톤 어린이 친화적 디자인.
둥글둥글한 모서리, 부드러운 그림자 효과, 귀여운 이모지 적극 활용.
숫자 입력 상자는 연산 상태에 따라 테두리 색상(포커스 피드백)이 부드럽게 강조되도록 디자인.
4. 🗣️ Tone (어조)
친절하고, 격려를 아끼지 않으며, 초등학교 저학년 어린이들의 학습 동기를 자극할 수 있는 긍정적인 메시지와 톤앤매너 유지.
5. 👥 Audience (타겟 고객군)
받아올림 개념을 처음 배우는 만 7~9세 초등학교 저학년 어린이.
조작 피로도가 전혀 없어야 하며, 레이아웃에 흔들림이나 깨짐이 없어야 함.
6. 📝 Response (최종 출력 양식)
모든 로직, 스타일, 오디오 처리, 정답 피드백 시스템이 하나의 파일 안에서 빈틈없이 작동하는 단일 완성형 HTML 코드만 출력할 것.
📌 블로거의 코멘트: 이 프롬프트가 훌륭한 이유!
이 프롬프트에서 가장 돋보이는 부분은 단순한 코딩 지시를 넘어 '사용자 경험(UX)'을 깊이 고민했다는 점입니다.
특히 덧셈을 할 때 일의 자리부터 계산하는 아이들의 사고방식에 맞춰, 입력 커서가 우측(일의 자리)에서 좌측(십의 자리)으로 자동 이동하게 만든 디테일과 모바일 환경을 고려한 inputmode="numeric" 속성 지정은 AI에게 꼭 명시해주어야 할 아주 훌륭한 지침입니다.
교육용 앱이나 간단한 유틸리티가 필요하시다면, 위 프롬프트를 참고하여 여러분만의 아이디어를 AI와 함께 실현해 보세요!
이 블로그 글이 도움 되셨나요? 여러분은 AI로 어떤 앱을 만들어보고 싶으신가요?
