Flutter 의료 촬영 앱 UI 데모

레거시처럼 보이는 의료 촬영 UI를 분석하고, Flutter 기반의 신규 디자인으로 교체하는 과정을 보여주는 포트폴리오 데모입니다.

이 저장소는 단순히 예쁜 화면을 만든 프로젝트가 아니라, 다음 질문에 GitHub 링크 하나로 답하기 위해 만들었습니다.

"레거시 소스 구조를 분석해서 신규 디자인으로 전면 교체한 경험이 있나요?"

핵심 증거는 lib/legacy/에 보존된 더미 레거시 위젯 트리, AppShellFactory를 통한 교체 구조, 5개 Flutter 화면, 반응형 테스트, 그리고 docs/의 검증 문서와 스크린샷입니다.

주요 기능

• 스플래시, 메인 대시보드, 촬영, 진단 결과, 설정까지 5개 화면 구현
• 더미 레거시 위젯 트리를 보존하고 신규 UI shell로 교체하는 구조 시연
• 스마트폰/태블릿 이중 해상도 대응
• LayoutBuilder, MediaQuery.sizeOf, 공통 breakpoint helper 사용
• Mock AI 진단 결과 화면
• fl_chart 기반 퍼센트 차트와 진단 결과 카드
• README, 검증 문서, 스크린샷을 포함한 포트폴리오 제출용 패키징

기술 스택

영역	사용 기술
App	Flutter 3.41, Dart
Design	Figma 설계 노트
Chart	fl_chart
Verification	flutter analyze, flutter test, flutter build web --debug

화면 구성

화면	설명
Splash	브랜드 진입 화면
Dashboard / Main	촬영 진입점과 최근 mock 상태를 보여주는 메인 화면
Capture	mock 카메라 프리뷰, 촬영 가이드, 촬영 컨트롤
Diagnosis Result	mock AI confidence 퍼센트 차트와 결과 카드
Settings	의료 촬영 workflow에 맞춘 mock 설정 화면

레거시 교체 구조

이 프로젝트는 레거시 교체 패턴을 코드에서 직접 확인할 수 있도록 구성되어 있습니다.

증거	파일
보존된 더미 레거시 위젯 트리	lib/legacy/legacy_medical_shell.dart
기본 실행되는 신규 UI shell	lib/app/shell/replacement_medical_shell.dart
레거시/신규 shell 공통 진입 계약	lib/app/shell/app_shell_factory.dart
신규 5개 화면 구현	lib/features/

현재 앱은 신규 replacement shell을 기본으로 실행합니다. 레거시 shell은 비교와 검토를 위해 코드로 보존되어 있으며, 런타임 토글 기능은 v1 범위에서 제외했습니다.

반응형 검증

스마트폰과 태블릿 대응은 코드와 테스트 양쪽에서 확인할 수 있습니다.

• 기준 phone viewport: 390 x 844
• 기준 tablet viewport: 834 x 1194
• tablet breakpoint: 700 logical pixels
• 반응형 helper: lib/shared/layout/medical_breakpoints.dart
• 반응형 테스트: test/responsive_layout_test.dart

자세한 검증 기록은 docs/verification.md에 정리되어 있습니다.

스크린샷

Flutter web debug build에서 캡처한 결과입니다.

화면	Phone	Tablet
Dashboard	docs/screenshots/phone-dashboard.png	docs/screenshots/tablet-dashboard.png
Diagnosis Result	docs/screenshots/phone-diagnosis.png	docs/screenshots/tablet-diagnosis.png

실행 방법

Windows PowerShell 기준입니다.

$env:Path = "$env:USERPROFILE\develop\flutter\bin;$env:Path"
flutter pub get
flutter run -d chrome

정적 web build로 확인하려면:

$env:Path = "$env:USERPROFILE\develop\flutter\bin;$env:Path"
flutter build web --debug
python -m http.server 8125 --directory build\web

브라우저에서 열기:

http://127.0.0.1:8125
http://127.0.0.1:8125/#/diagnosis

검증 방법

$env:Path = "$env:USERPROFILE\develop\flutter\bin;$env:Path"
flutter analyze
flutter test
flutter build web --debug

마지막 로컬 검증 결과:

• Flutter 3.41.9 stable
• Dart 3.11.5
• flutter analyze: No issues found
• flutter test: 13개 widget test 통과
• flutter build web --debug: 통과

프로젝트 구조

lib/
  app/       앱 진입점, 라우팅, shell factory, theme
  features/  splash, dashboard, capture, diagnosis result, settings 화면
  legacy/    보존된 더미 레거시 위젯 트리
  shared/    디자인 토큰, 반응형 helper, mock 데이터, 공통 위젯
test/
  app_smoke_test.dart
  responsive_layout_test.dart
docs/
  verification.md
  screenshots/

검토 포인트

• lib/legacy/legacy_medical_shell.dart
• lib/app/shell/replacement_medical_shell.dart
• lib/app/shell/app_shell_factory.dart
• lib/features/diagnosis_result/
• lib/shared/mock/diagnosis_mock_data.dart
• lib/shared/layout/medical_breakpoints.dart
• test/responsive_layout_test.dart
• docs/verification.md
• docs/screenshots/

의료/AI 안전 범위

이 프로젝트는 UI 포트폴리오 데모입니다.

AI 진단 결과는 mock/demo 데이터이며 의료 조언이 아닙니다. 실제 카메라 접근, 이미지 업로드, 사용자 인증, 환자 데이터 저장, 실제 진단, 치료 권고, 의료기기 인증 범위는 포함하지 않습니다.