이 페이지는 UI 컴포넌트가 각자 다른 디자인처럼 보이지 않는지 확인한다.
컨트롤 샘플
- checkbox / radio / select가 빠져 있지 않은가
- icon button이 텍스트 버튼보다 지나치게 작지 않은가
- hover와 disabled 상태가 눈으로 바로 구분되는가
- card 내부의 링크가 본문 링크보다 과하게 강조되지 않는가
원문 코드
<button class="button button--primary">저장</button>
<input class="input" type="search" placeholder="검색" />
<select class="select">
<option>기본</option>
<option>정렬</option>
</select>
검증 포인트
| 항목 | 기대값 |
|---|---|
| 버튼 | primary / secondary / disabled 느낌이 구분되되 같은 언어를 쓴다 |
| 입력 | focus 영역과 높이가 너무 들쭉날쭉하지 않다 |
| chip | 배지와 태그가 카드보다 강하지 않다 |
| 카드 | 목록 카드와 본문 카드가 같은 반경을 공유한다 |
| 상태 | hover, focus, disabled가 동시에 튀지 않는다 |