# DOUZONE UX Guide 이 문서는 TaxBaik 어드민 UX의 기준선이다. 목표는 더존 세무회계프로그램류의 고밀도 운영 화면을 구현하되, TaxBaik의 도메인과 검증 규칙을 유지하는 것이다. ## UX Principles - 고밀도 우선: 한 화면에서 상태, 입력, 결과, 작업을 함께 본다. - 표준 동선 우선: 목록 -> 상세 -> 수정 -> 저장 흐름을 기본으로 둔다. - 빠른 입력 우선: 마우스 최소, 키보드/단축 동선 최대, 기본값 명확화. - 상태 가시성 우선: 진행중/성공/실패/비활성/삭제됨을 즉시 구분 가능하게 한다. - 회귀 최소화 우선: 같은 화면 패턴은 같은 컴포넌트와 같은 구조를 사용한다. - 추측 금지: 의미가 불명확한 텍스트, 상태, 버튼, 색상은 새로 만들지 않는다. ## Layout Template 어드민 화면은 기본적으로 아래 구조를 따른다. ```text PageHeader FilterBar or ActionBar ContentSurface -> DenseGrid or DetailPanel -> EmptyState when empty -> Paging/Footer when needed ``` 권장 규칙: - 페이지 제목은 1개만 둔다. - 보조 설명은 1줄만 둔다. - 주요 액션은 우측 상단 또는 헤더 우측에 둔다. - 목록은 `Dense`를 기본으로 한다. - 상세/수정은 좌우 2열 또는 상단 요약 + 하단 폼 패턴을 우선한다. ## Component Template ### Page Header - 구성: `Eyebrow`, `Title`, `Subtitle`, `Primary Action` - 역할: 화면 맥락 고정, 다음 행동 제시 - 금지: 동일 화면에 헤더가 2개 이상 존재 ### Dense Grid - 행 간격은 좁게 유지한다. - 컬럼은 우선순위 순으로 배치한다. - 상태는 텍스트 대신 칩/색상/아이콘으로 함께 보여준다. - 작업 버튼은 `보기`, `수정`, `삭제`처럼 짧고 일관되게 둔다. ### Form - 기본값은 채워진 상태로 시작한다. - 저장 전 필수 검증은 화면에서 즉시 보인다. - 저장되지 않는 필드는 read-only로 바꾼다. - 입력이 많은 폼은 섹션으로 나누되, 섹션 수는 최소화한다. ### Empty State - 데이터 없음, 필터 결과 없음, 로드 실패를 구분한다. - 단순 문구보다 다음 행동 버튼을 함께 둔다. ### Status Chip - 상태는 문자열 그대로 노출하지 말고 칩으로 시각화한다. - 색상은 의미를 유지한다. - 동일 상태는 동일 색을 사용한다. ## SmartAdmin 5.5 Design Reference (2026-07-03, 신규 화면부터 적용) 이 섹션은 어드민의 **시각적 스킨**(색상, 카드 크롬, 로그인 화면 스타일, 셸 레이아웃) 기준이다. 위 UX Principles(고밀도, 표준 동선, 더존 정신)는 그대로 유지하고, SmartAdmin 5.5는 그 위에 입히는 룩앤필만 담당한다. - 소스: `legacy/smartadmin/`(로컬에 이미 포함된 v5.5 HTML/CSS 데모 패키지, Bootstrap 5 기반). 정확한 색상/여백 값이 필요하면 이 디렉터리를 직접 참조한다(추측 금지). - 적용 범위: **향후 신규 어드민 화면부터**. 기존 20개+ 화면(Dashboard, Blog, Inquiry, Client 등)은 이번엔 재단장하지 않는다. 기존 화면을 다른 이유로 수정할 때 자연스럽게 이 기준으로 수렴시킨다. ### 매핑 표 | SmartAdmin 5.5 참조 | 파일 | TaxBaik MudBlazor 대응 | | --- | --- | --- | | 상단 `
` 툴바 | `dashboard-control-center.html` | `AdminShell`의 `MudAppBar` | | `