[아빠표 연산 어플] STEP 4. "내 이름이 떴다!" 커스텀 프로필 & 아이 폰에 진짜 앱처럼 깔아주기 (시즌 2 완결)

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

바이브코딩으로 코딩 한 줄 없이 딸아이를 위한 수학 연산 앱을 만드는 대장정, 오늘 드디어 그 마지막 [STEP 4]입니다.

지금까지 예쁜 바다 테마 화면을 만들고, 무한 랜덤 문제 공장을 돌리고, 폭죽이 터지는 채점 시스템까지 완벽하게 장착했죠.

오늘은 이 훌륭한 앱에 화룡점정을 찍어보겠습니다.

바로 '우리 아이 이름 새기기'와 '스마트폰 바탕화면에 진짜 앱처럼 설치하기'입니다!

1. ✨ "이거 내 거야?" 소유욕을 자극하는 프로필 기능

아이들은 자기 이름이 적힌 물건에 특별한 애착을 갖습니다.

화면 맨 위에 그냥 '숫자놀이'라고 적혀 있는 것보다, '전자동의 숫자놀이'라고 뜬다면 앱을 대하는 태도부터 달라지겠죠?

하단 네비게이션 바에 만들어두었던 '👤 프로필' 탭을 눌러 이름을 입력하고 저장하는 기능을 AI에게 부탁해 보겠습니다.

[복사해서 사용하세요: 프로필 및 이름 저장 프롬프트]

지금까지 기능 너무 훌륭해! 이제 마지막으로 앱의 주인을 설정하는 '프로필 기능'을 추가할 거야.

[상세 기획 요구사항]
1. 하단 탭바에서 '👤 프로필' 버튼을 누르면 화면 중앙에 '내 이름 입력하기' 팝업창이 예쁘게 뜨게 해줘.
2. 이름을 입력하고 '저장' 버튼을 누르면, 메인 화면 상단의 타이틀이 'ㅇㅇㅇ의 숫자놀이'로 바뀌어야 해. (예: 소현이를 입력하면 '소현이의 숫자놀이'로 변경)
3. [핵심] 입력한 이름은 웹 브라우저의 로컬 스토리지(localStorage)에 저장해서, 앱을 껐다가 다시 켜도 아이 이름이 계속 유지되도록 해줘.
4. 이 모든 기능이 포함된 '최종 완성본 HTML 코드'를 제공해 줘.

AI가 준 최종 코드를 index.html에 덮어쓰기 하셨나요? 이제 프로필 탭을 눌러 아이 이름을 입력해 보세요.

나만의 어플이 완성되는 마법 같은 순간입니다!

2. 🌍 전 세계 배포도 바이브코딩으로! AI에게 무료 호스팅 물어보기

지금까지는 내 PC에서만 앱이 열렸습니다. 이제 아이 폰에서도 접속할 수 있도록 '인터넷 주소(URL)'를 만들어줄 차례입니다.

배포나 웹 호스팅 같은 어려운 용어를 몰라도 괜찮습니다. 우리는 '바이브코딩' 중이니까요!

다시 AI 채팅창으로 돌아가 이렇게 물어봅니다.

[복사해서 사용하세요: 깃허브 무료 배포 질문 프롬프트]

드디어 완벽한 코드가 완성됐어! 고마워.

그런데 지금은 내 PC에서만 이 파일을 열 수 있잖아.

딸아이 스마트폰에서도 접속할 수 있게 나만의 '인터넷 주소(URL)'를 만들고 싶어.

'깃허브(GitHub)'를 이용하면 평생 무료로 웹 주소를 만들 수 있다던데, 코딩의 'ㅋ'도 모르는 왕초보 아빠가 따라 할 수 있도록 깃허브 저장소 생성부터 URL 발급까지의 과정을 1단계부터 아주 쉽고 자세하게 설명해 줘!

질문을 던지면 AI가 깃허브 가입부터 클릭해야 할 버튼까지 정말 친절하게 순서대로 알려줍니다.

AI가 알려준 가이드를 요약하면 다음과 같습니다.

1. 깃허브(GitHub)에 로그인하고 'New repository' 버튼을 눌러 새 저장소를 만듭니다.
2. 이름은 자유롭게(예: math-app) 짓고, 'Public(공개)'으로 설정한 뒤 저장소를 생성합니다.
3. 'uploading an existing file'을 눌러 방금까지 만든 index.html 파일을 마우스로 끌어다 놓고 저장(Commit)합니다.
4. 상단 'Settings(설정)' -> 왼쪽 'Pages' 탭에서 Branch를 'main'으로 선택하고 'Save'를 누릅니다.

AI의 설명대로 따라 하고 약 1~2분 정도 기다리면,

나만의 웹 주소(https://내아이디.github.io/math-app)가 짠! 하고 발급됩니다.

이제 전 세계 어디서든 이 주소로 들어오면 우리 아이 앱이 열립니다!

3. 📱 아이 스마트폰 바탕화면에 '진짜 앱'처럼 깔아주기

진짜 마지막 단계입니다.

아이 폰을 가져와서 사파리(아이폰)나 크롬(갤럭시) 브라우저를 켜고 방금 발급받은 깃허브 주소로 접속합니다.

• 아이폰(Safari): 하단 중앙의 '공유' 아이콘(네모 위로 화살표)을 누르고 [홈 화면에 추가]를 누릅니다.
• 갤럭시(Chrome): 우측 상단의 점 3개 메뉴를 누르고 [홈 화면에 추가]를 누릅니다.

🎉 미션 클리어! 아빠표 연산 앱 완성!

바탕화면으로 나가보세요! 우리가 만든 앱이 카카오톡, 유튜브처럼 예쁜 아이콘으로 자리 잡고 있습니다. 아이콘을 눌러 실행하면 상단 인터넷 주소창도 보이지 않아 진짜 앱스토어에서 다운로드한 어플과 100% 똑같이 작동합니다.

에필로그: "아빠 최고!" 이 한마디면 충분합니다.

아이에게 스마트폰을 건네주며 프로필에 이름을 입력하게 해 주었습니다.

"우와! 내 이름이 어플에 나와요! 아빠 최고! 친구한테도 선물해야지!"라며 펄쩍펄쩍 뛰는 딸아이의 미소를 보니,

그동안 AI와 씨름했던 시간이 싹 보상받는 기분이었습니다.

코딩의 'ㅋ'자도 모르던 평범한 아빠가 AI 바이브코딩이라는 요술 방망이를 만나, 사랑하는 딸아이만을 위한 맞춤형 수학 어플을 뚝딱 만들어냈습니다. 여러분도 주저하지 말고 지금 바로 AI에게 말을 걸어보세요.여러분의 상상이 현실이 됩니다!

시즌 2 [아빠표 AI 구몬 - 맞춤형 연산 어플 만들기] 여정을 함께해 주셔서 감사합니다.

全자동은 더 재미있고 신기한 바이브코딩 프로젝트로 다시 돌아오겠습니다!