You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
13 KiB
Markdown
175 lines
13 KiB
Markdown
# 아리 (Ari) — AI Life OS
|
|
|
|
> 일·삶을 한곳에서 관리하는 AI 비서 **아리**의 한국어 인터랙티브 프로토타입.
|
|
> "적을 때는 분류하지 않는다 — 분류·배치·자동화는 아리가." 사용자는 **읽고 탭 한 번**, 나머지는 아리가 합니다.
|
|
|
|
데모 사용자는 **지우님**(PM), 6월 7~12일 가상의 한 주가 배경입니다. 모든 데이터는 목업이며 실제 연동·백엔드는 없습니다.
|
|
|
|
---
|
|
|
|
## 1. 빠른 시작
|
|
|
|
- 프로젝트 루트의 **`index.html`** 을 열면 자동으로 `ari/대시보드.html`로 진입합니다 (메인 페이지).
|
|
- 모든 페이지는 단일 HTML + React 18 + Babel(인브라우저 트랜스파일)로 동작하며, 빌드 과정이 없습니다.
|
|
- 각 페이지 상단 내비게이션으로 13개 화면을 자유롭게 오갑니다.
|
|
|
|
---
|
|
|
|
## 2. 폴더 구조
|
|
|
|
```
|
|
(루트)
|
|
├─ index.html ← 메인 진입점 (→ ari/대시보드.html 리다이렉트)
|
|
├─ uploads/ 업로드 원본
|
|
├─ README.md 이 문서
|
|
└─ ari/
|
|
├─ 대시보드.html ① 홈 — 하루 요약 + 아리 브리핑
|
|
├─ 인박스.html ② 스마트 인박스 — 멀티모달 캡처 자동 분류
|
|
├─ 결재함.html ③ 아리 결재함 — 자동 처리 승인/되돌리기
|
|
├─ 자동화.html ③′ 자동화 규칙 빌더 — 자연어 한 문장 → 규칙
|
|
├─ 여정.html ④ 하루 여정 — 시간 흐름 + 협업 맵
|
|
├─ 일정.html ⑤ 캘린더 + 회의 도우미
|
|
├─ 작업.html ⑥ 작업(프로젝트 트리) + 리스크 레이더
|
|
├─ 메일.html ⑦ 멀티 계정 메일 + AI 요약
|
|
├─ 알림.html ⑦′ 알림 트리아지 — 지금/나중에/아리가 처리
|
|
├─ 리서치.html ⑧ 지능형 리서치 파트너
|
|
├─ 여행.html ⑧′ 여행·출장 도우미 — 이동·체크리스트·경비
|
|
├─ 라이프.html ⑨ 라이프 케어 — 건강·금융·지식
|
|
├─ 하루 마감.html ⑩ 이브닝 브리핑
|
|
│
|
|
├─ assets/ 활성 앱 에셋 (CSS · JSX · 데이터) 일체
|
|
├─ themes/ 대안 디자인 보관 (현재 비활성)
|
|
│ ├─ ron/ RON 테마 (다크/벤토 방향) — 자급자족 + README
|
|
│ └─ lumi/ Lumi 테마 (앰버 방향) — 자급자족 + README
|
|
└─ scraps/ 스크래치 이미지
|
|
```
|
|
|
|
### 페이지 ↔ 에셋 매핑
|
|
|
|
| 페이지 | CSS | 데이터 | 로직(JSX) |
|
|
|---|---|---|---|
|
|
| 대시보드 | `dash.css` | `data.js`, `approve-data.js`, `sinbox-data.js` | `dash-v2.jsx` |
|
|
| 인박스 | `dash.css`, `sinbox.css`, `approve.css` | `data.js`, `sinbox-data.js` | `shell.jsx`, `sinbox.jsx`, `sinbox-page.jsx` |
|
|
| 결재함 | `dash.css`, `approve.css` | `data.js`, `approve-data.js` | `shell.jsx`, `approve.jsx`, `approve-page.jsx` |
|
|
| 여정 | `dash.css`, `journey-clean.css` | `journey-clean-data.js` | `journey-clean.jsx` |
|
|
| 일정 | `cal.css` | `cal-data.js` | `cal.jsx`, `cal-meet.jsx` |
|
|
| 작업 | `tasks.css` | `tasks-data.js` | `tasks.jsx`, `tasks-risk.jsx` |
|
|
| 메일 | `mail.css` | `mail-data.js` | `mail.jsx` |
|
|
| 리서치 | `tasks.css`, `research.css` | `research-data.js` | `research.jsx` |
|
|
| 자동화 | `dash.css`, `auto.css` | `data.js`, `auto-data.js` | `shell.jsx`, `auto.jsx` |
|
|
| 알림 | `dash.css`, `notify.css` | `data.js`, `notify-data.js` | `shell.jsx`, `notify.jsx` |
|
|
| 여행 | `dash.css`, `trip.css` | `data.js`, `trip-data.js` | `shell.jsx`, `trip.jsx` |
|
|
| 라이프 | `life.css` | `life-data.js` | `life.jsx` |
|
|
| 하루 마감 | `dash.css`, `wrap.css` | `wrap-data.js` | `wrap.jsx` |
|
|
|
|
> `shell.jsx`(`window.AriShell`)는 인박스·결재함·자동화·알림·여행이 공유하는 상단바/아이콘 셸입니다.
|
|
> `AriShell.SubRail`은 좌측 아이콘 레일로 한 페이지 안의 하위 화면을 전환합니다(자동화·알림·여행이 사용). items: `[{id,icon,label,dot?}|{sep:true}]`, props: `active`/`onPick`.
|
|
> `dash.css`는 공용 디자인 토큰(색·여백·글래스·라이트/다크 테마)의 기준 파일입니다.
|
|
|
|
---
|
|
|
|
## 3. 공통 시스템
|
|
|
|
- **디자인**: 클린 화이트 글래스 테마. 크림 배경 + 반투명 글래스 카드 + 부드러운 그림자. 포인트 색 `blue / violet / coral / green / amber`.
|
|
- **타이포**: Pretendard(본문) + Onest·DM Mono(숫자/영문).
|
|
- **테마 토글**: 상단바 달/해 아이콘으로 라이트 ↔ 다크 전환 (`data-theme` 속성, 선택값은 localStorage 저장).
|
|
- **상단 내비게이션 (전 페이지 동일 13항목)**:
|
|
대시보드 · 인박스 · 결재함(배지 3) · 자동화 · 여정 · 일정 · 작업(배지 4) · 메일 · 알림(배지 6) · 리서치 · 여행 · 라이프 · 하루 마감
|
|
- **상태 저장**: 일부 상호작용(테마, 작업 보드 상태 등)은 페이지별 localStorage 키(`ariC.`, `ariT.`, `ariR.` 등)에 저장됩니다.
|
|
|
|
---
|
|
|
|
## 4. 페이지별 기능
|
|
|
|
### ① 대시보드 (`대시보드.html`)
|
|
하루의 관제탑. 아리의 아침 브리핑(날씨·출근·수면), 오늘 일정/할 일/목표 요약, 자연어 명령 입력창, 그리고 인박스·결재함·집중 모드·위임 등 핵심 모듈로 가는 베n토 위젯들을 모았습니다.
|
|
|
|
### ② 스마트 인박스 (`인박스.html`)
|
|
**일단 적으세요 — 분류는 아리가.** 텍스트·음성 메모·생각을 멀티모달로 던지면 아리가 4원칙으로 자동 분류합니다:
|
|
- 행동이 있으면 → **작업** (작업 트리의 해당 프로젝트로)
|
|
- 시간이 정해지면 → **일정** (캘린더 등록)
|
|
- 막연하면 → **아이디어** (보드 보관 + 관련 프로젝트 연결)
|
|
- 개인 일도 숨기지 않고 같은 트리에서 필터로만 구분, 배치만 저녁·주말 빈 시간으로 추천
|
|
분류된 항목은 작업/일정/아이디어 목적지로 바로 이어집니다.
|
|
|
|
### ③ 아리 결재함 (`결재함.html`)
|
|
아리가 **밤사이/자동으로 처리한 일**을 모아 한 번에 승인·되돌리기. 위험도(low/high)로 구분 — 낮은 건은 이미 처리(되돌리기만 제공), 높은 건은 사용자 확인 후 실행(예: 회신 보내기, 위임 전달, 구독 일시정지). "오늘 아낀 시간"과 자동 처리 건수를 함께 보여줍니다.
|
|
|
|
### ④ 하루 여정 (`여정.html`)
|
|
하루를 **아침 준비 → 오전 집중 → 오후 협업 → 마무리** 4단계 흐름으로 시각화. 각 단계의 루틴·작업·미팅 카드와, 팀원(현우·민서·재호·수아)이 어떤 일에 연결돼 있는지 협업 맵을 함께 보여줍니다.
|
|
|
|
### ⑤ 일정 + 회의 도우미 (`일정.html`)
|
|
주/월/일 캘린더. 핵심은 일(日) 뷰의 **회의 도우미** 드로어 — 회의 상태별로 다르게 동작합니다:
|
|
- **예정 회의**: 사전 브리핑(안건·지난 회의 요약·지난 액션 완료 체크·인사이트)
|
|
- **진행 중**: 실시간 기록 상태
|
|
- **끝난 회의**: 음성 기록 기반 요약·결정 사항·**액션 아이템 추출 → "작업으로" 한 번에 전송**
|
|
- **1:1**: 지난 대화 요약, 약속 사항, 상대방 시그널(업무량·위임 과제·성과), 대화 주제 추천
|
|
|
|
### ⑥ 작업 + 리스크 레이더 (`작업.html`)
|
|
중첩 프로젝트 트리(업무/개인 폴더 → 프로젝트 → 작업)를 칸반·리스트·캘린더 뷰로. 상단의 **리스크 레이더**가 작업 데이터를 직접 계산해 경고합니다:
|
|
- **지연 위험**: 오늘 마감인데 미완료
|
|
- **업무 쏠림**: 담당자별 미완료 편차 → 위임/재배분 제안
|
|
- **의존성**: 선행 작업이 늦어지면 밀리는 후속 작업
|
|
|
|
### ⑦ 메일 (`메일.html`)
|
|
회사·개인·사이드 **3개 계정 통합** 받은편지함. 메일별 AI 요약·우선순위·분류 라벨을 달고, 본문에서 **할 일/일정을 자동 추출**해 작업·캘린더로 보낼 수 있습니다. 회신 초안도 준비합니다.
|
|
|
|
### ⑧ 리서치 (`리서치.html`)
|
|
지능형 리서치 파트너. **좌측 사이드바의 뷰 전환 4개**로 하위 화면을 오가고(선택값 localStorage 저장), 그 아래에 컬렉션·학습된 자료가 이어집니다 — 각 기능을 한 스크롤에 쌓지 않고 풀폭으로 보여줍니다:
|
|
- **새 조사**: 자연어 명령 컴포저 + 세 결과로 가는 입구 카드(클릭 → 해당 뷰)
|
|
- **멀티소스 종합 리포트**: 논문·뉴스·보고서를 모아 출처군별 핵심 주장·논조를 **교차 분석 표**로 정리 + 종합 + 교차 확인 경고
|
|
- **지식 베이스 Q&A**: 저장한 PDF·웹·메모를 학습해 **근거 링크와 함께** 답변 (개인 위키)
|
|
- **시각화·추세 예측**: 데이터를 막대 차트로 그리고 예측치(점선 막대)와 한계 주의까지
|
|
|
|
### ⑨ 라이프 케어 (`라이프.html`)
|
|
일 밖의 삶을 코칭. 세 영역 탭:
|
|
- **건강**: 걸음·운동·수면 링, 바이탈, 수면 분석, 습관 추적 (Apple Health·Watch 연동 가정)
|
|
- **금융**: 예산·카테고리별 지출, 구독 관리, 절약 인사이트(잠자는 구독 발견 등) (카드·토스·뱅크 연동 가정)
|
|
- **지식(제2의 뇌)**: 아티클·메모·하이라이트 컬렉션 + 자연어 검색 (Notion·Readwise·웹 클리퍼 연동 가정)
|
|
|
|
### ⑩ 하루 마감 (`하루 마감.html`)
|
|
이브닝 브리핑(전용 풀스크린, 상단 메뉴 없음). 오늘의 숫자(완료·딥 워크·미팅·자동 처리), 하이라이트, 남은 일 자동 이월, 내일 미리보기, 수면 모드 CTA. 다른 페이지와 동일한 라이트 글래스 테마.
|
|
|
|
### ⑪ 자동화 규칙 빌더 (`자동화.html`)
|
|
**한 문장이면 규칙이 돼요.** 좌측 레일로 4개 하위 화면을 오갑니다 — **내 규칙**(토글 목록 + 작동 방식 설명) · **새 자동화**(자연어 입력 → 트리거·조건·동작 미리보기 → 생성) · **아리 제안**(반복 패턴 탐지 → 규칙 제안, 레일에 알림 점) · **실행 기록**. 새 규칙을 만들면 토스트와 함께 목록으로 돌아갑니다.
|
|
|
|
### ⑫ 알림 트리아지 (`알림.html`)
|
|
좌측 레일 3단: **트리아지**(지금/나중에/아리가 처리 탭 + 오늘 요약) · **집중 보호·묶음 배달** · **발신자 규칙**. 왜 그렇게 분류했는지 이유 칩과 되돌리기 제공.
|
|
|
|
### ⑬ 여행·출장 도우미 (`여행.html`)
|
|
좌측 레일 3단: **다가오는 출장**(부산 출장 D-4 개요·이동·체크리스트·일정표·경비) · **새 여행 계획** · **찜·가격 추적**.
|
|
**새 여행 계획**이 핵심 — "다음 달 말 제주 가족여행 3박 4일, 예산 150만원"처럼 한 문장을 말하면 아리가 항공·숙소·날씨·동선을 조사하는 과정을 보여주고(단계별 진행 애니메이션), 추천 이동/숙소 옵션·일정 초안·예상 경비·준비물을 출처와 함께 생성합니다. 예시 2개(제주·도쿄)는 각각 완성된 결과를, 자유 입력은 제주 결과로 폴백. 체크 상태는 localStorage 저장.
|
|
|
|
---
|
|
|
|
## 5. 페이지가 **연합**해 만드는 가치
|
|
|
|
아리의 핵심은 각 화면이 따로 노는 게 아니라 **데이터를 주고받으며 하나의 흐름**을 이루는 데 있습니다.
|
|
|
|
- **캡처 → 분류 → 실행**: 인박스에 던진 한 줄이 작업 트리·캘린더·아이디어 보드로 자동 배치.
|
|
- **메일·회의 → 작업**: 메일 본문과 회의 녹취에서 액션 아이템을 추출해 담당자 작업으로 전송 → 작업 보드에 등장.
|
|
- **일정 ↔ 작업 ↔ 집중 모드**: 캘린더 빈 블록을 읽어 딥 워크/가벼운 일을 자동 배치(집중 모드), 마감·업무량은 리스크 레이더가 감시.
|
|
- **위임 루프**: 내 일정 과부하를 감지해 위임을 제안(결재함) → 1:1 도우미가 넘긴 일의 진행을 추적.
|
|
- **자동 처리 → 결재함 → 하루 마감**: 밤사이 처리한 일은 결재함에서 승인하고, 하루 마감에서 "아리가 아낀 시간"으로 합산.
|
|
- **공통 인물·프로젝트**: 지우·현우·민서·재호·수아와 온보딩·분기 리포트 등 프로젝트가 전 페이지에 일관되게 등장해, 한 사람의 하루가 끊김 없이 이어집니다.
|
|
|
|
---
|
|
|
|
## 6. 보관 테마 (`ari/themes/`)
|
|
|
|
현재 활성 앱은 **클린 화이트 글래스** 방향입니다. 과거 탐색했던 두 대안 방향을 폴더째 보관합니다 (각 폴더의 `README.md` 참고):
|
|
|
|
- **`ron/`** — RON 테마. 다크 톤 + 벤토 그리드 대시보드, 여정 중심 v2, 작업 화면. 폴더 내에서 자급자족 동작.
|
|
- **`lumi/`** — Lumi(앰버) 테마. Lumi People(HR/피플 대시보드) 원본과 그 스타일을 적용한 아리 대시보드 라이트.
|
|
|
|
> 다시 메인으로 승격하려면 필요한 파일을 `../assets/`로 옮기고 각 HTML의 경로·내비 링크를 조정하세요.
|
|
|
|
---
|
|
|
|
## 7. 개발 메모
|
|
|
|
- **각 JSX는 독립 스코프**입니다. 아이콘 path는 각 파일의 `P`/`PATHS` 맵에 정의되어 있어, 한 파일에 추가해도 다른 파일에는 반영되지 않습니다(누락 시 렌더 크래시 주의).
|
|
- 전역 스타일 객체는 컴포넌트별 고유명(예: `terminalStyles`)을 사용합니다. 절대 `const styles = {…}` 같은 충돌 이름을 쓰지 않습니다.
|
|
- 페이지 추가/이동 시 **13개 페이지의 상단 내비(`MAIN` 배열)와 href를 함께 갱신**해야 메뉴 일관성이 유지됩니다.
|
|
- 한글 파일명을 쓰므로, 링크/경로 수정 시 정확한 파일명을 확인하세요.
|