인터페이스 제작 및 접근성
개요
표준은 접근 가능하고, 미니멀하며, 아름다운 것입니다. 마무리 작업이 아닌, 설계 자체의 속성입니다. 취향은 규칙으로 삼을 수 없으므로, 제약 조건, 선례, 에스컬레이션으로 변환됩니다. 에이전트는 취향을 창조하라는 요청을 받지 않고, 제약 조건을 존중하고 나머지를 에스컬레이션하기만 하면 됩니다.
접근성 — 마무리 단계가 아닌 필수 조건
확인 가능한 규칙:
- 모든 상호작용 요소는 키보드로 접근 가능해야 하며 눈에 띄는 포커스 상태를 가져야 합니다.
- 모든 컨트롤에는 접근 가능한 이름이 있어야 하고, 모든 폼 필드에는 연결된 레이블과 명확한 오류 메시지가 있어야 합니다.
div남발 대신 시맨틱 HTML과 랜드마크를 사용합니다.- 색상 대비는 WCAG AA를 충족해야 하며, 의미를 절대 색상만으로 전달해서는 안 됩니다.
- 축소 모션 선호도를 존중합니다.
아름답고 미니멀하게 — 분위기가 아닌 제약 조건으로
- 제약을 통한 일관성. 디자인 시스템의 토큰(간격, 서체 척도, 색상 척도)을 사용합니다. 임시방편적인 매직 넘버는 없습니다. 일관성 그 자체가 미학입니다.
- 기존 화면이 스타일 가이드입니다. 새로운 것을 만들기 전에 기존의 시각적 언어를 따르십시오.
- 절제(UI-YAGNI). 모든 요소는 그 자리를 정당화해야 합니다. 무언가를 제거했을 때 무언가가 깨질 때까지 제거하십시오. 밀도와 장식보다 계층과 여백을 우선시합니다.
- 커스텀 UI를 만들기 전에 컴포넌트 라이브러리의 패턴을 선호합니다.
- 두 개의 유사한 UI 요소 → 하나의 파라미터화된 컴포넌트. 차이점은 소품/변형으로 처리하며, 복사-붙여넣기하지 않습니다. 세 번째 복사본은 결함입니다. (인터페이스에 적용된 DRY 원칙)
에스컬레이션 규칙
취향 결정은 에스컬레이션되며, 임의로 판단하지 않습니다. 선택이 순전히 미학적이고 토큰이나 선례에 의해 결정되지 않은 경우, 조용히 추측하지 마십시오:
- 가장 가까운 기존 선례를 따르거나,
- 옵션(목업, 나란히 비교)을 제시하여 인간의 취향 결정을 받으십시오.
빠른 참조
| 상황 | 수행할 작업 |
|---|---|
| 새 컴포넌트가 기존 컴포넌트와 유사함 | 기존 컴포넌트를 파라미터화하고, 복사하지 마십시오 |
| 간격/색상 값이 토큰에 없음 | 가장 가까운 토큰을 사용하고, 매직 넘버를 만들지 마십시오 |
| 진정으로 새로운 시각적 결정 | 옵션과 함께 에스컬레이션하고, 임의로 판단하지 마십시오 |
| 상호작용 요소 추가 | 처음부터 키보드 + 포커스 + 접근 가능한 이름을 갖추십시오 |
강제: 확인 가능한 규칙에 대한 CI의 접근성 린팅/테스트(예: eslint-plugin-jsx-a11y, axe); 미적 절제는 에스컬레이션 규칙을 통한 리뷰어 판단입니다.
전체 근거: 헌법 제7조, engineering-constitution/references/engineering-constitution.md에 번들로 제공됨.