챗스테이션 UI·UX 기획 시안 — 기획 28 프론트엔드 아키텍처

프레임 · 채팅 컴패니언 · 앱 프레즌스

화면은 다섯 지역(전역 앱 바 · 좌 · 메인 · 우 · 상태 바)의 슬롯 시스템이고, 채팅은 다른 앱을 쓰는 동안 독(왼쪽 고정) / 플로팅(앱 위) / 오프 세 모드로 공존합니다. 아래 목업은 실제로 동작합니다 — 모드를 눌러보세요.

v1 · 2026-08-28 · 원본 design/frame-companion-mock.html · 근거: 기획 09(전역 바)·19(스택)·28(프레임·컴패니언·프레즌스) · 결정로그 8/27 골격

1. 앱 사용 중 — 채팅 컴패니언 3모드 인터랙티브

시나리오: 사용자가 데이터 앱(거래처 표)을 보는 중. 채팅은 같은 ChatSurface 1벌이 컨테이너만 바꿔 세 모습이 된다. 플로팅은 헤더를 잡아 끌 수 있고 ─ 버튼으로 말풍선이 된다.

컴패니언 모드

단축키 Ctrl+Shift+C 순환 · 모드는 기기별 기억

퓨퓨처인프라 ▾

ORG 전환

퓨퓨처인프라✓

나서순명 개인

스스토리베일

새 org 만들기

기본 앱

커넥트

설정

나

물류 운영방 ▾

성

민

재

성연 님이 데이터 · 거래처 표를 보는 중 · 나도 보는 중

성

성연

신규 거래처 3곳 등록 어디까지 됐어요?

나

# 거래처 표 여기서 정리하는 중이에요 — @재고봇 신규 3곳 상태 확인해줘

재

재고봇

지금 보고 계신 거래처 표에 신규 3곳을 행으로 추가해 뒀어요. 담당자 칸만 채워주시면 됩니다.

⌖ 환경 컨텍스트: 데이터 · 거래처 표 — 에이전트가 "지금 보는 화면"을 알고 답함

세종카고 행으로 안내할까요? (화면 안내 — 기본=제안 카드)

첨부

이미지

동영상

오디오

파일

메시지 입력 — @지목 · /명령·위젯 · #참조

↑

거래처 데이터 · 물류 베이스 · 표 보기 보기: 표 ▾ · 필터 2

거래처명

담당자

지역

상태

한빛물류

김성연

인천

거래 중

동서로지스

박민아

부산

거래 중

세종카고 신규

—

세종

검토

남도운송 신규

—

광주

검토

퍼스트포트 신규

—

평택

검토

재고봇이 화면을 이동했어요 되돌리기

물류 운영방 — 재고봇: 신규 3곳 행 추가 완료 (오프 모드: 토스트·뱃지·활성화 버튼, 자동 복귀 없음)

● 연결됨동기화 완료 12:40실행 중 잡 2 — 재고봇·리포트v0.1.0-mock

1전역 앱 바 48px — 왼쪽: org → 채팅(이름)+내장 앱 아이콘(스토리지·데이터, 호버 툴팁) → 구분선 → 설치된 앱 항상 노출 → ＋ 앱 추가. 두 줄 금지, 활성만 오렌지 (기획 09+28)
2채팅 알약 — 클릭=채팅을 메인으로, 우클릭/호버=컴패니언 모드 메뉴. 오프 모드일 땐 미읽음 뱃지가 여기 뜨고, 목업 우측 하단에 활성화 버튼이 나타난다
3시스템 영역(우측) — ⋯ 더보기(기본 앱: 커넥트·설정 수납) + 검색·마켓·알림·나. ⋯는 사용자 지시로 우측 배치 (기획 09+28)
4채팅 컴패니언 — 독 왼쪽/오른쪽 고정 360px(320~480 리사이즈, 앱 본문이 줄어듦) ⇄ 플로팅 380×560(드래그·스냅·버블 최소화) ⇄ 오프. 어느 모드든 같은 ChatSurface 1벌
5AppHost(메인) — 활성 앱 전체 화면. 서드파티는 iframe+postMessage, 독 전환 시 resize 이벤트 전달
6상태 바 26px — 연결·동기화·실행 중 잡·버전. 법적 고지는 홍보 사이트 소관(기획 10)

2. 채팅이 메인일 때 — 확정 골격(8/27) 매핑

채팅 앱이 메인 슬롯을 차지하면 컴패니언은 자동 해제된다(중복 마운트 금지). 4열 치수는 결정로그 8/27 확정값, α선반은 존폐 미결이라 빗금으로 표기.

퓨퓨처인프라 ▾

기본 앱

커넥트

설정

나

레일 64

채팅

물

물류 운영방재고봇: 신규 3곳 행 추가…

오후 2:31

방 관리 — 내가 방장

읽음 처리

상단 고정

알림 끄기

이름 변경 방장

멤버 초대

방장 권한 부여 방장

나가기 위임 후

삭제 방장만

회

회계팀결산봇: 금요일 오전 보고 예약됨

오후 1:0512

방 관리 — 멤버

읽음 처리

알림 끄기

나가기

성

성연@나 내일 일정 공유했어요

오전 11:42@ 1

대화 관리 — 1:1

읽음 처리

알림 끄기

나가기

방 목록 288

물류 운영방 멤버 4 · 공지 1

룸헤더 60

α 선반 44~54 — 존폐 미결 (폐기 시 이 줄 삭제, 결정로그 참조)

성

성연

/투표 올렸어요 — 위로 꽂아둘게요

나

확인!

메시지 스트림 · 본문 최소 560

첨부

이미지

동영상

오디오

파일

메시지 입력 — @지목 · /명령·위젯 · #참조

입력 88

참여자 4 위젯 2파일앱

나

나데이터 · 거래처 표 보는 중

성

성연데이터 · 거래처 표 보는 중

민

민아자리 비움

재

재고봇 Fable 5 · CLI 연동 · 잡 실행 중

부속 패널 260 (참여자·위젯·앱)

● 연결됨동기화 완료v0.1.0-mock

✓에이전트 구분 = 미묘한 마크 [8/28 결정 변경] — 큰 배지·색 구분은 여전히 없음. 대신 상태점 모양으로 구분(사람=●원, 에이전트=◆다이아)+이름 옆 소형 마크. 모델·연동 방식(Fable 5 · CLI 등)은 참여자 목록 서브라벨과 호버 카드에서 확인
✓앱 프레즌스 서브라벨 — "데이터 · 거래처 표 보는 중". 클릭=따라가기(앱이 딥링크 선언 시). org 안 한정·개인 토글로 끔

3. 앱 컨텍스트 프레즌스 — 방이 "내가 뭘 보는지" 안다

흐르는 경로 셸 → 소켓 → 3표면

셸이 활성 앱 변경 감지 → 프레즌스 페이로드에 activeApp(앱 id·표시명·앱 선언 컨텍스트 라벨) 실어 브로드캐스트
표면 ①참여자 목록 서브라벨 ②아바타 스택 툴팁 ③에이전트 '환경' 컨텍스트 층(기획 14) — "지금 보는 표에 추가해 둘게요"가 가능해지는 근거

경계 규칙 프라이버시

공유 범위 = 같은 org의 방 참여자까지만. 백오피스·타 org로 어떤 형태로도 안 흐름
컨텍스트 라벨은 앱이 manifest에 선언한 문자열만(화면 자유 캡처 금지)
개인 설정으로 끔 — 끄면 상태점만. 기본 켬

컴패니언 상태 규칙 3모드

채팅이 메인이 되면 컴패니언 자동 해제, 나가면 직전 모드 복귀
모드·위치·폭 = 사용자×기기 기억 + 앱별 오버라이드("캔버스에선 오프")
멘션이 와도 모드를 바꾸지 않는다 — 뱃지·토스트·버블 흔들림까지만(자동 팝업 금지)

4. 치수·기본값 스펙

항목	값	비고
전역 앱 바	높이 48	두 줄 금지, 넘치면 ⋯ 더보기 (기획 09)
컴패니언 · 독	폭 360 (리사이즈 320~480) · 왼쪽/오른쪽 선택	메인 옆 삽입(좌우 선택 기억), AppHost에 resize 전달
컴패니언 · 플로팅	380×560, 스냅, z=companion	드래그 중 iframe 위 투명 오버레이(포인터 유실 방지) · 최소화=버블 52
컴패니언 · 오프	우측 하단 활성화 버튼 52px	알림=알약 뱃지+토스트, 복귀=활성화 버튼(이전 모드 기억) · 자동 복귀 없음
기본 모드	데스크톱=독 · 태블릿=플로팅 · 모바일=없음	모바일은 전체 전환+버블 알림 (기획 19)
채팅=메인 골격	레일 64 · 방목록 288 · 본문 ≥560 · 참여자 260	8/27 확정 · α선반 44~54는 존폐 미결
상태 바	높이 26, 접기 가능	연결·동기화·실행 중 잡·버전
컴포넌트 계층	토큰→프리미티브→패턴→도메인→셸 (5계층)	토큰 밖 값 금지 · 계층 하향 참조만 · 문자열 하드코딩 제로 (기획 28 §2)