[ 토이 프로젝트 ] 모두 한글 두더지 팡! _ 1

모두 한글 두더지 팡!

SPA 웹사이트 제작

기획, 디자인: 누누
프론트엔드 개발 :  야미
백엔드 개발 :  으악

기간:  2020년 10월 - 2021년 7월 5일 자로 프로젝트 종료

---

안녕하세요 :) 오랜만에 글을 작성하게 된 손누누입니다. 
오늘은 누누컴퍼니 소모임에서 10개월 동안 작업했던 토이 프로젝트 모두 한글 두더지팡! 에 대한 작업 과정과 결과물을 

공유드리고자 합니다! 아무래도 기획과 디자인을 맡은 제가 쓰는 글이라서 ㅜㅜ 기획과 디자인 그리고 협업에 대한 

이야기가 많을 듯 합니다.

1) 모두 한글 두더지 팡! 제작하게 된 계기 

간타님과 두번째 토이 프로젝트가 끝난 후 함께 작업하는 개발자의 입장에서 의미 있는 토이 프로젝트는 무엇일까?라는 생각을

하게 되었습니다. (개발자 입장에서 토이 프로젝트를 통해서 얻어갈 수 있는 성과나 결실이 무엇일지 고민을 하게 되었습니다.)
토이 프로젝트를 진행하면서 자신이 학습하고자 하는 개발 공부를 성장시키면서 경제적 보상이나 

수상이력이 있다면 좋지 않을까 하는 생각을 하게 되었습니다.

간타님과의 토이 프로젝트 활동을 통해 개발이라는 분야 안에서 각 자의 역할에 따라 세밀하게 분업화되어 

작업이 진행된다는 것을 알게 되었습니다.  크게 나누면 프론트엔드 개발자와 백엔드 개발자가 나뉘는 거였죠 :) 

개발자의 입장에서 좋은 이력으로 남을 수 있는 방향에 토이 프로젝트는 기획 디자인 개발이라는 협업 안에서 

프론트 엔드 / 백 엔드로 나누어서 깊이 있게 개발을 나누고 경험해 보는 것이 좋겠다는 생각이 들었습니다.
그래서 모두 한글 두더지 팡! 은 프론트 엔드 / 백 엔드 개발자로 나누어 함께 작업하게 되었습니다.

함께 작업하는 개발자들의 역량을 높이는 방안이 무엇이 있을까? 고민했을 때 
알고리즘으로 많은 고민을 해야 하는 게임을 만들어 보는 게 어떨까? 하는 생각이 들었습니다.
변수가 많고, 어려운 게임을 기획하기에는 저의 기획과 디자인 능력에 부족함을  알기에 간단하면서도 개발에 대한 코드나 

방향성 예시를 제안할 수 있는 게임을  고민하게 되었습니다.

그러던 중 문득 HTML5 캔버스 HTML5, CSS, JavaScript를 함께 배우는 게임 학습서에 적혀있던 

두더지 게임을 살펴보고 이거다!  하여 ㅎㅎ 두더지게임을 진행하게 되었습니다.

 

HTML5 캔버스에 적혀있던 두더지게임 예시

---

2) 모두 한글 두더지 팡! 작업 과정

[기획 1_ 재미있는 두더지 게임 기획을 잡아봅시다 :) ] 

 HTML5 캔버스 HTML5, CSS, JavaScript를 함께 배우는 게임 학습서에 소개된  두더지 게임 말고, 시 중에서는 어떻게

두더지 게임이 나왔는지 자료조사를 하게 되었습니다.
 https://m.gamen.com/game10#load 여기 웹사이트를 살펴보고 , 모바일 앱으로는 Whack A Mole PikoPiko에

 매일 게임을 하면서 게임 기획서를 작성하였습니다.

 

예시) 타 두더지 게임 벤치마킹 자료 조사 

 

---

기획은 완성되어 가고 있지만... 개발에 대해 제가 너무 무지하여 난관에 부딪혔습니다. ㅜㅜ
 기술적으로 구현이 가능한 지 여부와 점검이 필요했고 팀 빌딩에 대한 인력도 고민해야 하는데 한계가 있었습니다. 
그래서 으악님께 개발적으로 진행이 가능한 지 여부를 물어보게 되었고, 이에 친절한 답변과 추가적인 자료를 첨부해주셔서 

전반적인 게임 기획서를  나름 완성할 수 있었습니다.

 

그리고 이번 프로젝트에 백엔드 개발자로 참여하신 지 물어보았습니다.
으악님이 참여 의사에 긍정적으로 말씀해주셨습니다.

이제 프론트엔드 개발자만 모집하면 되었습니다. 오톡방에 게임 기획서를 보여드리고  참여여부를 물어봤지만 ㅜㅜ 

프론트엔드 개발자로 참여해주시는 분이 없어서 우울했습니다 ㅜㅜ
그러다 야미님이 시간 내서 작업을 진행하기록 했습니다 :)
으악님과 대화를 나누었을 때 이 프로젝트는 프론트 개발자분이 해야 될 영역이 많다고 말씀해주셔서 프로젝트를 진행하면서

너무 힘들어하면 어떡하지 라는 걱정이 들었습니다.
그 걱정에 비해 야미님이 개발을 잘 진행해주셔서 너무 감사했습니다.

모두 한글 두더지팡! 모바일 앱, 웹사이트 러프 스케치 작업 진행

 

처음 기획은 욕심쟁이였습니다 :( 안드로이드 앱 개발도 고려하고, 반응형 웹사이트 형태로 개발도 고려해서 화면 작업을 했고, 

반응형 웹사이트 형태 만들고 난 후 APK 파일로 만들어 달라고 야미님한테 무리한 요구도 할 정도록 기획은 함께하는 팀원을 

배려하지 못했고 어설펐습니다.
무엇보다 제가 개발에 대한 지식이 없어서.. 첫 회의 때 로그인과 회원가입으로 3시간 가까이 시간을 소비하였습니다.

게임에 대한 경험이 워낙 부족해서 어설픈 기획이 되었습니다. 

 

로그인과 회원가입에 대한 지식이 없던 누누를 위해 설명해주면서 기획 회의를 진행했던 흔적 :)

 

모두 한글 두더지팡! 을 제작하기 위해 작성했던 회의 내용 기록들 :) _  회의 내용은 컨플루언스 활용 

 

---

[ 기획 2_ 모두에게 의미 있는 두더지 게임 기획을 해봅시다!! ]

 

그러다 야미님이 회의를 진행하던 중 누누님 이거 왜 만드는 거예요?라고 물어보셨습니다.
답변은 ' 저는 제 여동생을 위해서... 여동생이 두더지 게임을 만들어 보라고 해서 재미있을 것 같았어요. '라고  말씀드렸고..

야미님은 한참 멍해졌습니다.. 핳..

 

야미님은 제게 필요한 조언을 해주셨습니다. 누누님이 유아들을 대상으로 하는 콘텐츠에 관심이 있다면 그 타겟에 맞는 기획을

정립해보면 어때요? 저는 의미 있는 작업을 하고 싶어요 ㅎㅎ 
그 이야기를 듣고 마음이 뭉클해지면서 처음에는 두더지 게임만 있던 내용을 유아들 대상으로, 학습요소를 넣어 두더지 게임을

만들어보는 방향으로 기획을 정립하게 되었습니다.

 

 다시 자료조사를 하게 되었습니다. 

 https://typing.malangmalang.com/games/catching-moles  한컴타자연습에 출시한 두더지 게임을 보게 되었고,

 여기서는 타자를 입력하여 두더지를 잡는 모습이었습니다. 이 게임은 사용자의 타자 치는 연습에 목적을 두었습니다.

 

예시)  한컴타자연습에 출시한 두더지게임 자료 조사 

 저는 이에 두더지 게임을 통해 한글 공부를 할 수 있으면 어떨까 싶어 화면에 초성이 보이고, 사용자는 한글 단어를 맞추고,

 뜻을 공부할 수 있도록 웹사이트 내 게임을 다시 구성하게 되었습니다.

---

 그러면서 으악님과 야미님의 취업을 고려했을 때 좋은 이력으로 남았으면 하는 바람으로 한글 창의 아이디어 공모전을나가자고

 말씀드렸습니다. 2020년 10월을 기준으로 작업을 진행했기에 내년 7~8월까지 개발을 완료를 목표로 바라보고 진행했습니다. 

 

2021년 한글창의 아이디어 공모전 포스터

 이 토이 프로젝트를 통해서

 기획과 디자인하는 저는 개발과 협업하면서 게임을 기획하는 과정을 배울 수 있었고, 개발자는 개발에 대한 기능을

구현하는 역량을 키우고, 유아와 부모님, 그리도 한글을 처음 공부하는 사람들의 입장에서는 한글을 재미있고 쉽게

공부하고 단어를 배움을 얻을 수 있습니다.

그렇게 11월 달 내내 회의를 거듭하면서 모두 한글 두더지 팡! 화면기획 내용을 정립했습니다.

 

모두 한글 두더지팡 후기는 1과 2, 3편으로 나누어서 작성했습니다 :)  다음 내용은 2편에 이어가도록 하겠습니다 :)