기획의도
‘신입 포트폴리오는 거의 다 똑같다. 그래서 보통 안 보는 경우가 많다.’ 이런 말을 많이 들었습니다. 그래서 만들어진 템플릿 같은 것을 쓰지 않고, 아무데서도 코드를 베끼지 않고 새로운 포트폴리오, 보고싶은 포트폴리오를 만들어 보고 싶었습니다.
최근에 재밌게 했던 모바일 게임 중 reigns라는 카드 선택 게임에서 아이디어를 얻어 이벤트 카드가 뜨고 두 가지 선택지 중 하나를 선택하면 그 선택에 따라 상단의 스탯이 변하는 방식의 웹 게임을 구현하고자 했습니다. 또한 실시간 API를 활용해 보고 싶어서 날씨 API를 게임 내용에 넣어 보고자 했습니다
페이지 구성과 기능
랜딩페이지에서 게임 방법을 설명하는 모달창을 열 수 있습니다. Game Start 버튼을 누르면 먼저 실시간 날씨를 불러오거나 직접 날씨를 선택할 수 있는 페이지로 넘어가고 날씨를 선택 한 후 게임을 시작할 수 있습니다. 게임화면에서는 매 턴마다 이벤트 카드가 뜨고 좌우 선택지 중 하나를 클릭하면 선택에 따라 상단 스탯이 변화하며 다음 이벤트로 넘어갑니다. 스탯 중 하나라도 0이 되면 Game Over가 됩니다.
CSS 라이브러리에 대한 고민
여러 강의에서 다양한 CSS 라이브러리를 접하게 되었습니다. Bootstrap이나 tailwind css같은 것이었는데, 저는 처음에 tailwind css를 사용하려고 했습니다. 클래스명에 정해진 변수를 입력하면 CSS가 구현되는 방식인데 매우 빠르게 작업할 수 있다는 장점이 있습니다. 하지만 직접 사용해보니 단점이 눈에 들어왔습니다. 자주 사용되는 기능들과 레이아웃은 변수로 설정이 되어 있어 소개페이지나 쇼핑몰 페이지처럼 기존에 많이 만들어진 페이지를 구현하는 데는 편하지만, 제가 만드려는 웹 게임은 비슷한 페이지도 없고 모바일과 데스크톱 둘다 반응형으로 만들기 위해 픽셀 단위로 레이아웃과 배치 등을 꼼꼼히 만들어야 했습니다. 그래서 원하는 css를 만들기 위해 tailwind 홈페이지에서 검색을 하면서 만드니 오히려 라이브러리 없이 css를 다루는 것보다 느리게 되었습니다. 이래선 tailwind css를 사용하는 이점이 없었기 때문에 최상단의 간단한 Navbar만 tailwind css로 만든 후, 나머지는 .css파일을 따로 만들어 구현했습니다.
OpenWeather API로 실시간 날씨 받아오기
게임에는 세 가지의 스크립트가 준비되어 있는데, 날씨를 기준으로 선택하게 했습니다. 그래서 실시간 API를 이용해서 실제 날씨별로 게임 스크립트가 선택되면 재밌을 것 같아 구현해보았습니다.
무료로 날씨 API를 제공하는 OpenWeatherMap이라는 사이트를 이용했는데, 직접 API key를 받아 요청과 응답을 Postman으로 주고 받아보니 매우 신기했습니다. 무료 API라 요청 한도가 있었기 때문에 응답 형태와 같은 JSON파일을 mock data로 만들어 작업하고, 완성 후 axios로 요청하게끔 만들었습니다.
상태관리 라이브러리에 대한 고민
작업을 하면서 예상했던 것 보다 상호작용이 되어야 하는 상태값이 너무 많았습니다. 카드가 넘어갈때마다 새로운 스크립트와 선택지가 업데이트 되어야 하고, 선택의 결과로 스탯이 변화해야 하는데 스탯과 카드를 컴포넌트 단위로 나누었고 스크립트 파일도 따로 있습니다. 이것들을 리액트의 props와 state를 이용해서 주고 받으려면 너무 복잡해지게 됩니다. 그래서 상태관리 라이브러리를 통해 상태관리를 하기로 했습니다.
가장 많이 사용하는 Redux를 사용하기 위해 공식문서를 읽는데, 생각보다 더 러닝커브가 가팔랐습니다. 공식문서만 봐서는 기능이 너무 많고 감이 잘 잡히지 않아 짧은 유튜브 강의를 들었습니다. 어느정도 이해했다고 생각하고 구문을 써서 구현하려고 했는데 Redux-Toolkit이라는 새로운 버전이 있다는 것을 알았습니다. 기왕 학습하는 김에 새로운 버전도 학습하기로 합니다. 이것도 설명해주는 짧은 강의가 유튜브에 있어 빠르게 본 후 구문을 연습해 보았습니다.
둘을 비교해서 사용해본 바로는 Redux-toolkit은 Redux를 사용하기 쉽게 만들었고 반복되는 코드를 줄인 버전이었습니다. 기존 Redux는 store 설정도 매우 복잡하고 보일러 플레이트(boilerplate code), 즉 깔아주어야 하는 코드가 많아 산만했습니다. Redux-Toolkit은 그러한 단점을 보완한 버전이지만 솔직한 소감은 여전히 사용하기에 많은 학습을 필요로 하고 구조도 꽤 복잡하다고 생각되었습니다. store 설정과 reducer, createSlice 구문 같은 것들은 직관적이지 못하다는 느낌을 받았습니다. 시행착오를 거쳐 최종적으로는 Redux-toolkit으로 구현했습니다.
배포 후 수정, 회고
배포를 하고 모바일과 데스크톱으로 페이지를 이용해 보았는데 브라우저 창 크기를 조절하는 과정에서 반응형 CSS가 의도와 다르게 작동하는 부분을 찾았습니다. CSS의 Flexbox 적용이 어긋나 있는 부분이 있어 빠르게 수정하였습니다.
게임 스토리 내용은 짧은 시간안에 작성하느라 선형적인 진행으로 만들었지만 조금 더 보완하면 선택에 따라 선형적 진행이 아니라 진행을 건너 뛴다던가, 다시 이전의 선택지로 돌아가는 등 변주를 줄 수도 있겠다는 생각이 들었습니다. 그러면 JSON 형태의 파일로 된 스크립트에서 각각의 카드의 ID를 변수로 만들어 선택지의 결과나 스탯창의 상태에 따라 해당 ID의 카드로 돌아가는 식으로 구현할 수 있겠다고 생각했습니다.
그 외 디자인적 부분에서는 기존의 템플릿을 전혀 참고하지 않고 반응형 CSS에 중점을 두고 구현하여 밋밋하기는 하지만 디자이너와 협업할 시 양자택일 이라는 게임의 컨셉과 포스트아포칼립스 생존이라는 스토리의 컨셉에 맞는 디자인을 구현할 수 있겠다고 생각했습니다. 또한 최종 점수가 뜨는 Score 페이지를 SNS로 공유하는 기능 정도를 추가할 수 있겠다고 생각했습니다.
