티스토리 뷰

모두 한글 두더지 팡!

SPA 웹사이트 제작

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

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

 


[ 기획, 개발을 같이 진행합니다. ]

 

11월 이 후 기획에 화면 설계 내용을 바탕으로 야미님은 프론트 쪽 기술을 구현하고, 으악님은 ERD를 작성하였습니다.

 

으악님이 작성하신 백엔드 ERD 작성 내용

 

프론트와 백을 나누어서 프론트는 리액트로 작업하고, 백엔드는 장고로 작업하였습니다.
투 트랙으로 나누고, 작업이 완료될 시기에 프론트와 백을 연결하여 웹사이트를 구현하는 방식으로 진행하게 되었습니다.

 

화면 기획 내용을 토대로 야미님이 작업한 프론트 엔드 기능 구현

https://github.com/Meeteum/mole_pang_fe

 

GitHub - Meeteum/mole_pang_fe

Contribute to Meeteum/mole_pang_fe development by creating an account on GitHub.

github.com

 


[ 우리 잠시 토이프로젝트 멈출까요? / 기간이 길어질수록 공백의 시간이 남습니다. ]

 

  긴 작업의 기간 속에는 각 자의 시간들이 존재했습니다. 야미님은 재취업을 준비하고 있었고, 으악님은 회사 내에

프로젝트로 바쁜 시 기를 보냈습니다. 저는 다시 미대로 편입을 준비하고자 모두 한글두더지팡 프로젝트를 

진행하기에는 어려운 상황이었습니다.
 으악님과 야미님께 양해를 구할 때마다 미안하면서... 과연 내가 이 프로젝트를  잘 매듭을 지을 수 있을지 걱정이 들었습니다.
그 걱정이 들 때마다 야미님과 으악님이 괜찮다, 여유롭게 진행해요.라고 격려해주실 때 ㅎㅎ 감사했습니다. 

그리고 이 토이 프로젝트를 잘 마무리할 수 있을 것 같았습니다.
그렇게 12 - 2월 사이는 작업이 잠시 멈추어졌습니다. 


[ 디자인 작업을 합니다! ] 

 

2월 .. 미대 편입의 실패하고, 직장 구하면서 이 프로젝트를 재기했습니다.
코로나19로 인해서 오프라인으로 만나서 작업하기 어려웠고, 12월 달 이후로는 거의 온라인으로 작업 내역을 

공유했습니다. 야미님은 기존 작업하신 내용을 다시 재작업을 하고자 깃허브 repository를 다시 만들고

fork로 연결하였습니다. 이 때는 디자인 작업물만 나오면, 큰 무리 없이 개발하는데 다음 단계로

진행할 수 있었습니다.

 

직장을 구하면서 두더지 게임 관련 디자인 작업물을 일러스트 프로그램으로 앉아서 그렸습니다.
하루 종일 앉아서 두더지 게임 관련 디자인 웹사이트에 대한 전반적인 느낌을  잡고, 웹사이트 화면과

게임이 진행되는 화면들을 작업했습니다. 일러스트로 디자인 작업을 완료한 후 피그마에 옮겨 

작업물을 야미님께 전달드렸습니다.

야미님은 디자인 작업물을 확인 후 화면 기획을 구현했던 작업물에 디자인을 얹었습니다.
두더지 게임 디자인 작업을 진행하면서ㅜㅜ 하나하나 일러스트 펜툴을 이용하여 따고 그리고, 부분적으로 수정하면서... 

노가닥 작업이 진행되었습니다.
정말 힘들었던 작업은 두더지가 올라오고 내려오고 하는 애니메이션 작업 구현을 위한 키프레임 작업이었습니다.
두더지 한 마리만 그리는 게 아닌 두더지가 움직이는 애니메이션을 위해.. 여러 장 그리고 조정하면서 

게임을 만드는 게 쉽지 않다는 것을 느꼈습니다.

 

일러스트로 두더지 캐릭터 게임 키프레임 디자인 작업 

https://www.figma.com/file/YfSt7qr78vNQs0Ov5lEvqE/mole

 

Figma

Created with Figma

www.figma.com

두더지 디자인 작업물은 4월 초가 되어 완료되었습니다.


[ 회의를 바탕으로 백엔드 자료 데이터 정립 /  디자인 작업 수정 및 프론트 개발 점검을 합니다. ]

온라인으로만 프로젝트를 진행하기에는 한계가 많아 3월 달 오프라인 회의를  갖았습니다 . 마스크는 단단히 쓰고 

대화를 하면서 작업 내역을 공유했습니다.

20210307_ 오프라인 회의 진행 내용


으악님은 회의를 바탕으로 백엔드 쪽에 뜻풀이와 관련하여 자료 데이터를 수집하고 정리하였습니다. 

저와 야미님은 1000개의 단어와 뜻을... 다시 살펴보고.. 검수했습니다..  단어와 뜻을 살펴보면서 열심히 한글 공부도 했습니다.

모두 한글 두더지 팡! 1000개 단어 데이터 수집 및 검수 진행 

 

회의를 바탕으로 디자인 작업물을 조금씩 수정하고, 두더지 키프레임 작업은 완료했지만 png 파일로 변환시키지 

않아. 키프레임 작업을 한 장 한 장 변환까지 완료하여 디자인 작업은 완료했습니다. 이를 바탕으로 야미님 개발을 

덧 붙여 나갔습니다.
어느 정도 디자인 작업과, 백엔드, 프론트 쪽에 작업이 완료되어 가면서, 프론트와 백 (투 트랙)으로 진행된 개발을

이어 붙여 하나의 작업으로 만드는 부분만 남았습니다.

 

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

댓글