옥상 대신 웹에서 날리는 종이비행기 게임 제작기 1

소개

어느 날 문득, 이런 생각이 들었습니다.
“옥상에서 넓은 하늘을 향해 종이비행기를 날리면 스트레스가 풀리지 않을까?”

하지만 현실은 옥상도 없고, 시간도 없고, 바람도 없다.
그래서 차라리 웹에서 종이비행기를 직접 날리는 느낌을 만들어보자고 결심했어요.

그렇게 시작된 작은 상상은 어느새 “내 동작을 인식해서 종이비행기를 날리는 웹 게임”이라는 형태로 진화하게 되었습니다.

뇌과학적으로는 아래와 같은 효과가 있다고 하네요 😄

자율성 원칙 (Self-Determination Theory)

통제감 회복이 핵심!

  • 신경 상관물: 전전두피질(특히 DLPFC), 집행 기능

  • 스트레스 해소 메커니즘:

    • 스트레스 상황에서 잃었던 통제감을 되찾음

    • 언제, 어떻게, 얼마나 세게 던질지 스스로 결정

    • "내가 주도권을 가지고 있다"는 느낌으로 무력감 해소

진행 방법

🎯 사용 도구

  • Teachable Machine - 동작 인식 모델 훈련용

  • Claude Code - 코드 아이디어 및 구현 보조

🧠 아이디어 구현 흐름

  • 카메라를 통해 동작을 인식하고, 특정 포즈를 취하면 종이비행기를 날리는 인터랙션 발생

  • 손을 주먹 쥐었다가 펴면 → 종이 비행기 발사

여자와 남자의 사진과 함께 한국 앱의 스크린 샷

🤖 프롬프트 & 코드 작업

  • Claude에 이런 식으로 물어봤어요: 일단 주먹이랑 손편거 구분하는거 테스트할수있는 웹 만들어줘

  • Claude는 TensorFlow.js 연동 코드와, 포즈에 따른 인터랙션 아이디어를 함께 제시해줘서 큰 도움이 됐습니다.

한국 채팅 앱의 스크린 샷

📸 데이터 수집의 난관

  • 생각보다 동작 인식을 정확히 하려면 훨씬 많은 학습 데이터가 필요했어요.

  • 다양한 환경, 조명, 옷차림에서 손을 드는 동작을 반복 촬영하며 훈련 데이터 생성

  • 제일 힘들었던 건 다양한 포즈를 혼자 다 찍는 것! 😅

결과와 배운 점

  • 데이터 수집이 이토록 중요하다는 걸 다시한번 새삼 깨달았습니다. 입력값의 다양성과 품질이 인식 정확도를 좌우하더라고요.

  • 지금은 아주 간단한 동작만 인식되지만, 나중에는 다양한 제스처로 게임의 난이도나 방향을 조절할 수도 있겠다는 아이디어도 떠올랐습니다.

2
1개의 답글

뉴스레터 무료 구독