<< UX Summit 2020 목록으로 이동
UX Summit 의 2020 시리즈 중, Science of Great UI - Mark Miller 의 한글 요약본입니다.
- 발표자 (Mark Miller)는 16년간 훌륭한 UI를 연구해 오고 있으며, DevIQ에서 비디오 교육 과정도 제공하고 있습니다.
- 비디오 시청을 권장합니다. 쉽고 명확한 예시를 통해 좋은 화면과 그렇지 않은 것의 차이를 눈으로 쉽게 확인할 수 있습니다.
-
이 요약에 미처 담지 못한 좋은 내용은 원본을 보세요: YouTube 비디오 (25 min) 보기
이 세션에서는 매우 유용한 UI에 적용되는 과학적 원리와 응용된 팁을 배울 수 있습니다.
저는 개발 뿐만 아니라 문서 작성에도 이 원리를 적용하려고 합니다. 소개된 팁들 역시 바로 사용할 것입니다.
과학적 원리와 응용된 팁
| 과학적 원리 | 응용된 팁 | |
| 중요도와 강조 |
대비가 클수록 강조도 커진다.
화면의 모든 요소가 정보이다. |
각 화면 요소에서 강조의 정도와 중요도를 일치시키자.
내용(주목적)을 강조하자. |
| 대비와 가독성 |
명도 대비가 클 수록 가독성이 높다. |
가독성을 파악하려면, 흑백 필터를 적용하여 Brightness (밝기)를 비교한다. |
| 글 상자의 여백 |
정답은 없지만, 알맞은 수준은 있다. |
여백은 단어 사이 간격의 1.5배가 적당하다. |
| 상자의 테두리 |
테두리는 선이 얇고 명도 대비가 낮을 때, |
상자의 테두리 선은 명도 대비를 낮추고 얇은 선을 사용하자. (그러면, 여백을 충분히 줄여도 테두리가 내용을 방해하지 않는다.) |
| 모서리 |
사람은 뾰족한 곳이 중요하다고 생각한다. |
아이콘 등 작은 도형은 끝을 둥글게 만들자. 이유는,
강조하고 싶은 곳만 뾰족한 모서리를 사용하자.
|
|
도형 안쪽 비우기 vs 채우기 |
(다음 표 참조)* |
버튼을 강조하려면 버튼 색상을 채우자. |
도형 안쪽 비우기와 채우기 비교 (사각형 버튼을 비교하기)
|
안쪽이 비어있고 테두리로 그려진 버튼 |
안쪽이 모두 채워진 버튼
|
|
|
(글자를 제외하고) 표시되는 픽셀수 |
1,000 개 | 10,000 개 |
| 사용된 사각형 개수 | 2개 (테두리 바깥쪽 사각형, 안쪽 사각형) | 1개 |
| 모서리의 개수 | 8개 (테두리 바깥과 안) | 4개 |
|
선명하지 않을 때의 전달력 |
시선을 끌지 못한다.
|
시선을 끈다. |
| 시각적 메시지 |
강조되는 것은 테두리이다. (테두리에 뾰족한 모서리가 8개나 있다.) |
강조되는 것은 도형 자체이다. |
UI 향상해보기
그림1. 왼쪽의 UI 보다 오른쪽 UI가 전달력이 높다.
위 그림의 왼쪽 UI를 오른쪽 UI로 바꾸기 위한 작업
- 각 도형의 불필요한 뾰족한 모서리 제거
- 그래프의 명도 대비를 확대
- 불필요하게 대문자로만 된 글자를 소문자로 변경 (모든 글자가 강조되어 서로 자기가 중요하다고 하는 것은 좋지 않다. 중요한 것만 강조하자.)
- 의미 없고 불필요한 색상을 제거하고 명도 변화만 살짝 적용 (중요하지 않은 곳이 시선을 끌지 않도록 하자.)
- (더 자세한 내용은 원본 비디오 참고)
기타 참고 스크린샷 (원본 비디오에는 더 많은 예시가 있습니다.)
그림2. 표의 테두리가 배경과 명도 대비가 낮고 얇을 수록 내용이 더 잘 들어온다. (표의 불필요한 여백도 줄일 수 있게 된다.)
그림3. 크기가 같은 도형이라도 모서리가 둥글면 도형에 사용되는 픽셀이 더 많아져서 더 커보이고 더 잘보인다.
그림4. 뾰족한 곳은 시선을 끈다. 중요한 곳을 강조하려면 상자에서 중요한 곳만 뾰족하게 하고 다른 모서리는 둥글게 처리한다.
그림5. 버튼 이미지는 채우는 것이 더 좋다.
그림6. 버튼의 모서리는 둥근 것이 더 좋다.
<< UX Summit 2020 목록으로 이동
Recommended Comments
There are no comments to display.