상세 컨텐츠

본문 제목

[React Native / Expo/ 앱] 한국판 "포켓몬 워들"로 없어서 못 구한다는 띠부씰 모으기

Programming/React

by 쌩우 2022. 4. 15. 15:09

본문

요즘 한창 유행인 포켓몬 빵.

없어서 못 산다는 포켓몬 빵...

도대체 정말 팔기는 파는 건지 궁금하다.

구경이라도 해야 빵을 사고, 옛날 추억 회상 겸 띠부씰도 모을텐데...

너무 답답한 마음에 그냥 내 개인 띠부씰 모음집을 앱으로 만들기로 했다.

(가질 수 없다면 부셔버리겠...)

사실 앱을 만들어보는 건 처음이라, 비교적 익숙한 React 기반으로 가능한 방법을 사용했다.

React Native 자체도 처음이거니와,

한국판 포켓몬 워들은 아직까지 본 적이 없어서 어떻게 구현해야 할 지부터 기획해야했다.

나는 원조 포켓몬 게임을 아주 재밌게 90년대생이므로,

포켓몬 골드/실버 이후로는 취급을 하지 않는다.
하지만 역시 제일은 원조 151마리라하였다.
그래서 이번 워들 단어사전은 151마리의 포켓몬으로만 구성하기로 했다.
아주 아주 유용한 poke api를 활용하면 필요한 데이터를 얼마든지 얻을 수 있다.
(한글 포켓몬 이름은 api로 제공해주지 않아서 직접 추가해주어야 했지만...)

대신 대부분의 한글 워들에서 구현한 형태소 분석을 사용한 게임은 하지 않기로 했다.
직접 경험해보니, 오히려 영단어 보다도 한글이 어려운 것 같아서이다.

내 목적은 간단한 게임으로 띠부씰 모음집을 만드는 것이기 때문에 그렇게까지 필요하진 않았다.

"Wordle이 뭔데?" 라고 생각하는 사람이 있다면, 아래의 링크를 참고하기 바란다.

 https://www.nytimes.com/games/wordle/index.html

먼저, 결과물의 모습을 보여준다면 다음과 같다.

베일에 쌓인 포켓몬을 잡기 위해서 제공된 정보라고는 실루엣과 이름이 몇 글자인지에 대한 것과 울음소리 뿐이다.

처음엔 이름 옆에 타입별로 색깔을 달리한 칩을 붙여주거나, 텍스트로 알려주는 방법도 생각했었다.

하지만, 그렇게 하니 너무 쉬운(?) 듯 해서 어느 정도 난이도 조절을 하느라 없어지게 되었다.

울음소리를 다시 듣고 싶다면, "포켓몬" 글자를 누르면 된다.

어느 정도 감이 잡혔다면, 다음으로는 "싸우다"를 눌러 게임을 진행한다.

방법은 간단하다.

이름을 적기만 하면 된다.

입력을 다 하고, 제출을 하게 되면 일치하는 정도에 따라서 체력을 깎게 된다.

마지막의 "리"자가 초록색으로 표시된 것으로 보아, "리"자로 끝나는 포켓몬이라는 뜻이다.

(글자를 맞힐 때 마다, 베일의 정도가 옅어지게 되어있다. 아까보다 뿔의 형상이 더 자세히 보이게 되었다.)

이제 정답을 맞혀보자.

이름을 맞히게 되면, 폭죽 효과와 함께 베일이 벗겨지게 되어있다.

몬스터볼을 던져서, 성공적으로 잡게되는 경우와 같은 효과를 넣을까도 고민했지만

처음에 베일에 가려진 모습을 밝히는 것이 더 극적으로 표현될 것 같아 이렇게 구현하게 됐다.

이렇게 성공적으로 이름을 맞힌 포켓몬은 도감에서 띠부씰 형태로 확인할 수 있게 된다.

앱 메뉴 모음

왼쪽의 메뉴를 열어, Dex로 이동하면

이제껏 이름을 맞혀 수집한 띠부씰 모음집을 확인할 수 있다.

다크모드의 경우도 지원을 하고 있다.

띠부씰을 대리만족 차원으로 모을 수도 있고,

모으려면 열심히 걸어야 하니까, 걸어야 하는 동기부여도 될 것 같다.

상세한 구동 영상은 다음 유튜브 영상으로 확인할 수 있다.

플레이스토어나 앱 스토어에 등록할 수는 없으니,

필요할 경우 apk 파일로 만들어 개인적으로만 사용하려고 한다.

 


github

(개인적인 생각으로 아직 완성도가 한참 못 미치지만, 일단 처음에 기획한 최소한의 기능은 구현되어서 작업을 일단락짓기로하였다.)

관련글 더보기

댓글 영역