UI의 일관성은 같은 역할에 같은 규칙을 적용하는 데서 나온다
주장
UI의 일관성은 모든 요소를 같게 만드는 것보다 같은 역할과 관계를 같은 규칙으로 표현하는 데서 나온다. 색상·문구·타이포그래피·간격의 선택은 그 역할과 기존 제품 규칙에 연결한다.
값이 같아도 역할이 다를 때
같은 값처럼 보여도 의미가 다르면 나중에 테마나 상태가 바뀔 때 함께 변경되어서는 안 된다. 반대로 같은 행동의 이름이나 강조 방식이 달라지면 사용자는 차이가 있는지 다시 판단해야 한다.
색상·간격·용어의 역할을 맞추기
- 보조 본문에는 보조 본문 역할의 색상 토큰을 쓴다. 값이 같다는 이유로 테두리 토큰을 빌려 쓰지 않는다.
- 같은 관계에는 같은 간격·정렬 기준을 적용한다. 그룹을 구별하는 간격은 그룹 내부의 관계와 함께 판단한다.
- 새 규칙을 추가하기 전에 프로젝트의 기존 토큰·밀도·용어를 읽는다. 다른 역할의 차이는 지우지 않는다.
근거
- 인터페이스 판단과 검토 기준 - Jakub Krehel: better-colors의 역할별 토큰, better-layout의 관계·정렬, better-writing의 일관된 용어.
- DESIGN.md 레퍼런스 활용 - VoltAgent: 사례에서 색상·글자·간격을 함께 비교하는 활용 맥락.