Jump to content
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr ×
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr

[아티클][UX Summit 2020 요약] 훌륭한 UI에 적용된 과학


Recommended Posts

<< 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 채우기

(다음 표 참조)*

버튼을 강조하려면 버튼 색상을 채우자.

 

도형 안쪽 비우기와 채우기 비교 (사각형 버튼을 비교하기)

 

 안쪽이 비어있고 테두리로 그려진 버튼

Hollow and Clear.png

안쪽이 모두 채워진 버튼

Filled and Clear.png
(글자를 제외하고)
표시되는 픽셀수
1,000 개 10,000 개
사용된 사각형 개수 2개 (테두리 바깥쪽 사각형, 안쪽 사각형) 1개
모서리의 개수 8개 (테두리 바깥과 안) 4
선명하지 않을 때의
전달력
시선을 끌지 못한다.Hollow and Blurred.png

시선을 끈다.
Filled and Blurred.png

시각적 메시지 강조되는 것은 테두리이다.
(테두리에 뾰족한 모서리가 8개나 있다.)
강조되는 것은 도형 자체이다.

 

UI 향상해보기

6_Improvement.png
그림1. 왼쪽의 UI 보다 오른쪽 UI가 전달력이 높다. 

위 그림의 왼쪽 UI를 오른쪽 UI로 바꾸기 위한 작업

  • 각 도형의 불필요한 뾰족한 모서리 제거 
  • 그래프의 명도 대비를 확대
  • 불필요하게 대문자로만 된 글자를 소문자로 변경 (모든 글자가 강조되어 서로 자기가 중요하다고 하는 것은 좋지 않다. 중요한 것만 강조하자.)
  • 의미 없고 불필요한 색상을 제거하고 명도 변화만 살짝 적용 (중요하지 않은 곳이 시선을 끌지 않도록 하자.)
  • (더 자세한 내용은 원본 비디오 참고)

 

기타 참고 스크린샷 (원본 비디오에는 더 많은 예시가 있습니다.)

1_Tableborder.png
그림2. 표의 테두리가 배경과 명도 대비가 낮고 얇을 수록 내용이 더 잘 들어온다. (표의 불필요한 여백도 줄일 수 있게 된다.)

 

2_Icon.png
그림3. 크기가 같은 도형이라도 모서리가 둥글면 도형에 사용되는 픽셀이 더 많아져서 더 커보이고 더 잘보인다. 

 

3_Sharp.png
그림4. 뾰족한 곳은 시선을 끈다. 중요한 곳을 강조하려면 상자에서 중요한 곳만 뾰족하게 하고 다른 모서리는 둥글게 처리한다. 

 

4_Fill.png
그림5. 버튼 이미지는 채우는 것이 더 좋다.

 

5_Button.png
그림6. 버튼의 모서리는 둥근 것이 더 좋다.

 

 

 



<< UX Summit 2020 목록으로 이동


View full 아티클

이 댓글 링크
다른 사이트에 공유하기

이 토의에 참여하세요

지금 바로 의견을 남길 수 있습니다. 그리고 나서 가입해도 됩니다. 이미 회원이라면, 지금 로그인하고 본인 계정으로 의견을 남기세요.

Guest
이 토픽(기고/질문)에 답하기

×   서식있는 텍스트로 붙여넣기.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   이전에 작성한 콘텐츠가 복원되었습니다..   편집창 비우기

×   You cannot paste images directly. Upload or insert images from URL.

 공유하기

×
×
  • Create New...

중요한 정보

이용약관 개인정보보호정책 이용규칙 이 사이트가 더 잘 작동하기 위해 방문자의 컴퓨터에 쿠키가 배치됩니다. 쿠키 설정 변경에서 원하는 설정을 할 수 있습니다. 변경하지 않으면 쿠키를 허용하는 것으로 이해합니다.