로디언즈 - 의료사고 대응 서비스

프로젝트 개요

로디언즈는 성형수술 부작용 발생 시 사고대응 서비스를 목표로 진행되었습니다. 사용자들에게 제휴 병원의 상세 정보를 제공하고, 전문 변호사와의 1:1 매칭 서비스 및 안심후기를 공유할 수 있는 커뮤니티를 제공하는 플랫폼입니다.

3년 4개월간 메인 프로젝트로 운영하며 웹, 앱, 백엔드, 백오피스까지 풀스택으로 개발하고 운영한 경험을 쌓았습니다.

문제: ejs 기반 1,000줄 이상의 백엔드-프론트엔드 결합 코드로 인한 유지보수성 저하. 한 파일에서 서버 로직과 UI 로직이 혼재되어 있어 작은 수정에도 전체 코드를 파악해야 하는 상황이었습니다.

해결: 3개월간의 리팩토링을 통해 백엔드(Express + TypeORM)와 프론트엔드(React) 완전 분리, 컴포넌트 기반 구조로 재설계했습니다. 각 기능을 독립적인 컴포넌트로 분리하고, RESTful API를 통해 백엔드와 통신하는 구조로 전환했습니다.

성과: 필요한 부분만 수정 가능한 구조로 개선되어 신규 기능 개발 및 버그 수정 시간이 대폭 단축되었습니다.

배경: 기존 웹뷰 기반 앱에서는 푸시 알림, 카메라 접근 등 네이티브 기능 구현에 제약이 있었습니다.

구현: React Native를 활용하여 iOS와 Android 네이티브 앱을 개발했습니다. 푸시 알림 시스템을 구축하여 실시간 알림 기능을 제공하고, 네이티브 카메라 API를 연동하여 사진 업로드 경험을 개선했습니다.

배포 프로세스: App Store와 Google Play 스토어 심사 및 배포 전 과정을 직접 경험하며 모바일 앱 배포 프로세스를 학습했습니다.

문제: 앱 스토어 심사 대기 시간(1-2주)으로 인해 긴급 버그 수정이나 빠른 기능 개선이 어려웠습니다.

해결: Microsoft CodePush를 도입하여 JavaScript 번들을 직접 업데이트할 수 있는 시스템을 구축했습니다. 앱 스토어 심사 없이도 즉시 업데이트를 배포할 수 있게 되었습니다.

성과: 배포 주기가 1-2주에서 즉시 배포 가능으로 개선되어, 사용자 피드백에 빠르게 대응할 수 있게 되었습니다.

백엔드 개발: Express와 TypeORM을 사용하여 RESTful API를 설계하고 구현했습니다. 권한 시스템을 설계하여 사용자 역할별 접근 제어를 구현했으며, Swagger를 활용하여 API 문서를 작성하고 지속적으로 업데이트했습니다.

백오피스 개발: Ant Design 라이브러리를 활용하여 반응형 관리자 페이지를 구축했습니다. 권한별 UI 분리를 통해 관리자와 일반 사용자의 인터페이스를 구분했습니다.

결제 시스템: 아임포트 결제 API와 본인인증 API를 연동하여 웹과 앱에서 안전한 결제 및 본인 인증 기능을 구현했습니다.

코드 품질 관리: ESLint와 Prettier를 도입하여 팀 전체의 코드 스타일을 통일하고 일관성을 유지했습니다.

사용자 행동 분석: Google Analytics 이벤트 추적을 구현하여 특정 사용자 동작을 추적하고 분석했습니다. 이를 통해 사용자 행동 패턴을 파악하고 개선 사항을 도출했습니다.

개발 도구: Storybook을 시도하여 컴포넌트 단위 개발 및 테스트 환경을 구축하고자 했으며, CMS 템플릿을 활용하여 콘텐츠 관리 효율을 높이려 노력했습니다.