•
한 끗 차이로 좋아 보이는 UI 법칙 16가지 >
•
•
내용 요약
1. 공백을 사용해 관련 요소 그룹화하기
정보를 관련 요소끼리 작은 그룹으로 나누면 인터페이스를 구성하고 정리하는 데 도움이 됩니다. 이렇게 하면 사람들이 더 빠르고 쉽게 이해하고 기억할 수 있습니다.
•
관련 요소를 같은 컨테이너에 배치하기
•
관련 요소를 서로 가깝게 배치하기
•
관련 요소를 비슷하게 보이게 만들기
•
관련 요소를 나란한 선으로 정렬하기
2. 일관성 유지
UI 디자인의 일관성이란 비슷한 요소들이 비슷한 방식으로 보이고 작동하는 것을 의미합니다. 이는 제품 내에서뿐만 아니라 잘 알려진 다른 제품과 비교할 때도 마찬가지입니다. 이렇게 예측 가능한 기능은 사람들이 작동 방식을 계속 배울 필요가 없기 때문에 사용성을 개선하고 오류를 줄입니다.
3. 비슷해 보이는 요소가 비슷하게 작동하도록 만들기
요소가 비슷해 보이면 사람들은 비슷한 방식으로 작동할 거라 기대합니다. 따라서 동일한 기능을 가진 요소에는 일관된 시각 효과를 사용하세요. 반대로 기능이 다른 요소는 다르게 보이도록 하세요.
4. 명확한 시각적 계층 구조 만들기
명확한 중요도 순서, 즉 시각적 계층 구조는 사람들이 정보를 빠르게 스캔하고 관심 있는 영역에 집중하는 데 도움을 줍니다. 또한 정돈된 느낌을 주어 심미성 역시 향상됩니다. 'the Squint Test'를 사용하면 시각적 계층 구조가 명확한지 빠르고 쉽게 확인해 볼 수 있다.
5. 불필요한 스타일 제거하기
불필요한 정보와 시각적 스타일은 주의를 산만하게 하고, 인지 부하를 증가시킬 수 있습니다.
6. 목적에 맞는 색상 사용
색상을 목적에 맞게 아껴 사용하세요. 혼란스럽고 산만할 수 있으므로 장식용으로만 생각을 사용하는 건 피해야 합니다. 흑백으로 시작해 의미를 전달해야 하는 곳에만 색상을 쓰세요. 텍스트 링크 및 버튼과 같은 인터랙티브 요소에 브랜드 색상을 적용하고 비 대화형 요소에는 브랜드 색상을 사용하지 않도록 주의하세요.
7. 인터페이스 요소의 명암비가 3:1인지 확인합니다.
양식 필드 및 버튼과 같은 사용자 인터페이스 요소는 최소 3:1의 대비 비율을 가져야 합니다. 대비가 낮은 버튼의 위험은 저시력자는 버튼 모양을 볼 수 없기 때문에 버튼임을 식별하지 못할 수도 있다는 것입니다. 버튼 대비 비율은 3:1 이상으로 높이면 버튼에 대한 접근성을 높이고 시각적 계층 구조를 수정하는데 도움이 됩니다.
8. 텍스트 대비 비율이 4.5:1인지 확인합니다.
작은 텍스트 (18px 이하)는 최소 4.5:1의 대비가 필요합니다. 큰 텍스트 ( Bold 18px 이상 / Regular 24px 이상) 최소 3:1의 대비가 필요합니다.
9. 색상에만 의존하지 마세요.
색맹이 인터페이스를 사용할 수 있도록 하려면 색에만 의존하여 의미를 전달하거나 시각적 요소를 구분해서는 안됩니다. 인터페이스 요소를 구분하기 위해 추가적인 시작적 단서를 사용해야 합니다.
10. 단일 산세리프 서체 사용
인터페이스 디자인에는 일반적으로 가장 가독성이 높고 중립적이며 단순한 단일 산세리프 서체를 사용하는 것이 가장 안전합니다.
11. 소문자가 큰 서체 사용
일반적으로 소문자는 작은 크기에서 가독성이 높으므로 소문자 높이가 크고 글자 간격이 넓은 서체를 선택하세요.
12. 대문자 사용 제한하기
글을 읽을 때 각 글자를 보는 것이 아니라 단어의 모양을 보게 됩니다. 모양이 단어를 더 빨리 인식하는 데 도움이 됩니다. 대문자 단어는 모두 같은 직사각형 모양입니다. 따라서 각 글자를 하나씩 읽어야 합니다.
13. 레귤러 / 볼드 두께의 가중치만 사용하기
레귤러 혹은 볼드 글꼴 가중치만 사용해 디자인 시스템을 단순하고 간결하게 유지하세요.
•
제목에 볼드 글꼴 굵기를 상용해 제목을 강조하세요
•
다른 작은 텍스트에는 레귤러 글꼴 굵기를 사용합니다
•
매우 얇거나 두꺼운 글꼴 굵기를 사용하기로 결정한 경우, 작은 크기에서는 읽기 어려울 수 있으므로 제목과 큰 텍스트에만 사용하세요
14. 순수한 검은 텍스트 피하기
높은 대비는 텍스트를 읽을 때 눈의 피로를 유발할 수 있습니다. 검은색 색상 밝기는 0%이고 흰색은 100%입니다. 색상 밝기의 차이가 크면 눈이 더 많은 일을 하게 됩니다. 순수한 검은색 대신 짙은 회색을 선택하는 것이 가장 안전합니다.
15. 텍스트 왼쪽 정렬
긴 본문 텍스트의 경우, 가운데 정렬 또는 맞춤 텍스트를 피하는 것이 가장 안전합니다.
16. 본문 텍스트에 최소 1.5 줄 높이 사용하기
줄 높이는 두 줄의 텍스트 사이의 수직 거리를 말합니다. 줄 사이의 간격은 사람들이 같은 줄의 텍스트를 다시 읽는 것을 방지하는 데 도움을 줍니다.
•
느낀점
UI디자인의 디테일을 높이기 위해 읽게 되었습니다. UI 디자인이 시각적 계층 구조를 고려한다는 점에서 편집 디자인과 비슷하다고 생각했었는데, 다른 점도 많고 UI 디자인 측면에서 고려해야 할 요소들이 많은 걸 알았습니다. 글을 통해 제가 놓치고 있었던 점들을 다시 한번 깨달았고 디테일을 살리기 위한 요소들을 배울 수 있었습니다.