brunch

You can make anything
by writing

C.S.Lewis

by 김자유 Jan 11. 2019

시각적으로 균형있는 디자인하는 방법(시각 보정 팁)

1920년대 시각적 인식에 대한 게슈탈트 이론이 발표되었다. 이 이론은 우리의 눈이 어떻게 이미지를 구분하고 우리의 뇌가 어떻게 그들을 해석하는지에 대한 과정을 설명한다. 당신은 아마 해당 이론에 포함된 유사성의 원칙이나, 몇 가지 치명적인 규칙들에 대해서 들어보았을 것이다. 본 글은 게슈탈트 이론의 몇 가지 포인트를 짚고, 체계적인 이론보다는 실제로 사용되는 양상에 대해 초점을 맞출 것이다. 글 하단에 해당 주제에 대한 추천 문서 리스트가 있으니 관심 있으신 분들은 확인해보시길.

1. 측정한 크기와 눈에 보이는 크기

400픽셀의 사각형과 원 중에 어떤 것이 더 클까? 기하학적으로 말하자면, 그들의 너비와 높이는 동일하다. 하지만 상단의 그림을 보자. 우리의 눈은 사각형이 원보다 크다는 사실을 쉽게 알아차릴 수 있다.

상단 이미지는 가이드라인 버전이다.

자, 이제 사각형과 원이 함께 있는 다른 이미지를 한 번 보자. 시각적인 무게의 관점에서 봤을 때, 똑같아 보이는가?

적어도 어느 한쪽이 더 무거워 보인다고 바로 답하기는 어려울 것이다. 이는 놀라울 것 없이, 내가 원의 지름을 키웠기 때문이다.

첫 번째 예시와 두 번째 예시의 도형들을 겹쳐 보았다. 좌측에서는, 400픽셀의 사각형이 같은 픽셀의 원보다 더 큰 영역을 차지한다. 이것이 바로 우리가 시각적으로 사각형을 더 크게 보는 일이다. 우측을 보면, 원과 사각형은 균형이 맞춰져 있다. 근본적으로, 그들은 다른 너비와 높이를 갖고 있지만 비슷한 영역을 차지하고 있다.

우리는 같은 효과를 다이아몬드나 삼각형에서도 발견할 수 있다. 사각형과 시각적으로 균형을 맞추려면, 그들은 너비와 높이를 늘려야만 한다. 그렇게 하고 나서야 비슷한 영역을 가지게 되기 때문이다. 영역 기반의 접근 방식은 간단한 도형을 만들 때 완벽한 효과를 낸다.

그렇다면 이 효과를 어떻게 인터페이스에서 사용할 수 있을까? 예를 들어, 아이콘 세트를 만들 때, 그들 모두의 균형을 맞추는 일은 중요하다. 어떤 아이콘도 지나치게 커 보이거나 작아 보이면 안 된다. 만약 우리가 바로 아이콘을 사각형 영역에 맞춰버리면, 사각형에 가까운 도형들이 더 커 보일 것이다.

나는 시각적으로 더 커 보이고 영역을 많이 차지하는 아이콘 사이에는 공간을 좀 더 남겨두고, 시각적으로 더 작아 보이는 아이콘은 영역을 키움으로써, 도형마다 너비를 보정할 것을 추천한다.

그렇게 하면 시각적으로 균형 있는 아이콘이 완성된다.

이제 왜 아이콘 영역이 항상 아이콘 본체보다 큰지 이해가 될 것이다. 사각형이 아닌 모양의 아이콘이 사각형 아이콘보다 작아 보이지 않게 하기 위함이다.

시각적 균형을 체크하는 가장 쉬운 방법은 각 모형들을 블러 처리해보는 것이다. 만약 아이콘이 서로 비슷하게 덩어리 진 다면, 그들은 동일한 시각적 무게를 가진 것이다.

시각적 균형에 대한 또 다른 예시는 둥근 버튼과 텍스트 박스가 함께 쓰인 것이다. 버튼의 지름이 텍스트 박스의 높이와 동일하다면, 당신의 눈에는 아마 버튼이 더 작아 보일 것이다. 버튼을 조금 더 키운다면, 전체 균형이 좀 더 좋아질 것이다.

하지만 버튼 스타일을 바꾼다면, 크기를 키울 필요는 없다. 상단 이미지는 버튼과 텍스트 박스가 동일하게 80픽셀이다. 하지만 오른쪽에 있는 버튼은 검은색으로 칠해져 강렬한 인상을 주므로, 작아 보이지 않는다.

기억해야 할 것

시각적 무게는 인간의 눈이 오브젝트의 중요도와 크기를 인식하는 방법이다. 반드시 픽셀 사이즈와 영역이 동일할 필요는 없다.

원, 다이아몬드, 삼각형, 그 외 비사각형 도형들은 사각형 도형들과 시각적 균형을 맞추기 위해 더 키워질 필요가 있다.

아이콘 영역은 시각적 균형을 위해 조금의 여백을 두어야 한다. 이는 아이콘 세트를 만들 때 일관성을 갖기 위해 매우 중요한 요소이다.

2. 다양한 도형의 배열(정렬)

시각 정렬은 시각 균형 이슈에 이어지는 논제이다. 상단의 스트라이프를 보자. 그들이 같은 길이인 것처럼 보이는가?

픽셀을 기준으로 얘기하자면, 답은 “같다"이다. 하지만, 첫눈에 봤을 때는 하단 스트라이프가 상단의 것보다 짧아 보인다.

사진 한 장을 더 보자. 바뀐 것이 있어 보이는가?

하단 스트라이프에 시각 보정을 적용해보았다. 상단 스트라이프보다 20픽셀 정도 길게 만드니 시각적으로 같은 길이인 것처럼 보인다.

그렇다면 좀 더 복잡한 사례를 한 번 보자.

만약 텍스트를 올린 접힌 스트라이프를 활용한 포스터를 만들거나, 온라인 스토어에서 상품 위에 “할인" 딱지를 붙인 스트라이프를 만들 때, 그들이 시각적으로 균형을 이루도록 신경 써야 한다. 뾰족한 가장자리는 나머지 모양(특히 사각형일 경우)보다 좀 더 길게 만들어야 한다.

그렇다면 배경색이 있는 문단은 어떻게 정렬하면 좋을까? 이는 배경의 시각적 밀도에 달려있다. 만약 배경색이 밝다면, 중요한 문단을 나머지 텍스트와 똑같이 정렬하면 된다.

배경색이 밝으면 기존의 텍스트 흐름을 망치지 않기 때문이다.

그러나 배경색의 밀집도에 따라 다른 접근이 가능하다. 위 이미지를 보면, 하얀색 텍스트는 인덴트 처리되어있고, 검은색 배경 박스가 나머지 텍스트에 맞게 정렬되어있다.

밝은 배경색의 경우와는 다르게, 어두운 배경색은 상당한 시각적 무게를 지닌다. 만약 문단을 끊김 없이 쓱 집어넣고 싶다면, 위 이미지처럼 정렬하는 게 좋을 것이다.

같은 원리가 버튼과 입력창에도 적용된다. 물론 모든 상황에 적용되는 만병통치약은 아니고, 인간의 시각 인지를 기반으로 한 추천 정도로만 알아두시길.

좌측 예시처럼 입력창의 밝은 배경은 인풋 라벨(Your name)과 인풋 내용(Albert Einsteein) 보다 더 길게 만들어질 수 있다. “Send”버튼의 오른쪽 가장자리는 인풋 배경색의 오른쪽 가장자리와 완벽하게 일치하지 않는다. 왜냐하면, 버튼이 좀 더 어두우므로 시각적으로 무거워 보이기 때문이다.

우측 예시는 인풋이 단색 경계선을 갖고 있다. 그리고 인풋 내용은 인덴트를 넣은 대신, 라벨은 경계선과 정렬했다. “Send”버튼은 끝쪽을 뾰족하게 만들었다. 버튼이 인풋 박스보다 좀 더 오른쪽에 배치되는 것이 시각적으로 균형 있어 보일 것이다.

정렬에 대한 다양한 양상 중, 텍스트-아이콘 버튼 정렬에 관한 또 다른 접근법이 있다. 상단의 버튼 이미지를 보자. 텍스트가 중간 정렬된 것처럼 보이지 않는가?

실은 오른쪽 가장자리가 삼각형인 오른쪽 버튼에서는, 내가 글자를 조금 더 왼쪽으로 옮겼다. 게다가, 화살표같이 생긴 버튼은 40픽셀이나 더 긴데도 직사각형 버튼과 시각적으로 같은 길이로 보인다.

텍스트 버튼은 수평 정렬뿐만 아니라, 수직 정렬도 신경 써야 한다. 내가 먼저 말하고 싶은 접근법은, 다양한 OS, 웹사이트, 어플리케이션의 인터페이스에서 사용된다. 바로 폰트 대문자의 높이에 기반한 정렬이다.(소위 cap height라 불리는) 이는 “H”, “I”의 높이와 같다.

일반적으로, 대문자 상하 여백과 버튼의 가장자리는 동일하다. 보통 제목으로 사용되는 영어 문자들은 어센더(윗부분이 튀어나온-I, t, d, b, k, h)가 디센더(아랫부분이 삐져나온-y, j, g, p)보다 크기 때문이다.

이름과 배경을 정렬하는 또 다른 접근법은 소문자의 높이를 사용하는 것이다.(소위 x-heigt라 불리는) 산세리프 폰트에서는, 소문자의 높이는 “x”자 높이와 같다.

이 접근법은 텍스트의 주요 시각적 무게가 소문자가 위치한 곳에 집중되어있기 때문에 합리적이다.

이 두 접근법 사이에 차이가 있을까? 물론, 있다. 크지는 않지만.

비교할만한 예시를 좀 더 살펴보자. 좌측 열에 있는 cap-height 접근법은 확실히 “Cancel”과 “OK”버튼에 좋아 보인다.-그래서 주로 버튼에 널리 사용된다.- 왜냐하면 “Cancel”버튼은 디센더가 없고, “OK”는 모두 대문자이기 때문이다. x-height 접근법은 오른쪽 열에서 보면, 대문자와 소문자의 차이가 두드러지는 “Sync”에서만 적절해 보인다. “Cancel”과 “OK”는 너무 높이 배치되어있는 것처럼 보인다.

아이콘 버튼은 텍스트 버튼과 상황이 조금 다르다. 가장 일반적인 배경이 동그란 “Send”아이콘을 예시로 들어보자. 어느 쪽이 시각적으로 균형 있어 보이는가?

왼쪽이 뭔가 좀 이상하다는 것을 느꼈길 바란다. 이는 정렬 방법이 다르기 때문에 생겨난 차이이다. 첫 번째 옵션은 아이콘을 사각형으로 가정하고 만든 것이다. 개발자에게 SVG나 PNG 파일을 보내는 것을 고려하면, 종이비행기가 올라간 직사각형 시트이기 때문에 어느 정도 옳은 접근법이라 할 수 있다. 우측 예시는 비행기의 모든 날카로운 가장자리가 원형 버튼 배경과 동일한 여백을 갖는 방식으로 배치되어있다.

개발자를 위한 파일을 준비하고 있다면, 영역 지정을 새로 할 필요가 있다. 그렇게 하면, 그들은 아이콘을 시각적으로 올바르게 배치할 수 있을 것이다.

“Play”버튼에 있어서도 마찬가지이다. 만약 이 도형들-둥근 사각형과 삼각형-을 바로 정렬한다면 조금 이상하게 보일 것이다.

삼각형을 시각적으로 좀 더 좋게 배치하려면, 원으로 둘러싼 후 배경과 정렬하면 된다.

기억해야 할 것

뾰족한 가장자리를 지닌 도형은 사각형 오브젝트 가까이에 있을 때, 시각적 균형을 맞추기 위해 더 길거나 크게 만들어야 한다.

Cap-height 정렬은 버튼명과 버튼 배경을 배치할 때 효과적인 방법이다.

버튼 위의 삼각형 아이콘 위치를 바로잡을 때 효과적인 방법 중 하나는 그것(삼각형)을 원으로 둘러싼 후, 배경과 정렬하는 것이다.

3. 시각적으로 올바른 모서리 라운딩

어떤 게 원보다 더 둥글 수 있을까? 아무것도 생각하지 않았어도, 이 아티클 앞에서 말한 것처럼 우리 눈은 이상하고 가끔 우리가 예상하지 못한 것들을 본다. 그래서 위 그림 중 어떤 원이 가장 자연스러워 보이는가?

사람들은 3번이나 4번 중 하나를 고른다. 1번과 2번 원은 확실히 좀 부족해 보이고, 5번 원은 너무 뚱뚱하다. 만약 3번(기하학적 원)과 4번(수정된 원)을 겹치면 4번 원이 3번보다 약간 크다는 것을 알 수 있고 결과적으로 우리 눈에 더 부드러워 보인다는 것을 알 수 있다.

내가 말하는 것을 보여주려고 기하학적인 폰트로 유명한 3가지 폰트(Futura, Circe, Geometria)의 알파벳 “o”를 가져왔다. 수준 높은 폰트는 인간의 시각이 지각하는 것에 기반을 두고 만들어졌고, 정교한 시각 구조 시스템을 사용한다는 것을 가정하면, 원형 모양은 기하학적인 원보다 더 원형의 모양으로 보인다. 당신의 눈에는 이 알파벳들이 재미있지 않은가?

이것들을 기하학적 원형과 겹쳐보자. 가장 기하학적인 Futura의 “o” 조차 네 군데가 튀어나와있다. 게다가 Circe와 Geometrai 알파벳들은 원보다 넓지만, 같은 넓이와 높이임에도 불구하고 배고프고 과식한 것처럼 볼록한 4개 부분을 볼 수 있다.

그래서 시각적으로 말하자면 오른쪽의 수정된 원은 왼쪽의 기하학적인 원보다 더 “원형”으로 보일 수 있다.

어떻게 이런 현상을 모서리 라운딩에 사용할 수 있을까? 만약 당신이 유명한 그래픽 편집기에 내장된 라운딩 기능을 사용한다면, 시각적으로 좋아 보이진 않을 것이다.

인간의 눈은 직선이 갑자기 곡선으로 변하는 부분을 즉시 알아차린다. 이 라운딩은 자연스러워 보이지 않을 것이다.

나는 시각적인 인지를 고려해서 이 문제를 수정했다.

이 종류의 라운딩은 기하학적인 원을 넘어선 여분의 공간이 있어서 선이 눈에 띄지 않는 모서리 만나는 지점을 만든다.

이 라운딩 방법 사이의 차이를 느껴보자.

이제 이 방법을 둥근 버튼에 적용해보자.

당신은 오른쪽 버튼이 더 부드러운 모서리를 가졌고 보기에도 더 좋은 것을 알아차렸을 것이다.

앱 아이콘에도 같은 이야기다. 완벽한 결과를 위해 단순히 기본적인 모서리 라운딩을 사용하지 않는다. 이 이야기를 하기 전에 두 가지 다른 둥근 모양을 보고 가자.

첫 번째 건 스케치에서 그린 둥근 직사각형이다. 두 번째 건 라메곡선(Lamé curve)이라고 불리는 초타원 (superellipse)이다. 프랑스 수학자인 가브리엘 라메(Gabriel Lamé)가 발견했고 이 공식에 따라서 사각형 별과 둥근 사각형으로 보이는 모양이 다를 수 있다.