UX UI Overview
현재 구현된 화면과 동작을 출발점으로 삼아, Fricle의 캔버스형 작업공간과 이어지는 상태를 사용자가 보고 만지는 화면 시스템으로 정리한다.
UX UI가 맡는 것
작업공간 체감
Fricle이 앱 목록이나 도구 생성기가 아니라, 앱과 파일과 협업 맥락이 놓이고 다시 이어지는 작업공간으로 보이게 만든다.
현재 구현 해석
이미 구현된 메뉴, 캔버스, 앱, 모드, 피드백을 확인하고 제품 방향에 맞게 유지, 수정, 후속으로 나눈다.
구현 검수 기준
UX UI에서 화면 기준을 먼저 세우고, 그 기준으로 실제 fricle/ 구현이나 외부 작업물을 검수한다.
정본 기준선
1. Identity
Fricle이 앱 목록, 도구 생성기, 단순 협업툴이 아니라 프로젝트별 작업환경으로 보이기 위한 기본 인상과 제품 언어를 정리한다.
2. Canvas
앱과 파일과 협업 맥락이 놓이는 기본 작업면이다. 빈 캔버스, 앱 배치, 이동, 위치 회복, 복원 단서를 먼저 정리한다.
3. App UI
캔버스 위 앱의 공통 헤더, 앱별 UI 경계, 닫기와 제거, 복원 상태를 정리한다.
현재 UX UI 정본 기준선은 Identity, Canvas, App UI까지다. 아래 문서들은 삭제 대상이 아니라 재검토 초안이며, 필요한 내용만 다시 선별해 정본 기준이나 후속 후보로 옮긴다.
재검토 초안
Mode
작업 모드 자체가 필요한지, App UI나 Canvas 상태로 통합할 수 있는지 다시 판단한다.
MenuBar
상단바, 트레이, 위치 표시가 실제 제품 기준에 필요한지 App UI와 함께 재검토한다.
Dock
빠른 진입 장치가 Fricle의 작업공간 체감에 필요한지, 단순 데스크톱 은유인지 나눠 본다.
Permission
권한 차단과 안내는 필요하지만, 화면 정본보다 Architecture와 User Flow의 표현이 먼저다.
Billing
상위 Transition Conditions 기준을 화면에서 어떻게 보여줄지 검토하는 전환 조건 UX 초안이다.
Collaboration
협업 자체가 본질처럼 보이지 않게, 작업공간 공유와 권한 흐름 안에서 다시 판단한다.
Settings
설정 화면 세부보다 사용자가 작업공간을 운영할 때 필요한 설정 범위를 먼저 확인한다.
Feedback
알림과 반응은 작업 상태를 이어가게 하는 신호인지, 단순 소셜 기능인지 나눠 본다.
Workspace
Fricle의 중심 개념이므로 필요하지만, 현재 문서는 Canvas와 Product 기준에 맞춰 다시 정리한다.
Marketplace
도구 유통 화면이 아니라 작업공간에 필요한 도구를 붙이는 흐름으로 다시 자른다.
App Management
파트너/도구 공급자 운영 화면으로 후속 성격이 강하다. 현재 UX 정본에서 내릴 후보로 둔다.
Drive
작업 자료 흐름으로 필요하지만, 실제 Drive 구현과 저장소 기준을 확인한 뒤 다시 기준화한다.
UX UI 다이어그램
확인
현재 구현 확인
지금 보이는 메뉴, 캔버스, 앱, 모드, 피드백을 먼저 확인한다.
정렬
UX 기준화
현재 구현을 제품 방향에 맞춰 유지, 수정, 추가 기준으로 나눈다.
중심
Workspace + Canvas
앱과 파일과 협업 맥락이 놓이고 다시 이어지는 중심 화면이다.
승격
기준 문서 승격
각 UX UI 세션을 실제 화면 예시와 클릭 설명이 있는 HTML 기준 문서로 만든다.
객체
App UI + Mode + Drive
앱 헤더, 공통 옵션, 모드, 파일과 피커처럼 캔버스 위 객체와 자료 흐름을 정리한다.
화면 장치
MenuBar + Feedback
상단바, 트레이, 알림이 현재 위치와 가능한 행동을 알려준다. Dock과 시작 메뉴는 별도 Dock 문서에서 다룬다.
보조
Market + Access
마켓플레이스, 앱 관리, 권한, 라이선스는 작업공간을 채우고 보호하는 보조 표면이다.
상태
State + Restore
닫았다 열어도 이어지는 위치, 앱 배치, 문서 상태, 복원 안내를 화면 기준으로 정리한다.
UX UI Overview 다이어그램은 세부 기능 목록이 아니라 화면 기준화 지도를 보여준다. 현재 구현을 확인한 뒤 Workspace와 Canvas를 중심에 두고, 객체, 상태, 보조 표면을 각 HTML 문서의 실제 화면 예시와 클릭 설명으로 승격한다.
작성 방식
현재 구현
실제 화면, 버튼, 상태, 동작을 먼저 확인한다.
제품 판단
그 구현이 Fricle의 캔버스형 작업공간과 상태 지속성에 어떻게 기여하는지 해석한다.
UX 기준
유지할 기준, 수정할 기준, 아직 필요한 화면 기준을 분리한다.
예시 화면
Canvas, App UI처럼 복잡한 영역은 실제 예시 화면을 기준으로 구성 요소와 이유를 설명한다.
구현 검수
확정된 UX 기준을 바탕으로
fricle/ 구현 또는 외부 작업물에 수정 요구를 낸다.
보조 문서
프로토타입 루프
UX 본문 결정
HTML UX 문서에 현재 구현, 제품 판단, 사용자 행동, 화면 기준을 적는다.
프로토타입 작성
product/uxui/prototypes에서 HTML, CSS, JS로 눈에 보이게 만든다.
검수
화면 흐름, 버튼, 상태, 빈 화면, 오류 상태를 직접 확인한다.
본문 반영
프로토타입에서 바뀐 판단을 UX HTML 본문에 다시 반영한다.
구현 피드백
확정된 product 기준을 바탕으로 구현팀이나 외부 작업물에 반영/수정 요구를 전달한다.