게임 친구 찾기 앱 Baily

소개

• 프로필에 좋아하는 게임 정보를 올리고, 함께 할 친구를 찾을 수 있는 앱
• 필터를 통해 취향에 맞는 친구를 검색하여 실시간으로 찾을 수 있음
• 앱 링크 (opens in a new tab)

프로젝트 환경

• 소속: EJN
• 작업 기간: 2024년 4월 ~ 2024년 5월
• 인력 구성: Frontend Engineer 3, Backend Engineer 3, Product Manager 2, Product Designer 1
• 개발 스택: React Native, Expo, Typescript, CVA, Zod, Tailwind, SWR

개발 배경

• 트위치 철수로 인한 TWIP 매출 감소 문제를 해결하기 위해, 1인 창작자들이 고객들과 게임을 하며 수익을 창출할 수 있는 서비스를 기획

스크린샷

해결한 문제

1. 앱 개발자가 없는 조직에서 앱을 빠르게 출시할 수 있도록 환경 세팅

• 사내에 앱 개발자가 없었고, 회사 재정 상태가 좋지 않아 단기간에 MVP를 증명할 필요가 있어 React Native를 선택
  • React와 React Native 라이브러리의 사용법이 완벽하게 호환되지 않는 문제 발생
• 웹 프론트엔드 개발자가 회사 주요 프로젝트인 TWIP에서 사용한 기술 스택으로 작업할 수 있도록 React Native 환경을 세팅
  • React Native, Tailwind, Zod, SWR 등의 라이브러리를 그대로 사용할 수 있도록 설정
• 촉박한 일정(1달)에도 불구하고 환경 설정을 잘해서 기한 내에 앱을 출시할 수 있었음
• 1차 MVP로는 많은 유저를 확보하지 못했으며, 2차 작업(유료화) 도중 회사 폐업 결정으로 인해 중단됨

2. CVA 도입으로 typesafe한 컴포넌트 스타일 만들기

• 사이드 프로젝트로 UI 라이브러리 shadcn을 사용해보며, state에 따른 컴포넌트 스타일을 우아하게 관리하는 방법 발견
• TWIP 2.0 개발 시 고민하던 부분을 이 라이브러리를 통해 해결 가능성을 확인하고, 팀에 알리고 적용하여 디자인 시스템을 구축하는 데 사용