WBDS 01
WBDS 01 DOCUMENTATION

Browse the system

Navigation loads from the WBDS 01 Docs manifest.
WBDS 01 SEARCH

Find documentation

Type to search the WBDS 01 documentation hierarchy.
Patterns

Editorial

읽기 순서와 출처, 수정 흔적이 중요한 지식 화면을 위한 editorial composition입니다.

Editorial specimen

WBDS source-backed composition example.

A decision is easier to trust when its source stays visible.

Editorial surfaces keep the reading sequence intact. Rules, captions and annotations support the text without turning every idea into a card.

Keep the source and interpretation separate.

The source explains what changed. The surrounding note explains why the change matters to the reader.

Evidence stays close enough to inspect without interrupting the reading sequence.

Source → interpretation → decision

Evidence remains connected to the statement it supports.

Fig. 01 — Decision reading flowExample · updated today
Status
Reviewed
Source
Official record
Updated
Today

  1. Read the source.

    Separate observable facts from interpretation.

  2. Record the decision.

    Keep the reasoning close enough to inspect without interrupting the reading flow.

Anatomy

이 composition을 구성하는 역할과 정보 위계를 정리합니다.

  1. LongFormIndex

    긴 문서에서 실제 읽기 순서를 먼저 보여줍니다. ordinal은 순서가 의미 있을 때만 사용합니다.

  2. Prose / Long-form

    본문의 폭과 세로 리듬을 정리합니다. 긴 설명은 카드로 쪼개지 않고 읽는 흐름을 유지합니다.

  3. Annotation / Aside

    보충 맥락을 neutral rule과 typography로 분리합니다. 오류·위험·필수 검토는 Feedback/Review 계층을 사용합니다.

  4. Figure / Caption

    이미지·도식·증거와 caption/source의 관계를 명확하게 묶습니다. 장식용 browser/device chrome은 사용하지 않습니다.

  5. DefinitionList / KeyValue

    표가 필요하지 않은 metadata와 name/value reference pair를 semantic definition list로 표현합니다.

  6. Steps / Procedure

    앞으로 수행할 절차를 순서대로 보여줍니다. 과거 변화를 기록하는 ChangeTimeline과 구분합니다.

  7. RelatedContent

    다음 읽기 경로를 rule-based link list로 이어줍니다. recommendation card grid로 바꾸지 않습니다.

Usage

화면의 목적이 이 작업 방식과 맞을 때만 사용합니다.

이해와 provenance가 조작보다 중요한 문서, 운영 노트, 리서치 결과, 가이드와 reference 화면에 사용합니다. 빠른 반복 처리 화면은 Workbench가 더 적합합니다.

How to use

정보와 행동의 순서를 유지하는 것이 핵심입니다.

Hierarchy

PageHeader 또는 제목 → 필요한 경우 LongFormIndex → Prose → Annotation/Figure/DefinitionList/Steps → RelatedContent → provenance 순으로 조합합니다. Article, Guide, Reference가 같은 primitive를 써도 같은 macrostructure를 강제하지 않습니다.

Responsive

reading measure를 우선하고, LongFormIndex·DefinitionList·RelatedContent·Steps는 좁은 폭에서 1열 또는 단순한 2열 관계로 내려갑니다. source text에 viewport 전용 hard break를 저장하지 않습니다.

Maturity & Source

Composition의 계약 수준과 실제 source를 구분해 표시합니다.

CURRENT MATURITYDocs-built editorial composition

Pattern은 여러 primitive를 묶는 작업 구조입니다. 별도 로컬 디자인 시스템을 만들지 않고 WBDS foundation/component 계약을 그대로 사용합니다.

packages/wbds/foundation.css packages/wbds/components-extended.css packages/wbds/patterns-extended.css docs/patterns.md apps/site/fixtures/editorial.html
Patterns
참고 문서 5
FoundationComponents extendedPatterns extendedPatternsEditorial