본문으로 건너뛰기
Dot Design System
v0.3.1

Dot Product UX Patterns

목록, 편집, 워크플로와 피드백의 기본 흐름을 확인합니다.

목록에서 상세로

  1. PageHeader에서 화면의 목적과 생성 행동을 제공한다.
  2. PageToolbar에서 검색·필터를 적용한다.
  3. RecordList는 전체 행을 한 목적지로 연결한다.
  4. 상세 화면 PageHeader의 back action은 검색 결과 목록으로 돌아간다는 맥락을 보존한다.

복잡한 편집

  1. 상단에서 대상, version, 저장 상태와 다음 행동을 보여준다.
  2. 왼쪽 outline은 구조와 현재 선택을 보여준다.
  3. 오른쪽 editor는 선택한 항목 하나만 편집한다.
  4. 일정 overview는 전체 문서의 충돌과 비어 있는 슬롯을 검토하게 한다.
  5. 미저장 상태로 이탈할 때 ConfirmActionDialog로 보호한다.

Outline의 추가·선택 조작은 hover 여부와 상관없이 발견할 수 있어야 한다. 중첩 scroll은 한 축에 하나만 허용하고 모바일에서는 outline과 editor를 순차 흐름으로 바꾼다.

저장·검증·발행

사용 코드 · Text
변경 중 ──초안 저장──> 저장됨 ──검증 실행──> 검증 통과 ──발행──> 운영 기준본
   │                       │                    │
   └─ 이탈 경고             └─ 오류 목록          └─ 발행 결과 안내

점수는 학습 일정의 다음 질문을 결정하지 않는다. 커리큘럼에 정의된 주차·요일 순서가 발송 계획의 유일한 기준이며, 편집 UI도 이를 일정표로 직접 보여준다.

운영 현황

  • 첫 영역: 서비스 상태를 빠르게 판단하는 핵심 지표
  • 둘째 영역: 조치가 필요한 실패와 대기
  • 셋째 영역: 개별 실패 원인과 재시도
  • 자동 갱신 여부와 마지막 갱신 시각을 항상 표시한다.
  • 정상 지표보다 복구가 필요한 예외가 더 높은 행동 우선순위를 갖는다.

Feedback

  • inline: 필드 오류, validation 결과처럼 맥락이 고정된 피드백
  • toast: 저장 완료처럼 짧고 페이지 이동을 막지 않는 결과
  • dialog: 되돌릴 수 없거나 현재 작업을 잃을 수 있는 결정
  • full empty/error: 화면의 주 데이터를 사용할 수 없을 때

Responsive

  • < 640px: 페이지 행동은 필요한 경우 full-width, 표는 record list, 일정은 agenda
  • 640–1199px: 1열 또는 제한된 2열, 보조 메타데이터 축약
  • ≥ 1200px: 비교·편집 목적일 때만 다열 사용

내용은 viewport 밖으로 잘리지 않아야 하고 horizontal scroll이 필요한 데이터는 scroll 영역과 맥락을 명시한다.

세부 패턴