우리는 모두 모양, 선 과 같은 시각적인 디자인 요소에 대해 들어보았을 것입니다.
저는 그래픽 디자이너로서 몇 가지 시각적 원칙들을 공유하려 합니다.
이 정보들로 인하여 디자인 커뮤니티 전체가 레벨업 하기를 바랍니다. ?
1. 중력
중력은 이미 우리의 현실 인식에 깊게 스며들어 2차원 물체에도 그 힘을 발휘합니다.
아래 이미지를 예시로 들어볼게요!
마치 상단에 있는 원이 아래로 금방 떨어질 것처럼 위태위태 해 보이지 않나요?
이제 아래 이미지를 보겠습니다.
이 원은 떨어지기는커녕 아래쪽에 배치되어 있어 평화롭게 보일 것입니다.
느껴지는 게 있으신가요? 첫 번째 이미지에서는 시각적으로 무거워 보이도록 배치하여 불편하고 불안하게 만들죠.
이처럼, 디자인을 할 때에는 의도적인 감정을 전달하기 위해 이러한 것들을 인지하고 있어야 됩니다.
2. 읽는 방향
우리는 읽는 방향을 왼쪽에서 오른쪽으로, 위쪽에서 아래쪽으로 읽습니다.
그렇기 때문에 왼쪽에 있는 물체는 시작하는 것으로, 오른쪽에 있는 물체는 끝나는 것으로 인식하고 있죠.
위 이미지를 보면 원이 왼쪽에 배치되어 있습니다. 반대로, 아래에 있는 이미지는 오른쪽에 배치되어 있죠.
우린 아래의 이미지를 원이 밖으로 나가는 것으로 인식할 것입니다.
이 점을 사용해서 특정 감정을 전달할 수도 있을 것입니다.
사물을 들여다보는 듯한 느낌을 주고 싶다면 아래와 같은 이미지로 구상할 수 있겠습니다.
반대로, 도망가는 듯한 느낌을 주고 싶다면 이렇게 연출할 수도 있습니다.
3. 시선의 우선순위
앞서 말했듯이 우리는 왼쪽에서 오른쪽으로, 위쪽에서 아래쪽으로 읽기 때문에
자연스럽게 왼쪽 상단에 있는 것을 먼저 보고 나서 오른쪽 하단으로 시선이 자연스럽게 이동하여 그다음에 사물을 보게 됩니다.
이는 여러분이 모양과 크기, 색상이 같은 물체를 배치하더라도 시각적인 계층 차이를 이용할 수 있다는 것입니다.
아래의 예시를 볼까요?
여러분이 왼쪽 상단에서 오른쪽 하단으로 읽는 순서로 책을 읽어왔다면,
오른쪽 하단보다 왼쪽 상단을 더 먼저 봤을 것입니다.
4. 시각적 긴장감
‘시각적 긴장감’ , 저는 이것을 ‘테이블 끝자리에 놓여있는 물건’처럼, 물리적인 긴장감을 시각적으로 표현할 수 있다고 생각합니다.
아래 이미지를 볼까요?
왠지 모르게 불편합니다.
아래 이미지에 표시된 빨간색 원들은 시각적 긴장감을 유발하는 요소들입니다.
이처럼 여러분은 시각적 긴장감을 유발하는 요소들로 사람들의 시선을 끌어당겨 불안감을 느낄 수 있도록 할 수 있습니다.
아마도 시위 포스터처럼 긴장감 있는 디자인을 하거나, 시선을 집중시키는 디자인을 할 때 사용할 수 있겠죠?
주의할 것은, 여러분이 이런 감정을 의도한 것처럼 정확히 전달해야 한다는 것입니다. 실수처럼 보이지 않도록 해야 해요.
아래 이미지 또한 특정 위치에 시선이 집중되는 구조의 이미지입니다.
5. 동적인 이미지 vs 정적인 이미지
정적인 이미지는 지루함을 느낄 수 있습니다.
이런 이미지를 흥미롭고 자극적으로 만드는 쉬운 방법은 수평선만 기울이면 되는 것입니다.
아래 예시 이미지를 볼까요?
이 이미지의 수평선을 기울어본다면 갑자기 도시 풍경이 훨씬 더 흥미롭고 동적으로 보이겠죠?
아래 3점 투시 구도 이미지처럼, 테두리를 합쳐 집중시키거나,
모양을 바깥쪽으로 번지게 한다면 구도가 더 역동적이고 흥미로워 보일 수 있습니다.
6. 네거티브 스페이스 (숨은 공간, 여백의 미) 활용
방향성을 가지고 있는 도형 혹은 물체를 이용하여 네거티브 스페이스를 연출할 수 있습니다.
아래 이미지를 보면, 시선이 우측 상단으로 향할 것입니다.
하지만, 도형이 작아서 방향성이 약할뿐더러 여백이 많아 여러분의 시선이 우측 상단에서 머물다가 끝나버릴 것입니다.
이 이미지를 약간 잘라보고 크기를 조정해볼게요.
어떤가요? 시선을 더 집중시키고 동적으로 보이지 않나요?
여러분이 CSS, HTML 또는 다른 기타 기술을 다룰 능력이 없더라도, 이렇게 충분히 하고 싶은 구도를 연출할 수 있습니다.
이러한 시각적 원칙은 인쇄, 디지털, 웹 등 모든 매체에 적용되기 마련이죠.
저자 : Chris Lee
원문 출처 : 6 visual design principles that UX designer should be aware of < 보러가기 >
오늘은 여기까지!
위픽을 구독 해주시면, 매주 유용한 아티클을 발송해드립니다 ✉
항상 감사드립니다 ?
