Mosmos 와이어프레임 기준안
상태 하나 = 페이지 하나예요. 각 페이지에는 그 화면 프레임만 있어요. 컴포넌트 시트는 영역별로 한 페이지씩 나눴어요.
Figma로 옮길 때: html.to.design에 페이지 주소를 넣어요. 먼저 Pretendard와 IBM Plex Mono를 설치해 두세요.
LOGIN – STORAGE · 기능 검증 베타 MVP
01-1Login 화면상태 4
01-2Onboarding (로그인 다음)상태 9
01-0Onboarding 컴포넌트페이지 1
02-1Monitor 화면상태 6
02-0Monitor 컴포넌트페이지 1
03-1Chat · 형태상태 4
03-1aChat · Bootstrap (첫 만남)상태 1
03-2Chat · Buddy상태 9
03-3Chat · Studio상태 4
03-4Chat · Manager상태 12
03-5Chat · Extension상태 15
03-0공통 · Chat 컴포넌트페이지 4
01공통
GB-01상단 바 (GlobalBar)
02Chat 패널 · 틀
패널 틀
CH-01패널 헤더 (이름 · 모드 전환)
CH-09아이콘 (기본 열림 형태)
입력
CH-05입력창
CH-06＋ 메뉴
CH-07Mon 붙이기 목록 (Inventory)
대화 상태
CH-04빈 대화 안내
CH-08계획 진행 바 (write_todos)
03Chat 패널 · 대화 항목
메시지
CH-10사용자 말풍선
CH-11Mos 답변 말풍선
CH-24도구 · 생각 묶음 칩
CH-26Storage 파일 칩 · 링크
CH-25세션 구분선
Mon 위임
CH-14Mon 위임 카드
사용자 확인 카드
CH-16질문 카드 (ask_user)
CH-17작업 요약 카드 (propose_brief)
CH-19실행 승인 카드 (tool_call)
CH-23연결 요청 카드
CH-22맞는 Mon 없음 카드
안내
CH-20알림 배너
04Chat Extension · 패널 추가 화면
패널
EX-01대화 기록 패널
EX-04빠른 설정 패널
04-1Storage 화면상태 19
04-0Storage 컴포넌트페이지 1
STUDIO · 프로덕션 MVP
05-1Studio · 메인상태 1
05-2Studio · Mon 만들기상태 13
05-3Studio · Mon Skill 만들기상태 8
05-0aStudio 메인 컴포넌트페이지 1
05-0bStudio Mon 만들기 컴포넌트페이지 1
05-0cStudio Mon Skill 만들기 컴포넌트페이지 1
HUB · 프로덕션 v2 MVP
06-1Hub 화면상태 8
06-0Hub 컴포넌트페이지 1
07-1Pricing 화면상태 3
07-0Pricing 컴포넌트페이지 1
08-1상단 바상태 4
08-2법적 고지 (홈페이지 서브페이지)상태 2
08-3오류 화면 (웹 공통)상태 1
08-0공통 컴포넌트페이지 1