Back to Career

Purple Academy · Frontend Developer · 2023.06 - 2024.06

퍼플 잉글리시

교육 회사의 R&D 신사업을 모바일 앱 채널로 확장하는 의사결정을 1년차 사원이 주도했습니다. 웹에서 풀 수 없던 음성 콘텐츠 보안과 모바일 브라우저 호환성 한계를 React Native 마이그레이션으로 우회했고, RN 경험이 없었음에도 기존 React 코드의 모듈화·컴포넌트화를 먼저 정비해 학습 곡선을 낮춘 뒤 마이그레이션을 완수했습니다. App Store와 Play Store에 출시하면서 앱 채널 신사업의 길이 열렸습니다.

1. 기존 자산2. 준비 (핵심 결정)3. 출시React Web기존 학습 콘텐츠 5,000+UI · 로직 혼재코드베이스 정비UI / 로직 분리Custom Hook으로 비즈니스 로직 추출공유 로직 레이어Web / RN 양쪽이 동일 Hook 사용컴포넌트 단위마이그레이션React Native AppApp Store · Google PlayGSAP + SVG Path 인터랙티브★ 핵심 결정: 마이그레이션 자체보다 직전의 모듈화·Custom Hook 정비에 무게RN 경험 없는 1년차가 학습 곡선을 낮춘 방법 — 코드 구조를 먼저 정비하니 마이그레이션 단위가 컴포넌트로 자연스럽게 잘렸다.

개요

Purple Academy(교육 회사)에서 프론트엔드 1년 재직, 2명 팀에서 1년차 사원이지만 프로젝트 리딩 위치로 결정권 보유. 기존 제품은 React 기반 웹 서비스로 어린이·청소년 대상 영어 교육 콘텐츠(알파벳 트레이싱·인터랙티브 학습 활동 등)를 다수 운영 중인 환경.

마주한 문제

두 갈래의 압박이 동시에 들어왔습니다. 첫째는 웹 환경에서의 음성 재생 보안이었습니다. 학습 콘텐츠인 음성 자산이 노출되면 사업 가치가 무너지는데, 브라우저에서 이를 견고하게 막을 방법이 없었습니다. 둘째는 모바일 브라우저 호환성이었습니다. 사용자 핸드폰마다 브라우저 종류와 버전이 달라 대응 매트릭스가 폭증했고, 일부 환경에서는 정상 동작 자체가 불가능했습니다. 결론은 명확했습니다. 앱 출시 없이는 사업이 진전될 수 없었습니다.

풀이 가설

가설은 단순했습니다. "React Native 경험은 없지만, 기존 React 코드를 컴포넌트·모듈 단위로 강하게 분리해두면 RN으로 옮기는 학습 곡선은 낮을 것이다." 마이그레이션 자체보다 직전의 준비 작업(코드베이스 정리)이 성공의 관건이라고 판단했습니다.

검토한 대안

정직하게 말하면 Flutter, Capacitor, PWA, 모바일 웹 강화 같은 다른 옵션을 명시적으로 비교하지 않았습니다. 기존 React 자산을 가장 직접적으로 재사용할 수 있는 RN이 자명한 선택이었고, 1년차 사원에 2명 팀의 자원 한계에서 비교 검토 비용 자체가 부담이었습니다. 이 부분은 회고 영역으로 남깁니다.

선택과 근거

본인이 결정했습니다. 1년차 사원이지만 프로젝트 리딩 위치였기에 결정권을 가졌고, 결정 근거는 세 가지였습니다. 첫째 음성 보안(웹에서 풀기 어려운 문제), 둘째 브라우저 대응 비용(모바일 브라우저 매트릭스의 한계), 셋째 학습 곡선(모듈화 선행으로 낮출 수 있다는 사전 평가)입니다. 실행 전제는 마이그레이션 직전에 React 코드베이스의 모듈화·컴포넌트화를 충분히 정비하는 것이었습니다.

구현과 시행착오

먼저 기존 React 코드의 모듈화·컴포넌트화에 시간을 들였습니다. UI/로직 분리, Custom Hook으로 비즈니스 로직 추출, 의존성 정리를 거친 뒤 RN으로 점진 마이그레이션을 진행했습니다. RN 자체는 처음 다루는 환경이라 학습하면서 옮기는 흐름이었지만, 사전에 정비된 코드 구조 덕에 컴포넌트 단위로 작업이 명확하게 끊겼습니다. 최종적으로 양 스토어(App Store, Google Play) 출시까지 도달했습니다.

성과

App Store와 Google Play 양 스토어 출시에 도달했고, 그 결과로 앱 버전 기반의 신사업이 가능해졌습니다. 모바일 채널 자체가 닫혀 있던 상태에서 진행 가능한 상태로 바뀌었다는 점이 이 프로젝트의 핵심 임팩트입니다.