인터페이스 공예
대부분의 인터페이스는 아이디어에서 실패하지 않습니다. 실행에서 실패합니다 — 거의 일관된 간격, 거의 명확한 계층, 거의 올바른 타이포그래피.
다시 스타일링하기 전에 진단하세요
화면이 무엇을 위한 것인지 물어보세요. 하나의 기본 동작, 많아야 하나의 보조 동작. 기본 동작을 이름 지을 수 없다면 레이아웃 문제는 제품 문제이며 어떤 스타일링도 고칠 수 없습니다.
실제로 품질로 읽히는 것들
계층. 보는 사람이 어떤 내용을 읽기 전에 어디를 봐야 할지 알아야 합니다. 크기, 굵기, 간격 순서로 달성하세요. 색상은 가장 약한 계층 도구이며 가장 남용됩니다.
간격 리듬. 관련 있는 것은 관련 없는 것보다 더 가깝게 배치하며, 간격은 하나의 스케일에서 나와야 합니다. 일관되지 않은 간격은 사람이 느끼지만 이름을 붙일 수 없는 결함입니다. 근접성을 올바르게 맞추면 평범한 레이아웃도 디자인된 것으로 읽힙니다.
타이포그래피. 인터페이스에는 하나의 패밀리, 페이지에는 최대 두 개. 실제 스케일을 설정하고 크기를 임의로 만들지 말고 그 단계를 사용하세요. 본문 텍스트는 편안한 측정값을 원합니다 — 대략 60–75자 — 그리고 줄 높이는 측정값이 넓어짐에 따라 증가합니다.
표면의 절제. 테두리, 그림자, 채움은 모두 요소를 분리합니다. 경계당 하나를 선택하세요. 세 가지를 모두 쌓는 것이 일반 밀도에서 인터페이스가 복잡해 보이는 이유입니다.
정렬. 모든 것은 어떤 것과 정렬됩니다. 아무 것에도 정렬되지 않은 요소는 의도적이더라도 실수로 읽힙니다.
밀도는 결정입니다
정보 밀도가 높은 도구와 마케팅 페이지는 반대의 처리를 원합니다. 이것이 무엇인지 결정하고 확실히 하세요 — 데이터 테이블에 랜딩 페이지 패딩이 있는 불편한 중간 지점은 어느 쪽에도 도움이 되지 않습니다.
상태를 완성하세요
로딩, 빈 상태, 오류, 오버플로우는 제품이 미완성으로 느껴지는 부분입니다. 빈 상태는 디자인 기회입니다; 맥락 없는 스피너는 인정(admission)입니다. 긴 문자열, 긴 목록, 작은 화면은 모두 처리되어야 하며, 바라기만 해서는 안 됩니다.
다크 모드는 팔레트이지, 반전이 아닙니다
밝은 테마를 반전시키면 전형적인 나쁜 다크 모드가 생성됩니다: 순수 검정 배경, 순수 흰색 텍스트, 아무 효과 없는 그림자.
- 순수 검정 대신 매우 어두운 회색을 사용하고, 순수 흰색 대신 약간 어두운 흰색을 사용하세요. 둘 사이의 최대 대비는 후광(halation)을 유발하며 실제로 읽기에 피곤합니다.
- 고도(elevation)가 반전됩니다: 밝은 테마에서는 올라간 표면이 그림자를 드리우지만, 어두운 테마에서는 더 밝아집니다. 그림자만으로는 어두운 바탕에서 아무것도 전달하지 못합니다.
- 흰색에서 잘 작동했던 채도 높은 색상은 어두운 바탕에서 진동합니다(vibrate). 어두운 팔레트용으로 강조 색상을 재사용하지 말고 채도를 낮추고 밝게 하세요.
- 두 팔레트를 처음부터 토큰 수준에서 함께 정의하세요. 나중에 추가하려면 모든 표면을 감사해야 합니다.
접근성 기준
이것들은 다듬기(polish) 항목이 아닙니다 — 이 기준 미만에서는 일부 사람들이 인터페이스를 전혀 사용할 수 없습니다.
- 텍스트 대비가 실제 배경에 대해 표준 비율을 충족해야 하며, 이미지 위의 텍스트와 색상이 있는 버튼 내부의 텍스트도 포함됩니다.
- 색상만으로 의미를 전달하지 마세요. 오류를 나타내는 빨간색 테두리는 텍스트나 아이콘도 함께 있어야 합니다.
- 모든 상호작용 요소는 키보드로 도달 가능해야 하며, 합리적인 순서로, 눈에 띄는 포커스 상태를 가져야 합니다.
- 터치 대상은 안정적으로 탭할 수 있을 만큼 충분히 커야 하며, 인접한 대상 사이에 간격이 있어야 합니다.
- reduced-motion 환경 설정을 존중하세요: 비활성화할 수 없는 애니메이션은 일부 사용자에게 실제 증상을 유발합니다.
- 실제 의미 요소(semantic elements) — 버튼은 버튼, 제목은 순서대로. 스타일이 적용된 div는 보조 기술에 보이지 않습니다.
절대 하지 말 것
- 너무 많은 동등한 요소로 인한 계층 문제를 해결하기 위해 시각적 무게를 추가하지 마세요. 대신 제거하세요.
- 본문 텍스트를 가운데 정렬하지 마세요.
- 일치하는 포커스 상태 없이 호버 상태를 출시하지 마세요.