과학적 원리

응용된 팁

중요도와 강조

화면의 모든 요소가 정보이다.

하지만 중요도는 다르다.
대비가 클수록 강조되고, 구분이 명확해진다.

해당 화면 요소의 중요도와 강조의 정도를 일치시키자.

전달하고자 하는 내용(주목적)이 가장 중요하다. 형식(보조 수단)을 강조하지 말자.

대비와 가독성

(색상이 아니라) 명도 대비가 클 수록 가독성이 높다.

화면에 흑백필터를 적용해보면 (Brightness)를 사용해보면 가독성을 알 수 있다.

글 상자의 여백

정답은 없지만 인간이 글을 인식하는 방식에 기반한 실험 결과에 따른 알맞은 수준이 있다.

단어 사이 간격의 1.5배가 여백으로 적당하다.

상자의 테두리

테두리 선을 얇게 하고 명도 대비를 낮추면, 안에 있는 글자 인식을 덜 방해한다.

상자의 테두리 선은 명도 대비를 낮추고 얇은 선을 사용하자. 여백을 충분히 더 줄여도 된다.

모퉁이

뾰족한 모퉁이는 시선을 끈다.
(사람들은 뾰족한 곳이 중요한 곳이라고 생각한다.)

아이콘 등 작은 도형은 끝을 둥글게 만들자.

(이유: 같은 크기의 뾰족한 도형보다 더 많은 픽셀이 들어가므로 멀리서도 더 잘 보이고, 더 커보인다. 게다가 불필요한 강조(뾰족한 지점)이 없어진다.

강조하고 싶은 곳만 뾰족한 모퉁이를 사용하자.

연필 모양 등 뾰족한 곳이 필요한 경우에도 연필 끝이 중요하지 않다면, 둥글게 처리하여 위와 같은 효과를 얻자.

도형 안쪽
비우기 vs  채우기

(아래 참조)*

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

버튼 안쪽 비우기

버튼 안쪽 채우기

(글자를 제외하고)
표시되는 픽셀수

1,000 개

10,000 개

사용되는 사각형의 개수

2개 (테두리 바깥과 안) 사각형

1개 사각형

모퉁이의 개수

8개 (테두리 바깥과 안)

4개

선명하지 않을 때의 전달력

눈에 띄지 않는다

눈에 띈다

시각적 메시지

테두리가 중요하다.
(테두리에 뾰족한 모퉁이가 8개나 있다)

도형이 중요하다.