App UI

App UI는 캔버스 위에 놓인 앱 창 하나를 사용자가 어떻게 알아보고 다루는지 정한다. 앱 내부 기능을 설계하는 문서가 아니라, 앱 헤더, 오브젝트 툴바, 앱 본문이 서로 어떤 기준으로 나뉘는지 정리한다.

핵심 결론

앱 헤더는 앱 자체를 다루고, 오브젝트 툴바는 앱을 캔버스 안에서 다룬다.

앱마다 본문 기능은 달라도 사용자는 같은 방식으로 앱을 알아보고, 보기 모드를 바꾸고, 앱 내부 메뉴에 들어가야 한다. 집중 모드·최대화·최소화처럼 앱을 보는 방식은 항상 보이는 앱 헤더에 두고, 앞뒤 순서·핀보드·Stage·닫기처럼 앱을 캔버스 위에서 옮기고 배치하고 제거하는 조작은 선택했을 때 뜨는 오브젝트 툴바에 둔다.

화면 기준

아래 예시는 캔버스 전체가 아니라 실제로 사용할 앱 창 하나를 확대해서 본 것이다. 앱 본문은 특정 앱 구현을 넣지 않고 영역만 표시하며, 앱 헤더와 오브젝트 툴바의 역할 차이를 함께 검수한다.

앱 이름
더보기 메뉴 앱 정보 앱 설정 권한 확인 도움말 앱별 옵션

현재 구현

앱 창 구조

앱은 캔버스 위 오브젝트로 놓인다. 타이틀바(아이콘 + 이름) + 본문 + 8방향 리사이즈 핸들을 가진다.

헤더 버튼

현재 헤더에는 집중 모드, 최대화(브라우저 창 전체), 최소화, 더보기가 있다. 최소화는 내용을 접어 타이틀바만 제자리에 남기고, 복원 버튼과 헤더 더블클릭으로 다시 펼친다.

앞뒤 순서

앱을 클릭하면 맨 앞으로 오고, 컨텍스트 메뉴로 맨 앞/뒤 수동 조정이 된다.

닫기와 삭제

현재 닫기(X)는 캔버스에서 제거한다. "닫아도 앱 리스트에는 유지"와 "완전 삭제"의 분리는 아직 정식 구현 전이다.

제품 판단

헤더와 오브젝트 툴바의 역할을 가른다 — 헤더는 앱 자체를 다루고, 툴바는 앱을 캔버스 안에서 다룬다.

현재 구현은 최소화·최대화·집중 모드가 헤더와 툴바 양쪽에 중복으로 보였다. 이는 “무엇을 어디서 조작하는가”를 흐리게 하므로, 보는 방식은 헤더로, 캔버스 배치·제거는 툴바로 모은다.

현재 구현 제품 방향과의 관계
보기 버튼이 헤더·툴바에 중복 방향과 어긋남 → 보는 방식(집중 모드·최대화·최소화)은 헤더, 캔버스 조작(앞뒤·핀보드·Stage·닫기)은 툴바로 분리한다.
닫기가 헤더에 노출 실수로 닫힐 위험 → 선택했을 때 뜨는 툴바로 옮겨 의도적 조작으로 둔다.
최소화 = 헤더만 남김(제자리) 유지 — 앱이 캔버스 오브젝트라는 성격과 맞다. 작업표시줄로 사라지는 방식이 아니다.

UX 기준

표면 역할 담는 것 (순서)
앱 헤더 (항상 보임) 앱을 알아보고, 보는 방식을 바꾸고, 앱 내부로 들어간다 좌측에 앱 이름 / 우측에 집중 모드 → 최대화 → 최소화 → ⋯더보기
오브젝트 툴바 (선택 시 등장) 앱을 캔버스 위에서 옮기고 배치하고 제거한다 앞뒤 순서 → 핀보드 → Stage → │ → 닫기
앱 본문 앱별 실제 기능 영역 App UI는 경계만 정하고 내용은 앱별 구현
  1. 헤더는 항상 보이고, 오브젝트 툴바는 앱을 선택했을 때만 나타난다. 툴바 전체를 클릭하면 툴바 역할 설명이 보인다.
  2. 오브젝트 툴바 기본 표시는 Floating(선택한 앱 박스 위/아래에 붙음)이고, 최대화·풀스크린에서는 Inline으로 둔다.
  3. 최소화는 앱을 제거하지 않고 헤더만 남겨 접는다. 접힌 헤더를 클릭하거나 복원 버튼으로 제자리에서 다시 펼친다.
  4. 닫기는 캔버스에서 앱을 치우는 동작이며, 실수 방지를 위해 선택 후 툴바에서만 다룬다.
  5. 핀보드 모드에서는 최대화·집중 모드를 두지 않고, 더보기에 원본 추적·핀 해제를 둔다.

상태

상태 화면에서
기본 헤더 + 본문. 아무것도 선택하지 않으면 강조 없음.
선택됨 오브젝트 툴바가 나타나고, 선택한 요소만 강조된다.
최소화됨 헤더만 제자리에 남고 복원 버튼이 보인다.
보기 전환 (집중 모드 · 최대화) 앱을 더 크게 / 집중해서 보는 상태. 세부 동작은 Mode에서 정한다.
로딩 · 오류 본문 로딩 표시(스켈레톤/스피너), 오류는 인라인 또는 스낵바로 보여준다. (Feedback 패턴)
보기 전용 · 차단 권한·사용권이 부족하면 조작이 비활성(보기 전용)이거나 열 수 없음(차단 + 이유). Access Model의 결과 모드를 따른다.
복원 다시 열 때 위치·크기·최소화 여부가 이어진다. (Workspace State)

후속 / 넘기는 기준

항목 넘기는 것 연결
보기 모드 세부 집중 모드 · 최대화 · Stage의 정확한 동작과 차이 Mode
닫은 앱 복귀 닫기=리스트 유지 / 완전 삭제 구분, 닫은 앱을 다시 여는 위치 Dock App Runtime Flow
핀보드 핀보드가 별도 표면인지 캔버스 보조 보기인지, 어떤 앱을 보낼 수 있는지 Canvas
툴바 표시 풀스크린 Inline 방식, 단일/다중 선택 시 툴바 항목 App UI 화면 기준
앱 본문 앱별 본문 UI Tool Support Flow