프런트엔드 개발자로 일하다 보니 집에서 코딩하는 모습을 첫째 아들이 자주 보게 되었다. 모니터에 알록달록한 코드들이 쫙~ 펼쳐진 모습을 보더니 "아빠, 나도 해보고 싶어!"라고 하는 게 아닌가.

이거다 싶었다. 요즘 AI가 핫하니까 아이에게 AI 활용법도 알려주고, 게임만 하는 게 아니라 직접 만들어보는 경험도 시켜주면 좋겠다는 생각이 들었다.

그래서 시작한 아들과 함께하는 ChatGPT 틱택토 게임 만들기 프로젝트! (이름이 좀 거창하긴 하지만 ㅋㅋ)

🎯 프로젝트 목표 설정

아이와 함께 프로젝트를 시작하기 전에 목표를 명확히 했다:

  1. 최대한 어렵지 않게 한다 - 컴퓨터공학 개론부터 시작하면 애가 지겨워할 게 뻔함
  2. 실제 게임이 나와서 스마트폰에서도 플레이할 수 있게 하자 - 결과물의 만족감이 중요하니까
  3. 아이가 직접 코딩하는 느낌을 경험해보도록 하자 - 뭔가 개발자가 된 것 같은 기분을 느끼게 해주고 싶었다

🤔 플랫폼 선택의 고민

처음엔 어떻게 배포할지 고민이 좀 됐다. GitHub Pages도 생각해봤는데, 아이한테는 좀 복잡할 것 같더라. 그래서 찾은 게 Essepage였다.

  • 무료 도메인 제공 ✅
  • 브라우저에서 바로 코딩 가능 ✅
  • 코드 수정하면 바로 반영 ✅

완벽하지 않은가!

🚀 개발 과정

1단계: 기본 틱택토 게임 생성

ChatGPT에게 이렇게 물어봤다:

HTML과 CSS, 그리고 JavaScript를 이용한 틱택토 게임을 만들어줘

와... AI가 진짜 대단하다. 몇 초 만에 완성된 코드를 뚝딱 만들어주더라. 아이가 그 코드를 복사해서 Essepage에 넣고 저장하는 순간, 브라우저에 틱택토 게임이 짠! 하고 나타났다.

그때 아이 눈이 반짝반짝하던 모습이 지금도 기억에 남는다. 정말 신기해하면서 "와, 진짜 게임이 나왔어!"라고 소리치던 모습이 너무 귀여웠다.

2단계: 컴퓨터 vs 플레이어 모드 추가

처음엔 두 명이서 번갈아가며 하는 게임이었는데, 아이가 "컴퓨터랑 해보고 싶어!"라고 하더라. 그래서 또 ChatGPT에게:

지금 만들어준 틱택토 코드를 컴퓨터와 대결하는 형태로 업데이트해줘

역시 바로 만들어주더라. 이때부터 아이가 진짜 신나했다.

3단계: AI 난이도 조절

그런데 문제가 생겼다. 컴퓨터가 너무 바보같이 놓더라. 아이가 너무 쉽게 이기니까 재미없어하는 거였다.

컴퓨터가 너무 쉽게 게임을 진다. 똑똑하게 플레이할 수 있게 업데이트해줄 수 있어?

이렇게 해서 세 가지 버전이 나왔다:

  • 친구랑 플레이하기 (2인 모드)
  • 컴퓨터랑 플레이하기 (쉬운 AI)
  • 똑똑한 컴퓨터랑 게임하기 (어려운 AI)

아이가 직접 이름을 지어준 것들이다 ㅋㅋ

😅 예상치 못한 난관: 디자인 요구사항

여기까지는 정말 순조로웠다. 그런데...

"아빠, 근데 이거 친구들한테 보여주려면 좀 더 예쁘게 만들면 안 돼?"

아, 이 순간 내가 평소에 고객들과 미팅하면서 느꼈던 그 기분을 아들을 통해 다시 느끼게 되다니... 😂

게임 로직 만드는 건 10분도 안 걸렸는데, 예쁘게 만드는 건 2-3일 걸렸다. 아이도 중간에 좀 흥미를 잃긴 했지만, 그래도 끝까지 해보자고 설득했다.

🎨 완성된 결과물

결국 아이와 함께 다음 것들을 만들었다:

  • 게임 로고 디자인
  • 예쁜 배경화면
  • 버전별로 다른 페이지
  • 모바일 친화적인 UI

완성 후 아이가 학교와 학원에서 친구들한테 자기가 만든 게임 URL을 자랑하면서 보여주는 모습을 보니... 정말 뿌듯하더라.

💡 얻은 교훈

이 프로젝트를 통해 느낀 점들:

  1. AI는 정말 강력한 도구다 - 초등학생도 쉽게 접근할 수 있는 수준
  2. 결과물의 만족감이 중요하다 - 실제로 작동하는 게임을 만들어내는 경험
  3. 아이들도 디자인에 관심이 많다 - 기능보다 예쁜 게 더 중요할 때가 있음
  4. 꾸준함이 어렵다 - 체스 만들기에 도전했다가 포기한 건 안 비밀... 😅

🎮 게임 플레이해보기

궁금하신 분들은 아래 링크에서 게임을 플레이해보실 수 있습니다:
👉 https://espg.dev/carson-t3

코드가 궁금하신 분들을 위해 Essepage에 템플릿으로도 올려두었습니다:
👉 https://essepage.com/ko/templates/carson-t3

(아이와 함께 만든 거라 버그가 있을 수 있음을 미리 알려드린다 ㅋㅋ)

🔚 마무리

아이가 AI를 활용해서 뭔가를 만들어낼 수 있다는 걸 경험한 게 가장 큰 수확이었다. 체스 만들기는 잠시 포기했지만, 언젠가 다시 도전해볼 예정이다.

혹시 비슷한 프로젝트를 아이와 함께 해보실 분들이 있다면 추천한다. 생각보다 재미있고, 아이도 정말 좋아한다!


p.s. 무료 게임입니다! 마음껏 플레이해보세요 ㅋㅋㅋ

이 블로그는 궁극의 온라인 개발 플랫폼 Essepage 로 만들었습니다.
Search By Essepage