B2B Edutech

기업 교육 플랫폼

프로클래스

HLS 스트리밍 플레이어, 멀티테넌시, 스터디 그룹, AI 요약, OTA 배포까지 — 10+ 기업 고객이 사용하는 React Native 앱을 2년 10개월간 설계·구현·운영하며 서비스 안정화에 기여했습니다.

이 포트폴리오는 본인이 직접 설계·구현·운영에 기여한 내용만을 기술합니다.

Period

2023.04 — 2026.01 (2년 10개월)

Stack

RN 0.76.9 · Expo 52

Role

React Native Frontend Developer

Team

PO 1, PM 1, Dev 3

Clients

10+ 기업

운영 임팩트

안정화에 기여한 대표 사례

3 Cases

배포 리드타임

OTA 배포 체계 전환

CodePush 종료 리스크를 EAS Update 전환과 채널 분리로 흡수해 스토어 심사 의존도를 낮췄습니다.

1-3일수분

인증 안정화

토큰 갱신 큐 패턴

동시 만료 요청을 단일 refresh 플로우로 직렬화해 중복 호출과 인증 꼬임을 차단했습니다.

동시 요청1회

WebView UX

전역 WebView Provider

러닝저니 인스턴스를 유지하고 visibility만 전환해 탭 이동 시 리로드 지연을 제거했습니다.

3-5초즉시 전환

120+

전체 스크린 수

40+

API 모듈

22

Recoil Atoms

10+

기업 고객

33+

공통 컴포넌트

0.67 → 0.76

RN 누적 업그레이드

Architecture

앱 아키텍처 레이어 구조

120+ 스크린, 40+ API 모듈, 10+ 기업 고객을 안정적으로 운영하기 위해 단방향 의존 흐름의 6-Layer 구조를 설계했습니다.

각 레이어의 역할과 그렇게 설계한 이유를 함께 서술합니다.

🚀
Layer 1

Entry Point

앱 최상위에서 Safe Area·제스처·OTA 업데이트를 일괄 초기화하여, 하위 모든 레이어가 환경 차이 없이 동작하도록 보장합니다.

SafeAreaProviderGestureHandlerRootViewUpdateSplash (EAS OTA)
🌐
Layer 2

Global Providers

전역 상태(Recoil)·서버 캐시(React Query)·테마·WebView 인스턴스를 Provider 계층에 집중시켜, Feature 모듈이 인프라에 의존하지 않도록 관심사를 분리했습니다.

RecoilRoot (22 atoms)QueryClientProvider (react-query)ThemeProvider (light/dark)WebView Provider (러닝저니)
🧭
Layer 3

Navigation (120 screens)

120+ 스크린을 ScreenId enum과 NavigationParams 타입으로 관리하여, 존재하지 않는 화면 이동을 컴파일 타임에 차단합니다. 딥링크·푸시도 같은 라우팅 레이어를 공유해 진입 경로별 코드 중복을 제거했습니다.

Stack Navigator (react-navigation 6)Bottom Tabs: Home · Class · Journey · Ranking · MyScreenId enum (120개) + NavigationParams 타입 세이프Deep Link + 푸시 알림 → 화면 라우팅
⚡
Layer 4

Feature Modules

도메인별로 모듈을 분리하여 기능 간 결합도를 낮추고, 새 기능 추가 시 기존 모듈에 영향 없이 독립 개발·배포할 수 있도록 설계했습니다.

커스텀 비디오 플레이어 (iOS WebView/Android 네이티브 분기)커뮤니티 리메이크 (무한 스크롤 · 고정글 · 비밀글)러닝저니 V2 (WebView Bridge · visibility toggle)스터디 (Socket.IO 실시간 채팅 · 투표 · 자료실)랭킹 / 퀴즈 / 숏폼 / 카드뉴스 / 수료증
🔧
Layer 5

Common Components (33개)

Feature 모듈에서 반복되는 UI 패턴을 33개 공통 컴포넌트로 추출하여 일관된 UX를 보장하고, 디자인 변경 시 단일 수정 지점으로 유지보수 비용을 줄였습니다.

BottomSheet · Toast · Popup · ModalSkeletonPlaceholder · ProgressChart · LineChartFastImage · PdfViewer · HtmlContentOrgSelector (기관 전환) · VersionChecker
🧱
Layer 6

Core Layer

네트워크·인증·푸시·타입 정의 등 인프라 관심사를 최하위 레이어에 격리하여, 상위 레이어가 구현 세부에 의존하지 않고 인터페이스만 참조하도록 단방향 의존 흐름을 강제합니다.

Axios 인터셉터 (자동 토큰 갱신 큐 패턴)AsyncStorage (로컬 캐시 · 오프라인 복구)Firebase Messaging (FCM) + Remote ConfigRecoil atoms (비디오 · 미니플레이어 · 유저 상태)types/ (auth · video · home · permission 타입 정의)

단방향 의존 흐름

top → bottom
Entry Point
Global Providers
Navigation (120 screens)
Feature Modules
Common Components (33개)
Core Layer
Tech Stack

기술 스택 선택 이유

단순 기술 나열이 아닌, 프로젝트 맥락에서 해당 기술을 선택한 이유를 서술합니다.

React Native

v0.76.9

크로스 플랫폼 UI

iOS/Android 단일 코드베이스로 개발 리소스를 절반으로 줄이면서, 네이티브 모듈 접근이 가능해 HLS 플레이어·PiP 등 플랫폼별 기능 구현에 제약이 없었습니다.

Expo SDK 52

v52.0.48

빌드·업데이트·네이티브 모듈

CodePush 지원 종료 이후 EAS Update로 OTA 배포 체계를 전환하기 위해 도입했습니다. Bare 워크플로우에서도 expo-updates를 활용해 스토어 심사 없이 수분 단위 배포가 가능해졌습니다.

TypeScript

v5.3

타입 안전성

120+ 스크린, 40+ API 모듈 규모에서 런타임 에러를 컴파일 타임에 차단하기 위해 전면 적용했습니다. ScreenId enum, NavigationParams 등 도메인 타입을 정의해 존재하지 않는 화면 이동이나 잘못된 파라미터를 원천 차단합니다.

19개 핵심 라이브러리 · 7개 카테고리

Deep Dive

핵심 기능 Deep Dive

개발 과정에서 구현한 핵심 기능의 설계, 챌린지, 해결 과정입니다.

react-native-video 6.18Reanimated PanGestureOrientation LockerPiP Mode (Android)Mini Player Recoil atomWebView 시스템 플레이어 (iOS)

Decision

플랫폼별 플레이어를 공통 인터페이스 뒤에 숨기고 루트 오버레이에서 재생 상태를 유지

Trade-off

단일 구현의 단순함보다 iOS 제약 대응과 Android 네이티브 경험을 우선

Result

네비게이션 전환·미니플레이어·PiP 상태가 분리되어 재생 중단과 UI 꼬임을 방지

아키텍처

react-native-video 커스텀 플레이어iOS/Android 플랫폼 분기 아키텍처숏폼 전용 플레이어커스텀 시크바 및 설정 모달

핵심 설계 포인트

  • iOS PIP 제약 대응: iOS는 WebView 기반 시스템 플레이어로 분기, 공통 인터페이스로 동작 통일해 기능 공백 제거
  • 미니플레이어를 화면 하위에서 분리 → 앱 루트 오버레이로 상시 렌더링, 네비게이션 전환과 재생 상태 분리
  • 재생/노출/미니/전체화면/PiP 상태를 Recoil로 세분화, 전환 이벤트 흐름 정리 → 경쟁 상태·UI 꼬임 방지
  • 제스처 임계값(미니↔전체) + 회전 정책을 전환 흐름에 바인딩 → 전환 구간 끊김/레이아웃 깨짐 안정화
  • 커스텀 시크바 + 재생속도·자막 설정 모달 + 강의 목록 연동

Challenge → Solution

❓ iOS PIP 제약: react-native-video iOS PIP 한계로 단일 플레이어 불가

✅ iOS는 WebView 기반 시스템 플레이어로 분기, 공통 인터페이스로 동작 통일해 기능 공백 제거

❓ 미니플레이어 전환 시 드래그 제스처와 스크롤 충돌 + 네비게이션 전환 시 재생 중단

✅ 플레이어를 앱 루트 오버레이로 상시 렌더링, 제스처 핸들러 + translateY 임계값 판별로 전환 제어

❓ 재생/노출/미니/전체화면/PiP 상태 간 전환 시 경쟁 상태·UI 꼬임 발생

✅ 상태를 Recoil 전역 atom으로 세분화, 전환 이벤트 흐름을 단방향으로 정리해 경쟁 상태 방지

주요 수치

iOS / Android

플랫폼 분기 단일 인터페이스

5종 (재생·노출·미니·전체·PiP)

재생 상태 atom 분리

0건

네비게이션 전환 재생 중단

Sub Projects

주요 서브 프로젝트

프로클래스 앱 개발 과정에서 독립적으로 수행한 기술 프로젝트입니다.

State & API

상태 설계 & API 레이어

22개 Recoil atom의 도메인별 설계 구조와 39개 API 모듈(200 엔드포인트)의 카테고리별 구성입니다.

Recoil Atoms (22개)

22

atoms

비디오/플레이어
6
유저/인증
1
학습/콘텐츠
4
퀴즈
4
스터디
3
앱 공통
4

비디오/플레이어

6개

재생 상태·전체화면·미니플레이어·PiP 등 플레이어 전환 제어

videoStatevideoPlayerStateminiPlayerStatepipState

유저/인증

1개

로그인 유저 정보·소속 기관·프로필

userState

학습/콘텐츠

4개

러닝저니 생성·학습 클래스·저장 콘텐츠 관리

learningCreateStatesaveContentListState

퀴즈

4개

퀴즈 진행·미응답·유형 선택·생성 이력

quizStatequizNotAnswerState

스터디

3개

스터디 목록·상세·접속 상태·자료 저장

studyDetailStatestudyListState

앱 공통

4개

하단 메뉴·토스트·OTA 업데이트·만족도 조사 등

bottomMenuStatetoastStatecodePushState

API 모듈 (39개 · 200 엔드포인트)

카테고리별 엔드포인트 분포

총 200
인증/유저
31
학습/영상
58
콘텐츠/홈
12
커뮤니티
26
스터디
19
AI/추천
12
푸시·마이페이지
42

인증/유저

7 모듈31 EP

Axios 인터셉터, JWT 토큰 갱신 큐, 다중 계정 전환, 초대 코드 가입

Axios 인터셉터 기반 토큰 자동 갱신

멀티테넌시 계정 전환 API

학습/영상

10 모듈58 EP

영상 목록·HLS URL·시청 이력·진도율·수강 관리·학습 현황·러닝저니

진도/완료 이벤트 동기화

학습 현황 통계 15+ 엔드포인트

콘텐츠/홈

5 모듈12 EP

홈 큐레이션·숏폼·카드뉴스·텍스트·북마크

섹션별 독립 API 페칭

콘텐츠 타입별 통합 인터페이스

커뮤니티

3 모듈26 EP

게시글 CRUD·댓글·v2 무한 스크롤·고정글

v1/v2 병행 운영

댓글 12개 엔드포인트 모듈화

스터디

3 모듈19 EP

스터디 CRUD·멤버·자료실·투표

Socket.IO 채팅 연동

v2 API 분리

AI/추천

3 모듈12 EP

AI 요약·퀴즈 생성·챗봇 추천

비동기 생성 + 푸시 알림 연동

러닝저니 추천 플로우

푸시·마이페이지

8 모듈42 EP

푸시 알림·랭킹·포인트·수료증·마이페이지·로그·운영 관리

앱 알림 설정 11 엔드포인트

마이페이지 18 엔드포인트

Backend

백엔드 인프라 구조

Node.js + Express REST API 서버의 일부 API 개발에 직접 참여하고, AWS 인프라 전반을 이해하며 협업한 구조입니다.

Runtime & DB

Node.js + Express

RESTful API

MySQL

관계형 DB

AWS 인프라

AWS EC2

API 서버 호스팅

AWS S3

VOD · 이미지 · 정적 파일 스토리지

AWS SES

가입 인증 · 알림 이메일 발송

API 버전

REST API v1
REST API v2 (신규 기능)

핵심 백엔드 기능

JWT 인증

Access/Refresh 토큰 발급 및 검증

Socket.io 실시간 채팅

스터디 그룹 실시간 메시징

FFmpeg 영상 처리

HLS 트랜스코딩 및 썸네일 생성

GPT API 연동

AI 강의 요약·퀴즈 자동 생성

Batch 스케줄러

정산·알림·통계 배치 작업

Request Flow

React NativeAxios InterceptorExpress RouterJWT MiddlewareControllerMySQLResponse
Summary

경력 요약

2023.04 — 2026.01 (2년 10개월) 동안 PROCLASS 앱의 전 라이프사이클을 담당하며 쌓은 핵심 역량입니다.

핵심 역량

React Native Core Developer

RN 0.76 + Expo SDK 52 기반 120+ 스크린 앱의 아키텍처 설계 및 유지보수

Problem Solver

iOS/Android 네이티브 분기, 토큰 자동 갱신 큐, WebView 브릿지 등 실전 문제 해결

Full-Stack 이해

Node.js + Express 백엔드, MySQL, AWS 인프라까지 전체 플로우 이해 및 협업

프로젝트 타임라인

2023.04 — 2023.12

앱 초기 구축 & AI 파이프라인

  • 프로클래스 RN 앱 초기 아키텍처 설계·개발 착수
  • AI 콘텐츠 파이프라인 구축 (Python · Whisper · GPT)
2024.01 — 2024.12

핵심 기능 고도화

  • 커스텀 비디오 플레이어 · 멀티테넌시 · 스터디 · 퀴즈
  • JWT 토큰 자동 갱신 · 푸시/딥링크 통합 · 데이터 정합성 패턴
2025.01 — 2026.01

운영 안정화 & 마이그레이션

  • RN 0.72→0.76 업그레이드 · CodePush→EAS OTA 전환
  • 10+ 기업 고객 운영 · 120+ 스크린 · 앱 v2.0 안정화