시각삭제와 시각보정

디자인은 여러 시각적 요소의 구성을 완성된다. 그 과정에서 구성의 기준과 표현에 따라 퍼포먼스가 달라진다.

시각적 요소들을 구성하는 과정에서 어떤 기준을 적용하고 표현하는지에 따라 퍼포먼스가 충분히 달라질 수 있다.

같은 프로젝트를 진행하더라도 디자이너마다 시안의 퍼포먼스가 다른 이유는 각자 적용하는 시각적 기준이 다르기 때문이다.

시각적 요소들의 기준 하나하나 모두 중요하지만, 시각적 요소들의 조화가 가중 중요하다. 

 

 

시각삭제

시각 삭제란 시각적으로 느껴지는 삭제 부분을 말하며 정네모 밖으로 나간 뾰족한 삼각형이나 마름모꼴 부분이나 둥근 부분이 시각적으로 무시되는 현상을 말한다. 즉 시각적 삭제 부분을 고려해 작아 보이는 부분을 키워야 원래의 네모 면적과 같은 크기로 보이게 된다.

 

 

시각보정

우리는 프로그램을 이용해서 요소들을 정리할 때 간격이나 무게가 어색하다고 느낀 경우가 있다. 
이는 착시현상 때문에 글자나 도형이 불균형으로 보이거나 조화되지 않아 보이기 때문이다.

컴퓨터는 시각적인 무게 중심이 어디에 위치하고 있는지 정확하게 계산해 낼 수 없다.

컴퓨터는 단지 넓이, 높이, x/y 좌표 같은 정보에 의존할 뿐이다.디자이너로서 우리는 시각 보정을 통해 이를 보완할 필요가 있다.

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

 

시각보정을 한 아이콘은 삼각형이 중심에서 벗어나 있음에도 불구하고 정렬되어 보인다.

 

 

아주 미묘하지만 아이콘이 텍스트보다 조금 더 진하고 무거워 보인다는 것을 느낄 수 있다.

이것의 균형을 맞추기위해 아이콘 색상을 가볍게 만들거나, 텍스트 색상을 무겁게 만들어 시각보정을 할 수 있다.

 

 

 

위의 원과 사각형을 보면 원본은 같은 크기임에도 시각적으로 느껴졌을대 원이 미묘하게 작아보임을 느낄 수 있다. 사각형과 비슷한 크기로 보이기위해 원의 면적을 넓혀 시각보정을 했다.

 

 

 

타이포그래피에서도 마찬가지다. Cap-height나 베이스라인의 아래로 떨어지거나 솟아오르는 곡선들을 보면 알 수 있다.  만약 이런 곡선들이 없었다면, 각각의 글자들은 주변의 글자들보다 작게 느껴졌을 것이다.

 

일반적으로 대문자 텍스트는 소문자 텍스트보다 두드러져 보이기 때문에 보정할 필요가 있다. 대문자가 더 커보여야 하는 디자인적 의도가 아니라면 대문자 텍스트는 소문자보다 더 작게 시각 보정을 하면 된다.

 

인터페이스를 디자인할 때 이런 작은 디자인 디테일들을 다듬는 것만으로도, 전반적인 웹사이트의 느낌에 영향을 미친다. 작은 것에까지 신경을 쓴다면 결국 좋은 디자인을 만들 수 있을 것이다. 이것이 디자인 과정의 일부가 되면, 텍스트 크기를 2px 줄이는 것이나 삼각형의 크기를 10px 줄여서 균형 잡는 것 때문에 추가적으로 시간이 소요된다. 하지만 이 과정을 통해 보다 완벽한 균형의 디자인이 완성된다. 

컴퓨터, 심지어 인공지능일지라도 디자인적인 맥락에 대해서는 완벽히 이해하지 못한다. 때문에 디자이너들이 직접 보정하는 것이 더 정확할 수 밖에 없다. 컴퓨터가 전반적인 디자인 언어 안에서 개별적인 요소의 맥락을 이해할 수 있을 때 까지, 컴퓨터의 계산을 무작정 따를 수 없다.

우리는 컴퓨터의 결정 대신, 눈과 본능적인 감각을 이용해야 한다. 디자이너들은 일하는 동안 그들의 감각을 꾸준히 연마해야 하고, 그것이 컴퓨터의 계산과 다를지라도 우리는 그것을 믿어야 한다. 

 

 

사례

 

닌텐도 로고 디자인

상대적으로 무게감이 덜 나가는 왼쪽부분의 넓이를 넓혀 시각 보정을했다.

 

 

구글의 시각적보정 사례

 

 

[참고자료]

https://brunch.co.kr/@suyoung/8

불러오는 중입니다...

https://joonfont.com/forum/?mod=document&uid=29

시각디자인에서의 시각보정과 시각삭제

https://type.method.ac/#

Kern Type, the kerning game