[이인용] 두번째 프로젝트 기록

 

20.07.14

두 번째 프로젝트인 <이인용>이 시작되었습니다. 이번 프로젝트는 4주 동안 진행되며 웹에서 앱으로 확장되어 다양한 경험을 주게 될 것입니다. Front-end를 맡게 되어 React와 React Native, <canvas>를 주로 만지게 됩니다. 

 

20.07.15

작업을 시작하기 전에 어떻게 만들어가야 하는지 자세하게 그려보고 있습니다. 협업 툴인 miro에서 워크플로우와 스키마를 작성하고 이를 바탕으로 API문서, 태스크 카드를 작성했습니다. 한 화면에 할 일들을 나열하니 첫 프로젝트의 시작단계에서 느꼈던 부담스러운 감정이 다시 떠오릅니다. 첫 번째 프로젝트도 마칠 수 있었으니 이번에도 그러길 바랄 뿐입니다.

 

20.07.16

하나씩 화면에 놓은 것들을 모아서 한 페이지에 정리하고 피드백을 받았습니다. 생각지도 못한 피드백은 또다시 새로운 눈을 뜨게 만들었습니다. 계획대로라면 저희는 한 개의 서버를 가지고 웹, 채팅, 게임을 운영해야 합니다. 이때 서버에 부하가 당연히 커지는 사실을 생각하지 못한 것입니다. 서버를 확장시켜서 어떤 상황에 어떤 서버를 사용할 것인지 다시 정리해야 합니다.

 

20.07.17

웹의 스타일은 Material-UI로 선택되었습니다. 공식문서가 굉장히 구체적으로 작성되어서 어느 정도 파악이 끝난 후에 굉장히 즐거운 경험을 하게 되었습니다. 처음으로 css를 인라인으로 적용시키는 함수형 컴포넌트를 구성했습니다. 유동적이며 훌륭한 디자인을 가진 Material-UI로 빠르게 화면들을 만들어 가야겠습니다.

 

20.07.18 - 19

프로젝트 기간의 주말은 편안하게 집중이 되어 즐겁게 작업이 진행됩니다.

이번 서비스의 특성상 복잡한 서버 구조를 가지게 됩니다. 웹서버에서 DB의 데이터를 가져오는 역할뿐 아니라 소켓으로 채팅을 지원하고, 또 다른 서버를 구축하여 게임 서버로 이용하게 됩니다. 이전에 구현하던 서버와 다른 차원의 서버입니다. 

클라이언트는 순조롭게 진행되고 있습니다. 

 

20.07.20

새로운 한주가 시작되었습니다. 지난주의 작업이 계획에서 조금 벗어나 진행되어 일정을 약간 수정해야 했습니다. 적어도 다음 주부터는 게임 제작을 해야 하기 때문에 이번 주에 클라이언트 정리가 되어야 합니다. 배포는 이번 주 목요일에 하는 것으로 목표를 잡았습니다. 빠르게 배포를 해야 전에 보이지 않던 오류를 볼 수 있습니다. 클라이언트의 오류뿐 아니라 게임 상의 오류도 잡아야 하기에 일정을 앞당겨 빠르게 진행해야 하겠습니다.

 

20.07.28

캔버스로 게임 구현이 시작되었습니다. 게임들의 서버를 따로 구성하여 각각의 화면에 연결됩니다. 캔버스를 서버에 연결하여 데이터를 처리하고 캔버스에 다시 보여주기 위해 거쳐야 할 과정이 많습니다. 또한 단순한 캔버스 게임을 넘어서 온라인 게임이기에 유저들을 위해 준비할 요소들이 굉장히 많습니다. 게임 고르기, 대기방 고르기, 대기방에서 채팅, 게임 화면으로 이동, 게임 종료 후 다시 대기방으로 이동하는 일방적인 플로우를 생각해도 복잡합니다. 예외를 추가한다면 곱절로 복잡합니다. 

 

20.07.30

MDN에 나오는 튜토리얼 중 하나인 핑퐁게임을 온라인으로 구현하려니 굉장히 어렵습니다. 공이 유저의 블록에 맞을 때 방향을 바꾸고 공에 가속도를 추가하니 플레이하는 두 클라이언트에서 격차가 벌어집니다. 가속도를 포기할 수 없으니 어떠한 방법으로든 두 클라이언트에서 공의 위치가 같도록 만들어야 했습니다. 또한 치명적인 오류가 존재했죠. 공이 지나갈 때 유저가 블록을 빠르게 움직이면 공이 블록 안에 갇혀 버렸습니다. 가속도라는 조그마한 차이에도 공의 위치에 대한 격차가 크게 벌어지는데 공이 블록에 갇힌다니 좌절스럽습니다.

 

20.07.31

어제의 문제를 해결하였습니다. 그런데도 격차는 존재합니다. 공이 블록에 갇히는 문제는 공이 블록에 부딪혔을 때 공의 위치를 강제적으로 블록의 밖에 위치하도록 설정했죠. 커다란 오류를 해결하였으나 가속도의 문제를 해결하지 못해서 좌절스러운 때에 다른 생각을 하게 되었습니다. 가속도는 하나의 공이 두 유저의 블록에 부딪히며 점점 커지며 격차도 벌어진다는 생각 끝에 단 한 번만 부딪혀도 상관없는 게임인 슈팅게임을 떠올렸습니다. 공의 잔상도 구현하여 생각보다 멋진 게임이 만들어 졌습니다.

 

20.08.03

새로운 게임을 만듭니다. 팀원이 숫자야구 게임의 프로토 타입을 만들어서 서버에 대한 구성이 끝났기 때문에 캔버스로 게임을 구현하면 됩니다. 그런데 생각보다 어렵습니다. 보드 게임의 특성상 화면에 보이는 요소가 많기 때문입니다. 예를 들어 키 패드가 필요하다면 숫자가 그려진 버튼뿐만 아니라 눌리기 전과 후가 달라야 하고 눌려있는 키와 다시 되돌아오는 키가 있고, 눌려져 있는 키를 하나씩 되돌리거나 한꺼번에 되돌리는 기능이 있어야 합니다. 

 

20.08.05

숫자야구 게임을 새롭게 구성하여 심플하게 만들었습니다. 이전과 같이 숫자를 입력하면 결과가 보여지고 입력된 숫자들이 목록으로 보여지는 기능을 같지만 하나의 화면에서 게임의 진행이 이루어지니 유저가 게임에 몰입하기 쉬워졌습니다. 

지금까지 구현한 게임은 세가지입니다. 여기에 하나를 더하여 네가지 게임을 선보이면 좋겠다는 생각을 했지만 팀원 덕분에 현상황을 다시 보았습니다. 추가가 아니라 수정을 해야하는 상황이죠. 

 

20.08.06

배포를 하며 발견되는 오류를 핸들링하기 시작했습니다. 생각보다 오류가 많습니다.