시각적 무게감을 활용한
아이콘 디자인 공식
혼자서도 잘해요 주니어 성장일지
“디자이너님 아이콘 크기가 들쑥 날쑥한거 같은데 체크 한 번만 해주세요”
우리는 아이콘을 디자인하게 되면서 종종 이런 말을 들을 것이다. 같은 사이즈의 컨테이너박스를 가이드 잡고 디자인하더라도 막상 아이콘을 적용했을 때, 들쑥날쑥한 부분들이 보일 텐데요. 보통 우리는 시각적 착시라고 부릅니다.
게슈탈트이론 대표적 이미지 우리들은 학생시절에 미술책에서 이런 이미지들을 많이 보았을 것입니다. 이것이 가장 기본이 되는 게슈탈트이론의 이미지이죠. 쉽게 말해 시각적 착시입니다.
시각적 착시에 대해서는 1920년대 게슈탈트 이론에서 처음 등장했습니다. 게슈탈트이론에서는 눈이 정보를 처리하는 방법과 뇌가 정보를 해석하는 방법에 대해 정의하고 있습니다. 대표적으로 시각적 무게감이라는 방법론이 있죠.
시각적 무게감
시각적 무게감에 대해서 쉽게 이미지를 활용하여 말씀드리면 우리의 눈은 사각형이 원보다 더 크다고 느끼고 있습니다. 이것이 바로 시각적 무게감입니다.
하지만 가이드라인을 그려 보았을 때는
사실은 둘 다 동일한 400픽셀의 도형으로 이루어져 있다는 것을 알 수 있습니다.
이 이미지에서는 시각적 무게가 동일하게 보일 것입니다. 시각적 무게감이라는 이론을 간략히 이해하셨다면 당연히 보여드린 이미지는 원의 사이즈를 늘린 것이라고 판단할 수 있죠.
시각적 무게감을 동일하게 주기 위해 원의 사이즈를 의도적으로 키운 것입니다.
첫 번째 예시와 두 번째 예시의 모양을 겹쳤을 때, 왼쪽의 400픽셀 정사각형은 400픽셀 원보다 면적이 더 크므로, 시각적으로 더 크게 보이는 것입니다. 반면 오른쪽은 원과 사각형의 채워진 여백이 균형을 이루고 있습니다. 넓이와 높이는 다르지만 면적은 비슷합니다.
다이아몬드와 삼각형의 도형도 같은 방식으로 접근해 볼 수 있습니다. 사각형과 시각적으로 균형을 이루려면 사각형이 더 넓고 높아야 영역이 비슷해집니다. 이처럼 영역을 기반으로 하는 접근 방식은 단순한 도형 모두 적용됩니다.
우리는 게슈탈트의 시각적 무게감이라는 이론을 아이콘에 적용하게 되면 큰 효과를 얻어낼 수 있습니다.
시각적으로 작은 아이콘을 아이콘 영역 너머로 디자인하게 된다면 시각적으로 모양이 다른 아이콘의 무게감을 동일하게 적용할 수 있습니다.
아이콘을 간단하게 디자인하여 확인해 보면, 아이콘영역에 대한 무게감의 차이가 보일 것입니다.
또 한 가지의 팁으로 시각적 무게감을 확인하는 가장 쉬운 방법으로는 아이콘을 블러처리해서 확인하는 방법입니다. 아이콘에 블러를 처리하게 된다면 각 아이콘마다의 무게감을 쉽게 확인해 보실 수 있습니다.
앞으로 아이콘을 디자인할 때 시각적 무게감을 고려하면서 디자인하게 되면 들쑥날쑥한 아이콘의 사이즈를 보다 쉽게 정리할 수 있을 것 같습니다.
그리고 예외적으로 SNS로고와 같은 이미 존재하는 그래픽을 아이콘으로 활용해야 되는 경우도 있습니다. 페이스북과 인스타그램의 아이콘은 사각형을 기반으로 하는 반면 트위터나 핀터레스트는 예외적인 아이콘이죠. 그렇기 때문에 트위터와 핀터레스트는 페이스북과 인스타그램의 사각형 아이콘과 균형을 이루도록 약간 더 크게 작업하시는 게 좋습니다.
해당 아티클에 몇가지 질문을 통해 해당 내용의 심화편을 작성하였습니다
궁금하신분들은 이어서 정독하시면 도움이 많이 될 듯 합니다.
"전체는 부분의 합 보다 크다" 아리스토텔레스
