우리는 모양, 선 등 시각 디자인 요소에 대해 들어봤고, 대비, 강조, 리듬 등의 원리들을 압니다.
꼭 기억하세요. 제가 그래픽 디자이너로서 배웠던 자주 언급되는 원칙들은 아니지만, 지금까지도
제가 사용하는 몇 가지 알아채기 힘든 것을 알려드리겠습니다.
잘 알려지지 않은 심화과정이지만, 저는 그것들을 공유함으로써 디자인 커뮤니티 전체가 레벨업 하기를 바랍니다!
6가지 원칙들
1. 중력
중력은 물체와 모양, 심지어 시각적 소통(visual communication)에서도 적용됩니다.
이상하게 들리겠지만, 중력이 실제 생활 안에서처럼 2d 물체를 아래로 잡아당기는 힘과는 다릅니다.
중력은 우리의 현실 인식에 깊이 스며들어 종이에 있는 2차원 물체에도 적용됩니다.
아래 이미지를 예로 들어 보겠습니다. 마치 상단의 원이 금방이라도 떨어지기를 기다리는 것처럼 살짝 불안합니다.
이제 아래 그림을 보세요. – 반전 시킨 이미지
이 구도는 공이 떨어진다는 느낌은 덜하고, 단순히 물체가 페이지 하단에 놓여 있는 느낌입니다. 바닥에있고 평화롭습니다.
여기서 알아가야 하는것은? 위쪽에 시각적으로 무거운 물체를 배치해서 불편하고 불안하게 만드는 디자인을 할 때는, 의도적으로 알고 해야 한다는 것입니다. (의도적으로 이런 감정을 느끼게 할 경우는 제외입니다.)
2. 읽는 방향
서양에서는(나머지는 반대로) 왼쪽에서 오른쪽으로, 위에서 아래로 읽습니다. 이러한 이유로 왼쪽에 있는 물체는 들어가는 것으로 보이고, 오른쪽에 있는 물체는 나가는 것으로 보입니다.
여기 왼쪽에 원이 있습니다. 다시 말씀드리지만, 왼쪽에서 오른쪽으로 읽기 때문에 원이 구도에 들어가는 느낌입니다. 아래에서는, 원이 빠져나가는 듯한 느낌입니다.
여러분은 이것을 특정한 감정을 전달하는데도 사용할 수 있습니다.
예를 들어, 물체가 엿보는 것처럼 느끼게 하고 싶나요? 다음과 같은 구도를 만들 수 있습니다.
반대로, 멀리 도망가는 물체(또는 글자)를 전달하고 싶으신가요?
3. 읽는 우선순위
우리는 왼쪽에서 오른쪽으로 위에서 아래로 읽기 때문에, 자연스럽게 왼쪽 위에 있는 물체를 먼저보고 난 다음, 우리의 시각은 오른쪽 아래로 내려온 후에 나머지를 보게 됩니다.
이는 여러분이 같은 모양, 색상, 크기의 물체를 배치하더라도 시각적 계층 구조(당신이 사용자가 제목 먼저 보고, 그 후에 내용을 보기 원하면) 차이를 만듭니다.
아래에 예를 들어 보겠습니다.
대부분의 경우처럼, 왼쪽 상단에서 오른쪽 하단으로 영어책을 읽으며 자랐다면 오른쪽 하단 원을 보기 전에 왼쪽 상단 원을 먼저 봤을 것입니다.
4. 시각적 긴장감(Tension)
저는 이것을 물리적인 긴장감이 시각적인 긴장감으로 전환되어 증폭되는 것으로 묘사한 적이 있습니다.
이런 느낌은 테이블 끝에 액체가 가득 담긴 잔이 놓여 있는 것을 볼 때의 기분입니다.
종종 시각적 긴장감은 의도되지 않은 것입니다. – 디자이너는 실수로 물체를 서로 가깝게 배치하여 무의식적으로 긴장감을 만든다는 사실을 알지 못합니다. 이런 배치는 허접(조잡, 엉성)하게 보일 수 있습니다. 아래 이미지를 살펴봅시다.
불편하죠? 아래에 강조 표시된 모든 지점이 시각적 긴장감을 일으키는 곳들입니다.
의도적이라면, 시각적 긴장감을 이용해 사용자의 시선을 끌어당겨 불안감을 느끼게 만들 수 있습니다. 아마 시위 포스터를 디자인을 하고 있거나, 누군가의 관심을 무언가에 집중시키고 싶겠죠.
이런 경우, 당신의 Tension(긴장감)은 의도적이어야 하고 실수처럼 보이지 않도록 해야 합니다.
다음은 특정 위치에 의도적으로 긴장감을 집중시킨 구도입니다.
5. 동적 VS 정적
정적인 구도는 가끔 지루하게 다가올 수 있습니다. 더 멋지고 더 신나는 느낌을 주는 쉬운 방법은 간단하게 수평선을 기울이는 것입니다. 여기 진부한 느낌의 정적 이미지의 예가 있습니다.
이제 수평선을 기울이면, 갑자기 도시의 모습이 훨씬 더 재밌어 보입니다.
구도를 더 역동적이고 재밌게 만들기 위해 테두리를 합치거나 모양을 바깥쪽으로 번지게 해보세요.
이 3점 투시 구도를 봅시다.
6. 네거티브 스페이스(숨은 공간, 여백의 미) 활용
방향성을 가진 모양을 이용해서 네거티브 스페이스를 어느 정도 활성화할 수 있습니다. 방향성 힘이 너무 약하면 네거티브 스페이스가 비활성 상태로 유지됩니다. 여기 당신의 시선을 끌고, 눈을 위쪽에서 오른쪽으로 움직이게 하는 모양이 있습니다.
문제는 페이지 오른쪽 상단에 시선이 도달할 때쯤에는 관심이 사라질 수 있다는 것입니다. 여러분의 눈이 물체를 지나 움직였지만, 그곳에는 그냥 너무 많은 공간이 있고 물체의 방향력이 너무 약해 시선이 멀어집니다.
공간이 비활성 상태로 남죠. 약간 잘라보고 크기 조정을 해봅시다 :
갑자기 도형 주변의 공간이 의도적이고 활동적으로 보입니다.
이해되시나요? 만약 당신이 누군가의 시선을 이리저리 움직이게 할려면, 네거티브 스페이스를 인지하게 해야 합니다. 쉬운 방법은 손가락으로 물체를 가리키고 눈이 자연스럽게 움직이는 방향으로 움직여 시선이 자연스럽게 떨어지는 위치를 인지하는 것입니다.
그렇게 하기 전이라면, 네거티브 스페이스을 활성 상태로 유지하기 위해서 모양이나 테두리 레이아웃을 수정 할 필요가 있습니다.
(네거티브 스페이스는 미술, 건축, 조소, 회화등에 쓰이는 용어로 구글(링크)에서 검색하면 많은 정보가 나옵니다.)
CSS, HTML 또는 사용하는 기타 기술의 한계를 당신이 디자이너로서 하고싶은 구도를 못하는 변명(핑계)으로 사용해서는 안됩니다. 이러한 시각적 원칙은 인쇄, 디지털, 웹 등 모든 매체에 적용됩니다.
그것들은(CSS, HTML 또는 사용하는 기타 기술) 단순히 우리의 머리와 눈이 어떤 형태로든 시각적 정보를 인식하도록 연결하는 방법일 뿐입니다!
이 글은 해외 포스팅인 https://uxdesign.cc/6-visual-design-principles-that-ux-designers-should-be-aware-of-f609f9293703 읽고 정리한 글입니다.
여러분들에게 많은 도움이 되셨길 바랍니다.
글 번역에 도움주신 디자이너 단톡방의 지홍님께 감사드립니다.