아이와 AI로 첫 웹앱 만들기 5단계

"우리 아이가 코딩을 배우면 좋을 것 같은데, 어디서 어떻게 시작해야 할지 모르겠어요." 많은 부모님이 공통으로 하는 질문입니다. 이 글은 Claude Code 같은 AI 도구를 활용해 아이가 첫 웹앱을 직접 만들고 인터넷에 배포하기까지의 5단계 과정을 소개합니다. 평균 총 소요 시간은 약 60~90분입니다.

"기존 코딩 교육은 문법 암기 중심이지만, AI 코딩은 아이가 자기 아이디어를 즉시 구현할 수 있어 몰입도가 완전히 다릅니다." — 박광세, SpyBuilders 창업자

01. 환경 설정 — 10분이면 끝

Claude Code를 설치하고 아이의 학습 계정을 생성하는 단계입니다. 평균 소요 시간은 10분입니다.

• Mac 또는 Windows 컴퓨터 준비
• Claude Code CLI 설치 (커맨드 1줄)
• 보호자 이메일 인증

02. 미션 선택 — 아이의 수준에 맞춰

아이의 수준에 맞는 SPY 미션을 선택합니다. 초급은 "자기소개 웹페이지", 중급은 "퀴즈 앱", 고급은 "가족 일정 공유 앱" 등 실제 쓸모 있는 주제로 구성되어 있습니다.

03. AI와 코딩 — 자연어로 지시하기

Claude Code에게 자연어로 지시합니다. 예를 들어 아이가 "파란색 배경에 내 이름 크게 보이는 페이지 만들어줘"라고 말하면 AI가 실제 HTML/CSS를 작성합니다.

$ claude "내 이름이 크게 보이는 페이지 만들어줘"
생각 중...
✓ index.html 생성 완료
✓ style.css 생성 완료
🎉 브라우저에서 열어보세요!

04. 테스트 & 수정 — 눈으로 보고 말로 고치기

만든 앱을 직접 열어보고, 마음에 안 드는 부분은 다시 AI에게 말로 수정을 요청합니다. "배경을 노란색으로 바꿔줘" 같은 식으로요.

05. 배포 & 공유 — 진짜 URL을 친구에게

Vercel로 한 줄 명령에 실제 웹에 배포합니다. 아이가 친구·가족에게 진짜 URL을 공유하는 순간이 SpyBuilders 전 과정에서 가장 감동적인 순간입니다.

자주 묻는 질문

---

다음 단계

첫 웹앱을 만들었다면 SpyBuilders 커리큘럼의 중급 과정(React + API 연동)으로 넘어갈 수 있습니다. 아이의 실제 프로젝트 배포 사례는 블로그 전체 목록에서 확인하세요.