[REASIGN]👀아이콘 디자인 시 주의해야 할 시각 효과들

해외 디자인 아티클 번역 뉴스레터, REASIGN.
좋은 서비스를 친구에게 공유하세요!

구독 링크 복사해서 공유하기
http://bit.ly/2MKOeXF

페이스북 공유하기(내 타임라인)

메일 전달하기

아이콘 디자인 시 주의해야 할 시각 효과들

우리의 눈은 종종 우리에게 거짓을 말하도록, 이상하게 조직되어있다. 하지만 당신이 인간의 시력에 대한 기이한 특징을 이해한다면, 좀 더 이해하기 쉽고 명확한 디자인을 구성할 수 있다. 타이포그래피 디자이너들만 가독성 놓고 균형 잡힌 폰트를 만들기 위해 시각적 양념을 치는 게 아니라, 유저 인터랙션을 설계하는 인터페이스 디자이너들도 마땅히 해야 한다.

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é)가 발견했고 이 공식에 따라서 사각형 별과 둥근 사각형으로 보이는 모양이 다를 수 있다.

Marc Edwards는 부드럽고 시각적으로 완벽한 모양의 라메 곡선 공식을 제안했다. iOS7 부터 아이콘은 이 공식을 기반으로 한다.

나중에 이 모양은 황금비율을 이용해 수정되었고 새로운 아이콘을 만드는 디자이너들에게 가이드가 되었지만 그건 다른 이야기다.

초타원 같은 모양을 사용하는 것의 가장 큰 이점은 매끄러운 모습이다. 반면, 이러한 비표준 모양은 실제 인터페이스에 적용하기 어렵다. 여러 개의 SVG를 결합하거나 코드에 특수 수식이나 스크립트를 넣거나 애플의 앱 아이콘처럼 PNG 마스크를 사용해야 한다.
디자인 프로세스 자체에는 둥근 모서리에 간단한 수정이 있다. 되돌려야 할 라운딩 효과를 바꾸고 모양 편집 모드에서 직접 가까이 있는 곡선 핸들을 이동시켜야 한다.

그 차이점은 도로나 지하철 계획을 그리는 중요한 예각 각도의 라운딩과 함께 더 생생하다.

기억해야 할 것

기하학적인 둥근 모서리는 직선이 갑자기 곡선으로 바뀌는 점을 쉽게 볼 수 있어서 인위적으로 보인다.
시각적으로 올바른 모서리 라운딩은 특별한 공식이나 수동으로 모양을 조정하는 것이 필요하다.

4. 보너스

가끔 이상적으로 기하학적인 사각형이 더 네모나게 보인다. 당신은 “말도 안 되는 소리잖아”라고 생각할 수도 있다. 그럼 위 사각형을 보자. 무엇이 더 사각형처럼 보이는가?

만약 왼쪽 사각형을 선택했다면, 당신의 선입견 없는 시각 인식의 목소리를 들은 것이다.

나는 개인적으로 물체의 높이와 넓이보다 더 민감한 우리의 눈에 대해 공부할 때 많이 놀랐다. 이는 기하학적인 폰트에서도 알파벳 “o”가 항상 기하학적인 원보다 항상 더 넓고, 알파벳 “H”의 세로 라인이 가로 라인보다 항상 더 두껍다는 것을 설명해준다.

추천 글

이 에세이는 주제에 대해 한정적으로 알려주기 때문에 계속 탐구해 보기 바란다. 다음은 게슈탈트 심리학의 기원과 초기 아이디어에 대한 기사와 책 목록이다.

Barry Smith, “Gestalt Theory: an Essay in Philosophy”, 1988. 게슈탈트 이론의 기원과 인간 지각의 철학적, 심리적 측면에 대한 심층적 연구.
Steven Lehar, “The World in Your Head: A Gestalt View of the Mechanism of Conscious Experience”, 2002. 이 책은 사람들이 현실을 인식하는 방법을 설명해준다. 우리는 현실 세계가 아닌 뇌의 상을 보고 있다. (Chapter 1은 온라인으로 볼 수 있다)
James J. Gibson, “The Perception of the Visual World”, 1950 (스캔 사본, 일부 이미지는 저품질). 이 책은 우리 두뇌의 물리적 과정이 세상을 보는 방법에 어떤 영향을 미치는지 알려준다.
James J. Gibson, “The Ecological Approach to Visual Perception”, 1979. (A same-titled article with key ideas is available online.)
George Boeree, “Gestalt Psychology”. 게슈탈트 아이디어의 간단한 역사
게슈탈트 심리학의 창시자의 전기: Max Wertheimer, Kurt Koffka, and Wolfgang Köhler.

더 실용적인 비주얼 비법에 대해 알고 싶다면, 다음 아티클을 보자.
Hopefully, the Ultimate Guide to a Flat Icon Set

[2019.01.03]

아이콘을 디자인할 때 얼마나 정확한 수치로 나뉘었느냐보다 얼마나 더 시각적으로 균형 있어 보이는지가를 생각해야 합니다. 시각 인지를 고려한 이론적인 원리를 실제 적용 가능한 방법과 함께 알려주는 아티클이라 추천 드립니다.

REASIGN 드림

피드백은 reasign.newsletter@gmail.com 으로 남겨주세요. 추천하고 싶은 영문 아티클 역시 링크를 남겨주시면 검토 후 번역하여 보내드립니다.

구독해주셔서 감사합니다.

지난 아티클 모음

아이콘 디자인 시 주의해야 할 시각 효과들

목차