[아빠표 연산 어플] STEP 1. 코딩 0줄! AI로 딸아이 취향 저격 '바다 테마' 연산 앱 화면 뚝딱 만들기

안녕하세요! 全자동입니다.

프롤로그에서 예고해 드린 대로,

오늘부터 초등학생 딸아이를 위한 '세상에 단 하나뿐인 맞춤형 연산 어플' 만들기를 본격적으로 시작합니다.

가장 먼저 할 일은 아이의 시선을 사로잡을 예쁜 '앱 화면(UI)'을 만드는 것입니다.

코딩을 몰라도, 포토샵을 할 줄 몰라도 괜찮습니다. 우리에겐 찰떡같이 알아듣는 AI 비서가 있으니까요!

1. 🐳 기획: 딱딱한 수학은 가라! 감성 듬뿍 '바다 테마' 연산 앱

시중의 연산 앱들은 대부분 딱딱한 숫자 위주라서 아이들이 금방 흥미를 잃습니다. 그래서 저는 딸아이가 좋아하는 '바다 동물'들을 활용해 동화책을 읽듯 수학을 접하게 해주고 싶었습니다.

🌊 아빠가 AI로 1분 만에 뚝딱 만든 '전자동의 숫자놀이' 메인 화면 🌊

아이가 좋아하는 바다 컨샙 연산어플!

▲ AI에게 지시(프롬프트)만 내려서 뽑아낸 완벽한 프론트엔드 결과물입니다.

2. 🎨 디테일이 살아있는 4칙 연산 스토리텔링

화면을 보시면 아시겠지만, 단순히 더하기 빼기가 아닙니다.

각 연산의 개념을 직관적으로 이해할 수 있도록 짧은 스토리를 더했습니다.

• 🌊 보글보글 덧셈 (+): 물방울이 모여 커지는 모습을 상상하며 덧셈의 원리를 익힙니다.
• 🐚 슝슝 뺄셈 (-): 조개가 하나씩 사라지는 시각적 상상을 통해 뺄셈을 이해합니다.
• 🦀 쑥쑥 곱셈 (×): 게들이 옆으로 줄을 서며 배수로 늘어나는 곱셈의 개념을 배웁니다.
• 🐳 톡톡 나눗셈 (÷): 고래가 물줄기를 공평하게 나누며 나눗셈에 친숙해집니다.

3. 🗣️ 마법의 '바이브코딩' 프롬프트 공개!

놀랍게도 위 화면은 제가 직접 코드를 짠 것이 아닙니다.

오직 AI(챗GPT, 제미나이 등)에게 말(프롬프트)로 지시해서 받아낸 HTML 파일 1개입니다.

여러분도 아래의 프롬프트를 그대로 복사해서 AI에게 부탁해 보세요. 순식간에 예쁜 앱 화면 코드를 짜줄 것입니다.

[복사해서 사용하세요: 바다 테마 연산 앱 UI 프롬프트]

너는 20년 차 최고 수준의 '유아동 교육용 앱 UI/UX 디자이너 겸 프론트엔드 개발자'야.
초등학생을 위한 '숫자놀이(4칙연산)' 모바일 웹 앱 화면을 HTML 파일 1개로 완벽하게 만들어줘.

[디자인 요구사항]
1. 전체적인 배경은 아주 연하고 부드러운 하늘색(파스텔 블루) 그라데이션으로 해줘.
2. 상단 중앙에는 귀여운 글씨체로 '전자동의 숫자놀이'라는 타이틀을 넣고, 양옆에 고래와 돌고래 이모지를 배치해 줘.
3. 화면 중앙에는 4개의 커다랗고 둥근 버튼을 세로로 배치해 줘. 각 버튼은 은은한 파스텔톤 테두리를 가져야 해.
- 1번 버튼: 🌊 보글보글 덧셈 (+) / 부제목: 물방울이 모여 커져요
- 2번 버튼: 🐚 슝슝 뺄셈 (-) / 부제목: 조개가 하나씩 사라져요
- 3번 버튼: 🦀 쑥쑥 곱셈 (×) / 부제목: 게들이 옆으로 줄을 서요
- 4번 버튼: 🐳 톡톡 나눗셈 (÷) / 부제목: 고래가 물줄기를 나눠요
4. 화면 맨 아래에는 하단 고정 네비게이션 탭바를 만들어 줘. (메뉴: 🏝️ 공부방, ☁️ 구름계산기, 👤 프로필)
5. 코드를 복사할 필요 없이, 내가 바로 다운로드해서 실행해 볼 수 있도록 HTML 파일 전체 코드를 제공해 줘.

AI가 만들어준 HTML 코드를 복사해서 메모장에 붙여넣고 index.html로 저장한 뒤,

크롬 브라우저에 드래그 앤 드롭으로 던져 넣기만 하면 방금 본 그 예쁜 화면이 내 PC에 짠! 하고 나타납니다.

4. 🚀 다음 단계 예고: 무한 랜덤 문제 생성기 장착하기

껍데기(UI)를 완벽하게 만들었으니, 이제 알맹이(기능)를 채울 차례입니다.

시즌 1 영단어 앱에서는 구글 엑셀을 사용했지만, 연산 문제는 엑셀에 일일이 적을 필요가 없습니다.

다음 [STEP 2]에서는 AI에게 "덧셈 버튼을 누르면 1부터 99까지의 숫자 중 2개를 랜덤으로 뽑아서 무한으로 문제를 내줘!"라고 지시하여, 자바스크립트(JS) 기반의 강력한 '무한 랜덤 문제 생성기'를 앱 안에 장착해 보겠습니다.

점점 더 신기하고 재미있어지는 바이브코딩의 세계,

다음 포스팅에서 만나요!