ADR-0005: Wiki 디자인 시스템

목표#

이 Wiki의 한 가지 일은 팀원이 긴 조사 문서에서 결론, 근거 수준과 다음 행동을 빠르게 찾도록 돕는 것이다. 제품 홍보용 랜딩 페이지와 달리 장식, 감성 이미지와 전환 유도는 우선하지 않는다.

디자인 방향은 근거가 보이는 작업 문서다. 흰 종이와 회색 구분선을 기본으로 쓰고, 파란색은 링크와 확인된 근거 흐름에만 사용한다. 검토가 필요한 상태는 황갈색, 갱신이 필요하거나 링크가 깨진 상태는 붉은색으로 구분한다.

각 문서 제목 왼쪽의 얇은 선과 제목 아래 상태줄은 장식이 아니다. 문서를 읽기 전에 상태, 신뢰도, 근거 수와 업데이트일을 확인하는 공통 장치다.

안정 상태에는 녹색, 갱신 필요와 깨진 링크에는 붉은색을 제한적으로 사용한다. 컴포넌트에서 색상 값을 직접 입력하지 않고 :root의 토큰만 참조한다.

모든 역할은 Pretendard로 통일한다. 다른 글꼴로 개성을 추가하지 않고 크기, 굵기, 줄 간격과 숫자 정렬로 역할을 구분한다.

날짜, 출처 번호와 수치는 같은 Pretendard에서 고정폭 숫자 기능을 사용한다.

문서 분류, 제목, 한 문장 요약, 상태줄 순서로 표시한다. 상태줄은 상태, 신뢰도, 근거 수와 업데이트일을 포함한다. 홈은 상태줄을 생략한다.

제목 단계는 h1부터 순서대로 사용한다. 링크와 인용 번호는 Evidence 색상을 사용하고, 본문의 굵은 글자는 결론이나 판단에만 제한한다.

표는 카드처럼 감싸지 않고 위아래 기준선과 행 구분선으로 읽는다. 4열 이상은 본문 폭 안에서 가로로 스크롤하며 키보드 초점 표시를 제공한다.

이미지는 본문 폭을 넘지 않는다. 자료 종류, 한계, 원본 보기와 자료 정보가 항상 캡션에 표시돼야 한다.

수집 중, 초안, 검토됨, 확정, 갱신 필요를 같은 이름과 색으로 제목 영역, 문서 정보와 검색 결과에서 반복한다.

npm --prefix tools/wiki-publisher run check는 일반 문서 검증과 빌드 뒤 디자인 시스템 검사를 실행한다. 필수 토큰, 컴포넌트의 직접 색상 입력, 상태줄, 검색 상태 이름, 키보드 초점, 움직임 줄이기와 인쇄 규칙을 확인한다.