UX UI Overview

Pipeline에서 정리한 흐름이 실제 화면, 메뉴, 캔버스, 앱, 모드, 피드백으로 어떻게 드러나는지 관리한다.

UX 원칙

행동 기반

문장은 “사용자가 X 하면 Y가 일어난다”를 기준으로 쓴다.

프로토타입 검증

눈으로 확인해야 하는 결정은 HTML 프로토타입으로 만들고, 수정사항은 UX 본문으로 되돌린다.

구현보다 제품 기준 먼저

코드 제약이 발견되면 즉시 UI를 바꾸지 않고 product 본문에 피드백한다.

UX UI 다이어그램

기준 배치 표현 판정 탐색 배포 파일 반영 Base 01 Identity product why Workspace 02 + 11 canvas + work Object 03 + 04 app + mode Chrome 05 + 10 menu + feedback Access 06 + 07 access + pay Ecosystem 12 Marketplace marketplace Builder 13 Deploy publish tool Files 14 Drive file UX
Base 01 Identity Fricle이 무엇이고 왜 캔버스 구조인지 기준을 둔다.
Workspace 02 Canvas + 11 Workspace 작업 공간, 배치, 이동, 워크스페이스 진입을 담당한다.
Object 03 App + 04 Mode 앱 오브젝트, 실행 상태, 포커스, 스테이지/집중 모드를 표현한다.
Chrome 05 MenuBar + 10 Feedback 메뉴, 독, 트레이, 알림, 오류, 단축키, 오프라인 표시를 맡는다.
Access 06 Permission + 07 Billing 보기 전용, 실행, 라이선스, 업그레이드, 결제 차단과 요청 UX를 만든다.
Ecosystem 12 마켓플레이스 마켓플레이스 탐색, 구매, 설치, 리뷰를 사용자 표면으로 정리한다.
Builder 13 배포콘솔 게시자, 배포콘솔, 앱 실행 환경, AppStudio 경계를 보여준다.
Files 14 Drive 파일, 피커, 썸네일, 저장소 귀속 UX를 저장소 + 결제 흐름과 맞춘다.
UX UI 다이어그램은 화면 묶음이 어떤 제품 판단을 받아 표현하는지 보여준다. 프로토타입은 이 다이어그램의 검수 장치다.

보조 문서

DIAGRAMS.md UX 구조 다이어그램. 각 영역 대시보드와 프로토타입 링크로 반영한다. OUTPUT-PATTERNS.md 팝업, 모달, 핀보드, 즉시 액션 출력 패턴. UX 횡단 기준 후보. EXTERNAL_APPS.md 외부 앱 수용 기준. 외부 앱 정책과 권한 화면 사이에 걸쳐 있음. CURRENT_STATE.md 구현 상태 트래커. 제품 기준이 아니라 구현 현황 보조 문서로 유지한다.

프로토타입 루프

UX 본문 결정 HTML UX 문서에 사용자 행동과 화면 기준을 적는다.
프로토타입 작성 product/uxui/prototypes에서 HTML, CSS, JS로 눈에 보이게 만든다.
검수 화면 흐름, 버튼, 상태, 빈 화면, 오류 상태를 직접 확인한다.
본문 반영 프로토타입에서 바뀐 판단을 UX HTML 본문에 다시 반영한다.
구현 확정된 product 기준을 읽고 fricle/ 코드에 적용한다.