요정 앱 와이어프레임

v0.3 — UI 개선 + 블루투스

v0.2 → v0.3 주요 변경: 회원가입 개선, 홈 화면 UI 수정, 카메라 블루투스 연결
가구(Household) 단위 안부 모델, 카메라는 센서(감지 출처) 역할로 분리

🗺

전체 페이지 구조

앱 화면 흐름 및 네비게이션
Onboarding
✨ 스플래시 🔑 로그인 📝 가입 1~2단계 📱 카메라 연결
Main Tabs (Bottom Navigation)
🏠 홈 대시보드 · 카메라 뷰 🔔 알림 알림 목록 · 상세 📊 안부 리포트 일간 · 주간 · 월간 ⚙️ 설정 카메라 관리 · 가족 · 계정
Sub Screens
26
전체 화면 수
4
메인 탭
10
온보딩 화면
8
섹션 수

스플래시

1 · 스플래시
🧚
요정
우리 부모님의 안심 홈 케어
🔑

인증 (로그인 · 회원가입)

2a · 로그인
🧚
다시 오셨군요!
로그인하고 부모님 상태를 확인하세요
이메일
example@email.com
비밀번호
••••••••
비밀번호 찾기
또는
G Google로 계속하기
🍎 Apple로 계속하기
계정이 없으신가요? 회원가입
2b · 가입 1단계 — 내 정보
← 뒤로
회원가입
가족의 안심을 위한 첫 걸음
1/3 내 정보
이름
홍길동
이메일
example@email.com
비밀번호
8자 이상 영문, 숫자 조합
비밀번호 확인
비밀번호를 다시 입력해주세요
휴대폰 번호
010-0000-0000
인증 요청
인증번호
6자리 입력
03:00
[필수] 이용약관 동의
[필수] 개인정보 처리방침 동의
[선택] 마케팅 수신 동의
2c · 가입 2단계 — 부모님 정보
← 뒤로
부모님 정보
돌봄 대상 어르신의 정보를 입력해주세요
2/3 부모님 정보
부모님 성함
김순자
관계
어머니
아버지
기타
생년월일
1945년 3월 15일📅
거주 형태
독거
부부
기타
특이사항 (선택)
관절이 안 좋으셔서 낙상 위험이 있어요
v0.2: 완료 시 Household 엔티티 자동 생성 + User.householdId 연결
2d · 가입 완료
🎉
가입 완료!
영희님, 환영합니다.
이제 요정 홈캠을 등록하고
어머니의 안전을 확인해보세요.
등록 정보 요약
보호자홍영희
돌봄 대상김순자 (어머니)
거주 형태독거
📱

온보딩 — 카메라 연결

블루투스 4단계: BT 검색 → Wi-Fi → 연결 확인 → 설정. 설정 > 카메라 추가도 동일 플로우
3a · 블루투스 검색 (1/4)
기기 전원 ON 후 앱에서 블루투스로 탐색. 일반 홈캠/IoT 방식
← 뒤로
카메라 추가
주변 기기를 검색합니다
1/4 블루투스 검색
📘 연결 안내
① 카메라를 콘센트에 연결하고 전원을 켜주세요
② 표시등이 깜빡이면 페어링 준비 완료
③ 아래 목록에서 기기를 선택하세요
검색된 기기
검색 중...
📷
YojeongCam-A1B2
신호 강도: 강함
📷
YojeongCam-C3D4
신호 강도: 보통
기기가 보이지 않나요? 도움말
3b · Wi-Fi 연결 (2/4)
블루투스 연결 후 Wi-Fi 정보 입력
← 뒤로
카메라 추가
Wi-Fi 정보를 입력해주세요
2/4 Wi-Fi 연결
YojeongCam-A1B2 연결됨
블루투스 페어링 성공
Wi-Fi 이름 (SSID)
집 Wi-Fi
Wi-Fi 비밀번호
••••••••
3c · 연결 확인 — 성공 (3/4)
Wi-Fi 연결 성공 시 표시. 기기/네트워크/신호 정보 확인
← 뒤로
카메라 추가
Wi-Fi 연결을 확인하고 있습니다
3/4 연결 확인
Wi-Fi 연결 성공
YojeongCam-A1B2가 네트워크에 연결되었습니다
기기 YojeongCam-A1B2
Wi-Fi 집 Wi-Fi
신호 ● 양호
3d · 연결 실패 (3/4)
연결 실패 시 표시. Wi-Fi 재입력 또는 블루투스부터 재시도
← 뒤로
카메라 추가
연결에 실패했습니다
3/4 연결 확인
Wi-Fi 연결 실패
네트워크에 연결할 수 없습니다
Wi-Fi 정보를 확인해주세요
확인해주세요
• Wi-Fi 비밀번호가 맞는지 확인
• 카메라와 공유기 거리 확인
• 2.4GHz 네트워크인지 확인
처음부터 다시 시작
3e · 카메라 설정 (4/4)
이름/위치 설정 후 등록 완료
← 뒤로
카메라 추가
카메라 이름과 위치를 설정해주세요
4/4 카메라 설정
카메라 이름
거실 카메라
설치 위치
거실
침실
주방
현관
기타
🏠

홈 화면

캐러셀 뷰 ↔ 그리드 뷰 토글
4b · 홈 — 그리드 뷰
3대 이상일 때 유용. 한눈에 모든 카메라 상태 파악
안녕하세요, 영희님
10분 전
스냅샷
🏠 거실
● 온라인 · 10분 전
2h 전
스냅샷
🛏 침실
● 온라인 · 2h 전
5분 전
스냅샷
🚪 현관
● 온라인
+
카메라 추가
최근 알림
전체보기 →
⚠️
낙상 감지
오늘 02:15 거실
⚠️
장시간 무반응 (2시간)
어제 14:30 거실
4c · 홈 — 카메라 없음
카메라 미등록 시 빈 상태. EmptyStateWidget 공통 패턴 적용
안녕하세요, 영희님
카메라를 등록하고 부모님 안전을 확인하세요
📷
등록된 카메라가 없습니다
요정 홈캠을 등록하면
부모님의 안전을 실시간으로 확인할 수 있어요
최근 알림
🔔
카메라를 등록하면 알림을 받을 수 있어요
4d · 홈 — 프라이빗 모드
프라이빗 모드 활성 시 홈 화면. 스냅샷 대신 차단 표시, 알림 없음
안녕하세요, 영희님
🛡️
프라이빗 모드 활성중
영상 송출 및 AI 모니터링 중지됨
해제
🏠 거실 카메라 ● 중지됨
🛡️
영상 송출 중지
최근 알림
전체보기 →
⚠️
낙상 감지
오늘 02:15 거실
⚠️
장시간 무반응 (2시간)
어제 14:30 거실
📹

스트리밍

멀티카메라 그리드 → 풀스크린 라이브뷰
5a · 라이브뷰 — 멀티카메라 그리드
영상 보기 진입 시 모든 카메라를 그리드로 표시. 탭하면 해당 카메라 풀스크린 진입. 카메라 1대면 바로 풀스크린
카메라
3대 온라인
🔒 프라이빗
LIVE
실시간 영상
🏠 거실
● 온라인 기본
LIVE
실시간 영상
🛏 침실
● 온라인
LIVE
실시간 영상
🚪 현관
● 온라인
카메라를 탭하면 풀스크린으로 전환
5b · 라이브뷰 — 풀스크린
그리드에서 카메라 탭 시 풀스크린 진입. 뒤로가기로 그리드 복귀. 하단 컨트롤로 조작
실시간 영상 (풀스크린)
LIVE
⊞ 그리드
🏠 거실 카메라
HD 720p · ~200ms ● 연결됨
프라이빗 모드
탭하여 영상 일시 가리기
5d · 라이브뷰 — 프라이빗 모드
영상 송출 중지 + AI 모니터링 일시 중지. 탭하면 해제
LIVE
⊞ 그리드
🏠 거실 카메라
🛡️
프라이빗 모드
영상 송출이 중지되었습니다
⚠ AI 모니터링도 일시 중지됨
HD 720p ● 송출 중지
영상 다시 보기
탭하여 프라이빗 모드 해제
5c · 라이브뷰 — 가로모드
기기를 가로로 회전하면 자동 전환. 영상 영역 최대화
실시간 영상 (가로 풀스크린)
LIVE
⊞ 그리드
🏠 거실 카메라
HD 720p · ~200ms ● 연결됨
🔔

알림

카메라별 감지 알림 목록 및 상세
6a · 알림 — 카메라 필터
기존 심각도 필터 옆에 카메라 필터 추가. 각 알림에 카메라 태그 표시
알림
전체 긴급 주의 정보
모든 카메라 🏠 거실 🛏 침실 🚪 현관
⚠️
낙상 감지
오늘 02:15 거실
⚠️
장시간 무반응 (2시간)
어제 14:30 거실
📊
일일 리포트 도착
어제 08:00 전체
6b · 알림 상세
v0.1 대비 변경: 카메라 출처 태그 추가, border-left 제거 → 그림자 기반 카드
← 뒤로
낙상 감지
REC 02:15:23
이벤트 영상 클립 (전후 30초)
2026.03.09 02:15:23
낙상 사고 감지됨
📍 거실 카메라
2026.03.09 02:15:40
보호자에게 알림 발송
이럴 때는 이렇게 하세요
1. 실시간 영상으로 현재 상태를 확인하세요
2. 부모님께 전화해 상태를 확인하세요
3. 연락이 안 되면 가까운 가족이나 이웃에게 방문을 요청하세요
4. 응급 상황이면 119에 신고하세요
잘못된 알림 신고
📊

리포트

디자인 작업 진행중 가구 단위 종합 안부 리포트
7 · 안부 리포트
가구(Household) 단위 종합 리포트. 모든 카메라 데이터를 통합 분석. 타임라인 이벤트에 감지 카메라 출처 표시
안부 리포트
어머니의 하루
일간 주간 월간
📅 3월 8일 (토)
07:20
기상
22:40
취침
활동 시간 5.2h / 8h
재실 타임라인
00시06시12시18시24시
07:20 기상 침실
09:15 이동 거실
14:00 외출 현관
16:30 귀가 현관
AI 요약
평소보다 기상이 30분 늦었지만, 활동량은 정상 범위입니다. 오후 외출 후 귀가. (거실·침실·현관 카메라 종합)
⚙️

설정

카메라 관리, 가족, 카메라 추가 (→ 온보딩 플로우와 동일)
8a · 설정 — 카메라 목록
카메라별 상태, 기본 카메라 표시, 순서 변경 핸들
설정
카메라 관리
🏠
거실 카메라 기본
● 온라인 · FW v2.1.3
🛏
침실 카메라
● 온라인 · FW v2.1.3
🚪
현관 카메라
● 온라인 · FW v2.0.8
+ 카메라 추가
일반
👨‍👩‍👧 가족 관리 3명 ›
🔔 알림 설정
👤 내 계정
요정 v0.3.0 · Build 15
8b · 가족 관리
v0.1: 카메라 기반 공유 → v0.2: 가구(Household) 기반 공유. 하드코딩 cameraId 제거
← 뒤로
가족 관리
가구를 함께 관리할 가족을 초대하세요
🏠
어머니 가구
카메라 3대 · 가족 3명 공유 중
멤버
홍영희 (나)
소유자
소유자
홍철수
보호자
박미영
보호자
권한 안내
소유자
카메라 설정, 멤버 관리, 영상 확인, 알림 수신
보호자
영상 확인, 알림 수신
8c · 알림 설정
알림 유형별 on/off, AI 감지 민감도, 방해금지 시간대
← 뒤로
알림 설정
긴급 알림
⚠️
낙상 감지
넘어짐이 감지되면 즉시 알림
주의 알림
장시간 무반응
설정 시간 이상 움직임이 없을 때
정보 알림
📊
일일 리포트
매일 아침 안부 리포트 알림
8d · 내 계정
계정 정보 확인/수정, 로그아웃
← 뒤로
내 계정
김영희
younghee@email.com
계정 정보
이름 김영희 ›
이메일 younghee@email.com
비밀번호 변경
전화번호 010-1234-5678 ›
↳ SNS 로그인 시
연결된 계정 K카카오
이메일 kakao@email.com
* 비밀번호 변경은 표시되지 않음
기타
이용약관
개인정보 처리방침
로그아웃
회원 탈퇴
8e · 이름 변경
← 뒤로
이름 변경
이름
김영희
8f · 비밀번호 변경
← 뒤로
비밀번호 변경
현재 비밀번호
••••••••
새 비밀번호
새 비밀번호 입력
새 비밀번호 확인
새 비밀번호 다시 입력
8g · 전화번호 변경
← 뒤로
전화번호 변경
전화번호
010-1234-5678
인증번호
인증번호 6자리 입력
🔄

v0.1 → v0.2 변경 사항

영역 v0.1 v0.2
홈 — 카메라 cameras.first 단일 카드 카메라 캐러셀 (스와이프) + 그리드 뷰 토글 NEW
카메라 전환 없음 (설정에서만 목록) 기본 카메라로 즉시 진입 + 라이브뷰 내 탭 전환 NEW
리포트 cameras.first 고정 가구 단위 종합 리포트 + 카메라는 감지 출처 태그 NEW
알림 전체 알림 목록 카메라 필터 칩 추가 + 카메라 태그 표시
라이브뷰 카메라 ID 없는 단일 뷰 멀티카메라 그리드 → 풀스크린 진입 (1대면 바로 풀스크린) NEW
설정 — 카메라 카메라 목록 (기본) 카메라 관리 (상태 표시, 순서 변경, 기본 카메라 설정)
안부 섹션 첫 번째 카메라만 가구(Household) 단위 종합 안부 — 모든 카메라 데이터 통합 NEW
🏗

다중 카메라 상태 아키텍처

Provider 기반 상태 흐름

데이터 모델: Household(가구) 중심

🏠 Household (가구)
📹 카메라 1 (거실)
📹 카메라 2 (침실)
📹 카메라 3 (현관)
안부 리포트 = 가구 단위 종합
모든 카메라 데이터 통합 분석
핵심 원칙: 카메라는 센서(감지 장치)이고, 모니터링 대상은 가구(Household)입니다.
안부 리포트, 기상/취침 시간, 활동량 등은 개별 카메라가 아닌 가구 전체에 대한 종합 수치입니다.
개별 카메라는 "이 활동이 어디서 감지되었는가"의 출처(source) 정보로만 사용됩니다.

Provider 구조

householdProvider
householdAnbuProvider
HomeScreen 안부
ReportScreen
selectedCameraProvider
LiveViewScreen
AlertsScreen (필터)
두 축의 Provider:
householdAnbuProvider — 가구 단위. 모든 카메라 데이터를 통합하여 기상/취침/활동량/상태 산출. 홈 안부, 리포트에서 사용.
selectedCameraProvider — 카메라 단위. 라이브뷰에서 어떤 카메라를 볼지 선택. 알림 필터링(어느 카메라에서 감지?)에 사용.

카메라 vs 가구 — 역할 분리

기능 데이터 기준 카메라 역할
안부 (홈) 🏠 가구 단위 없음 — 통합 수치
리포트 🏠 가구 단위 타임라인 이벤트에 "출처" 태그
알림 📹 카메라별 어느 카메라가 감지했는지 표시 + 필터
라이브뷰 📹 카메라별 그리드로 전체 카메라 보기 → 탭하여 풀스크린
설정 📹 카메라별 개별 카메라 관리
🧩

v0.2 신규 컴포넌트

다중 카메라 지원을 위해 추가된 UI 요소

1. 가구 안부 모델

원칙: 안부 데이터는 가구 단위로 통합 산출되며, 사용자에게 "카메라 N대 통합" 같은 내부 구현 정보를 노출하지 않습니다.
v0.1과 차이: 기존에는 카메라별 데이터(cameras.first)를 보여줬으나, v0.2에서는 가구 전체의 안부를 자연스럽게 표시합니다.
UI: "오늘의 안부" 섹션에 카메라 선택/전환 UI 없음. 사용자는 단순히 부모님의 하루를 확인.

2. Camera Filter Chip

모든 카메라 🏠 거실 🛏 침실 🚪 현관
용도: 알림 목록에서 카메라별 필터링. 기존 심각도 필터 아래 두 번째 줄로 배치.
기본값: "모든 카메라" 선택. 선택 시 해당 카메라의 알림만 표시.

3. Camera Alert Tag

오늘 02:15 거실     어제 14:30 침실     3일 전 현관     어제 08:00 전체
용도: 알림 카드 시간 옆에 소스 카메라 표시. 다중 카메라 시 어느 카메라 이벤트인지 즉시 파악 가능.

4. 조건부 표시 규칙

카메라 0대 EmptyStateWidget 표시, 전환 UI 전체 숨김
카메라 1대 캐러셀 → 단일 카드, 라이브뷰 카메라 탭 숨김, 카메라 필터 칩 숨김
카메라 2~3대 캐러셀 뷰 기본, 그리드 뷰 토글 가능, 전환 UI 모두 표시
카메라 4대+ 그리드 뷰 기본, 캐러셀은 스크롤 가능하지만 그리드 권장
🔧

v0.2 마이그레이션 계획

v0.1 코드베이스 → v0.2 가구 모델 전환

1. 도메인 모델 변경

가구(Household)가 최상위 엔티티로 추가되며, 기존 카메라 기반 참조가 가구 기반으로 전환됩니다.
파일 유형 변경 내용
household.dart NEW Household Freezed 모델 신규 생성
필드: id, name, parentName, parentRelation, livingType, cameraIds[], memberIds[]
user.dart MODIFY householdId 필드 추가
User → Household 연결. 회원가입 시 자동 생성
camera.dart MODIFY householdId 필드 추가, isDefault 필드 추가
카메라가 어느 가구에 속하는지 + 기본 카메라 여부
wellness_report.dart BREAKING cameraIdhouseholdId 로 변경
리포트가 카메라별이 아닌 가구 단위로 전환
family_member.dart MODIFY 가족 관계가 카메라가 아닌 가구 기준으로 변경
Repository 파라미터 cameraIdhouseholdId

2. Provider 리팩토링

cameraId 파라미터를 받던 Provider들이 householdId로 전환됩니다.
Provider (v0.1) → v0.2
todayReport(cameraId) todayReport(householdId) BREAKING
weeklyReports(cameraId) weeklyReports(householdId) BREAKING
monthlyReports(cameraId) monthlyReports(householdId) BREAKING
familyListProvider(cameraId) familyListProvider(householdId) BREAKING
familyMembers(cameraId) familyMembers(householdId) BREAKING
(없음) householdProvider NEW — 현재 사용자의 가구 정보
(없음) householdAnbuProvider NEW — 가구 단위 안부 종합 데이터
(없음) selectedCameraProvider NEW — 라이브뷰/알림 필터 카메라 선택

3. 화면별 수정 사항

화면 수준 변경 내용

home_screen.dart
_WellnessSection(cameraId:)householdId
• "오늘의 웰니스" → "오늘의 안부" 명칭 변경
• 라이브 프리뷰 → 스냅샷 방식 전환
• 카메라 캐러셀 / 그리드 뷰 추가 (다중 카메라 시)
• "영상 보기" → 멀티카메라 그리드 라우팅
안부 리포트
report_screen.dart
cameras.first.id 패턴 제거 → householdId
• "웰니스 리포트" → "안부 리포트" 타이틀 변경
• "어머니의 하루" 서브타이틀 추가
• 하위 위젯 _DailyContent, _WeeklyContent, _MonthlyContent 파라미터 cameraIdhouseholdId
• 타임라인 이벤트에 카메라 출처 태그 추가
알림
alerts_screen.dart
• 카메라 필터 칩 추가 (선택적 — 다중 카메라일 때만)
• 알림 카드에 카메라 태그 표시
설정
settings_screen.dart
_FamilySection(cameraId: cameras.first.id)householdId
• 기본 카메라 표시 배지 추가
• 카메라 순서 변경 핸들 추가
가족 관리
family_screen.dart
• 하드코딩 _cameraId = 'cam-1' 제거
householdId 기반으로 전환
• "카메라를 함께 사용할 가족" → "가구를 함께 관리할 가족"
_SharedCameraCard → 가구 정보 카드로 변경
• 모든 familyListProvider(_cameraId)householdId
라이브뷰
live_view_screen.dart
• 단일 카메라 뷰 → 멀티카메라 그리드 + 풀스크린 구조로 전면 재작성
• 카메라 1대: 바로 풀스크린 진입
• 카메라 2대+: 그리드 → 탭 → 풀스크린
• 풀스크린에서 "⊞ 그리드" 버튼으로 복귀
회원가입 2단계
signup_step2_screen.dart
• 부모님 정보 입력 시 Household 엔티티 자동 생성 로직 추가
• UI 변경 거의 없음 (기존 입력이 이미 가구 정보 역할)
회원가입 1·3단계 없음 변경 불필요

4. 구현 마일스톤

의존관계 순서대로 구현. M1이 완료되어야 M2~M6 진행 가능.

M1 도메인 모델 기반 구축

Household 모델 신규 생성 + User/CamerahouseholdId 추가 + WellnessReport.cameraIdhouseholdId 변경
household.dart user.dart camera.dart wellness_report.dart

M2 Provider 리팩토링

householdProvider, householdAnbuProvider, selectedCameraProvider 신규 생성 + 리포트/가족 Provider cameraIdhouseholdId 전환 + Repository 인터페이스 수정 + Mock 데이터 업데이트
household_providers.dart wellness_report_providers.dart family_providers.dart *_repository.dart

M3 홈 화면 전환

안부 명칭 변경 + 스냅샷 방식 전환 + 카메라 캐러셀/그리드 뷰 추가 + householdId 기반 안부 섹션 연동
home_screen.dart

M4 리포트 + 가족 화면

안부 리포트 타이틀 변경 + householdId 기반 데이터 연동 + 타임라인 카메라 출처 태그 + 가족 관리 가구 기반 전환 + 하드코딩 cameraId 제거
report_screen.dart family_screen.dart settings_screen.dart

M5 라이브뷰 재구축

멀티카메라 그리드 스크린 신규 + 풀스크린 라이브뷰 재작성 + 라우터 경로 추가 (/live → 그리드, /live/:cameraId → 풀스크린) + 조건부 분기 (1대면 바로 풀스크린)
live_view_screen.dart camera_grid_screen.dart router.dart

M6 알림 + 회원가입 마무리

알림 화면 카메라 필터 칩 + 카메라 태그 추가 + 회원가입 2단계에서 Household 자동 생성 로직 연동
alerts_screen.dart signup_step2_screen.dart alert_providers.dart

5. 용어 변경 요약

v0.1 v0.2
웰니스 / 웰니스 리포트 안부 / 안부 리포트
cameraId (리포트·가족 파라미터) householdId
카메라를 함께 사용할 가족 가구를 함께 관리할 가족
라이브 프리뷰 (홈 화면) 스냅샷 (N분 전)
단일 라이브뷰 멀티카메라 그리드 → 풀스크린
cameras.first.id (하드코딩 패턴) household.id (가구 기반)
Version History
v0.3 · 2026-03-09 · UI 개선 + 블루투스
  • 회원가입: 비밀번호 확인 필드 추가
  • 캘린더: 한국어(ko_KR) 로케일 적용
  • 홈 캐러셀: 마지막 슬라이드에 카메라 추가 카드, 인디케이터 warmCoral 색상
  • 홈 안부: 2×2 그리드 레이아웃 (Row → Wrap)
  • 홈 헤더: 세그먼트 토글로 뷰 전환 (아이콘 버튼 제거)
  • 카메라 추가: QR 스캔 → 블루투스 4단계 (BT 검색 → Wi-Fi → 연결 확인 → 설정)
  • 연결 확인: 성공/실패 분기 UI, 실패 시 Wi-Fi 재입력 또는 처음부터 재시도
v0.2 · 2026-03-09 · Multi-Camera Update
  • 홈 화면: 스냅샷 모드 ('N분 전'), 다중 카메라 캐러셀/그리드 뷰, 뷰 모드 토글
  • 다중 카메라: CameraGridScreen (2열 그리드 + LIVE 뱃지), LiveViewScreen (cameraId 기반 풀스크린, 그리드 복귀 버튼)
  • 리포트 화면: '안부 리포트' 명칭, '어머니의 하루' 서브타이틀, householdProvider 전환
  • 가족 화면: 가구 기반 전환, Household.name + 카메라 수 표시
  • 설정 화면: 기본 카메라 '기본' 배지, householdProvider 기반 가족 섹션
  • 알림: 카메라 필터 칩 행, 카메라 출처 태그 (리스트 + 상세)
  • 회원가입: 가구 자동 생성 + User.householdId 연결
v0.1 · 2026-03-06 · Initial Design System
  • 컬러 팔레트, 온보딩 플로우 (스플래시/로그인/회원가입 3단계)
  • 홈 대시보드, 라이브뷰, 알림, 리포트, 알림 상세, 카메라 등록 화면