소개
스마트러닝 서비스 Welaaa의 리뉴얼 프로젝트입니다. 앱 전용이었던 서비스를 웹으로 확장하면서 서비스 전 영역을 혁신, 사용자 경험을 크게 향상시켰습니다. 최적화된 단일 API를 웹과 앱에 동시 적용함으로써 향상된 사용자 경험을 일관적으로 제공하는 크로스플랫폼 반응형 서비스를 구축했습니다.
모바일 앱 - 기존의 구식 PHP 기반 하이브리드 앱을 React Native로 전환했습니다. 로딩 및 UI 반응 속도를 크게 개선해 사용자 입력에 기민하게 반응하며, 기존 앱의 네이티브 플레이어를 활용해 생산성을 높였습니다. 이로 인해 경쟁 서비스 대비 뛰어난 퍼포먼스를 낼 수 있었고 리뉴얼을 기점으로 사용자층이 비약적으로 증가했습니다.
웹 서비스 - React 기반 Next.js를 채택, 모바일 서비스의 API를 웹에 적용해 모바일과 데스크탑을 모두 지원하는 반응형 서비스를 구축했습니다. 서버사이드 렌더링과 검색 최적화를 완벽하게 지원하고, 모바일 앱과 동일한 속도와 사용자 경험을 보장합니다. 앱과 웹에서 동일한 컨텐츠를 제공, 사용자에게 장소와 무관하게 기기를 넘나들며 끊임 없이 연결되는 서비스 경험을 제공하여 좋은 소비자 반응을 이끌어냈습니다.
서버 - Amazon Web Service를 기반으로 리뉴얼 이전 PHP 서버와 신규 구축 파이썬 서버를 마이크로 서비스 아키텍쳐 형태로 구성했습니다. 파일 기반 리소스 관리를 최소화하고 Elastic Beanstalk를 활용한 무정지 배포를 구현, 안정적인 고성능 서버 환경을 구축했습니다.
요약
- 크로스플랫폼 스마트러닝 서비스
- 업계 최고 수준의 디바이스 다양성 및
서비스 속도 제공
- Next.js (Based on React) + React Native
- Amazon Web Services
- 모바일과 테스크탑에서 동일한 사용자 경험 제공
- 백엔드-프론트엔드 최적화로 서비스 속도 향상
- 앱 사용성 향상이 실적으로 연결됨을 증명
프로젝트 목표
- 앱 전용 서비스를 웹으로 확장
- 기존 서비스는 모바일용 앱으로만 서비스
- 동일 서비스를 웹에서도 제공
- 모바일 네이티브 앱과 데스크탑용 웹 앱을 동시 개발
- 서비스 속도 및 UX 최적화
- 구식 PHP 기반 하이브리드 앱을 모바일 네이티브로 전환
- 웹사이트와 모바일 앱 모두에서 최고 수준의 경험을 보장
- 서버 과부하 문제 해결
- 이용자 증가에 따른 접속 지연 및 사용자 경험 저하 발생
- 접속 속도 증가 및 사용자 경험 향상을 목표로 함
적용 기술과 목적
- React 기반 Next.js : 크로스 플랫폼 반응형 서비스
- 모바일 서비스의 API를 웹에 적용
- 서버사이드 렌더링 완벽 지원 및 검색 최적화
- 반응형 웹사이트 구축으로 모바일 사용성 향상
- React Native : 앱 로딩 & UI 속도 개선
- iOS 및 안드로이드 네이티브 대응
- 로딩 속도 및 UI 개선
- Elastic Beanstalk : 클라우드 환경 대응
- 파일 기반 리소스 관리 최소화
- 무정지 배포 구현
달성 과제와 효과
- 모바일과 데스크탑에서 동일한 사용자 경험
- 모바일과 데스크탑에서 모든 기능을 동일하게 지원
- UX 최적화를 통해 모바일 - 데스크탑 연동성 강화
- 서비스 편의성 및 성능 향상
- 모바일 앱 로딩 속도 및 입력 반응 속도 향상
- 기존 앱 네이티브 플레이어 연동으로 생산성 향상
- 푸시 알림 대응 및 앱 내 결제 지원
- 리소스 관리 최소화와 무정지 배포를 통해 분산 접속 및 서버 최적화 구현
- 클라우드 환경 대응
- 접속 속도 향상 및 서버 안정화 달성