13 KiB
아리 (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를 함께 갱신해야 메뉴 일관성이 유지됩니다. - 한글 파일명을 쓰므로, 링크/경로 수정 시 정확한 파일명을 확인하세요.