MAU 60만 이상의 ‘모바일이즐’, MAU 30만 규모의 ‘이즐충전소’ 서비스를 통합 운영하며 자사 네이티브 SDK 연동 및 UI/UX 표준화에 기여한 프로젝트입니다.

이 프로젝트는 캐시비, 로카모빌리티의 후속 브랜드인 ‘이동의 즐거움’에서 운영하는 주요 앱의 프론트엔드 구조를 통합하고, 다양한 네이티브 기능을 React Native 단에서 일관되게 사용할 수 있도록 정비한 작업이었습니다.

• 1. 플랫폼별로 상이한 네이티브 기능 응답을 통합 처리하는 공통 브릿지를 직접 설계하고,
• 2. NFC 충전 과정에서의 거래 실패 이슈를 선제적으로 해결하기 위해 프론트엔드 레벨에서 LSTEP 처리 로직을 도입했습니다.
• 3. 이벤트 로깅 자동화를 위한 HOC/커스텀 훅 기반 수집 시스템을 직접 설계하여 수작업 로깅의 오류를 줄였고,
• 4. Figma Tokens와 Storybook을 활용한 디자인 시스템을 구축해 앱 간 UI 일관성을 확보하고 신규 기능 대응 속도를 개선할 수 있었습니다.

게임 통계 분석, 친구 초대, AI 코칭 기능 등을 지원하는 Electron 기반 데스크톱 클라이언트 앱입니다.

• 1. 기존 데스크톱 앱의 UI 구조와 Electron 프로세스 구조를 개선하여 메모리 사용량 35% 이상 감소 및 UI 오류 빈도를 60% 이상 줄였습니다.
• 2. 특히, 다중 renderer 구조로 인한 복잡성을 단일 프로세스로 리팩토링하고, React Query 기반의 데이터 캐싱 구조로 페이지 응답 속도를 높였습니다.
• 3. 초기 TTI(Time to Interactive)를 약 6초 → 2.1초로 줄이며 UX 품질을 개선했고,
• 4. 유지보수성을 높이기 위해 Context + 커스텀 훅 기반 상태관리 아키텍처를 설계하여 도메인별 모듈화 구조를 안정화했습니다.

전적 기록, 챔피언 분석, 프로 유저 피킹률 등 다양한 게임 데이터를 시각화한 웹 페이지 입니다.

• 1. 사용자 경험 강화를 위해 전체 트래픽 중 중복 호출이 많던 API 응답을 React Query 기반으로 캐싱 처리하여 서버 부하를 28% 감소시켰으며, 페이지 재진입 시 로딩 시간을 1.4초 → 0.42초로 단축했습니다.
• 2. 또한 성능 개선을 위해 코드 스플리팅, 이미지 Lazy Loading, preload script 적용을 병행하였고, UI 초기 렌더링 속도를 25% 이상 향상시켰습니다

플레이 영상 기반의 자동 분석 및 사용자의 플레이 성향을 시각화하여 피드백을 제공하는 웹 페이지 입니다.

게임 리플레이를 기반으로 자동 분석 결과를 도출하고, 이를 시각화하는 대시보드 UI를 설계했습니다. 분석 결과는 전적 API, 타임라인 정보, 포지션 정보 등과 연계됩니다.

• 1. Vue 기반의 구조로 초기 MVP를 구현하고 이후 리팩토링을 주도했습니다.