Final Project 회고

이재진·2021년 2월 10일
1

프로젝트 회고

목록 보기
2/2
post-thumbnail

프로젝트 과정

주제 선정

취업을 목적으로 둔 만큼 실리적으로 접근했던 것 같다.
그래서 프로젝트 소재를 찾기 위해 구글링과 유튜브에 여러 코딩부트캠프 데모데이 관련 영상을 많이 찾아보았다. 그러다 찾고 찾다 생각한 것이 바로 게임이었다. 누구나 쉽게 플레이 할 수 있고 많은 유저 수의 확보도 필요 없다. 사전 서치해서 만들어야 할 데이터베이스도 로그인 로그아웃 등의 기능도 필요하지 않다. 무엇보다 눈에 보이는 임팩트가 강한 특성이 있다. 이런 장점으로 인해 팀원 만장일치로 게임을 만들자고 의견을 모았고 다양한 게임 주제를 의논하게 되었다.
나왔던 의견들은 비트매니아(리듬게임), 동물의 숲, 쿠키런, 남극 탐험 같은 간단하게 쉽게 할 수 있는 주제의 많은 게임 아이디어가 나왔고 결국 최종적으로 쿠키런 같은 러닝액션게임을 만들기로 정했다.

또한 게임의 주인공은 강아지로 강아지가 숲속에서 길을 잃었고 집까지 찾아가는 스토리로 게임을 만들기로 했다.

스택 공부

TypeScript

게임을 구상할 때 다양한 이벤트와 오브젝트의 상호작용을 계획했는데 이벤트가 디테일해질 수록 데이터 또한 늘어났다. 모든 데이터를 오류 없이 안정적으로 관리하기 위해서 TypeScript를 선택하게 되었다. 또한 저희 프로젝트는 3명의 프론트엔드 개발자가 있다. 개별적으로 코드를 치며 발생할 수 있는 사소한 타입 오류를 TypeScript를 도입해 방지하고자 하였다. JavaScript의 경우 타입 오류를 검사하기 위해서 매번 실행해야하지만 TypeScript는 실행 이전에 코드 단위에서 오류를 잡아낼 수 있기 때문에 속도감 있는 에러 핸들링을 할 수 있을 것이라 생각했다.

Phaser

Phaser는 2D 비디오 게임을 만들기 위한 프레임 워크이다. HTML5 Canvas를 사용하여 게임을 렌더링하고 순수 JavaScript를 사용하여 게임을 실행한다. Phaser를 도입한 이유는 한정된 시간 내에서 게임을 설계해야 했기 때문이다. 그래서 모션에 따른 애니메이션이나 충돌 시 카메라 흔들림, 배경의 반복 렌더링과 같이 시간이 오래 걸릴 것 같은 부수적인 부분은 프레임워크의 도움을 받기로 했다. 또한 Typescript의 Class를 사용해서 Phaser에 접근을 쉽게 할 수 있고 게임 개발에 자잘한 오류를 잡을 수 있을것이라 판단했다. (Typescript와 Phaser를 연동해서 사용)

Tiled map

Tiled map은 모듈 식 빌딩 블록을 사용하여 게임 세계를 만드는 기술이다. Tiled를 사용하면 설정된 픽셀 크기로 분할 된 타일 시트를 사용하여 전체 게임 세계를 '페인트'할 수 있다.
또한 타일 스프라이트를 사용하는 것이 좋은데 타일 스프라이트를 사용하면 이미지에서 타일을 가져와 필요할 때마다 사용하게 된다. 이 접근 방식은 리소스를 덜 사용하고 더 높은 성능의 게임을 제공하기 때문에 자산 반복이 많은 게임 배경 또는 레벨에서 일반적이다.
그리고 이 모든 것은 Phaser 게임으로 가져 오는 데 사용할 수 있는 JSON 파일로 내보낼 수 있다.

게임 완성


발표 자료

프로젝트(게임)의 모든 기능들이 설명되어 있다.
PPT자료
발표영상


프론트엔드 개발

이번 프로젝트에서 프론트엔드로 구현한 것들을 소개하고자 한다.

기능 1. <캐릭터 선택 페이지>

react-redux, css, phaser 이용

만드는데 매우 고심했던 부분이 css 애니메이션과 캐릭터 선택 시 고정 하는 부분이다. 선택한 캐릭터 상태를 리덕스에서 받아 phaser로 연결시키는 부분에서 조금 헤매었다. 초반 스택공부 할때 리덕스를 제대로 공부 못한 점 때문이었던 것 같다. 그리고 캐릭터에 커서를 두면 상자가 커지고 커서를 떼면 원래대로 돌아가고 하는 부분에 있어서 css 애니메이션 버그가 있었다. 다른 캐릭터로 커서를 올리면 원래 캐릭터의 상자는 다른 사이즈로 돌아가야 하는데 그대로 유지되거나 커서를 올리면 작아지고 커서를 떼면 커지는 등의 사소한 버그도 있었고 캐릭터 클릭 할 때 고정이 안되는 점이 있었으나 같이 프론트엔드 했던 팀원의 페어프로그래밍으로 겨우 해내었던 기억이 난다. 토글 방식과 조건문을 통해 문제를 쉽게 해결했다..

추가 리팩토링
-1.기존 외국 이름에서 한국이름으로 다 바꿈.
2.개발자 간의 리덕스 코드 문법이 달라서 최신 문법으로 수정.

기능 2. <Phaser , Tile map 만들기>

Phaser , Tile map, 그림판, 포토샵 이용

게임 맵 제작을 하기 위해 Tiled map이라는 툴을 사용했지만서도 그 각각의 이미지 리소스를 만드는데 시간이 너무 소요되었다. 구글링을 해서 찾은 것도 있지만 직접 포토샵과 아이패드를 이용해 손수 그린 리소스도 많았기 때문이다. 또한 맵 길이에 맞게 타일 하나씩 하나씩 클릭해서 넣어줘야 하기 때문에 코딩 만큼 소요시간이 걸렸지만 숙달되고 나니 속도가 붙어서 스테이지3까지 무난하게 맵을 제작 할 수 있었다. 만든 맵을 저장 할때 json 파일로 저장하여 phaser에 적용하면 게임 내 맵이 제대로 적용되어 나타난다.

추가 리팩토링
게임길이가 짧아 게임이 빨리 끝난다는 의견이 나와서 기존 30000px에서 40000px로 게임 맵 길이 확장하기.

기능 3. <결과 페이지 내 랭킹 테이블 만들기>

react-redux, styled-components , react-table, moment 이용

결과 페이지의 랭킹테이블에 시간 투자를 많이 했던 것 같다. 특히 외부 테이블 라이브러리를 사용하나 직접 list를 map 형태로 테이블을 만드나 고민을 했다. 구글링도 하고 유튜브를 찾으니 react-table을 이용하여 테이블 형식을 만드는 것이 많이 나와 있었다.
결국 react-table 이용하여 랭킹 테이블 만들었다. styled-components를 이용하여 테이블 내 스타일 꾸몄다. phaser게임 종료 시의 데이터를 redux를 이용해 받아오고 받아온 결과를 닉네임 입력시 axios를 통해 서버에 보내주고 받아오는 로직으로 해당 랭킹 테이블을 완성했다. 역시나 어려운 부분은 redux.

추가 리팩토링

1.처음 구상으로는 최대 10명의 랭킹을 보여주는 것이었으나 나중에는 게임을 한 모든 유저의 성적을 보여주는 쪽으로 바꿔서 리팩토링 진행했다.
그래서 Pagination 기능을 추가로 넣어서 모든 user의 성적을 볼 수 있게 했다.

2.랭킹 보여줄때 생성 시의 날짜를 보여주는게 좋을 것 같다는 의견을 받았다.
react-table 내에서 날짜 date format 하는 것이 어려웠다.
구글링을 해보니 moment라는 날짜 라이브러리를 발견했고 이 moment를 이용해서 react-table columns 내 date format 성공했다.

기능 4. <로딩 페이지 애니메이션 만들기>

css, react-loader-spinner 이용

주제가 강아지가 숲을 들어가는 내용이므로 그 모습을 역동적으로 만들고 싶었다.
강아지가 숲으로 들어가는 모습을 구현하기 위해 css의 @keyframes을 사용하여 애니메이션화 했다.
하단 도트 로더는 react-loader-spinner 로더 라이브러리를 사용했다.
만들 때 가장 어려웠던 점은 나무와 강아지의 position 조절이었다.

기능 5. <엔딩 페이지 애니메이션 만들기>
css 이용

영화 속 엔딩 크레딧을 모티브로 제작. 스타워즈 등 영화 크레딧을 참고 많이 함.
css의 @keyframes을 사용하여 글이 올라가는 모습을 애니메이션화 했다.


프로젝트 회고

2주차 회고

Many hands make light work. 모든 것을 함께.
1. 피그마를 이용, 와이어프레임과 기능플로우 함께 만들기
2. 팀 내부 과제로 각자 게임리소스 캐릭터들을 그려오기
3. 팀원 각자 배포 및 도메인 등록완료

Fact (사실)
1. 의견을 내며 열심히 참여했다. 그림, 사진 자료를 열심히 퍼날랐다.
2. 멧돼지 캐릭터를 맡았고 열심히 그렸다.
3. ec2, rds, s3 배포 및 도메인을 등록했다.(AWS를 사용해 https 배포를 진행했다. Route 53, Cloud Front, Certificate Manager)

Feeling (느낌)
1. 좋은 분위기, 좋은 주제 안에서 다양한 의견이 나와서 좋았고 잘 완성된거 같아 기분이 좋았다.(팀원들과 한층 가까워졌음을 느낄 수 있었다.)
2. 개발하러 왔는데 그림을 그리게 될줄은. (색칠 공부!, 팀의 정서적 치유시간)
3. 생각보다 도메인이 싸서 다행이다. https 등 배포를 해보면서 일 할 때는 신경쓰지 않았던 잊은 줄 알았던 용어, 개념들이 떠올라 복기하게 되었다.

Finding (교훈)
1. 백지장도 맞들면 낫다.
2. 게임이다 보니 캐릭터의 움직임이 중요. 내가 그린 것이 사용될지는 모르지만 새로운 적성을 찾은 기분.
3. 무엇이든지 해보는 경험이 중요하다. 보안이든 개발이든 같은 it 안에 있다. 용어, 개념 다 묶여있다. 내가 이 바닥에 있는 한 계속적으로 쓰일 것이다.

Future action(행동)
1. 앞으로 더 힘들어질 프로젝트이지만 의견 충돌 없이 잘 끝났으면 좋겠다.
2. 다음주부터 개발이므로 스택 공부를 충실히 해서 팀에 도움이 되었으면 좋겠다.
3. 자유로운 분위기의 브레인스토밍은 언제나 환영이다.

3주차 회고

인고의 시간
phaser와 tile map 툴 사용하여 게임의 전체적인 맵 제작, 리소스 제작

Fact (사실)
phaser와 tile map 툴을 사용하는데 삽질을 너무 많이 했다.

Feeling (느낌)
코드문법, 새로운 tool 등 사용법이 생소하다보니 하나를 해결하면 다른 곳에서 에러가 나니 짜증이 나고 화가 났다.
지웠다가 넣었다가 원복을 도대체 몇번을 ..
게임 리소스 작업이 시간이 매우 많이 든다.

Finding (교훈)
고생 끝에 낙이 오겠지.
심신안정이 필요하다.
내가 사용한 방법에 대해 확신이 든다면 끝까지 밀고가기

Future action(행동)
다음주부터 리액트, 리덕스 등을 사용하는데 걱정이 된다.
이제 사용법을 터득한 거 같으니 진도가 쭉쭉 나갔으면.

4주차 회고

어렵고도 어려운

Fact (사실)
리덕스를 이용해 진행중인데 많이 어렵고 진행이 잘 안된다.
게임 캐릭터 선택 창을 구현했다. css 버그가 있었다.
프론트엔드 담당 팀원과 페어를 진행했다.
팀원이 해결방법을 제시해주었다.

Feeling (느낌)
팀의 진행상황과 비례 해 나의 진행속도가 많이 느리다고 생각한다.
내가 너무 모르는 게 많다는 것에 화가 났다.
남은 기간 다 할 수 있을 까

Finding (교훈)

Future action(행동)
묻고 또 물어서 맡은 부분은 확실히 끝낸다.


마무리하며

주제가 게임이기 때문에 phaser나 tiled map은 우리 프로젝트에는 도움이 될지 모르지만 이게 과연 취업에 도움이 될까 하는 의구심이 항상 들었습니다. 기존 웹 스택 공부와 병행하며 게임 프레임워크를 공부하고 적용하는 것이 쉽지 않았습니다. 캐릭터 선택 클릭 시 고정이 안 되는 부분, 로딩 페이지 구현 시 강아지가 숲과 만나는 부분 등 기능과 css 애니메이션이 혼합된 부분에서 예상치 못한 버그가 많아 고치는 데 시간이 오래 걸렸습니다.
하지만 redux를 배우고 적용해 볼 수 있었고 react-table을 이용한 pagenation 구현, styled component 등 한 번도 사용해보지 않았던 새로운 기능들을 추가하고 적용하는 부분 등을 통해 프론트엔드에 필요한 많은 것들을 배울 수 있었던 프로젝트였다고 생각합니다.

profile
개발블로그

0개의 댓글