#2 nunu company First Project

토이 프로젝트를 진행하게 된 계기에 대해서

1)-1
첫 프로젝트에 시작은 아마 저의 늦둥이에서부터 시작되었을지도 모릅니다.
저의 늦둥이는 올해 초등학교 2학년입니다. 코로나 19로 인해 초등학교를 가지 못하고 

온라인으로 수업을 듣게 되었습니다.
매일 휴대폰과 태블릿으로 유튜브를 시청하면서 구구단을 못 외우고 있는 모습을 바라보면서 걱정이 들었습니다.
그러던 중 구구단을 학습하는 반응형 웹사이트와 앱을 제작해보면 어떨까 싶어 토이 프로젝트를 진행하게 되었습니다.

1)-2
카카오톡 오픈 채팅방에서 웹과 앱을 공부하는 방을 운영하면서 새벽마다 잠을 이루지 못한 2명의 

개발자분을 보게 되었습니다. 
수수님과 땅콩님이었습니다.
그때 저는 취업을 준비하는 상황이었고 저 또한 밤낮이 바뀌어 있었던 상황이었습니다.
서로 담소를 주고 받으면서 친해지면서 토이 프로젝트를 함께 진행해보자고 (반?!) 강제적으로 제안을 드렸습니다.

수수님은 적극적으로 제안을 받아들였고 땅콩님은 거의 강제적으로 구구단 학습 반응형 웹사이트와 앱을 제작하게 

되었습니다.

코로나 19로 인해 만나서 작업하기에는 어려웠고 비대면으로 각자 작업 내역을 공유하면서 협업을 진행해 나갔습니다. 

---

2) 기획부터 디자인까지 그리고 개발까지 

 

 

/ 저는 개발의 역할이 아니었기 때문에 이번 글 포스팅은 기획, 디자인, CS 중심으로 내용이 전개됩니다.

  글을 읽으시면서 협업을 어떻게 해내갔는 지 과정을 살펴보면 좋을 듯합니다. /

 기획과 디자인, CS는 제가 맡아서 진행하고, 안드로이드 개발은 땅콩님이 SPA 웹사이트 개발( 반응형 웹사이트 )은

수수님이 맡아서 진행하였습니다.

 기획과 디자인 작업 먼저 완료되면 안드로이드 개발과 SPA 웹사이트 개발이 후발주자로 작업을 이어갔습니다.

 

 기획은 앱이나 웹사이트를 만들고자 하는 명확한 목적을 수립하고,  이 앱과 웹사이트를 사용하는 사용자에 대한

정의를 내렸습니다.

 

 그 안에서 실제로 출시된 구구단 앱을 다운로드하여 하나하나 화면을 보면서  손으로 화면을 그려갔습니다.

화면을 그려나가면서 출시된 앱에 장점과 단점 어떠한 서비스를 제공하는지, 차별화된 요소가 무엇인지 글로 

정리하였습니다.
  손으로 화면을 다 그리고 난 후 메뉴 트리를 정립하고 각 메뉴 안에 어떤 콘텐츠를 넣을지 정리하였습니다.
  그에 맞춰서 기능들에 대한 시나리오를 적었습니다. 이후 간단히 와이어프레임을 손으로 그렸습니다.  

손으로 와이어프레임을 간단히 그린 후 개발자분들과 소통하면서  작업을 진행할 수 있도록 

화면 기획을 정립하였습니다.

 

 화면 기획 정립 완료 후 PDF로 문서를 만들고, 피그마로 화면 기획의 흐름을 개발자분들에게 보여줬습니다.

 / 화면기획 부분 피그마 작업 내역 : https://www.figma.com/file/zWhMIO6FOHBhna8su1zei5/gugudan-web_-(%EC%99%80%EC%9D%B4%EC%96%B4-%ED%94%84%EB%A0%88%EC%9E%84-%EC%9E%91%EC%97%85)

/

 

이후 개발자분들은 화면 기획을 보면서 간단히 기능을 구현하는 작업에 들어갔고 저는 디자인 작업을 마저

이어 그려나갔습니다.

 

  디자인 작업을 진행할 때 저는 막연하게 그려나갔던 것 같습니다. 어떠한 색상을 사용할 것인지에 대한 정의도 

없었고, 어떤 폰트를 사용할 지도 정하지 못했습니다.
  스타일 가이드 작업 없이 작업을 진행하다 보니, 화면마다 조금씩 달라지는 디자인에 개발자분들이 퍼블리싱하는 

부분에서 헤매기도 했습니다.
 이에 스타일 가이드를 다시 정립하게 되었고, 스타일 가이드에 대한 중요성을 인지하게 되었습니다.

 

 기획과 디자인에 작업이 완료된 후 피그마로 배포하여 개발자분들이 앱과 웹 사이트 개발을 진행할 수 있도록

안내하였습니다.

/ 디자인 부분 피그마 작업 내역 : https://www.figma.com/file/kdQ7Xp8B4ctiy8oF7H2PG7/gugudan-web--(%EB%94%94%EC%9E%90%EC%9D%B8) /

 

 

  개발을 진행하면서 개발자분들으로부터 제가 놓친 기획이나 디자인에 대한 추가적인 작업 요청도 받았습니다.

그리고 기획과 달리 기능적으로 구현하기 어려운 부분에 대해서는 수정 보완 작업도 이어갔습니다.
  개발자분들이 어느 정도 개발이 완료될 쯤에 CS를 보면서 수정해야 될 기능이나 버그 부분에 대해 말씀드리고

그 부분을 같이 확인하면서 작업을 마무리 지었습니다.

 토이 프로젝트를 진행할 때 자신의 만족도에서 끝나는 것이 아닌 정말 출시를 하더라도 완성도가 떨어지지 않을 

만큼에 앱과 웹사이트를 만들자는 목표를 두고 작업을 진행했기 때문에 한 달 안에 무사히 앱과 웹사이트를 구축할 수 있었습니다.

 

땅콩 개발자_  sangdon94@gmail.com

 

수수 개발자_ snstkfka02@hanmail.net

 개발을 진행하시는 수수님과 땅콩님이 피그마에 들어와서 기획과 디자인을 보면서 밤낮 가리지 않고 열심히

작업을 하셨고 그 결과 첫 번째 토이 프로젝트는 잘 매듭을 짓을 수 있었습니다.
  
 협업을 통하여 기획과 디자인을 맡은 저는 개발을 진행했던 수수님과 땅콩님  생각하는 방식과 바라보는 시선이 

다르다는 것을 느낄 수 있었습니다. 

 

 완성되었을 때 다 수의 사용자분들로부터 설문조사를 진행하여 저희 토이 프로젝트에 대한 후기를 받았습니다. 후기를 받으면서 제가 생각하지 못한 부분을 발견하고 시야를 좀 더 넓힐 수 있는 시간이었습니다.

---

   첫 토이 프로젝트를 진행하면서 기획, 디자인, 개발 어느 하나 빠짐없이 각자 중요한 역할을 갖고 있다는 것을

알 수 있었습니다. 또한 저 혼자만 알고 있던 시선에서 벗어나 다양한 시각으로 바라볼 수 있었던 점을 배울 수 있었던 
시간이었습니다.

 

구구단 학습 반응형 웹사이트 및 앱 제작_.pdf

3.81MB

   

   구구단 학습 반응형 웹사이트 및 앱 제작 후에 진행했던 과정과 결과물이 담긴 PDF 파일입니다. 

   저희 첫 프로젝트의 대한 내용에 대해 좀 더 궁금하시다면 위에 PDF 파일을 다운로드하여 읽어보시면

  좋을 것 같습니다.