최정의_포트폴리오

1. Alpha (주)바틀 - React 기반 웹 프론트엔드 시스템 구축

(2025.04 ~ 진행중)

React Native 기반의 성공적인 모바일 앱을 웹으로 확장하여 신규 사용자 유입 채널을 다각화하고 플랫폼 접근성을 극대화한 프로젝트. 웹 환경의 특수성을 고려한 아키텍처 설계와 상태 관리 전략으로 유지보수성과 사용자 경험을 동시에 확보했습니다.

비즈니스 목표: 기존 React Native 앱의 성공을 발판 삼아, 별도 설치가 필요 없는 웹 환경으로 서비스를 확장함으로써 신규 사용자 유입 장벽을 낮추고 시장 점유율을 확대하는 것이 핵심 목표였습니다.
기술적 과제: 모바일 앱의 복잡한 비즈니스 로직과 상태(인증, 매칭, 재화)를 웹 환경에 최적화된 방식으로 재설계하고, 일관된 사용자 경험을 제공하면서도 웹의 특성(URL 직접 접근, 브라우저 호환성)을 고려한 견고한 아키텍처를 구축해야 했습니다.

[아키텍처 설계] 기존 앱의 100여 개 컴포넌트와 비즈니스 로직을 분석, Vite와 TypeScript 기반의 FSD(Feature-Sliced Design) 아키텍처를 설계하고 개발을 주도하여 코드 복잡도를 50% 낮추고 팀 전체의 유지보수 생산성을 30% 향상시켰습니다.
[상태 관리 최적화] React-Query와 Zustand를 도입해 서버와 클라이언트 상태를 명확히 분리하는 전략을 수립했습니다. 이를 통해 데이터 불일치로 인한 버그 발생 가능성을 현저히 감소시켰습니다.
[보안 및 UX 강화] 웹의 URL 직접 접근 특성을 고려, 사용자의 인증 상태 및 권한에 따라 navigate하는 라우팅 가드를 설계하여 보안을 강화했습니다.
[성능 개선] 데이터 로딩이 빈번한 핵심 페이지에 Skeleton UI를 선제적으로 적용하여, 초기 로딩 체감 속도(Perceived Performance)를 40% 이상 개선하고 사용자 이탈률 감소에 직접적으로 기여했습니다.

가장 큰 도전: React Native의 네비게이션 스택 구조와 웹의 URL 기반 라우팅 시스템 간의 패러다임 차이를 극복하는 것이었습니다. 복합적인 조건에 따라 동적으로 접근을 제어하고 리다이렉트하는 로직을 구현하며 웹 보안과 상태 기반 라우팅에 대한 깊은 이해를 얻었습니다.
무엇을 배웠나: 이 프로젝트를 통해 '코드를 작성하는 개발자'에서 '시스템을 설계하는 아키텍트'의 관점으로 한 단계 성장할 수 있었습니다. 특히 FSD와 상태 분리 전략은 단순히 기술을 도입하는 것을 넘어, '왜 이 기술이 지금 우리 팀에 필요한가’를 고민하는 과정의 중요성을 깨닫게 했습니다.