유튜브가 사용한 디자인 착시 효과
뇌를 속이는 시각보정법
간혹 우리의 뇌는 제작 의도와 다르게 의미를 받아들이는 경우가 있다.
이것을 '착시 효과'라고 부른다.
예를 들어 가장 유명한 착시효과는 아래와 같다.
분명 같은 길이의 직선임에도 양 끝의 보조 화살표로 인해 길이가 다르게 보이는 현상이다.
이러한 착시 오류를 미리 예방한다면, 균형이 잘 맞는 훌륭한 디자인으로 거듭날 수 있다.
1920년대 게슈탈트 (the Gestalt theory) 이론에서 시각이 받아들이는 정보가 뇌에 미치는 영향을 설명했다. 오늘은 게슈탈트 이론을 바탕으로 디자인에 고려해야 할 효과적 시각보정 (optical balance)을 다뤄보았다.
1. 시각적 무게
위 A의 사각형과 원형 중 어떤 것이 더 무게감 있게 느껴지는가?
당연, 왼쪽의 사각형이 더 시각적 무게가 느껴질 것이다.
하지만 디자인적 측면에서 보았을 때, A의 사각형과 원형은 같은 높이 (300px)로 제작되었다.
그러므로 원칙적으로 이 둘의 시각적 무게는 같아야 한다.
이번엔 B의 사각형과 원형의 크기를 비교해 보자. 어느 쪽이 더 시각적 무게가 느껴지는가?
아마 거의 비슷하게 느껴질 것이다.
이유는 B의 원형이 사각형의 높이보다 10% 증가한 330px 짜리 도형이기 때문이다.
A와 B의 도형에서 차이를 발견했는가?
이것이 디자인에서 필요한 시각보정의 역할이다.
다이아몬드, 세모 도형에서도 동일한 현상이 일어난다.
2. 정렬
위 시각적 무게와 마찬가지로 정렬방식 또한 시각적 보정이 필요하다.
이러한 착시효과를 가장 잘 활용한 기업이 YOUTUBE이다.
원칙적으로 네모 배경에 세모 버튼을 중앙 정렬하면, 1번째 그림과 같이 세모의 위치가 중앙에 배열되어야 한다.
하지만, 원칙을 따를 경우 세모의 무게중심이 앞으로 치우쳐 보이기 때문에
Youtube는 시각적 보정을 통해 세모의 위치를 조금 뒤로 수정해 균형 잡힌 디자인을 완성했다.
이처럼 형태는 시각적 인지에서 가장 첫 번째 단계이다.
시각 보정은 시각적 인지를 높여주는 숨겨진 조력자와 같다.
오늘, 당신의 디자인은 시각적으로 편안한 디자인인가?
기억해야 할 것
시각적 무게는 도형의 크기, 위치, 주변 환경에 따라 변화한다.
원형, 다이아몬드형, 세모형 등은 사각형보다 너비가 넓어야 동일하게 느껴진다.
