영썬
모바일 교육 콘텐츠 및 체험 예약 플랫폼 구축
사용자는 모바일 앱에서 강의와 체험 콘텐츠를 탐색하고, 영상을 재생하거나 오프라인 클래스에 결제 참여하며, 멤버십을 통해 이용 혜택을 받을 수 있습니다. 운영자는 별도 관리자 콘솔에서 콘텐츠 노출, 추천 순서, 일정, 주문, 회원, 공지, 배너, 앱 설정을 관리합니다. JWT 권한 검증, Redis 기반 인증·결제 임시 데이터, Bee-Queue 비동기 작업, Socket.IO·FCM·SMS 알림, S3 이미지 업로드 구조를 결합해 운영 가능한 서비스 구조로 설계되어 있습니다.
- 기간
- 2024
- 분류
- 모바일 앱, 관리자


React Native 모바일 앱, Express API 서버, React Admin 운영 콘솔로 분리된 교육 콘텐츠 및 오프라인 체험 예약 서비스입니다. 영상 강의, 크리에이터 정보, 지역 기반 체험 클래스, 멤버십 구독, 결제 카드, 알림, 검색, 공지·배너 운영 기능을 하나의 서비스 흐름으로 구성했습니다. 서버는 TypeORM 기반 PostgreSQL 엔티티로 사용자, 인증, 강의, 체험, 수업 일정, 주문, 멤버십, 결제카드, 알림, 리뷰, 배너, 공지 데이터를 관리하고, MongoDB Atlas Search를 별도 검색 인덱스로 활용합니다.
서비스 화면
교육 콘텐츠 탐색과 영상 학습
강의 유형, 카테고리, 크리에이터, 관련 강의를 함께 제공하고 Vimeo 영상 재생 이력을 저장합니다. 무료 재생 한도와 멤버십 상태를 서버에서 검증해 이용 정책을 안정적으로 적용했습니다.
지역 기반 체험 클래스 예약
체험 콘텐츠에 지역, 일정, 모집 인원, 가격, 참가 상태를 연결해 사용자가 가능한 클래스를 선택하도록 구성했습니다. 결제 완료 시 참가자 수와 구매 수를 갱신해 운영 현황을 즉시 반영합니다.
멤버십 구독과 자동 갱신
등록된 결제카드로 멤버십을 생성하고 종료일, 자동 갱신, 결제 예정 알림을 관리합니다. 만료 전 스케줄러와 큐 작업으로 안내와 자동 결제를 분리해 운영 부담을 줄였습니다.
콘텐츠 통합 검색과 자동완성
공개된 강의와 체험의 제목·본문을 MongoDB 검색 인덱스에 저장하고 검색 API에서 실제 콘텐츠 데이터를 재조합합니다. 제목 가중치와 자동완성으로 탐색 시간을 줄였습니다.
알림, 공유, 딥링크 연동
FCM, Socket.IO, SMS 대체 발송을 함께 사용해 결제, 취소, 멤버십 안내를 전달합니다. 카카오 공유 콜백과 딥링크를 통해 유입 경로와 공유 집계를 콘텐츠 지표에 반영했습니다.
관리자
콘텐츠 노출과 추천 순서 관리
관리자는 강의, 체험, 크리에이터, 카테고리, 배너, 팝업, 공지를 등록하고 노출 여부와 추천 순서를 조정할 수 있습니다. 이미지 업로드와 관련 콘텐츠 연결까지 한 화면 흐름으로 구성했습니다.
일정, 주문, 환불 운영 관리
체험 클래스 일정별 모집 상태와 참가 주문을 관리하고 결제·취소·환불 금액을 데이터로 추적합니다. 일정 스케줄러와 참가자 수 갱신 구조로 운영 실수를 줄였습니다.
회원, 권한, 앱 설정 관리
일반 회원과 관리자 계정을 역할별로 분리하고 회원 메모, 실험 플래그, 멤버십 상태, 공지·FAQ·앱 버전 설정을 관리합니다. 권한 미들웨어와 콘솔 리소스 표시 조건을 함께 적용했습니다.
앱 화면





사용한 기술
- React Native
- React
- React Admin
- Vite
- TypeScript
- Node.js
- Express
- TypeORM
- PostgreSQL
- MongoDB Atlas Search
- Redis
- Bee-Queue
- Socket.IO
- Firebase Cloud Messaging
- AWS S3
- Serverless Framework
- PM2
- PortOne
- Vimeo API
화면
- React Native 0.81 기반 모바일 앱으로 홈, 검색, 강의, 체험, 결제, 멤버십, 마이페이지 화면을 네이티브 앱 흐름으로 구성
- React Navigation 딥링크 라우팅으로 홈, 검색, 마이페이지, 강의, 체험, 공지, 인사이트 상세 진입을 지원
- Zustand와 AsyncStorage, EncryptedStorage를 함께 사용해 로그인 상태, 온보딩, 최근 검색어, 토큰을 분리 저장
- Axios 인터셉터와 axios-auth-refresh로 만료된 액세스 토큰을 자동 갱신하고 앱 버전·OS 헤더를 모든 요청에 포함
- Gluestack UI, React Hook Form, Yup 기반으로 모바일 입력·검증·테마 컴포넌트 구조를 구성
- React Admin 기반 운영 콘솔에서 목록, 상세, 생성, 수정, 이미지 업로드, 권한별 관리자 리소스를 일관된 화면 패턴으로 제공
서버 · 데이터
- Express 라우터를 도메인별 컨트롤러와 서비스 계층으로 분리해 강의, 체험, 멤버십, 결제, 알림, 검색, 회원 기능을 관리
- JWT 액세스 토큰과 역할 기반 미들웨어로 일반 사용자, 게스트, 관리자, 마스터 관리자, 슈퍼 관리자 권한을 분기
- 휴대폰 인증번호, refresh token 교체 정보, ISP 결제 임시 데이터를 Redis TTL 구조로 저장해 만료 정책을 서버에서 통제
- TypeORM 엔티티 관계로 강의·체험의 조회, 재생, 좋아요, 공유, 북마크, 리뷰, 주문, 멤버십 이력을 분리 저장
- MongoDB Atlas Search 인덱스에 공개 콘텐츠 제목과 설명을 동기화해 검색 결과와 자동완성을 API에서 조합 반환
- Node Schedule과 Bee-Queue를 함께 사용해 멤버십 자동 결제, 체험 일정 상태 변경, 결제 콜백, 지연 알림을 비동기로 처리
- PortOne API로 빌링 카드 등록, 반복 결제, 체험 결제, 환불을 처리하고 주문·멤버십 상태와 사용자 혜택을 갱신
인프라
- Firebase Hosting에 Vite로 빌드한 관리자 콘솔을 배포하는 구조
- PM2 ecosystem 설정으로 Node.js API 서버를 프로덕션 실행, 자동 재시작, 메모리 제한 옵션과 함께 운영
- AWS S3 버킷을 이미지 업로드와 앱 파일 동기화 저장소로 분리하고, 서버에서 presigned PUT URL을 발급
- Serverless Framework 설정으로 S3 리소스와 CORS 정책을 코드 기반으로 관리
- Firebase Admin SDK와 모바일 Firebase 설정을 통해 FCM 푸시 토큰 기반 알림 발송 구조 구성
- Winston Daily Rotate File과 Morgan을 사용해 서버 로그를 운영 환경과 개발 환경에 맞게 수집
- Express rate limit으로 앱 요청에 분당 제한을 적용하고 관리자 요청은 운영 콘솔 특성에 맞게 예외 처리