본문 바로가기

Design Notes/Design tips

[Design tips] 003 디자인의 균형을 위한 시각 보정 tips

[Design Tips] 003 디자인의 균형을 위한 시각 보정 tips

👩🏻‍💻완성도 있는 결과물을 위한 시각 보정 알아보기
우리는 프로그램을 이용해서 요소들을 정리할 때 어색하다고 느낀 경우가 있다.

이런 경우에는 요소들의 시각적인 무게나 영역을 기준으로 하여 임의로 조절해야 하는데 이를 시각 보정이라고 한다. 

우리는 왜 시각 보정을 해야 하는지 예시를 통해 알아보자-!

 


 아이콘을 디자인할 때 시각적인 무게중심을 고려하자 

삼각형과 원형을 이용해 PLAY 버튼을 디자인해보자.

두 요소들을 프로그램으로 중심을 조절한다면 A의 아이콘은 어색해 보일 것이다.

이는 삼각형의 무게 중심이 왼쪽으로 조금 치우쳐 있기 때문이다.

우리는 시각적인 무게중심을 고려해서 우리 눈에 자연스럽게 보일 때까지

왼쪽으로 치우쳐진 삼각형을 오른쪽으로 이동해야 한다.

 


 요소들을 나열할 때 시각적인 크기와 간격을 맞추자 

다양한 형태의 동일한 크기인 요소들을 배치해보자.

수치 상으로 같은 크기의 요소들을 배치했지만 사각형에 비해 다른 형태의 요소들이 작아 보인다고 느낄 것이다.

또한, 프로그램으로 간격을 자동으로 조절해보니 수치 상으로는 완벽하게 동일한 간격이지만 

우리는 이 간격들이 똑같다고 느끼지 않는다.

 


 요소들을 나열할 때 시각적인 크기와 간격을 맞추자 

다양한 형태의 요소들을 크기가 같아 보이도록 맞추자.

크기를 조정하면서 요소들의 일부분이 기준선으로부터 조금씩 넘치게 된다.

이렇게 밖으로 나간 부분들은 시각적으로 크게 느껴지지 않고 무시되는데 이를 시각 삭제라고 한다.

또한, 도형들 사이의 여백 공간을 적절하게 조정한다면, 시각적으로  요소들이 일정하게 보일 것이다.

 


 두 개의 선은 동일한 길이일까? 시각적인 길이를 조절하자 

A의 두 개의 선은 동일한 길이다. 그러나 우리는 하단의 선이 더 짧다고 느낀다.

B의 두 개의 선은 수치 상으로  동일한 길이가 아니다. 그러나 우리는 두 개의 선이 동일하다고 느낀다.

 


 글자를 보면 시각 삭제를 알 수 있다 

우리가 동일한 크기라고 느끼는 글자도 미세하게 서로 크기가 다르다.

p, o, r, a의 소문자를 파악해보자. 소문자 둥근 부분이 가이드 구역보다 더 큰 것을 알 수 있다.

우리는 시각 삭제를 통해서 글자들이 모두 동일한 크기라고 느낀다.

 


 글자 사이에 왜 Kerning(커닝)이 필요할까? 

커닝은 서로 다른 형태의 글자와 글자의 간격을 시각적으로 일정하게 보일 수 있도록 한다.

위의 텍스트에 커닝을 Metrics로 설정해보았다.

T와 y의 간격은 겹쳐있고 r과 a도 다른 글자 사이에 비해서 많이 붙어있다.

자간은 글자의 모양과 상관없이 고정된 값을 가진다는 점에서 커닝과 차이가 있다.

 


 텍스트를 정렬할 때 시각적인 무게 중심을 맞추자 

A를 보면 우리는 Y가 P보다 오른쪽으로 이동했다고 느낀다. 그러나 두 단어의 위치는 같다.

B의 Y와 P는 동일한 위치가 아니다. 기준선을 그어보면 P가 Y에 비해서 오른쪽으로 이동했다고 느낀다.

그러나 우리는 시각적으로 같은 위치에 정렬되었다고 느낀다.

 


 다양한 형태인 문장부호의 공간을 인식하자 

우리는 “”, ‘’, (), [], 〈〉, 《》 등의 다양한 형태인 문장부호의 공간을  인식할 필요가 있다. 

이를 인식하지 않고 텍스트를 작성한다면 텍스트의 정렬이 어색해 보일 것이다. 

따옴표를 함께 왼쪽으로 정렬한 A의 경우, 첫 문장이 오른쪽으로 이동한 것처럼 느껴진다.

우리는 더 효과적으로 텍스트를 전달하기 위해서 따옴표의 위치를 B처럼 이동하는 것이 좋다.