패턴
실제 컴포넌트를 페이지 단위로 구성하는 규칙입니다.
사이트 공통 영역
기존 Site Header와 Footer가 모든 공개 화면을 감쌉니다.
기존 Site Header
콘텐츠 shell 안의 로컬 탐색
페이지 본문
구성 규칙
- 페이지 안에 두 번째 고정 내비게이션을 만들지 않습니다.
- 로고, 언어 선택, 검색, 문서 이동은 기존 공통 영역에 둡니다.
- 현재 페이지의 로컬 탐색은 콘텐츠 shell 안에 둡니다.
편집형 제목
짧은 제목과 필요한 설명만으로 구간의 목적을 밝힙니다.
구성 규칙
- 보조 라벨, 번호, 부제를 습관처럼 겹치지 않습니다.
- 제목과 설명의 폭을 따로 제한해 위계를 분명히 합니다.
- 다음 목적지가 필요할 때만 Text Link를 붙입니다.
컬렉션 행
여백과 1px 선으로 반복 항목을 나누는 전체 폭 행입니다.
구성 규칙
- 카드로 감싸지 않고 항목 사이의 선과 간격을 유지합니다.
- 이름, 설명, 상태나 동작의 열을 같은 기준선에 맞춥니다.
- hover에서 padding을 움직이지 않습니다.
선택한 작업
실제 이미지와 확인된 설명을 한 편집 모듈에 묶습니다.
구성 규칙
- public에 있는 실제 이미지만 사용하며 가짜 화면은 만들지 않습니다.
- 제품 상태와 목적지는 현재 데이터에 있을 때만 표시합니다.
- 이전과 다음 동작은 이름 있는 button으로 만들고 키보드 조작을 지원합니다.
시스템 상태
loading, empty, error 상태를 같은 화면 문법으로 설명합니다.
구성 규칙
- 상태와 다음 동작을 짧은 문장으로 알립니다.
- error에는 가능한 경우 retry 동작을 제공합니다.
- empty 상태를 임의의 예시 데이터로 채우지 않습니다.
반응형 쌓기
넓은 화면의 관계를 작은 화면에서 한 열의 읽기 순서로 바꿉니다.
구성 규칙
- 1080px에서 복잡한 grid를 쌓고 720px에서 탐색과 동작을 정리합니다.
- 데스크톱 도식을 축소하지 말고 같은 내용을 읽기 순서로 다시 배치합니다.
- 작은 화면의 동작 영역은 44px를 유지합니다.
문서 화면
목록과 읽기 화면은 같은 shell과 본문 리듬을 유지합니다.
컬러
Paper와 Ink를 기본으로 두고 Primary Blue만 강조색으로 씁니다.
- 파란색은 주요 동작, 선택 상태, 진행 방향에만 사용합니다.
- 이전 route 색상은 legacy 참고값이며 새 화면의 기본색으로 쓰지 않습니다.
구성 규칙
- 본문 폭, 제목 단계, 날짜와 메타데이터 위치를 문서마다 바꾸지 않습니다.
- 코드는 Code Block으로 표시하고 inline 식별자와 구분합니다.
- 목록과 본문 사이의 이동은 직접적인 링크로 제공합니다.
대비 구간
밝은 공개 화면 안에서 Ink 면을 제한적으로 사용해 흐름을 나눕니다.
구성 규칙
- 어두운 구간은 회사 소개처럼 분명한 내용 전환에만 씁니다.
- 기본 텍스트는 흰색, 짧은 강조는 Blue Light를 사용합니다.
- legacy인 Page Navy를 새 공개 화면의 기본 배경으로 되살리지 않습니다.