12 KiB
12 KiB
Google TV Family Dashboard App - Project Plan
Google TV용 가족 대시보드 앱 구현 계획입니다. TV 화면에서 일일 정보(달력, 날씨, 할일, 성경 말씀)를 표시하고, Flutter 앱을 통해 데이터를 입력/관리할 수 있는 시스템입니다.
System Architecture
┌─────────────────────────────────────────────────────────────────┐
│ Google TV │
│ Flutter TV App (APK) │
└──────────────────────────┬──────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ Backend Server │
│ Node.js + Express API │
│ MongoDB │
└──────────────────────────┬──────────────────────────────────────┘
│
┌──────────────┼──────────────┐
▼ ▼ ▼
┌───────────┐ ┌───────────┐ ┌───────────┐
│ Weather │ │ Bible │ │ Flutter │
│ API │ │ API │ │ Mobile │
└───────────┘ └───────────┘ └───────────┘
Key Decisions
| 항목 | 선택 | 비고 |
|---|---|---|
| TV App | Flutter for Android TV | 모바일 앱과 코드 공유, APK로 TV 설치 |
| DB | MongoDB | 확장성, 유연한 스키마 |
| Weather API | OpenWeatherMap | 무료 1000 calls/day, 환경변수로 변경 가능 |
| Bible API | bible-api.com | 영어+한글 동시 표시, 환경변수로 변경 가능 |
| 가족 구성원 | Admin 기능으로 관리 | Flutter 앱 내 설정에서 추가/수정/삭제 |
| 사진 갤러리 | Admin에서 업로드 | TV 화면에 랜덤 슬라이드쇼로 표시 |
TV Screen Specifications (43인치 기준)
| 항목 | 값 | 설명 |
|---|---|---|
| 해상도 | 1920 x 1080 px | Full HD 기준 (4K TV도 호환) |
| 화면 비율 | 16:9 | 표준 와이드스크린 |
| 실제 크기 | 95.3cm x 53.6cm | 43인치 대각선 기준 |
| Safe Zone | 90% 영역 사용 | 가장자리 5% 여백 권장 |
UI 레이아웃 가이드
┌────────────────────────────────────────────────────────────────────────┐
│ 1920px (16:9 @ 1080p) │
├────────────────────────────────────────────────────────────────────────┤
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ Safe Zone (90%) │ │
│ │ ┌─────────────────────────────┬──────────────────────────┐ │ │
│ │ │ │ │ │ │
│ │ │ 메인 영역 (65%) │ 사이드바 (35%) │ │ │
│ │ │ 1248px │ 672px │ │ │
│ │ │ │ │ │ │
│ │ │ - 날씨 │ - 월간 달력 │ │ │
│ │ │ - 오늘의 할일 │ - 주간 일정 │ │ │
│ │ │ - 오늘의 말씀 │ - 공지사항 │ │ │
│ │ │ │ │ │ │
│ │ └─────────────────────────────┴──────────────────────────┘ │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │ 1080px
└────────────────────────────────────────────────────────────────────────┘
폰트 크기 권장 (시청 거리 2~3m 기준)
| 요소 | 크기 | 용도 |
|---|---|---|
| 헤더/시간 | 48-64px | 날짜, 현재 시간 |
| 제목 | 32-40px | 섹션 제목 |
| 본문 | 24-28px | 할일, 일정 내용 |
| 보조 텍스트 | 18-20px | 부가 정보 |
TV Display Layout (Single Usage Dashboard)
모든 정보와 기능을 한 화면에서 볼 수 있는 통합 대시보드 레이아웃입니다.
┌────────────────────────────────────────────────────────────────────────┐
│ 📅 2026.01.24 (금) 15:43:36 🌤️ 서울 12°C 맑음 │
├──────────────────────┬─────────────────────────┬───────────────────────┤
│ [📅 월간 달력] │ [🖼️ 가족 사진 앨범] │ [✅ 오늘의 할일] │
│ │ │ │
│ 1 2 3 4 5 6 7 │ (랜덤 슬라이드쇼) │ 👨 아빠: 마트, 운동 │
│ 8 9 10 11 12 13 14 │ (30초 간격 전환) │ 👩 엄마: 회의 │
│ 15 16 17 18 19 20 21 │ │ 👦 아들: 수학 숙제 │
│ 22 23 24 25 26 27 28 │ │ 👧 딸: 피아노 가기 │
│ 29 30 31 │ │ │
├──────────────────────┤ ├───────────────────────┤
│ [📋 주간 일정] │ │ [📖 오늘의 말씀] │
│ │ │ │
│ 금: 가족 모임 │ │ "The fear of the LORD │
│ 토: 결혼식 참석 │ │ is the beginning..." │
│ 일: 교회 예배 │ │ │
│ │ │ "여호와를 경외하는..." │
├──────────────────────┤ │ - 잠언 1:7 │
│ [📢 공지사항] │ │ │
│ • 다음 주 여행 계획 │ │ │
└──────────────────────┴─────────────────────────┴───────────────────────┘
위젯 구성
- Header: 날짜, 시간, 실시간 날씨 (Top Bar)
- Left Column (Plan):
- 월간 달력 (이번 달 전체 뷰)
- 주간 주요 일정 (리스트)
- 공지사항 (텍스트 롤링)
- Center Column (Memory):
- 가족 사진 위젯: Admin에서 업로드한 사진들을 랜덤하게 표시 (디지털 액자 기능)
- Right Column (Focus):
- 가족별 오늘의 할일 (아바타와 함께 표시)
- 오늘의 말씀 (한글/영어 병기)
MongoDB Collections (Updated)
photos
{
_id: ObjectId,
url: "https://.../photo.jpg", // 또는 base64 (저장 용량 고려 필요)
caption: "2025 여름 휴가",
active: true,
createdAt: Date
}
family_members (기존 동일)
...
API Endpoints (Updated)
| Method | Endpoint | Description |
|---|---|---|
| GET/POST | /api/photos |
사진 목록 조회/업로드 |
| DELETE | /api/photos/:id |
사진 삭제 |
| ... | ... | (기존 API 동일) |
bini-google-tv/
├── docs/
│ └── project-plan.md
├── backend/
│ ├── server.js
│ ├── config/
│ │ ├── db.js
│ │ └── api.js
│ ├── models/
│ │ ├── FamilyMember.js
│ │ ├── Todo.js
│ │ ├── Schedule.js
│ │ ├── Announcement.js
│ │ └── Setting.js
│ ├── routes/
│ │ ├── family.js
│ │ ├── todos.js
│ │ ├── schedules.js
│ │ ├── announcements.js
│ │ ├── weather.js
│ │ └── bible.js
│ ├── .env.example
│ └── package.json
└── flutter_app/
├── lib/
│ ├── main.dart
│ ├── config/
│ ├── models/
│ ├── services/
│ ├── screens/
│ │ ├── tv/
│ │ ├── mobile/
│ │ └── admin/
│ └── widgets/
└── pubspec.yaml
MongoDB Collections
family_members
{
_id: ObjectId,
name: "아빠",
emoji: "👨",
color: "#3498db",
order: 1,
createdAt: Date
}
todos
{
_id: ObjectId,
familyMemberId: ObjectId,
title: "마트 장보기",
completed: false,
dueDate: Date,
createdAt: Date
}
schedules
{
_id: ObjectId,
title: "가족 모임",
description: "할머니 댁 방문",
startDate: Date,
endDate: Date,
familyMemberId: ObjectId,
isAllDay: true,
createdAt: Date
}
announcements
{
_id: ObjectId,
title: "이번 주 외식",
content: "금요일 저녁 외식 예정",
priority: 1,
active: true,
createdAt: Date
}
API Endpoints
| Method | Endpoint | Description |
|---|---|---|
| GET/POST | /api/family |
가족 구성원 조회/추가 |
| GET/PUT/DELETE | /api/family/:id |
특정 구성원 조회/수정/삭제 |
| GET/POST | /api/todos |
할일 조회/추가 |
| GET/PUT/DELETE | /api/todos/:id |
특정 할일 조회/수정/삭제 |
| GET | /api/todos/today |
오늘의 할일 조회 |
| GET/POST | /api/schedules |
일정 조회/추가 |
| GET | /api/schedules/week |
주간 일정 조회 |
| GET | /api/schedules/month |
월간 일정 조회 |
| GET/POST | /api/announcements |
공지사항 조회/추가 |
| GET | /api/weather |
현재 날씨 조회 |
| GET | /api/bible/today |
오늘의 말씀 조회 |
Development Phases
| Phase | 내용 | 예상 시간 |
|---|---|---|
| 1 | Backend + MongoDB 설정 | 2-3시간 |
| 2 | REST API 구현 | 3-4시간 |
| 3 | Flutter 공통 구조 + 모델 | 2시간 |
| 4 | TV Display 화면 | 3-4시간 |
| 5 | Mobile 입력 화면 | 4-5시간 |
| 6 | Admin (가족구성원/설정) | 2시간 |
| 7 | 통합 + TV APK 빌드 | 2-3시간 |
총 예상 시간: 18-23시간
TV App Installation
- Flutter 빌드:
flutter build apk --release - TV에 설치:
- USB로 APK 전송 후 파일 관리자에서 설치
- 또는 ADB 사용:
adb install app-release.apk
- TV 홈에서 앱 실행