"아빠가 설계하고 딸이 완성하는 로직 퍼즐"
만 4~6세 아이들을 위한 초기 코딩 교육용 웹 게임 개발 프로젝트
📌 프로젝트 개요
탄생 배경
이 프로젝트는 펌웨어 엔지니어인 아빠가 딸을 위해 시작한 교육용 게임입니다. 복잡한 텍스트나 프로그래밍 언어를 사용하지 않고도, 직관적인 화살표 블록을 통해 로봇을 움직이며 자연스럽게 알고리즘적 사고와 논리력을 기를 수 있도록 설계되었습니다.
핵심 컨셉
컴퓨터 과학의 가장 기초적인 원리인 '입력(Input) - 처리(Process) - 출력(Output)' 과정을 5세 아동도 시각적으로 체득할 수 있는 게임입니다. 특히, 펌웨어의 Command Queue 구조와 Sequential Execution 방식을 게임 메커니즘에 차용하여, 실제 소프트웨어 개발의 기본 개념을 놀이로 전달합니다.
기술 스택
- Frontend: HTML5, JavaScript (ES6+), CSS3
- Build Tool: Vite
- 개발 환경: Node.js
- 에셋 생성: AI 이미지 생성 도구
🎯 게임 메커니즘
플레이 방식
- 계획하기 (Plan): 로봇이 충전기까지 가는 경로를 머릿속으로 계획
- 입력하기 (Input): 하단의 화살표 블록(→, ↑, ↓, ←)을 드래그하여 명령 큐에 배치
- 실행하기 (Run):
[GO]버튼을 눌러 명령을 순차적으로 실행 - 디버깅하기 (Debug): 실패 시 잘못된 블록을 찾아 수정
펌웨어 구조의 게임화
사용자 입력 → Command Queue 저장 → Sequential Execution → State Verification
이는 실제 임베디드 시스템의 제어 흐름과 동일한 구조입니다.
🛠️ 개발 과정
Phase 1: Foundation & Core Engine (기초 설계)
목표: 게임의 핵심 로직 구축
완료 항목
- ✅ 프로젝트 셋업: Vite 기반의 모던 웹 개발 환경 구축
- ✅ Grid System: 타일 기반 맵 시스템 구현
Grid클래스를 통한 맵 생성 및 렌더링- 시작점, 목표, 빈칸, 장애물 등 타일 타입 정의
- ✅ Robot Controller: 로봇 엔티티 구현
- 위치(x, y) 및 상태 관리
- 상하좌우 이동 로직
- ✅ Command System: 명령 처리 시스템
- Command Enum 정의 (UP, DOWN, LEFT, RIGHT)
- CommandQueue를 통한 명령 저장
- 비동기 실행 함수 구현
주요 설계 원칙 모든 코드는 RULES.md에 정의된 엄격한 코딩 규칙을 준수합니다:
- 모듈화 및 재사용성 확보
- 함수 중심 구현 (DRY 원칙)
- 상수 관리 (Hard-coding 금지)
- 명명 규칙 준수
Phase 2: Game Loop & UI Interactions (게임 루프 구현)
목표: 사용자 인터랙션과 게임 플레이 루프 완성
완료 항목
- ✅ Command UI: 하단 명령 패널 구현
- 드래그 & 드롭 기능으로 직관적인 블록 배치
- 블록 제거 기능
- ✅ Execution Flow: 실행 시각화
[GO]버튼을 통한 명령 실행- 현재 실행 중인 블록 하이라이트 표시 (디버깅 피드백)
- Reset 로직 구현
- ✅ Collision & Rules: 게임 규칙 구현
- 장애물 충돌 감지
- Win 조건: 로봇이 충전기 도달
- Fail 조건: 장애물 충돌 또는 명령 부족
기술적 포인트 드래그 앤 드롭 구현 시 터치 디바이스와 마우스 모두를 지원하여, 태블릿과 PC에서 모두 사용 가능하도록 크로스 플랫폼 지원을 고려했습니다.
Phase 3: Scene Management & Content (씬 관리 및 콘텐츠)
목표: 전체 게임 흐름 구성
완료 항목
- ✅ Scene Manager: 상태 기반 씬 전환 시스템
- Title → Intro → Game → Result 순서
- 간단한 State Machine 패턴 적용
- ✅ Scene 1 - Title & Lobby: 시작 화면
- 대형 Play 버튼
- 로봇 캐릭터의 대기 애니메이션
- ✅ Scene 2 - Intro (Story): 스토리 연출
- 로봇의 불시착 → 배터리 방전 → 충전소 발견
- 텍스트 없이 이미지만으로 스토리 전달
- ✅ Scene 3 - Tutorial (Level 1): 튜토리얼
- 1x3 그리드의 단순한 직선 코스
- 손가락 애니메이션을 통한 시각적 가이드
- ✅ Scene 4 - Dynamic Level Loading: 레벨 진행 시스템
- Level 2+ 구현 (4x4 그리드, 장애물 포함)
- Level Manager를 통한 레벨 전환
- ✅ Scene 5 - Result Screen: 결과 화면
- 성공/실패 팝업
- 별점 시스템
- 다음 레벨로 이동 버튼
교육적 접근 각 레벨은 "Small Step" 학습 이론을 기반으로 설계되었습니다. 난이도가 급격히 상승하지 않고, 아이가 성취감을 느끼며 자연스럽게 다음 단계로 넘어갈 수 있도록 구성되었습니다.
Phase 4: Polish & Audio (완성도 향상)
목표: 시청각 피드백을 통한 몰입감 증대
완료 항목
- ✅ Visual Polish: UI 스타일링
- 부드러운 색상 팔레트
- 둥근 모서리 (아이들이 안전하게 느끼는 디자인)
- Glassmorphism 효과
- 그리드 이동 간 부드러운 트랜지션
- ✅ Audio System: 사운드 시스템
- 블록 배치 시 효과음
- 로봇 이동 시 효과음
- 성공/실패 효과음
- 배경 음악 (선택 사항)
- 사운드 토글 버튼 구현
디자인 철학 유아용 UI/UX 전문가의 피드백을 반영하여, **"장애물 = 나쁨/정지", "충전기 = 좋음/에너지"**의 은유가 시각적으로 즉각 전달되도록 했습니다.
Phase 5: Verification & Review (검증 및 문서화)
목표: 품질 보증 및 문서화
완료 항목
- ✅ Testing: 다양한 환경 테스트
- 반응형 디자인 검증 (태블릿/PC)
- 엣지 케이스 테스트 (빈 큐, 벽 충돌 등)
- 브라우저 호환성 테스트
- ✅ Documentation: 문서 작성
- README.md 업데이트 (설치 및 실행 방법)
- RULES.md 작성 (개발 규칙 문서화)
- 인라인 코드 주석 추가
Phase 6: Graphics Overhaul & Child-Friendly UI (그래픽 개선)
목표: AI 생성 에셋을 통한 비주얼 퀄리티 향상
완료 항목
✅ AI-Generated Assets: 프로페셔널 에셋 생성
char_robot.png: 귀여운 3D 스타일 로봇 캐릭터tile_empty.png: 부드러운 잔디/미래형 바닥tile_obstacle.png: 3D 스타일 바위/장애물tile_start.png: 로봇의 착륙 패드tile_goal.png: 발광 효과의 충전 스테이션bg_main.png: 우주/자연 배경- 아이콘: Play, Reset, Sound On/Off
✅ UI/UX Improvements: 아이 중심 디자인
- 텍스트 최소화: 모든 버튼을 아이콘으로 대체
- 시각적 은유 강화: 명확한 Good/Bad 구분
- 극단적 라운딩: 모든 UI 요소에 둥근 모서리 적용 (안전감)
- 축하 연출: 승리 시 캐릭터 점프 애니메이션
비주얼 임팩트 AI 생성 에셋 도입으로 프로젝트의 완성도가 비약적으로 향상되었습니다. 프로토타입에서 실제 상용 게임 수준으로 발전했습니다.
📂 프로젝트 구조
최종 프로젝트는 명확한 모듈화 구조를 갖추고 있습니다:
ChildGame/
├── index.html # 진입점
├── package.json # 의존성 관리
├── README.md # 프로젝트 문서
├── RULES.md # 개발 규칙
├── task.md # 개발 진행 상황
├── public/
│ └── assets/ # 게임 에셋 (AI 생성 이미지)
└── src/
├── main.js # 메인 엔트리 포인트
├── style.css # 글로벌 스타일
├── core/ # 핵심 로직
│ ├── Grid.js
│ ├── GameManager.js
│ └── CommandSystem.js
├── entities/ # 게임 오브젝트
│ └── Robot.js
├── scenes/ # 씬 관리
│ ├── IntroScene.js
│ ├── TitleScene.js
│ ├── GameScene.js
│ └── ResultScene.js
├── levels/ # 레벨 데이터
│ └── levelData.js
├── ui/ # UI 컴포넌트
│ └── CommandPanel.js
└── utils/ # 유틸리티
└── AudioManager.js
🎓 교육적 가치
1. 알고리즘적 사고 (Algorithmic Thinking)
아이들은 로봇을 목표까지 이동시키기 위해 순서대로 명령을 배열해야 합니다. 이는 프로그래밍의 가장 기본적인 개념인 "순차 구조(Sequential Structure)"를 자연스럽게 익히게 합니다.
2. 디버깅 경험 (Debugging)
명령이 잘못되면 로봇이 실패하고, 아이는 어느 블록이 잘못되었는지 찾아 수정해야 합니다. 이는 **시행착오를 통한 학습(Trial and Error)**과 **문제 해결 능력(Problem Solving)**을 기릅니다.
3. 공간 지각 능력 (Spatial Awareness)
그리드 기반 맵에서 로봇의 위치와 방향을 파악하고, 경로를 계획하는 과정은 공간 인지 능력을 향상시킵니다.
4. 원인과 결과 (Cause and Effect)
자신이 배치한 블록(원인)에 따라 로봇이 움직이고(결과), 성공 또는 실패가 결정됩니다. 이는 인과관계 이해를 돕습니다.
💡 기술적 인사이트
펌웨어 엔지니어의 접근
이 프로젝트는 펌웨어 개발의 핵심 개념을 게임에 적용한 흥미로운 사례입니다:
Command Pattern 구현
// 임베디드 시스템의 Command Queue와 동일한 구조
class CommandQueue {
constructor() {
this.queue = [];
}
enqueue(command) {
this.queue.push(command); // 명령 저장
}
async execute() {
for (const cmd of this.queue) {
await this.processCommand(cmd); // 순차 실행
if (this.checkCollision()) { // 상태 검증
this.handleError();
return;
}
}
}
}
State Machine Pattern
씬 관리 시스템은 유한 상태 머신(Finite State Machine) 패턴을 사용합니다:
TITLE → INTRO → GAME → (WIN/FAIL) → RESULT → GAME (Next Level)
이는 임베디드 시스템의 동작 모드 전환과 동일한 구조입니다.
🚀 향후 계획 (Future Roadmap)
Phase 7: Content Expansion (콘텐츠 확장)
목표: "Small Step" 학습 이론 기반 대량 콘텐츠 생성
계획 중인 기능
- [ ] Chapter System: 레벨을 Step으로 그룹화
- Step 1: 3x3 그리드 (기초)
- Step 2: 4x4 그리드 (중급)
- Step 3: 5x5 그리드 (고급)
- [ ] Save System:
localStorage를 활용한 진행도 저장 - [ ] Star Rating: 명령 개수에 따른 별점 평가
- [ ] Procedural Level Generator: 무한 콘텐츠 생성
- 자동 맵 생성 알고리즘
- 경로 보장 알고리즘 (항상 풀 수 있는 퍼즐)
- 난이도별 장애물 밀도 조절
Phase 8: Parental Controls & Usability (부모 기능)
배경: 실제 사용자(딸) 테스트 피드백 반영
계획 중인 개선
- [ ] Soft Reset: 실패 시 명령 블록 유지 (디버깅 용이성)
- [ ] Hint System: 반복 실패 시 다음 타일 힌트 표시
- [ ] Skip Level: 부모가 레벨 스킵 가능 (숨겨진 기능)
🎨 디자인 철학
아이들을 위한 UI/UX
- 텍스트 제거: 글자를 읽을 수 없는 아이들을 위해 모든 인터페이스를 아이콘화
- 즉각적 피드백: 모든 행동에 대한 시청각 피드백 제공
- 안전한 느낌: 극단적으로 둥근 모서리, 부드러운 색상
- 명확한 은유: 나쁜 것은 어둡고 거칠게, 좋은 것은 밝고 발광
반응형 디자인
- 태블릿 우선: 아이들이 주로 사용하는 디바이스 고려
- 큰 터치 영역: 작은 손으로도 쉽게 조작 가능
- 세로/가로 모드 모두 지원
🛠️ 개발 환경 및 실행 방법
요구 사항
- Node.js 14 이상
- 모던 웹 브라우저 (Chrome, Safari, Edge 등)
실행 방법
# 1. 프로젝트 폴더로 이동
cd ChildGame
# 2. 의존성 설치 (최초 1회)
npm install
# 3. 개발 서버 실행
npm run dev
# 4. 브라우저에서 http://localhost:5173 접속
배포 빌드
npm run build
# dist 폴더에 배포용 파일 생성
📊 프로젝트 현황
완료된 기능
- ✅ 핵심 게임 로직 (Command Queue, Grid System)
- ✅ 드래그 앤 드롭 UI
- ✅ 5개 씬 구현 (Title, Intro, Tutorial, Game, Result)
- ✅ 충돌 감지 및 승리/실패 조건
- ✅ AI 생성 에셋 통합
- ✅ 사운드 시스템
- ✅ 반응형 디자인
진행률
Phase 1-6: 100% 완료 ✅
Phase 7-8: 계획 단계 📝
💭 회고 및 배운 점
성공 요인
- 명확한 설계: 스토리보드와 task.md를 통한 체계적 개발
- 엄격한 코딩 규칙: RULES.md를 통한 코드 품질 유지
- 모듈화: 재사용 가능한 컴포넌트 설계로 유지보수 용이
- AI 활용: 에셋 생성 시간 단축 및 퀄리티 향상
도전 과제
- 터치 디바이스 최적화: 드래그 앤 드롭을 모바일과 PC 모두에서 부드럽게 동작시키기
- 애니메이션 타이밍: 아이들이 로봇의 움직임을 명확히 인지할 수 있는 속도 조절
- 난이도 균형: 너무 쉽지도 어렵지도 않은 레벨 디자인
아이와 함께한 개발
실제 타겟 사용자(딸)와 함께 테스트하며 피드백을 받은 것이 가장 큰 자산이었습니다. 개발자가 놓치기 쉬운 UX 문제를 아이의 직접적인 반응을 통해 발견할 수 있었습니다.
🎁 프로젝트의 의미
이 프로젝트는 단순한 게임이 아닙니다. 아빠가 딸에게 전하는 컴퓨터 과학의 첫 선물입니다.
펌웨어 엔지니어로서 매일 다루는 Command Queue, State Machine, Sequential Logic이라는 추상적인 개념을 5세 아이가 이해할 수 있는 형태로 번역하는 과정은, 개발자 본인에게도 큰 배움이 되었습니다.
**"복잡한 것을 단순하게 만드는 것이 진정한 이해"**라는 명제를 몸소 체험한 프로젝트였습니다.
🔗 관련 문서
- README.md - 프로젝트 소개 및 실행 방법
- RULES.md - 개발 규칙 및 코딩 표준
- task.md - 상세 개발 Task List
- 유아용 논리 퍼즐 게임 스토리보드.md - 초기 기획 문서
🏷️ 해시태그
#코딩교육 #유아교육 #게임개발 #WebDevelopment #JavaScript #Vite #알고리즘 #펌웨어엔지니어 #부녀프로젝트 #CommandPattern #교육용게임 #VisualProgramming #AI에셋 #반응형디자인 #모듈화 #클린코드
개발 기간: 2026년 1월 ~ 2월 (진행 중)
개발자: kyeong14
라이선스: ISC
버전: 1.0.0
"프로그래밍을 배우는 것은 생각하는 방법을 배우는 것이다."
— Seymour Papert, LOGO 언어 창시자
이 글은 Google Antigravity 로 작성 되었습니다.
