# Fricle UX UI 다이어그램 시각 자료 모음. 각 UI 요소의 레이아웃, 상태별 변화를 한눈에 볼 수 있도록 정리. 세부 동작 규칙은 영역 파일 (= [02-canvas](./02-canvas/00-CANVAS.md) / [03-app](./03-app/00-APP.md) / [04-mode](./04-mode/00-MODE.md) / [05-menubar](./05-menubar/00-MENUBAR.md) / [06-permission](./06-permission/00-PERMISSION.md) / [07-billing](./07-billing/00-BILLING.md) / [08-collaboration](./08-collaboration/00-COLLABORATION.md) / [09-settings](./09-settings/00-SETTINGS.md) / [10-feedback](./10-feedback/00-FEEDBACK.md)) 참조. --- ## 1. 전체 워크스페이스 레이아웃 ``` ┌──────────────────────────────────────────────────────────────────────┐ │ 메뉴바 (auto-hide, 설정에서 고정 가능) │ │ [로고][WS명][참여자] [트레이: 🗺📍🗂️⚙️🔔💬] [시간 · 프로필 · 📌] │ ├──────────────────────────────────────────────────────────────────────┤ │ │ │ │ │ │ │ │ │ 캔버스 (World 레이어) │ │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │ 앱1 │ │ 앱2 │ │ 앱3 │ │ │ └────────┘ └────────┘ └────────┘ │ │ │ │ ┌──────────┐ │ │ │ 미니맵 │ │ │ │ (상시) │ │ │ └──────────┘ │ │ │ │ │ ├──────────────────────────────────────────────────────────────────────┤ │ 독 (하단 고정, 설정에서 auto-hide 가능) │ │ [시작][검색][선택][팬] | [📌][📌][📌][📌] │ │ ━ · (dot: 포커스=긴강조 / 실행=짧은기본) │ └──────────────────────────────────────────────────────────────────────┘ ``` --- ## 2. 앱 타이틀바 — 모드별 ### 2.1 캔버스 일반 ``` ┌──────────────────────────────────────────┐ │ [앱아이콘] 메모 [─][□][⌂][⋮] │ ├──────────────────────────────────────────┤ │ 앱 콘텐츠 영역 │ └──────────────────────────────────────────┘ ─ 최소화 / □ 최대화 / ⌂ 집중 모드 / ⋮ 더보기 ``` ### 2.2 최소화 상태 ``` ┌──────────────────────────────────────────┐ │ [앱아이콘] 메모 [⤢][⋮] │ ← 타이틀바만, 별도 복원 버튼 명시 └──────────────────────────────────────────┘ ⤢ open_in_full (복원 — 헤더 더블클릭으로도 가능하지만 발견성 위해 버튼 유지) ``` ### 2.3 최대화 상태 — 결정됨 브라우저 창 전체로 채움 (스크린 꽉 채움). 집중 모드(블러 백드롭 + 뷰포트 일부) / 스테이지(독립 화면 + 작업 영역)와 명확히 다름. ``` ╔══════════════════════════════════════════╗ ║ [앱아이콘] 메모 [─][⧉][⌂][⋮] ║ ╠══════════════════════════════════════════╣ ║ ║ ║ 앱 콘텐츠 ║ ║ (브라우저 창 전체) ║ ║ ║ ╚══════════════════════════════════════════╝ ⧉ fullscreen_exit (복원) 헤더 더블클릭으로도 토글 가능 ``` ### 2.4 집중 모드 (= 독 오버레이 UI) ``` ╔══════════════════════════════════════════╗ ║ [앱아이콘] 메모 [📌][✕] ║ ╠══════════════════════════════════════════╣ ║ 앱 콘텐츠 ║◀── 모서리 드래그로 리사이즈 ╚══════════════════════════════════════════╝ (오버레이는 불가, 집중 모드만) └ 배경: 블러 + 어둠 📌 핀보드 추가 / ✕ 종료 리사이즈 결과는 모드 세션 한정 — 종료 시 캔버스 원본 크기 유지 ``` ### 2.5 스테이지 모드 (Mac 스타일 독립 모드) > 자세한 다이어그램: [04-mode/045-stage-mode-redesign/01-DIAGRAMS.md](./04-mode/045-stage-mode-redesign/01-DIAGRAMS.md) > 인터랙션/결정/구현 룰: [04-mode/045-stage-mode-redesign/02-SPEC.md](./04-mode/045-stage-mode-redesign/02-SPEC.md) ``` 진입 (3가지): Alt+S 단축키 / ObjectToolbar 더보기 → "Stage 모드에서 열기" / 메뉴바 (추후) 진입 후 — 캔버스 대체 화면 (블러 X, WS 배경 그대로): ┌──────────────────────────────────────────────────────────┐ │ Stage 메뉴바 [더미]… [📌][✕] │ ← auto-hide ├──────────────────────────────────────────────────────────┤ │ ┌────┐ ┌──────────────────────────────────┐ │ │ │썸네│ │ 📝 메모 (Stage 전용 타이틀바) ─□✕│ │ │ │ ● │ ├──────────────────────────────────┤ │ │ │이름│ │ 앱 컨텐츠 │ │ │ └────┘ └──────────────────────────────────┘ │ │ ┌────┐ │ │ │썸네│ 워크스페이스 배경 │ │ │이름│ │ │ └────┘ │ │ ↑ Mac 스타일 떠있는 카드 (Deck — 사이드바 패널 X) │ │ 기본 80px 화면 밖, 좌측 호버 영역 진입 → 슬라이드 인 │ │ 📌 핀 ON → 항상 펼침 (work area 좌측 마진 양보) │ │ ● = 활성 인디케이터 (D안) │ ├──────────────────────────────────────────────────────────┤ │ Dock [앱1][앱2][앱3] [📦 0] │ └──────────────────────────────────────────────────────────┘ 배치 정책: Deck 더블클릭 → 자동 (비어있음→single, 1개→half-h, 2개+→가이드 오버레이) Deck DnD → 자유 위치 드롭 (480x360 기본) 9종 프리셋: single/half-h/half-v/2-1-h/1-2-h/triple-right/triple-left/triple-h/quad 레이아웃 변경 수동: Ctrl+L 또는 Deck 상단 dashboard_customize 타이틀바 인터랙션: ─ 최소화 → Deck "최소화" 영역 □ 최대화 → 작업 영역 전체 ✕ 닫기 → 캔버스 앱: Deck 미배치 / Stage 전용 앱: Archive 더블클릭 = ✕ 동일 (닫기) 우클릭 → Stage 컨텍스트 메뉴 (닫기 / 인스턴스 종료) 종료 (캔버스 복귀): Stage 메뉴바 [✕] / ESC / Alt+S 토글 배치는 localStorage에 즉시 저장 (다음 진입 시 복원) ``` ### 2.6 핀보드 레이어 ``` ┌──────────────────────────────────┐ │ [앱아이콘] 메모 (핀) [─][⋮] │ ├──────────────────────────────────┤ │ 앱 콘텐츠 │ └──────────────────────────────────┘ 최대화/집중 모드 없음 더보기에 "원본 추적", "핀 해제" 추가 ``` --- ## 3. 독 구조 **캔버스 앱 전용** (시스템 앱은 트레이에 있음) ``` [시작][검색][선택][팬] | [📌 메모][📌 투두][📌 샌드박스] ━ · (포커스) (실행 중) 좌측: 시스템 버튼 (시작 메뉴, 퀵서치, 포인터 모드) 우측: 핀된 캔버스 앱 (드래그로 재배치 가능, 하단 dot으로 상태 표시) ``` ### 3.1 dot 상태 표시 ``` [📌] [📌] [📌] ━ · (없음) 포커스됨 실행 중 미실행 (긴 강조) (짧은 기본) ``` ### 3.2 독 클릭 시 흐름 ``` [📌 메모] 클릭 │ ├─ 인스턴스 없음 → 새 인스턴스 생성 (뷰포트 중앙) │ ├─ 인스턴스 1개 → 오버레이 (캔버스 방향에서 날아옴) │ └─ 인스턴스 여러 개 → 미리보기 (Preview) → 썸네일 선택 → 오버레이 └─ [+ 새로 열기] ``` ### 3.3 인스턴스 미리보기 (Preview) (개수별 UI 변경) **5개 이하 — 썸네일 가로 나열:** ``` ┌──────────────────────────────────────────────────────┐ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────────────┐ │ │ │ 회의록 │ │프로젝트 │ │ 개인 │ │ │ │ │ │ 메모 │ │아이디어 │ │ 메모 │ │ + 새로 열기 │ │ │ └────────┘ └────────┘ └────────┘ └────────────────┘ │ │ [ 메모 ] │ └──────────────────────────────────────────────────────┘ ``` **6개 이상 — 목록 리스트 (작은 썸네일):** ``` ┌──────────────────────────────────────┐ │ [ 메모 ] [ + ] │ ├──────────────────────────────────────┤ │ [📝] 회의록 메모 │ │ [📝] 프로젝트 아이디어 │ │ [📝] 개인 메모 │ │ [📝] 할일 정리 │ │ [📝] 주간 회고 │ │ [📝] 기획 브레인스토밍 │ │ ... │ └──────────────────────────────────────┘ ``` - 미리보기 (Preview) 끝의 `+` 버튼은 개수와 무관하게 항상 표시 ### 3.4 독 아이콘 드래그 → 캔버스 ``` [📌 메모] [📌 메모] │ │ │ (드래그) └─╮ ↓ ↓ ┌──────────────────────────────────┐ │ │ │ 캔버스 ┌──┐ │ │ │메모│ │ ← 놓은 위치에 새 인스턴스 생성 │ └──┘ │ └──────────────────────────────────┘ ``` --- ## 4. 메뉴바 구조 ``` ┌─ 좌측 ─────────────┬───── 트레이 ─────┬─ 우측 상태 ────┐ │ │ │ │ │ [로고][WS명][참여자] │ [시스템 앱들] │ [시간][프로필][📌]│ │ │ │ │ └────────────────────┴──────────────────┴────────────────┘ 로고=홈 트레이 = 시스템 앱 시간: 현재 시각 WS명=전환 (미니맵, 웨이포인트, 프로필: 계정 메뉴 아바타=프로필 앱 관리자, 설정, 📌: 메뉴바 고정 토글 알림, 채팅 등) 트레이 기본 6개 앱: 🗺️ 미니맵 | 📍 웨이포인트 | 🗂️ 앱 관리자 | ⚙️ 설정 | 🔔 알림 | 💬 채팅 설정 → 트레이에서 커스텀 가능 (on/off, 앱 매니저 추가) ``` ### 4.1 트레이 히든 기능 on/off ``` [히든 on] — ⠿ 핸들 + 접기/펼치기 버튼 표시 [앱1][앱2]⠿》─│ │└── 》: 펼치기 버튼 (접힌 앱 펼치기) └─── ⠿: 핸들 (드래그로 경계 조절) [히든 off] — 모든 앱이 그냥 나열됨 (핸들/버튼 없음) [앱1][앱2][앱3][앱4][앱5] ``` ### 4.2 연결 상태 표시 ``` 정상: [로고][워크스페이스명][참여자] ↑ (평소엔 표시 없음) 연결 끊김: [로고][워크스페이스명 ⚠️][참여자] ↑ 상태 아이콘/뱃지 ``` --- ## 5. 시작 메뉴 ### 5.1 홈 뷰 (PC 기본) ``` 독 시작 버튼 클릭 → 독 위에 플로팅 패널 (최대 640×600px) ┌─────────────────────────────────────────┐ │ 🔍 앱 검색 │ ← 검색창 (입력 시 전체 앱 뷰로) ├─────────────────────────────────────────┤ │ 고정됨 [전체 앱 >] │ ← 헤더 + 전체 앱 진입 │ ┌──┐┌──┐┌──┐┌──┐┌──┐┌──┐ │ │ │📝││✅││🧪││📊││🔗││📦│ │ ← 6열 그리드 │ └──┘└──┘└──┘└──┘└──┘└──┘ │ 드래그로 재배치 │ 메모 투두 샌박 ... │ ├─────────────────────────────────────────┤ │ 최근 사용 │ │ ┌─────────────────┐ ┌─────────────────┐ │ │ │ [📝] 메모 │ │ [✅] 투두 │ │ ← 2열 가로배치 리스트 │ └─────────────────┘ └─────────────────┘ │ ├─────────────────────────────────────────┤ │ [👤 닉네임] [⚙️] [🔔] [⋯] │ ← 하단 바 └─────────────────────────────────────────┘ ▲ ▲ ▲ ▲ 프로필 메뉴 설정 알림 더보기 메뉴 (계정 변경/ (멤버 관리/워크스페이스 프로필 수정/ 전환 최대 5개/대시보드/ 로그아웃) 도움말) ⚙️ 설정, 🔔 알림 = 트레이 앱과 의도된 중복 (메뉴바 auto-hide 환경에서 안정적 진입) 🔔 알림에 새 알림 있으면 뱃지 표시 ⋯ 더보기에 초대 대기 있으면 뱃지 표시 ``` ### 5.2 전체 앱 뷰 (별도 화면 전환) ``` [← 뒤로] 🔍 앱 검색 ───────────────────────────────── 빌트인 앱 • 메모 • 투두 • 샌드박스 ... ───────────────────────────────── 마켓플레이스 앱 (검색 시에만 표시) • [커스텀 앱 1] • [커스텀 앱 2] ``` ### 5.3 앱 우클릭 / 롱프레스 컨텍스트 메뉴 ``` 앱 아이콘 우클릭 (또는 500ms 롱프레스): ┌──────────────────────┐ │ 시작 메뉴 고정/해제 │ │ 독 고정/해제 │ └──────────────────────┘ ``` ### 5.4 모바일 (breakpoint < sm) ``` ┌──────────────────────────┐ │ [✕] │ ← 상단 닫기 버튼 (모바일만) ├──────────────────────────┤ │ 🔍 앱 검색 │ ├──────────────────────────┤ │ (PC와 동일 구성) │ │ ... │ └──────────────────────────┘ 전체 화면 차지 + safe area 패딩 ``` --- ## 6. 미니맵 ### 6.1 상시 표시 (우하단) ``` ┌──────────┐ │ │ │ □ □ │ ← 모든 오브젝트 │ ┌┐ │ 현재 뷰포트는 테두리 │ □└┘ │ │ │ ├──────────┤ │ 100% Fit│ ← 줌 + Fit 버튼 └──────────┘ ``` ### 6.2 메뉴바 드롭다운 ``` ┌──────────────────────┐ │ [미니맵 인라인] │ │ │ ├──────────────────────┤ │ ▢ 항상 표시 │ ├──────────────────────┤ │ 줌 인/아웃/리셋 │ │ 50% 75% 100% 150% ···│ │ 화면에 맞춤 (Fit) │ ├──────────────────────┤ │ ▢ 그리드 표시 │ └──────────────────────┘ ``` --- ## 7. 웨이포인트 드롭다운 ``` ┌──────────────────────────┐ │ 현재 위치 저장 │ ← 최상단 액션 ├──────────────────────────┤ │ [개인] │ │ • 코드 영역 [단축키]│ ← 항목 우클릭: 삭제/이름 변경 │ • 문서 영역 [단축키]│ 단축키 옆 클릭 시 지정/변경 │ • 회의실 영역 [단축키]│ ├──────────────────────────┤ │ [팀] │ │ • 회의 영역 [단축키]│ ← 팀 웨이포인트 │ • 스프린트 보드 [단축키]│ (단축키는 각자 개인 매핑) └──────────────────────────┘ ``` --- ## 8. 설정 구조 > ⚠️ **재설계 예정** — 사이드바 카테고리 + 각 옵션 전면 최적화 작업 진행 예정. > 아래 다이어그램은 **현재 구현 기준**이며 결정된 미래 구조 아님. ### 8.1 PC 레이아웃 ``` ┌──────────────────────────────────────┐ │ 설정 [← 뒤로] [✕] │ ├──────────┬───────────────────────────┤ │ 사이드바 │ 상세 영역 │ │ │ │ │ 계정 │ [현재 페이지 콘텐츠] │ │ 테마 │ │ │ 외관 │ │ │ 배경 │ │ │ 효과 │ │ │ 그리드 │ │ │ 단축키 │ │ │ 메뉴바 │ │ │ 트레이 │ │ └──────────┴───────────────────────────┘ ``` ### 8.2 모바일 레이아웃 ``` ┌──────────────────────┐ │ 설정 [✕] │ ├──────────────────────┤ │ > 계정 │ │ > 테마 │ │ > 외관 │ ← 전체화면 리스트 │ > 배경 │ │ ··· │ └──────────────────────┘ ↓ 카테고리 선택 ┌──────────────────────┐ │ [← 뒤로] 계정 │ ├──────────────────────┤ │ 프로필 편집 │ │ 아바타 │ │ 언어 │ │ 로그아웃 │ └──────────────────────┘ ``` ### 8.3 설정 적용 범위 구조 ``` [Admin 설정] ├─ 워크스페이스 기본값 (배경=다크블루, 테마=모던) │ ↓ 팀원 초대 시 기본 적용 │ └─ 각 설정별 "개인 설정 허용" 옵션 ├─ 허용됨 → 팀원이 개인 오버라이드 가능 └─ 제한됨 → 기본값 강제 [팀원 A] [팀원 B] 개인 오버라이드 기본값 사용 배경=라이트 배경=다크블루 (Admin 설정) ``` --- ## 9. 오버레이 / 집중 모드 / 스테이지 모드 비교 독 오버레이 / 집중 모드 / 스테이지 모드 — 진입 경로와 UI가 서로 다른 별개의 상태. ### 9.1 상태 전환 흐름 ``` [캔버스 일반] │ ├─ 독 클릭 → [오버레이] ──빈 공간 클릭──→ [캔버스 일반] │ │ │ └─ 집중 모드 진입 ─→ [집중 모드] │ ├─ 타이틀바 집중 모드 버튼 / Ctrl+Shift+S → [집중 모드] │ ├─ ObjectToolbar 더보기 → "Stage 모드에서 열기" → [스테이지 모드] └─ Alt+S 단축키 → [스테이지 모드] (캔버스/집중과 별개 진입) │ ├─ 진입 시 활성 집중 모드 자동 해제 (배타) ├─ Stage 중 집중 모드 enter() 차단 │ └─ ESC / Stage 메뉴바 [✕] / Alt+S 토글 → [캔버스 일반] ``` ### 9.2 UI 외형 비교 | 모드 | 배경 | 다른 앱 | 종료 방식 | |------|------|---------|---------| | 캔버스 일반 | 투명 (캔버스 그대로) | 다 보임 | — | | 오버레이 | 블러 + 어둠 | 블러 뒤에 숨김 | **빈 공간 클릭**으로 즉시 | | 집중 모드 | 블러 + 어둠 | 블러 뒤에 숨김 | 종료 버튼 / Ctrl+Shift+S | | 스테이지 모드 | **WS 배경 그대로 (블러 X)** | **canvas-layers visibility:hidden** (안 보임) | Stage 메뉴바 [✕] / ESC / Alt+S 토글 | > 스테이지 모드는 캔버스 위 오버레이가 아닌 **캔버스 대체 화면**. 좌측 Mac 스타일 Deck + Stage 전용 메뉴바 + Stage 전용 타이틀바. ### 9.3 오버레이가 날아오는 방향 (개념도) ``` **핵심: 위치(뷰포트 안/밖)가 아니라 "방향"이 기준.** 같은 우상단 방향이면 안에 있든 밖에 있든 동일하게 ↙로 날아와 안착. [케이스 1] 원래 앱이 뷰포트 안 우상단에 있을 경우: ┌──────────────────────────────────┐ │ ◻ │ ← 원래 앱 위치 (뷰포트 안) │ ↙ │ │ ↙ │ │ 현재 뷰포트 ↙ │ │ ↙ │ │ ╔═══════════╗ ↙ │ │ ║ 오버레이 ║◀ │ │ ║ (안착) ║ │ │ ╚═══════════╝ │ └──────────────────────────────────┘ [케이스 2] 원래 앱이 뷰포트 밖 우상단에 있을 경우: ◻ ← 원래 앱 위치 (뷰포트 밖) ↙ ┌──────────────────────────────────┐ ↙ │ ↙ │ │ ↙ │ │ 현재 뷰포트 ↙ │ │ ↙ │ │ ╔═══════════╗ ↙ │ │ ║ 오버레이 ║ ◀ │ │ ║ (안착) ║ │ │ ╚═══════════╝ │ └──────────────────────────────────┘ 진입: 우상단 방향 → 뷰포트 중앙으로 날아옴 (↙) 종료: 진입의 반대 방향으로 돌아감 (↗) 다른 방향(좌상단/좌하단/우하단)도 같은 원리로 적용 ``` --- ## 10. 인스턴스 리스트 (앱 내부 핀보드 진입) **크기 적응형.** 두 가지 표현 — 넓을 때 사이드 패널, 좁을 때 모드 전환 (Windows 스티커 메모 패턴). ### 10.1 넓을 때 — 사이드 패널 (편집 + 리스트 동시) ``` ┌─────────────────────────────────┬────────────────────┐ │ 메모 앱 │ 내 메모 전체 [+새] │ ← 사이드 패널 │ ┌─────────────────────────────┐ ├────────────────────┤ │ │ │ │ 📝 회의록 메모 📌 │ │ │ 회의록 메모 │ │ 📝 프로젝트 아이디어│ │ │ (에디터) │ │ 📝 개인 메모 📌핀됨│ │ │ │ │ 📝 ... │ │ └─────────────────────────────┘ │ │ └─────────────────────────────────┴────────────────────┘ ▲ 분할선 드래그로 비율 조정 (인스턴스별 기억) ``` ### 10.2 좁을 때 — 모드 전환 (편집 ↔ 리스트, 한 번에 하나) ``` [편집 모드] [리스트 모드] ┌────────────────────────┐ ┌────────────────────────┐ │ 메모 앱 │ │ 메모 리스트 [+새] │ │ ┌────────────────────┐ │ ☰ → │ ┌────────────────────┐ │ │ │ ☰ ←── 좌상단 list │ │ │ │ 📝 회의록 메모 📌 │ │ │ │ 아이콘 클릭으로 │ │ ←─메모 │ │ 📝 프로젝트 │ │ │ │ 리스트 모드 진입 │ │ 클릭 │ │ 📝 개인 메모 📌핀됨 │ │ │ │ │ │ │ │ 📝 ... │ │ │ │ 회의록 메모 (편집) │ │ │ └────────────────────┘ │ │ └────────────────────┘ │ └────────────────────────┘ └────────────────────────┘ ☰ list 아이콘은 컨텐츠 영역 좌상단에 위치 (타이틀바 아님) → 앱마다 리스트 모드 유무가 다르므로 타이틀바 일관성 보호 토글이 아니라 화면 통째로 모드 전환 (Windows 스티커 메모 패턴) ``` ### 10.3 동작 규칙 - **자동 임계값**: 앱별 가이드라인 (예: 폭 600px). 고정값 아님 - **모드 기억 (LiveDoc)**: 좁을 때 마지막 본 모드(편집/리스트)를 인스턴스별로 저장. 새 인스턴스 생성 시 마지막 모드로 시작 - **넓을 때 분할 비율**: 사용자가 드래그한 비율도 인스턴스별 기억 - **핀 조작**: 어느 모드든 리스트에서 직접 가능 (현재 편집 중이 아니어도 OK) - **진입 위치**: ☰ list 아이콘은 컨텐츠 영역 좌상단 (타이틀바 아님) - app-kit 기반 --- ## 11. 협업 UI > 개념 스케치. 세부 다이어그램은 추후 보강. ``` ┌──────────────────────────────────────────┐ │ 메뉴바 │ │ [로고][WS명][👤👤👤+2] [🗺📍🗂️⚙️🔔💬] [시간·프로필·📌] │ │ ↑ ↑ │ │ 접속자 표시 트레이에 알림/채팅 │ ├──────────────────────────────────────────┤ │ 캔버스 │ │ 👆 다른 사용자 커서 │ │ │ │ ┌────────┐ │ │ │ 앱 │ @ 태그/멘션 + 이모지 반응 │ │ │ │ │ │ └────────┘ │ │ │ └──────────────────────────────────────────┘ ``` --- ## 12. 캔버스 우클릭 컨텍스트 메뉴 ``` [캔버스 빈 공간 우클릭] ┌──────────────────┐ │ 앱 추가 > │ ──┐ │ ───────── │ │ │ 설정 │ │ │ 테마 변경 │ │ │ 배경 변경 │ │ └──────────────────┘ │ ↓ ┌──────────────────┐ │ Memo │ ← 시작 메뉴 핀 1번 │ Todo │ ← 시작 메뉴 핀 2번 │ Sandbox │ ← 시작 메뉴 핀 3번 │ JsonViewer │ ← 시작 메뉴 핀 4번 │ ShortLink │ ← 시작 메뉴 핀 5번 │ ───────── │ │ 더 보기 > │ ──→ [전체 앱 목록 서브메뉴] └──────────────────┘ 시작 메뉴 핀 순서가 우선순위. 5개 미만 핀이면 핀된 만큼만 표시. ``` --- ## 13. 피드백 시스템 ### 13.1 에러 표시 위치 (예시) > 아래는 예시 표현. 실제 구현 시 앱/상황에 맞게 변형 가능. ``` 가벼운 에러 (스낵바): ┌──────────────────────────────────────┐ │ │ │ (화면 내용) │ │ │ │ │ │ ┌─────────────────────────┐ │ │ │ 저장 실패. 재시도 중... │ [X] │ ← 하단 스낵바 │ └─────────────────────────┘ │ └──────────────────────────────────────┘ 중요 에러 (모달): ┌──────────────────────────────────────┐ │ │ │ (어두워진 배경) │ │ │ │ ┌──────────────┐ │ │ │ ⚠️ 권한 없음 │ │ │ │ │ │ │ │ [확인] │ │ │ └──────────────┘ │ │ │ └──────────────────────────────────────┘ 인라인 에러: ┌──────────────────────────────────────┐ │ 이름: [________________] │ │ ❌ 이미 존재하는 이름입니다. │ └──────────────────────────────────────┘ ``` ### 13.2 로딩 표시 (예시) > 아래는 예시 표현. 실제 구현 시 앱/상황에 맞게 변형 가능. ``` 버튼 스피너: [ 저장 중... ⌛ ] 스켈레톤 (화면 전환): ┌──────────────────────────────────────┐ │ ░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░ │ └──────────────────────────────────────┘ 프로그레스바 (진행률 있는 작업): 파일 업로드: ████████░░░░░░ 53% 중앙 스피너 (불명확한 긴 작업): ┌──────────────────────────────────────┐ │ │ │ ⌛ │ │ 연결 중... │ │ │ └──────────────────────────────────────┘ ``` --- ## 14. 퀵서치 > 결정된 범위(진입점/카테고리/행 구성)만 다이어그램화. > 세부 동작은 추후 보강. ### 14.1 진입과 기본 레이아웃 ``` 진입: 독 검색 버튼 / 단축키 ┌─────────────────────────────────────┐ │ 🔍 검색... │ ← 자동 포커스 ├─────────────────────────────────────┤ │ 앱 │ │ ┌──┐ Memo │ │ │📝│ 메모 작성 앱 │ │ └──┘ │ │ ┌──┐ Todo │ │ │✅│ 할 일 관리 │ │ └──┘ │ ├─────────────────────────────────────┤ │ 인스턴스 │ │ ┌──┐ memo │ │ │썸│ 회의 안건 정리 ... │ │ └──┘ │ │ ┌──┐ memo │ │ │썸│ 장보기 리스트 ... │ │ └──┘ │ ├─────────────────────────────────────┤ │ 설정 │ │ ⚙️ 배경 색상 │ │ ⚙️ 단축키 │ └─────────────────────────────────────┘ 카테고리: 앱 / 인스턴스 / 설정 행 구성: [썸네일 또는 아이콘] [이름] [내용 한 줄 truncate] (스테이지 모드는 별도 가이드 오버레이 + Deck DnD/더블클릭 사용 — §2.5 참조) ``` ### 14.2 카테고리별 클릭 동작 | 카테고리 | 클릭 시 | |----------|--------| | 앱 | 새 인스턴스 생성 (캔버스에 배치) | | 인스턴스 | 해당 앱 오버레이로 띄움 (포커스) | | 설정 | 해당 설정 페이지 열기 | ### 14.3 확장 예정 ``` 앱 내용까지 전체 텍스트 검색 (범위/성능 고려 필요) → 인스턴스 결과에 매칭된 본문 스니펫 함께 표시 ```