본문 바로가기

디자인 공부

놓치기 쉬운 작은 디테일 . 시각보정


9. 놓치기 쉬운 작은 디테일, 시각적 보정


안녕하세요 :-) 오늘의 디자인 공부는 시각적 보정에 대해 준비했습니다. 본 포스팅은 Luke Jones의 Optical Adjustment 및 여러 디자이너의 시각적 보정에 관한 여러 자료를 참고하여, 포스팅하였음을 알려드립니다.




시각적인 보정이 무엇일까?


포토샵이나 일러스트레이터를 다루어보신 분들은 아시겠지만, 현대 사회의 발전된 그래픽 툴들은 우리에게 아주 정밀한 값까지 키보드 몇 번과 마우스만으로도 쉽게 가능하게 만들었습니다.


우리는 이제 똑같은 색상을 만들기 위해 여러 번의 색상 조합과 희석의 노고를 겪지 않아도 이제 CMYK, RGB, HEX/HTML 등 색상 값만 안다면, 키보드로 입력하여 똑같은 색상으로 맞출 수 있고, 자로 직접 재고 수치를 알 필요 없이 오브젝트를 쉽게 정렬할 수 있습니다. 그리고 가장 큰 메리트는 그 어떤 실수를 하였다 하더라도 'Ctrl+z'하나만 누르면 시간을 되돌릴 수 있다는 것입니다.


하지만, 이렇게 완벽해 보이고 편리한 디지털 환경에서도 디자이너들이 놓치는 것이 있습니다. 바로 기계적인 프로그램 값을 맹신하여, 시각 보정 요소들을 놓친다는 것입니다. 그 작은 디테일들이 무엇인지 한번 알아보면서 시각적 보정을 설명해드리겠습니다.




크기에 따른 시각 보정

A를 보시면 같은 크기를 맞추었지만, 왠지 모르게 원이 작아 보입니다. 분명히 정확한 값을 입력했는데 이런 상황이 발생하니 당황스럽습니다.


우리의 눈은 사방 길이를 통해 크기를 인식하지 않고, 면적으로 오브젝트를 보고 가늠합니다. 사각형과 원의 사방길이의 크기는 같지만, 같은 공간에서 차지하는 면적의 분포도가 원이 사각형에 비례하여 적기 때문에 똑같은 길이임에도 불구하고 작아 보이는 것이지요.


그래서 우리는 이에 대한 시각적인 보정을 해야 합니다. 아직까지는 우리 디자이너만이 할 수 있기 때문이죠. 시대가 더 발전하여, 이러한 DB까지 수집되고 차후의 나올 Adobe 프로그램에 시각보정까지 생긴다면 저희가 할 필요가 없겠지만, 지금은 저희가 알고 꼭 해야만 합니다. 작은 디테일이 훌륭한 디자인을 만들기 때문이죠. 크기를 맞추는 데는 두 가지 방법이 있습니다.


첫 번째. 길이가 아닌 면적으로 사람의 눈이 동일하게 느낀다는 것을 알았기 때문에, 사각형 면적만큼을 자신의 감각을 믿고 1px, 1px 장인 정신으로 원의 크기를 보정합니다.


두 번째. 자신은 감각보다 계산이라고 생각하시면, 눈의 감각이 아닌 직접 계산하여 보정합니다.

반지름²x 원주율 = 원의 면적




착시에 따른 시각 보정


A와 B는 같은 크기의 원이지만, 위에 있는 B 원이 착시로 인해 더 커 보입니다. 이를 시각적으로 보기에 안정적이게 맞추려면 위에 있는 원 크기를 줄여 시각 보정을 해야 합니다.




굵기에 따른 시각 보정

똑같은 굵기의 선이라도 수직보다 수평의 선이 더 시각적으로 두꺼워 보입니다.

또한 수직선의 굵기를 기준으로 수직 > 사선 > 원호 > 수평 순으로 똑같은 굵기라도 점점 더 두꺼워 보이기 때문에, 이에 대해 시각 보정을 해야 시각적으로 보았을 때 똑같은 선의 굵기를 보는 것과 같이 만들 수 있습니다.


똑같은 선이 뭉쳐질수록 선이 더 두꺼워 보이거나, 길이가 길수록 굵어 보이는 현상도 있으니 디자이너는 이도 반드시 고려하여야 합니다.




명도에 따른 시각보정


어두운 곳에서의 텍스트와 밝은 곳에서의 텍스트입니다. 두 텍스트의 굵기는 같습니다. 하지만 어두운 곳에서의 텍스트가 더 굵어 보입니다. 명도에 의한 착시 때문에 이와 같은 현상이 발생하는데, 텍스트의 굵기를 같게 보이게 하기 위해서는 밝은 배경의 검은 텍스트 굵기를 조정하여 보정하여야 합니다. 보통 네거티브와 포지티브 적용을 동시에 해야 할 경우 이런 점을 고려합니다.




배경색에 따른 시각보정


명도에 의한 착시처럼 동일 색상이더라도, 어떤 배경색이냐에 따라서 다른 색으로 보입니다. 자료 사진의 배열 사각형들은 모두 같은 회색입니다. 배경과 오브젝트의 색을 조정할때도 이를 알고 있으면, 좀 더 효과적이게 색을 배열할 수 있습니다.



글자 간격(커닝) 시각보정

커닝은 글자의 모양때문에 활자가 고르게 배열되지 않은 것처럼 보이는 것을, 글자 모양에 따라 글자 간격을 조정하여 시각적으로 매끄럽게 보이게 하는 것을 의미합니다. A 텍스트를 보면 분명 텍스트를 그대로 썼음에도 불구하고 간격이 불규칙해보입니다. 그래서 오른쪽 B처럼 이를 시각적으로 균형적이게 맞추는 작업을 해야 합니다. 

공백을 많이 가진 글자로는 숫자1,알파벳 A,W,V등이 있습니다. 커닝을 연습할 수 있는 사이트도 있습니다. 홈페이지에 들어가서 클릭과 방향키로 간단히 연습할 수 있습니다. http://type.method.ac/#



오늘 시간을 통해 이 작은 디테일들을 캐치하여 시각적으로 보정한다면, 한 단계 더 나아가는 디자이너로 성장하시는 데 도움이 될 것입니다. 언제나 응원하겠습니다! 틀린 내용이 있거나, 설명이 부족한 부분이 있다면 언제든지 피드백 댓글로 남겨주세요. 추천은 사랑입니다. :-) 감사합니다.