낭 만 당

[파킨슨밸런스] 서울대병원 파킨슨병 환자를 위한 운동 추적 어플 개발 본문

Programming Record

[파킨슨밸런스] 서울대병원 파킨슨병 환자를 위한 운동 추적 어플 개발

낭만알파카 2025. 8. 9. 14:46

안녕하세요! 프론트엔드 개발자를 공부하고 있는 학생입니다. 

올해 초부터 저는 IDEA LAB 학부연구생 연구과제로  프로젝트를 진행했습니다.

바로 파킨슨병 환자분들을 위한 맞춤형 운동 관리 앱을 만드는 것이었습니다.

처음 이 아이디어를 접했을 때, '내가 과연 해낼 수 있을까?' 하는 막막함이 앞섰습니다.

하지만 운동 기능이 점차 저하되는 어려움 속에서도 재활 의지를 놓지 않는 환자분들께 작은 도움이라도 되고 싶다는 마음이 더 컸습니다.

 

오늘은 그 치열했던 고민의 시간과 개발 과정, 그리고 제가 직접 부딪히며 배우고 느낀 점들을 이야기해 보려고 합니다.

 

'파킨슨 밸런스'는 파킨슨병 환자들이 꾸준히 재활 운동을 수행하고, 의료진은 환자의 상태를 효율적으로 관리할 수 있도록 돕는 모바일 애플리케이션입니다. 환자와 의료진이라는 두 개의 명확한 사용자 역할을 설정하고, 각 역할에 맞는 맞춤형 인터페이스와 기능을 제공하는 것을 목표로 했습니다.

 


"어떻게 해야 꾸준히 운동하게 만들까?" 첫 번째 고민

가장 큰 숙제는 '동기부여' 였습니다. 병원 방문이 어렵거나 혼자 운동하는 것에 부담을 느끼는 환자분들이 많다는 사실을 알게 되었거든요. 단순히 운동 영상을 제공하는 앱은 이미 많아서 저희는 그 너머의 무언가가 필요하다고 생각했습니다.

 

그래서 저희 팀이 내린 결론은

'의사와의 1:1 연결' 이었습니다. 환자분이 앱으로 운동하면, 담당 의사가 그 현황을 실시간으로 확인하고 격려 메시지를 보내주는 거예요. "혼자가 아니다", "의사 선생님이 나를 지켜보고 응원한다"는 느낌을 주는 것만으로도 엄청난 정서적 지지와 꾸준한 운동 의지를 드릴 수 있을 거라고 믿었습니다.

 

React Native로 만든 우리 앱의 주요 기능들

저희는 스마트폰만 있으면 모든 기능을 사용할 수 있고, React 사용 경험을 활용하기 위해 React Native 프레임워크를 기반으로 앱을 개발했습니다. 환자용 앱과 의사용 앱, 두 가지로 나누어 각 사용자에게 꼭 필요한 기능들을 담았습니다.  (React는 사용해봤지만, React Native는 처음 배워보기 때문에 걱정이 많았습니다..)

 

이건 폴더구조입니다.

항상 프로젝트 처음 시작할 때마다 고민을 하는데

├──  .gitattributes
├── __tests__
│   └── App.test.tsx
├── .env
├── .env.production
├── .gitattributes
├── .github
│   └── workflows
├── .gitignore
├── .gitmessage.txt
├── .prettierrc
├── .vscode
│   ├── .react
│   └── settings.json
├── android
│   ├── .gradle
│   ├── .kotlin
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── java_pid22063.hprof
│   ├── java_pid37977.hprof
│   ├── release.keystore
│   └── settings.gradle
├── app.json
├── App.tsx
├── babel.config.js
├── firebase.json
├── Gemfile
├── Gemfile.lock
├── index.js
├── ios
│   ├── .xcode.env
│   ├── .xcode.env.local
│   ├── [프로젝트명]
│   ├── MyApp
│   ├── MyApp.xcodeproj
│   ├── MyApp.xcworkspace
│   ├── MyAppTests
│   ├── Podfile
│   └── Podfile.lock
├── jest.config.js
├── metro.config.js
├── package-lock.json
├── package.json
├── README.md
├── src
│   ├── apis
│   ├── assets
│   ├── components
│   ├── config
│   ├── constants
│   ├── navigation
│   ├── screens
│   ├── types
│   └── utils
├── tsconfig.json
├── vendor
│   └── bundle
└── yarn.lock
  •  환자용 기능👨‍⚕️

1. 간편 로그인/회원가입: 휴대폰 번호를 기반으로 한 간편한 계정 시스템을 구현했습니다.

2. 맞춤형 운동 수행: 의료진이 처방한 운동 목록을 확인하고, 영상과 타이머를 통해 운동을 수행합니다. 운동 종류는 신장, 근력, 균형/협응, 구강/발성, 유산소 등 다양하게 제공됩니다.

3. 운동 자동화 및 알림: 한 세트가 끝나면 다음 운동으로 자동 전환되어 흐름이 끊기지 않도록 했으며, 지정된 시간에 알림을 보내 꾸준한 운동 습관을 유도합니다.

 

  • 의료진용 기능🩺

 

    •  

1. 환자 관리 대시보드: 전체 환자의 운동 기록을 테이블 형태로 한눈에 파악하고, 최근 접속일 순으로 정렬할 수 있습니다.

2. 개별 환자 데이터 조회: 특정 환자의 운동 기록을 일/주/월 단위의 그래프로 시각화하여 운동 추이를 직관적으로 확인할 수 있습니다.

3. 운동 처방 및 관리: 환자별로 운동 세트 수를 조절하거나 세부 운동 목록을 추가/삭제하여 개인에게 최적화된 맞춤형 처방을 내릴 수 있습니다.

4. 운동 독려 알림: 개별 혹은 단체로 환자들에게 운동을 독려하는 푸시 알림을 발송하는 기능을 구현했습니다.

 

 


"어르신들이 과연 쓸 수 있을까?" 어려웠던 점...

개발 과정에서 가장 어려웠던 점은 바로 '사용성' 이었습니다. 파킨슨병 환자분들 대부분이 스마트폰 조작에 익숙하지 않은 고령층이라는 현실적인 제약이 있었습니다. 화려한 기능보다 직관적이고 단순한 UI를 만드는 것이 몇 배는 더 중요하고 어려웠습니다.

 

단순히 '쉽게 만들자'에서 그치지 않고, 저희는 실제 데이터를 기반으로 앱을 개선하고 싶었어요.

그래서 Firebase Analytics와 Microsoft Clarity 같은 데이터 분석 도구를 도입했습니다. 사용자가 어떤 버튼을 누르고, 어떤 화면에서 머무는지, 어디서 이탈하는지를 데이터로 직접 확인하며 UI 요소 간 간격을 조정하고, 콘텐츠 재생 방식을 바꾸는 등 여러 번의 수정을 거쳤습니다. 이 과정을 통해 사용자 경험(UX)을 고려한 설계가 얼마나 중요한지 온몸으로 깨달을 수 있었습니다.

 
 

초기 기획과 구현의 간극

처음에는 기획 문서를 기반으로 UI를 만들고 개발에 착수했지만, 실제 개발 과정에서 기획 단계에서 놓쳤던 기능들이 발견되거나, 문서와 다르게 구현되는 부분들이 발생했습니다. 예를 들어, 상태 관리 로직이나 컴포넌트 재사용성에 대한 구체적인 계획 없이 진행하다 보니 코드 수정에 많은 시간을 쏟게 되었습니다. 만약 개발 착수 전에 컴포넌트 구조, 데이터 흐름, 상태 관리 라이브러리(e.g., Redux, Recoil) 도입 등을 더 구체적으로 설계했다면 시행착오를 크게 줄일 수 있었을 것이라는 아쉬움이 남습니다.

 

React Native 첫 도입과 환경 적응

이번 프로젝트를 통해 React Native를 처음 사용해보았습니다. 웹 개발, 특히 React에 익숙했지만, 네이티브 개발 환경은 또 다른 세계였습니다. 프로젝트 초기 환경 설정부터 네이티브 모듈 연동, 각 OS(iOS, Android) 환경에 맞는 빌드 설정 등 웹 개발에서는 겪어보지 못한 문제들에 부딪혔습니다.

 

까다로웠던 토큰 기반 인증 관리

웹에서는 비교적 익숙했던 JWT(JSON Web Token) 기반의 인증 및 토큰 관리 로직이 React Native 환경에서는 예상보다 까다롭게 느껴졌습니다. 토큰을 안전하게 저장하기 위해

 

AsyncStorage를 사용하고, 요청을 보낼 때마다 헤더에 토큰을 첨부하는 Interceptor를 구현하는 과정, 그리고 토큰 만료 시 재발급(Refresh) 로직을 매끄럽게 처리하는 부분이 웹 환경과 미묘하게 달라 많은 디버깅 시간을 필요로 했습니다.

 


이번 프로젝트는 여기서 끝이 아니라 더 큰 발전 가능성을 가지고 있습니다.

  • AI 기반 운동 자세 분석: 스마트폰 카메라와 머신러닝 모델(e.g., PoseNet)을 활용해 사용자의 운동 자세를 실시간으로 분석하고 피드백을 제공하는 기능을 추가할 계획입니다.
  • 운동 추천 시스템: 축적된 환자의 운동 데이터를 분석하여 개인의 상태에 맞는 운동을 자동으로 추천하는 시스템을 도입하고자 합니다.
  • 플랫폼 확장 및 소통 강화: 현재의 모바일 앱을 넘어 태블릿, 스마트 TV 등 다양한 디바이스를 지원하고, 의료진과 환자가 앱 내에서 직접 소통하며 피드백을 주고받는 커뮤니케이션 기능을 강화할 것입니다.

프로젝트를 마치며: 단순한 앱이 아닌 '디지털 동반자'를 꿈꾸며

'파킨슨 밸런스' 프로젝트는 단순히 하나의 앱을 완성한 것을 넘어, React Native라는 새로운 기술 스택에 대한 깊은 이해와 실제 사용자의 문제를 기술로 해결하는 값진 경험을 안겨주었습니다. 특히 기획의 구체성과 웹-앱 환경의 차이를 몸소 느끼며 한 단계 성장할 수 있었습니다. 

저희 앱을 통해 환자분들이 느끼는 외로움이 조금이나마 줄어들고, 운동 목표를 달성하며 얻는 성취감이 우울감을 이겨내는 작은 힘이 되기를 바랍니다. 앞으로는 개인화된 격려 메시지나 보상 시스템 같은 요소를 더해, 환자분들이 더 즐겁게 재활에 참여할 수 있도록 앱을 발전시켜 나갈 계획입니다.

 

이 경험을 발판 삼아 앞으로 더욱 사용하기 쉽고 가치 있는 서비스를 만드는 프론트엔드 개발자가 되도록 노력하겠습니다. 

파이팅!!