2026 이화여자대학교 컴퓨터공학전공 캡스톤디자인과창업프로젝트 Team Sudo — AI 헬스케어 플랫폼 On-Care 개발 회고 기술블로그
이 저장소는 On-Care 캡스톤디자인 프로젝트의 한 학기 개발 과정을 정리한 기술블로그를 배포하기 위한 저장소입니다.
On-Care는 불규칙한 생활을 하는 2030세대, 특히 고혈압·당뇨 위험군 사용자가 식단, 운동, 건강 지표, 일정, 오프라인 건강 관리를 하나의 흐름 안에서 관리할 수 있도록 기획한 AI 헬스케어 플랫폼입니다.
본 기술블로그는 단순한 결과물 소개가 아니라, 실제 캡스톤 프로젝트를 진행하며 겪은 문제 정의, 기술 스택 전환, 로컬 백엔드 설계 과정을 중심으로 작성되었습니다.
이 글은 다음 세 가지 흐름을 중심으로 On-Care의 개발 과정을 정리합니다.
-
사용자 인터뷰를 통한 문제 정의
- 2030세대 만성질환 위험군 사용자가 건강관리를 지속하기 어려운 이유를 인터뷰로 확인
- 식단 기록의 번거로움, 개인화 부족, 앱 간 기능 파편화 문제 도출
- 인터뷰 결과를 기능 우선순위로 연결
-
React 프로토타입에서 Flutter MVP로의 전환
- 초기 React 기반 프로토타입을 통해 서비스 흐름 검증
- 모바일 중심 사용자 경험을 위해 Flutter 구조로 재구성
- 홈, 식단, 운동, 건강 지표, 일정, AI 코치 화면을 하나의 앱 흐름으로 통합
-
백엔드 완성 전 실제 서비스처럼 동작하는 로컬 백엔드 설계
drift기반 로컬 데이터베이스 설계LocalApiInterceptor를 활용한 API 요청 가로채기 구조 구현USE_MOCK_API플래그를 통해 mock API와 실서버 API 전환 가능성을 열어 둔 구조 설계- 백엔드 개발 전에도 앱이 실제 서비스처럼 동작하도록 만든 과정 정리
이 기술블로그에서 가장 깊게 다루는 부분은 로컬 백엔드 설계입니다.
On-Care는 캡스톤 START 단계에서 백엔드와 AI 엔진이 완전히 연동되기 전에도, 사용자가 앱을 직접 사용해보는 것처럼 보이는 MVP가 필요했습니다.
이를 위해 프론트엔드 내부에 다음 구조를 설계했습니다.
| 구분 | 내용 |
|---|---|
| Local DB | drift를 활용한 로컬 데이터 저장 구조 |
| Mock API | 실제 API 요청처럼 동작하는 로컬 응답 구조 |
| Interceptor | LocalApiInterceptor로 요청을 가로채 mock response 반환 |
| 전환 설계 | USE_MOCK_API 플래그를 통해 실서버 전환 경로 확보 |
| 목적 | 백엔드 완성 전에도 실제 서비스 흐름과 유사한 MVP 구현 |
본 기술블로그는 아래 캡스톤디자인 프로젝트와 직접 연결됩니다.
| 항목 | 내용 |
|---|---|
| 프로젝트명 | On-Care |
| 팀명 | Team Sudo |
| 과정 | 2026 이화여자대학교 컴퓨터공학전공 캡스톤디자인과창업프로젝트 |
| 주제 | 불규칙한 생활 속 2030을 위한 고혈압·당뇨 위험군 대상 AI 헬스케어 플랫폼 |
| 주요 기술 | Flutter, Dart, Riverpod, drift, LocalApiInterceptor, FastAPI 설계, Vision AI 설계, RAG 설계 |
| 기술블로그 작성 목적 | 캡스톤 프로젝트의 실제 개발 과정과 기술적 의사결정 회고 |
| 구분 | 링크 |
|---|---|
| 기술블로그 배포 페이지 | https://tech-blog-hazel-ten.vercel.app |
| On-Care 메인 GitHub 저장소 | 원본 On-Care GitHub 링크 추가 |
| On-Care 웹 데모 | 웹 데모 링크 추가 |
| On-Care 데모 영상 | YouTube 데모 영상 링크 추가 |
.
├── index.html # 기술블로그 본문 페이지
└── README.md # 저장소 및 기술블로그 소개 문서
이 저장소는 index.html 기반의 정적 페이지로 구성되어 있으며, Vercel을 통해 배포합니다.
배포 후에는 아래 링크에서 기술블로그를 확인할 수 있습니다.
Vercel 배포 URL 추가
별도의 빌드 과정 없이 브라우저에서 index.html 파일을 열어 확인할 수 있습니다.
open index.html또는 간단한 로컬 서버를 실행할 수 있습니다.
python3 -m http.server 3000실행 후 브라우저에서 아래 주소로 접속합니다.
http://localhost:3000
이 글은 On-Care의 최종 결과물만 소개하는 글이 아니라, 캡스톤 프로젝트 과정에서 실제로 마주한 개발 문제와 해결 방식을 정리한 기술 회고입니다.
특히 백엔드가 아직 완성되지 않은 상황에서도 사용 가능한 MVP를 만들기 위해, 프론트엔드 내부에서 mock API, 로컬 DB, API interceptor 구조를 설계한 과정은 캡스톤 프로젝트의 실제 개발 단계와 직접적으로 연결됩니다.
따라서 본 저장소는 다음 목적을 가집니다.
- 캡스톤 프로젝트 산출물과 기술블로그 연결
- On-Care 개발 과정 기록
- 로컬 백엔드 설계 경험 정리
- 향후 실서버 전환을 고려한 MVP 설계 사례 공유
본 글은 2026 이화여자대학교 컴퓨터공학전공 캡스톤디자인과창업프로젝트에서 Team Sudo가 진행한 On-Care 프로젝트의 팀원으로서 작성한 기술 회고입니다.
이 저장소의 글과 코드는 캡스톤 프로젝트 기술 회고 및 포트폴리오 목적으로 공개됩니다.