TF8
개인 프로젝트철권 8 플레이어가 캐릭터별 기술과 프레임 정보를 찾아볼 수 있는 모바일 앱입니다.
- 기간 · 팀
- 2024 (출시 및 운영 중)개인 프로젝트 · 1인 개발
- 담당
- 기획 · 앱 개발 · Google Play 출시 · 운영
- 기술 스택
- React Native
- TypeScript
- Expo
- Zustand
- Google Play Console
800+월간 활성 사용자
Google Play에 출시하고 사용자 피드백을 반영하며 운영하고 있습니다.
React Native·Expo 기반 앱 출시 및 운영 중
내가 쓰고 싶은 앱에서 출발한 프로젝트
대전 격투 게임 철권을 플레이하면서, 실전에 필요한 기술 정보를 그때그때 찾아보기 어려웠습니다. 플레이어들 사이에서는 ‘연깎’, ‘신삼단’ 같은 은어를 주로 사용하지만, 기존 정보 서비스에서는 공식 기술명으로 표기돼 익숙한 이름으로 검색하기 어려웠습니다. 또한 단순히 기술 이름만 검색하는 것이 아니라, ‘막히고 -13 이상인 기술’처럼 세부 조건에 맞는 기술을 찾아볼 필요도 있었습니다.
익숙한 이름과 세부 조건으로 원하는 기술을 빠르게 찾고, 기술별 파훼법까지 함께 확인할 수 있는 앱을 기획했습니다. 커맨드와 프레임 정보, 파훼법 메모를 한곳에 모아 게임을 하면서 꺼내 보는 포켓북처럼 구성했습니다.
- 한글 기술명·커뮤니티 별칭 검색
- 프레임 등 세부 조건을 조합한 기술 필터링
- 기술별 커맨드·프레임 정보와 파훼법 메모 조회
기술 목록의 렌더링 속도 개선
캐릭터마다 기술명, 커맨드 이미지, 프레임 정보 등을 담은 행이 100~300개가량 있습니다. ScrollView에서 모든 행을 한꺼번에 렌더링하면서 화면 밖의 항목까지 처리해 목록이 느려졌습니다.
목록을 가상화해 화면 주변의 항목부터 렌더링하도록 바꾸고, 기술을 분류별로 묶어 보여주는 SectionList를 적용했습니다. React.memo로 관련 없는 상태 변경에 따른 재렌더링도 줄였습니다.
글자 크기 설정에 따라 잘리던 기술표
출시 후 일부 사용자에게서 기술표의 UI가 잘린다는 제보를 받았습니다. 처음에는 컨테이너 크기의 문제라고 생각해 수치를 조정했지만, 업데이트를 배포한 뒤에도 같은 문제가 반복됐습니다.
여러 환경에서 확인해보니 시스템 글자 크기 설정이 원인이었습니다. 기술명과 프레임 값을 좁은 표에 나란히 표시하고 있었는데, 글자만 커지면서 정해둔 행 높이와 열 너비를 벗어났습니다.
PixelRatio.getFontScale()로 기기의 폰트 배율을 읽어 기준 크기를 나누는 normalizeFontSize 함수를 만들었습니다. 목록 헤더와 각 행, 설명 영역에 적용해 시스템 설정에 따라 글자가 표 밖으로 커지지 않도록 했습니다.
const normalizeFontSize = (size) => {
return size / PixelRatio.getFontScale();
};스토어 출시와 이후 운영
첫 스토어 제출 후 심사가 지연돼 지원팀에 문의하고, 정책 위반 안내에 따라 앱 이름과 디자인을 수정했습니다. 수정한 앱은 심사를 통과해 Google Play에 출시했습니다.
출시 후에는 사용자 리뷰를 통해 제 개발 환경에서 발견하지 못한 기술표의 글자 크기 문제를 확인했습니다. 기기의 시스템 설정에 따른 차이를 재현하고 수정해 업데이트에 반영했습니다.
프로젝트를 진행하며 작성한 글들
프로젝트의 진행 과정과 고민은 아래 글들을 통해 확인하실 수 있습니다.