Layout

목적

Dot layout은 현재 맥락과 다음 행동을 안정된 위치에 두고, 복잡한 정보를 작업 방식에 맞게 배열한다. 모든 화면을 같은 grid로 만들지 않으며 비교, 읽기, 편집, 검토 중 무엇을 하는가에 따라 구조를 선택한다.

• Flexible: viewport, 정보량, 사용자 작업에 따라 열과 흐름을 조정한다.
• Link: 화면 전환과 layout 변화 뒤에도 현재 대상, 선택, 이전·다음 맥락을 보존한다.
• Glow: 브랜드 영역이 기본 content 구조를 지배하지 않고 다음 방향을 안내하는 제한된 위치만 차지한다.

PageScaffold

제품 페이지는 PageScaffold를 기본 outer container로 사용한다.

<PageScaffold width="content">
  <PageHeader title="커리큘럼" />
  {/* context 또는 PageToolbar */}
  {/* content */}
</PageScaffold>

• 페이지마다 임의의 max-width와 outer padding을 만들지 않는다.
• wide는 빈 공간을 넓게 쓰기 위한 값이 아니라 비교·편집에 실제 폭이 필요할 때 사용한다.
• full에서도 읽기 text column은 별도의 적절한 줄 길이를 유지한다.
• PageScaffold는 앱 shell, Sidebar, route, body scroll을 소유하지 않는다.

기본 페이지 구조

PageScaffold
├─ PageHeader
├─ context 또는 EnvironmentBanner
├─ PageToolbar
└─ content
   ├─ status / summary
   ├─ primary work area
   └─ supporting detail

• PageHeader는 목적, 대상, 상태, 주 행동을 모은다.
• 환경이 데이터 신뢰도나 쓰기 가능성을 바꾸면 EnvironmentBanner를 header 다음에 둔다.
• 검색·필터·보기 전환은 영향을 주는 content 바로 위 PageToolbar에 둔다.
• 요약은 다음 판단에 필요할 때만 main content보다 앞에 둔다.
• 보조 detail이 주 작업보다 먼저 viewport를 차지하지 않는다.

Column 선택

단일 열

읽기, 상세, form의 기본값이다.

• 위에서 아래로 판단 순서가 분명하다.
• section별 완료 조건이 순차적이다.
• 긴 설명과 오류가 안정적으로 reflow한다.

제한된 2열

두 영역을 동시에 비교하거나 선택과 편집의 관계를 유지해야 할 때 사용한다.

• outline + editor
• filter panel + results
• source + review result
• summary + fixed supporting context

2열을 사용하려면 각 열이 의미 있는 최소 폭을 확보하고, keyboard/DOM 순서가 명확하며, 좁은 화면에서 순차 흐름으로 전환돼야 한다.

3열 이상

각 열을 동시에 비교하는 것이 작업의 핵심일 때만 허용한다. 일반 Card dashboard를 만들기 위한 기본 grid로 사용하지 않는다.

PageHeader layout

• title block은 icon, backAction 또는 eyebrow, title, badge, description, meta 순서로 구성한다.
• actions 영역에는 primary 1개와 제한된 보조 action을 둔다.
• title과 status는 줄바꿈돼도 관계가 유지돼야 한다.
• narrow에서는 title block과 action을 세로로 배치한다.
• backAction은 독립적인 floating button이 아니라 현재 header 맥락에 포함한다.
• header 아래에 같은 제목, 상태, action을 반복하지 않는다.

Section layout

• Section은 title, description, supporting action, body를 하나의 의미 단위로 묶는다.
• 별도 표면이 필요한 경우에만 surface variant를 사용한다.
• Card 중첩은 최대 1단계다.
• 반복 데이터는 Card grid보다 table이나 row를 우선한다.
• section action은 해당 section에만 영향을 주며 페이지 primary와 경쟁하지 않는다.
• section 사이에는 내부 group보다 큰 spacing을 사용한다.

목록·상세·편집

목록

• PageHeader에 생성 action, PageToolbar에 search/filter, content에 table 또는 record list를 둔다.
• loading, empty, error는 같은 list frame 안에서 교체한다.
• row의 이름은 왼쪽, 상태·수치는 비교 축, action은 오른쪽에 둔다.

상세

• 대상 식별과 상태를 PageHeader에 유지한다.
• 가장 중요한 판단 정보와 예외를 첫 section에 둔다.
• 이력과 기술 세부는 뒤 또는 요청 시 공개한다.

편집

• 대상, version, 저장 상태, 다음 action을 상단에서 유지한다.
• form section은 한 번에 한 개념을 편집한다.
• 순서가 있는 저장·검증·발행은 WorkflowBar를 사용할 수 있다.
• outline이 필요하면 wide 2열, narrow 순차 흐름으로 전환한다.

Dashboard와 metric

• 첫 영역은 현재 상태를 판단하는 최소 metric만 제공한다.
• MetricStrip은 같은 표면 안의 균일한 cell로 비교한다.
• 두 번째 영역에는 조치가 필요한 실패와 대기를 둔다.
• 세 번째 영역에서 개별 원인과 이력을 제공한다.
• chart와 Card를 채우기보다 예외에서 action으로 이어지는 흐름을 만든다.
• 자동 갱신 여부와 마지막 갱신 시각을 안정된 위치에 둔다.

Overlay layout

• Dialog는 짧고 집중된 결정에 사용한다.
• Sheet는 보조 작업, narrow navigation, 상대적으로 긴 content에 적합하다.
• Popover는 trigger 맥락을 유지하는 작은 선택·설명에 사용한다.
• Tooltip은 짧은 보충 설명이며 필수 정보나 복잡한 action을 담지 않는다.
• overlay는 DotTheme 내부 portal root를 사용해 token scope를 유지한다.
• overlay 위에 또 다른 overlay를 연속으로 쌓지 않는다.

Responsive structure

• breakpoint는 content가 더 이상 안전하지 않은 지점에서 전환한다.
• 좁은 화면에서도 title, status, primary action, 핵심 값, back 경로를 보존한다.
• horizontal scroll이 필요한 데이터는 영역과 scroll 가능성을 명시한다.
• fixed element는 content와 focus target을 가리지 않는다.
• layout 전환 뒤에도 selection, input, scroll, focus를 보존한다.

Character와 brand layout

• 2D 표현은 제품 안의 답변·처리·안내처럼 기능과 가까운 영역에 제한한다.
• 3D DotCharacter는 충분한 공간이 있는 온보딩, 넓은 빈 상태, 중요한 완료에 사용한다.
• DotCharacter의 최소 100px contract와 지정 여백을 지킨다.
• 캐릭터가 h1, error, primary action보다 먼저 읽히거나 밀어내지 않는다.
• text와 badge를 캐릭터 위에 겹치지 않는다.
• Glow 영역은 한 화면의 일부로 제한하고 일반 content background가 되지 않는다.

상태와 접근성

• visual order와 DOM order가 일치한다.
• 페이지 landmark와 section heading을 제공한다.
• layout 변화 후 focus가 논리적인 위치에 남는다.
• Dialog와 Sheet는 focus를 내부에 제한하고 닫으면 trigger로 복귀한다.
• horizontal scroll 영역은 keyboard로 접근 가능하고 이름을 가진다.
• zoom 200%에서 content와 action이 겹치거나 양방향 scroll을 강요하지 않는지 확인한다.
• error summary와 첫 오류 field 사이에 이해 가능한 navigation을 제공한다.
• fixed WorkflowBar가 page content 마지막과 focus ring을 가리지 않는다.

예외와 피해야 할 사용

• marketing landing의 넓은 여백을 운영 화면에 적용하지 않는다.
• 모든 section을 Card grid로 만들지 않는다.
• content 폭이 남는다는 이유로 불필요한 3열을 만들지 않는다.
• Sidebar, header, nested panel에 각각 독립 scroll을 만들어 위치를 잃게 하지 않는다.
• full 폭 안에서 긴 본문을 viewport 전체로 늘이지 않는다.
• mobile에서 중요 정보를 숨기고 desktop 링크를 요구하지 않는다.
• character와 Glow를 빈 공간을 채우기 위해 배치하지 않는다.
• source 순서와 다른 CSS order로만 반응형 layout을 만들지 않는다.

검토 질문

• 화면 유형과 작업 방식에 맞는 content, wide, full을 선택했는가?
• PageHeader에서 목적, 대상, 상태, 주 action을 찾을 수 있는가?
• 다열 layout이 실제 비교·편집을 돕는가?
• Card 없이 section과 spacing으로 해결할 수 있는 곳은 없는가?
• 목록 → 상세 → 편집의 위치와 상태가 이어지는가?
• narrow에서 단순 축소가 아니라 의미 있는 순차 흐름으로 바뀌는가?
• overlay 종류가 content 길이와 결정 성격에 맞는가?
• visual order, DOM order, focus order가 일치하는가?
• character와 Glow가 작업 영역을 지배하지 않는가?
• 한 학습 고리의 완료와 다음 방향이 같은 layout 흐름에 있는가?