상태와 테마 분리
상태 key는 유지하고 색상값은 테마가 결정합니다.
DREAMLABS WORKER DESIGN SYSTEM
Worker 화면을
Worker 화면을
같은 언어로 만듭니다.
UI 원칙, 실제 동작하는 패턴, 모바일 안정성, 불변 asset을 한곳에서 설계하고 검증하는 개발용 정적 카탈로그입니다.
01
DEFINE표준을 제안하고
02VERIFY화면으로 검증하고
03ADOPTWorker가 채택합니다
02눈에 보이는 값보다
FOUNDATIONS
눈에 보이는 값보다
의미가 먼저입니다.
색·간격·크기를 화면마다 다시 만들지 않습니다. semantic token이 테마와 상태를 연결하고, 모든 컴포넌트가 같은 규칙을 사용합니다.
Readable hierarchy
Aa본문, 설명, 식별자와 코드의 역할을 분명하게 나눕니다.
8pt 기반 리듬
조밀하지만 답답하지 않은 운영 화면 밀도를 유지합니다.
44px touch target
아이콘은 작게, 실제 조작 영역은 충분히 크게 둡니다.
가려지지 않는 조작
닫기
상단·하단 inset을 적용하고 핵심 action을 OS UI 뒤에 두지 않습니다.
콘텐츠 기반 전환
3203907681440
기기 이름보다 실제 레이아웃 안정성을 기준으로 전환합니다.
상태를 돕는 움직임
진행과 계층 변화만 설명하며 reduced-motion을 항상 지원합니다.
계층별 곡률
control, card, overlay가 서로 다른 계층임을 곡률로 구분합니다.
03
COMPONENTS
반복되는 조작의 문법
표현이 아니라 역할을 기준으로 컴포넌트를 선택합니다.
ACTIONIcon-only
같은 역할은 화면 전체에서 같은 아이콘과 accessible name을 사용합니다.
STATUSSemantic badge
사용 가능진행 중확인 필요오류
상태만 배지로 표시합니다. 이름, 경로, 버전과 시각은 일반 텍스트로 둡니다.
ROWSettings
런타임 프로필실행 경로와 어댑터 상태를 확인합니다.
11 profiles중첩 카드 대신 정렬된 한 행과 하나의 trailing action을 사용합니다.
BUTTONAction hierarchy
행동의 중요도와 위험도를 모양·텍스트·색상으로 함께 구분합니다.
INPUTLabel + help
placeholder를 label 대신 사용하지 않고 도움말과 오류 영역을 고정합니다.
FEEDBACKEmpty · Error · Loading
조회 중세션을 확인하고 있습니다.완료되면 목록이 자동 갱신됩니다.
상태, 현재 작업과 사용자가 할 수 있는 다음 행동을 함께 설명합니다.
04Worker에 필요한
PATTERNS
Worker에 필요한
여덟 가지 핵심 패턴
기존 개선 요구를 재사용 가능한 패턴으로 묶었습니다. 각 패턴은 default·loading·empty·error·success와 mobile projection을 함께 다룹니다.
NAVIGATION
기본 접힘과 최소 depth
최근 세션, Mattermost, Remote Request API와 프로젝트를 독립된 최상위 domain으로 둡니다.
상태만 강조
readydegraded
전체 표준 보기 →작업 범위만 잠금
전체 표준 보기 →
행 기반 탐색
설명 길이가 달라도 action column과 baseline을 유지합니다.
전체 표준 보기 →입력 영역 우선
Worker에게 요청하기…
전체 표준 보기 →항상 닫을 수 있게
safe-area, sticky header, 하나의 scrolling body를 사용합니다.
전체 표준 보기 →범례와 차트 1:1
전체 표준 보기 →
긴 내용에도 안정적
worker-session-019feed7-b378-78f3-9da7-ea4c045fc24e전체 표준 보기 →05
TEMPLATES
화면 단위의 시작점
패턴을 조합한 화면 뼈대입니다. 제품 기능을 대신하지 않고 구조·계층·반응형 계약을 제공합니다.
Desktop Console Shell
접히는 탐색, 주 화면과 resizable context panel의 3영역 구조
desktop · tabletMobile Console Shell
safe-area, drawer, sticky composer와 단일 scroll ownership
320 · 390 · 430Chat
요청자, reasoning stream, 최종 응답과 compact composer
timeline · composerSettings Detail
행 기반 목록에서 하나의 nested detail로 이어지는 설정 흐름
row · overlayWorkspace Explorer
긴 경로, 파일 상태, preview와 모바일 side sheet
tree · viewerWiki Workbench
2D/3D graph, statistics와 migration 작업을 분리한 workbench
graph · dashboardUpdate Flow
준비·적용·재연결·canonical readback까지 이어지는 진행 화면
progress · refresh06
PREVIEW LAB
같은 화면을 다른 조건으로
viewport와 theme를 바꾸며 동일한 shell의 layout, overflow와 조작 가능성을 검증합니다. 모든 내용은 illustrative fixture입니다.
ACTION DASHBOARD현재 작업 현황
확인 및 처리7
진행 중2
최근 세션54
진행 중worker-ui-ux-assets
정적 패턴 카탈로그 설계불변 버전, 모바일 안정성과 UI 검증 기준을 정리하고 있습니다.
worker-session-019feed7-b378-78f3-9da7-ea4c045fc24e-remote-request-api07
RELEASES
표준, 채택, 배포를 분리합니다.
소스가 있다고 배포됐다고 말하지 않고, Worker가 채택했다고 실제 화면 검증까지 끝난 것으로 표시하지 않습니다.
proposed
설계와 live example이 준비됨
not-started
Worker 제품 변경은 별도 개발세션 소유
source-only
source와 workflow 후보만 준비됨
/v/2026.10.12.3/