방구석클래스 #4
이번 방구석 클래스에서는 시각 보정에 대해서 배워보도록 할게요. 사람의 눈은 굉장히 예민하고 정확하고 섬세한데, 한편으로는 심리적인 것에 약해 착시효과도 일어나게 됩니다. 시각디자인을 하고 있다면 꼭 알아야 할 개념이니까 다양한 사례들과 함께 시각 보정에 대해 배워보도록 할게요.
선 길이 착시, 구글 로고, 재생 버튼, 도형 모양에 따른 부피 차이, 닌텐도 스위치 로고, 커닝에 대해 차례대로 빠르게 보도록 할게요.
핵심 요약
시각디자인을 하다 보면 시각 보정을 해야 하는 경우가 많습니다. 생각보다 사람의 눈은 미세하게 예민하고 정확한데… 반대로 심리에도 약해서 착시효과도 느끼게 되죠. 여기 보이는 이미지에서 가운데 선의 길이가 같습니다. 아닌 것 같죠?! 이렇게 보시면 놀랍게도 같은 길이입니다.
어떤 때는 컴퓨터로 계산한 것처럼 수치적으로 딱 맞는다고 해도 사람의 눈으로 볼 때, 안 맞아 보이는 경우도 많습니다.
우리는 디자이너로서 이런 예민한 사람의 눈을 이해하고 디자인을 하는 것이 중요합니다.
구글 심볼 시각 보정
구글 심벌에 대해서 한때 아주 재미난 이슈가 있었죠. 구글 로고 비대칭 문제로 정 원에 맞지 않은 비율에 대해서 논란이 있었습니다. 기하학적 균형에 민감한 누군가가 논란을 일으켰던…! 하지만, 이것 역시 사람의 눈을 잘 이해하는 디자이너가 의도된 시각 보정으로 안정성을 띠고 있습니다. 구글 로고 사이트에 보면 제작 과정에 대한 부분과 의도가 나와있습니다.
참고 : https://design.google/library/evolving-google-identity/
재생 버튼 시각적 무게
우리는 스케치, 포토샵, 피그마에서 제공하는 정렬 기능에 익숙하죠. 이러한 정렬 기능은 프로그래밍을 통해 계산된 수치로 인해 중앙을 정렬하지만, 사람의 눈은 면적, 방향, 간격 등을 기준으로 균형감을 느끼게 됩니다.
예를 들면 이런 거죠.. 아래 재생 버튼 예시의 좌측처럼 하면 균형적으로 맞지 않습니다. 삼각형의 무게중심을 정하는 것이 쉽지 않습니다.
도형의 모양에 따른 부피감 차이
지름이 10px인 동그라미와 가로세로 10px인 정사각형이 있다면, 어떤 것이 더 크게 보일까요?
당연히 원보다 네모가 더 커 보입니다. 부피감의 차이 때문인데요.
갑자기 수학을 살펴볼게요.. 네모의 부피를 구하는 공식은 가로 * 세로였죠. 1010은 100입니다. 하지만, 1010 안에 있는 원의 부피를 구하려면 반지름 * 반지름 * 파이였죠. 그래서 수치는 78.5가 나오게 됩니다.
정확한 100이 되기 위해서는 대략 반지름이 5.64가 되어야 부피가 100이 됩니다. 그래서 약 112%가 되어야 시각적으로 부피감이 맞아떨어지게 되는 겁니다.
이러한 개념을 가지고 머티리얼 가이드에서도 키라인이라는 개념이 있죠.
참고 : https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes
닌텐도 로고
닌텐도 로고를 보면 중앙이 아닌 걸 느끼셨나요? 제가 임의로 중앙에 맞게 수정을 해봤습니다.
중앙으로 정렬한 우측 로고를 보면 우측이 더 넓어 보이는 착시가 일어납니다. 좌측의 속공간이 뚫려있는데 선 두께를 제외한 여백이 더 좁게 느껴져서 그렇습니다. 이런 부분도 시각 보정의 좋은 예시라고 할 수 있겠죠.
커닝
커닝(kerning)은 글자의 모양 때문에 활자가 고르게 배열되지 않은 것처럼 보이는 것을 글자 모양에 따라 적당한 간격을 두게 조정하여 시각적으로 매끄럽게 보이게 하는 것을 말합니다.
글자 간의 간격을 보는 연습을 하는 것이 중요합니다. 여백의 넓이를 상상하며 대략적인 간격을 조정해 주면 더욱 가독성이 좋은 타이포그래피가 완성됩니다.
오늘 방구석 클래스에서는 아주 중요한 기본 지식인 시각 보정에 대해서 배워봤습니다.
이러한 시각 디자인에 대한 기본 지식들이 쌓고, 작업에 지식을 담게 되면 더욱 퀄리티 높은 디자인 결과물을 낼 수 있습니다. 이 지식을 알면, 편집 디자인을 하던, UI 디자인을 하던, 포스터 디자인을 하던 어떠한 디자인을 해도 도움 될 것입니다.
웹디자인 입문 강좌에서 배워봤던 게슈탈트에 대한 부분도 같이 알아두시면 좋기 때문에, 아직 못 보신 분들은 꼭 보는 걸 추천드립니다.
그럼 다음 방구석 클래스는 무엇을 할지 고민하다가 결정했습니다. 웹사이트에 3D를 구현할 수 있는 three.js에 대해서 배우는 시간을 갖도록 할게요.
