[UX 특강(조엘 마쉬)] 시각 디자인 원칙 (#12~16)

#12

이번 글에서는 사용자의 주목을 끌 수 있는 다섯 가지의 시각 원리 중 첫번째 것을 다룹니다. 여러분의 디자인 중 어떤 부분은 다른 부분보다 더 중요한데, 그렇다고 우리가 늘 자연스럽게 그걸 눈치채지는 못하거든요. 그러니 사용자가 중요한 것을 알아챌 수 있게 도와야 합니다. 오늘 배울 것은…

시각적 무게감: 대비, 깊이, 크기

시각적 무게감이라는 개념은 상당히 직관적입니다. 레이아웃에서 다른 것들에 비해 “좀 더 무거워” 보이는 것들을 뜻하죠. 무거워 보이면 주의를 좀 더 쉽게 끌 수 있습니다. 그리고 그 개념은 UX 디자이너에게는 매우 가치있죠.

우리가 할 일은 사용자들이 중요한 걸 알아챌 수 있게 돕는 것입니다. 그리고 사용자들이 목표외에 다른 것에 방해받지 않는 것 또한 똑같이 중요하죠.

디자인의 어떤 부분에 시각적 “무게감”을 더하면, 사용자가 그 부분을 볼 확률이 높아지고, 그럼 사용자가 그 다음에 무엇을 보게 할 지도 바꿀 수 있습니다.

기억하세요: 시각적 무게감은 상대적입니다. 모든 시각적 원리는 특정 요소를 그 주변과 비교하는 것이에요.

그러니, 잡스러운 건 이제 그만두고, UX 특강의 스타를 소개드리겠습니다. 옛날 옛적의 고무 오리입니다!

*여기서 박수*

 

* 대비

밝은 것과 어두운 것 사이의 차이를 대비라고 부릅니다. 어떤 밝은 것이 어두운 것과 차이가 심할 수록 대비가 “높다”고 합니다.

UX에서는 중요한 것들에 높은 대비를 주고 싶

어합니다. 사진의 가운데 있는 오리처럼 말예요. 이 경우 그림의 대부분이 밝기 때문에 어두운 오리가 좀 더 눈에 띕니다. 그림이 대부분 어둡다면 좀 더 밝은 색의 오리가 더 눈에 띄겠죠.

여기에서 오리가 버튼이고, 모든 버튼이 같은 색이라면, 어두운 버튼을 누르는 사람들이 많을 것입니다.

****

* 깊이와 크기

실제 세상에서 우리들은 멀리 있는 것보다 가까이 있는 것을 더 잘 알아차립니다.

디지털 세상에서는 큰 것이 가까이 있는 것으로 인지됩니다. 위 사진에서 가운데 있는 오리가 그렇죠. 좀 더 작은 것은 더 멀리 떨어진 것으로 인지됩니다. 뒤쪽의 흐릿한 오리처럼 말이죠.

이 오리들이 모두 같은 크기였다면, 아마도 여러분은 왼쪽부터 오른쪽 방향으로 봤을 겁니다. (글을 그런 식으로 읽는 문화권이라면요.)

흐림 효과나 그림자 효과를 주게 되면, 깊이를 좀 더 실제처럼 인지하게 만드는 효과가 있습니다. 디자인이 “플랫”하더라도 크기로 이런 효과를 낼 수 있습니다.

대개 중요한 대상을 덜 중요한 것보다 크게 만들고 싶을 겁니다. 이는 페이지에 시각적 “계층”을 만들어내어 훑어보기 편하게 됩니다. 반면 사용자가 뭐부터 봤으면 좋을지 여러분이 선택할 수 있게도 하죠.

“로고 좀 크게 만들어.”가 잘못된 이유가 바로 그겁니다. 사용자들이 뭔가를 구매하는 것 대신 로고를 쳐다보고 싶어한다면야 얘기가 다르겠지만요.

***

다음 글에서는 다섯 개의 시각 원리 중 두 번째 것을 보겠습니다. ‘색깔’ 차례에요.

 

#13

실제 세상에서는 햇빛, 인공 조명, 열기, 냉기, 의복, 브랜드, 패션, 수백만 가지의 다른 것들이 우리의 색깔 인지 방식에 영향을 줍니다. UX 디자이너인 우리는 팬톤이나 브랜드 가이드라인까지는 신경쓰지 않을 수도 있습니다. 하지만 색깔에 대해 확실히 배워둬야 합니다.

색깔

위에 있는 60년대풍 고무 오리에서 색깔에 대해 배울 점이 몇 가지 있습니다.

UX 디자이너로서 우리는 보통 와이어프레임을 흑백으로 작업합니다. 그리고 그건 좋은 일이에요! 우리는 작동에 집중하고, UI 디자이너들은 스타일에 집중할 수 있으니까요.

하지만, 색깔 자체가 작동일 때도 있습니다. 신호등이나 맛에 맞는 하드바의 색깔을 정하는 것 같은 경우죠. 거 왜 중요한 똥 말입니다.

* 의미

가장 위의 그림에는 오리가 세 마리 있습니다. 파랑, 노랑, 빨강. 아, 참 잘 생겼죠. 척 보면 이 오리들은 각기 다른 색입니다. 덕분에 색깔이 각각의 오리의 “의미”를 어떻게 바꾸는지 알기 쉽습니다.

여기에서 오리가 버튼이었다면, 아마도 각각 ‘확인’, ‘취소’, ‘삭제’일 수 있습니다. 연료 탱크 지시등이었다면 ‘가득 참’, ‘절반 남음’, ‘텅 빔’을 뜻했겠죠. 스토브 표시등이라면 ‘차가움’, ‘따뜻함’, ‘뜨거움’이었을 테고요.

무슨 얘기인지 아시겠죠. 오리 자체는 모두 동일합니다. 하지만 색깔이 의미를 바꾼 거에요.

이런 뜻을 담을 필요가 없다면, UI 디자이너가 색을 고르게 두세요. 하지만 뜻이 담겨야 한다면, 여러분의 와이어프레임에 담아주세요.

* 물러나거나 나서거나

또 하나 명심해야 할 건 색깔은 “시끄럽거나”, “조용할” 수 있다는 겁니다.

위에서 두번째 그림을 보면 빨간 오리 하나와 푸른 빛의 오리가 둘 있습니다. 빨간 오리가 조금 더 가까워 보이지 않나요? 실제로는 아니에요. “구매” 버튼 같은 건 화면에서 뛰쳐나올 듯한 색을 띄어야 합니다. “도드라진”(앞으로 튀어나온) 색을 사람들은 더 클릭할 거에요.

반면에 어떤 것들은 뒤로 물러서게 만들어, 보이긴 하지만 방해 요소가 되지는 않게 만들어야 할 때도 있습니다. 푸른 빛의 오리 두 마리처럼 말이죠. 이들은 “물러나”(뒤로 물러난) 있습니다. 이런 색은 화면에 항상 떠있는 메뉴 같은 것에 좋습니다. 뭔가가 여러분을 향해 언제나 외치고 있다면, 그건 불필요한 것이고 더 중요한 다른 것이 받아야 할 주의를 뺏어오게 됩니다.

* 와이어프레임을 단순하게 유지하기

여러 색이 쓰인 와이어 프레임은 동작의 세부를 보는 것에 방해가 됩니다. 중요한 곳에선 색을 쓰세요. 하지만 와이어프레임을 건축 청사진처럼 푸른 색으로 칠하거나, 클라이언트에게 보여주기용으로 온갖 색을 바르진 마세요. 그럼 회의 내내 색깔에 대해서만 혼란스럽게 얘기하게 될 겁니다. “아뇨, 웹사이트가 푸른 색이지는 않을 거에요…”

* 시각적 원리를 결합하기!

색깔은 이전 글에서 다룬 시각적 무게감과 잘 어울리게 쓸 수 있습니다. 뭔가가 크면 알아채게 됩니다. 하지만 뭔가가 크고 빨갛기까지 하면 그냥 지나칠 수가 없죠! 에러나 경고 메시지를 빨갛고 고대비로 만드세요. 그게 아니라 사용자가 한 행위를 그저 확인하는 거라면, 좀 더 작고 후퇴하는 녹색을 쓰면 더없이 좋을 거에요.

****

다음 글에서는 시각적 원리 세 번째, ‘반복과 패턴 파괴’를 다루겠습니다!

 

#14

또 하나의 중요한 시각 디자인 원리는 패턴을 만들어서 사용자의 시선을 중요한 것으로 이끄는 것입니다. 다른 모든 좋은 법칙이 그렇듯, 패턴은 깨지라고 만드는 것이기도 하고요. 그러니 이번 글에서는 반복과 패턴 파괴에 대해 배워보죠.

반복과 패턴 파괴

이 구식의 고무 오리들이 당당히 돌아왔습니다!

인간의 뇌는 패턴과 순서 인지에 특별한 재능이 있습니다. 자연에서 뭔가가 계속해서 일어날 때마다 우리는 재빨리 눈치챌 수 있습니다. 사실 우리는 알아채기만 하는 게 아니라, 그런 것들을 다르게 생각하기도 합니다.

첫번째 그림에서는 다섯 개의 똑같은 고무 오리가 한 줄로 늘어서 있습니다.하지만 우린 다섯 개의 개별 오리로 보는 게 아니라, 오리의 줄 하나로 봅니다. 이 오리들을 그룹이나 순서로 보는 거죠. 서구 문화권에 산다면, 글자를 읽을 때처럼 왼쪽에서 오른쪽으로 오리들을 볼 겁니다.

오리 대신 메뉴나 목록이 줄지어 서있어도 우리는 똑같은 일을 할 겁니다. 따라서 가장 왼쪽에 있는 걸 더 많이 클릭하고 가장 오른쪽에 있는 걸 덜 클릭할 것임을 알 수 있습니다.

* 패턴 파괴

두번째 그림에도 고무 오리 다섯 마리가 있습니다. (참 잘 생겼죠?) 하지만 이번엔 한 마리가 따로 떨어져 나와있는데요. 이 녀석을 비욘세라고 불러보죠.

그것 하나가 모든 것을 바꿉니다.

이제 우리가 보는 건 일렬로 줄지어선 (질투심 많은) 오리 네 마리와 혼자 떨어져 스팟라이트를 받으면서 매력적으로 보이는 비욘세입니다. 비욘세에 집중하지 않는 게 어렵습니다. 오리 다섯 마리는 정말 똑같이 대단한데 말예요.

자, 이게 메뉴였다면 어떨까요? 가운데 있는 선택지가 이전에 비해 훨씬 더 많이 클릭될 겁니다. 우리 시선이 거기 고정되어 있기 때문이죠. 또한 이런 클릭은 왼쪽 선택지에서 뺏어온 것이기 때문에 이전에 비하면 왼쪽 선택지의 인기가 덜할 것입니다. (그럼에도 가장 오른쪽에 있는 선택지보다는 여전히 꽤 인기 좋겠지만요.)

* 알아두면 아주 강력한 사실입니다.

단순해보이고 뻔해보이지만, 이 원리를 디자인에 적용하면 (아님 춤출 때 써보시던가요) 사람들이 어떤 게 중요한 버튼이고 선택지인지 알아채게 만듭니다. 뭐 팝 스타일수도 있겠고요.

조심하세요:  패턴을 파괴하면 사용자의 시선을 다른 중요한 것에서도 뺏어올 수 있습니다. 패턴을 깨기 전에, 패턴을 하나 만들어둬야 합니다.

* 이 원리들을 결합시켜 봅시다.

패턴이나 순서를 만들려면, 대상들의 시각적 무게감과 색을 일관성있게 맞추세요. 사용자의 시선은 한쪽 끝에서 시작해서 패턴을 따르다가 다른 쪽 끝에서 끝날 겁니다.

패턴을 파괴하려면, 초점을 주고 싶은 부분만 살짝 바꾸세요. “바로 가입” 버튼을 예상 못했던 색깔과 크기, 형태, 스타일로 만들어 보세요. 그리곤 밤새 클릭 수 올라가는 걸 보는 겁니다!

****

다음 글에서는 이런 개념을 좀 더 심화한 ‘선의 긴장과 가장자리의 긴장’에 대해 다룰게요.

 

#15

뭔가를 반복하면 패턴이 생긴다는 걸 이전 글에서 다뤘습니다. 하지만, 특정한 종류의 반복은 “형태”를 인지하게 만들기도 합니다. 그리고 그렇게 하면 사용자의 시선이 어디로 향하는지도 영향을 끼치게 되죠. 그러니 오늘은 ‘선의 긴장’과 ‘가장자리의 긴장’에 대해 알아봅시다.

선의 긴장과 가장자리의 긴장

이제 오리에 질렸다고요? 아뇨, 전 안 그래요. 

시각적 “긴장”이라는 개념은 아주 초보적인 것으로 보이지만, 얼마나 유용할 수 있는지 안다면 놀라실 겁니다. 우리의 두뇌는 패턴이 없는 곳에서도 패턴을 찾는 것에 다소 지나치게 뛰어납니다. 디자이너인 여러분은 이를 활용할 수 있습니다.

* 선의 긴장 

첫번째 그림에선 오리 여덟 마리가 줄지어 있습니다. 우리는 오리 여덟 마리 각각을 보지 않고, 줄로 인식합니다. 그게 선의 긴장입니다. 실제로 선이 있는 것도 아닌데, 선이나 “경로”라고 인지하는 거죠.

우리의 눈은 선이 어디로 이어지는지 경로를 쭉 따라가게 마련입니다. 아주 유용하죠.

패턴을 부쉈던 것처럼 경로를 일부러 부순다면, 그 이빠진 부분에 훨씬 더 시선을 뺏기데 됩니다.

* 가장자리의 긴장

지금까지는 선이 하나만 있다고 가정했습니다. 하지만 하나 이상의 선을 갖고 선의 긴장을 만들어내면 어떻게 될까요?

그 결과는 “형태”가 될 수 있습니다.

두번째 그림에서, 저는 오리가 상자의 “모퉁이”를 만드는 것처럼 보이게 배치했습니다. 오리 12 마리를 볼 수도 있었고 , 세 마리씩 짝지어진 네 개의 그룹을 볼 수도 있겠지만, 여러분 마음 속에서 정말로 보고 싶어하는 건 상자이고, 그래서 그렇게 보입니다.

한 발 더 나아가, 이제 상자 “안”이나 “모퉁이” 사이의 “공간”에  뭔가를 더 넣을 수도 있습니다. (오리 좀 더 넣어볼까요?!) 선의 긴장과 마찬가지로, 가장자리의 긴장은 뚫린 곳에 집중하게 만듭니다.

레이아웃의 관점에서 보자면, 이는 라벨처럼 작은 뭔가에 더 집중하게 만드는 아주 훌륭한 방법입니다. 시각적인 경로를 만들어서 사람들이 클릭하길 바라는 버튼으로 이어지게 만들 수도 있겠죠. 고전적인 광고는 이런 테크닉을 곧잘 사용했습니다.

편리하게도 이렇게 하면 레이아웃이 “더 단순하고”, “더 응집력있어” 보입니다. 12마리의 개별 오리는 잘 다루기엔 너무 많지만, 경로나 상자는 정신적으로는 한 개의 개체거든요.

* 이 원리들을 결합시켜 봅시다.

이번 글에서는 “긴장” 사이의 빈틈을 비워뒀지만, 꼭 그럴 필요는 없습니다. 아이템 목록에 그래디언트를 쓰는 등 색깔을 이용해 경로를 만들 수도 있습니다. 여러 요소들의 그룹을 개별 개체가 아니라 하나의 형태로 다뤄서 시각적 무게감을 더할 수도 있습니다. 레이아웃에 “뭔가”를 추가하지 않으면서도 사용자의 시선을 처리하는 훌륭한 방법이죠.

***

다음 글에서는 이번 특강에서 다섯 번째이자 마지막일 시각 원리에 대해 알아보죠. 정렬과 근접도입니다.

 

#16

우리가 배울 마지막 디자인 원리는 뭔가 요소를 추가하지 않으면서도 디자인 요소에 경중과 의미를 더하는 방법입니다. 좀 미묘하게 들리지만, 일상에서 보는 모든 것들에 영향을 끼치고 있어요.

정렬 & 근접도

오늘은 이 구식 고무 오리들에게 작별을 고할 시간입니다 하지만 우리를 떠나기 전에 오리들은 시각 인지의 가장 근본적인 원리 두 가지에 대해 설명해줄 거에요. 그냥 얼굴만 예쁜 녀석들이 아니라고요!

****

* 정렬

첫번째 그림에는 기가 막히게 잘 생긴 오리 여섯 마리가 있습니다. 하지만 녀석들이 정렬된 방식 때문에 관계에 대해서도 많은 걸 알아낼 수 있죠.

두 줄이 보입니다.

가장 왼쪽과 가장 오른쪽에 있는 오리는 “고립된” 것처럼 보입니다.

가운데 있는 두 마리가 가장 잘 “정리된” 것처럼 보입니다.

모든 오리들이 같은 방향으로 이동하는 것으로 보입니다.

동작을 본다면, 가장 왼쪽에 있는 오리가 무리에서 “뒤쳐진” 것으로 보입니다.

동작을 본다면, 가장 오른쪽에 있는 오리가 무리를 “이끄는” 것으로 보입니다.

이 여섯 마리의 오리는 동일합니다. 정렬 만으로 이런 인지를 만들어낸 것이죠.

비슷한 기능을 하는 버튼들도 정렬할 수 있습니다. 서로 다른 층위에 있는 콘텐츠도 정렬할 수 있습니다. 복잡한 의미를 만들려면 스프레드시트처럼 행과 열의 그리드 속에 정보를 넣을 수도 있습니다.

****

* 근접도

두 사물 간의 가까운 정도 또는 먼 정도를 통해 두 사물이 서로 관련됐는지 또는 그렇지 않은지에 대한 감정을 만들어낼 수 있습니다. 그 거리를 “근접도”라고 부릅니다.

두번째 그림에는 여섯 마리의 오리가 있습니다. 이번엔 수평선이나 수직선에 맞춰 정렬한 것이 아니지만, 우리는 두 그룹을 명확히 알 수 있습니다. 각 그룹에 있는 오리들은 팀이나 가족처럼 “함께” 있는 것처럼 보입니다. 근접도만으로 그런 인지를 만들어낸 것입니다.

여러분의 디자인에서 서로 관련있는 요소들은 가까이 두고, 관련없는 요소들은 멀리 떨어뜨려 놓으세요.

예를 들어, ‘구매’나 ‘앱 다운로드’처럼 하나의 액션에 관련된 제목과 텍스트 단락과 버튼은 보통 “패키지”처럼 디자인합니다. 그렇게 하면 사용자가 뭔가를 더 읽지 않아도 이것들이 함께 간다는 것을 이해할 수 있거든요.

이제 여러분은 디자인 천재니까, 다음 글에서는 레이아웃에서 자연적으로 강한 부분과 약한 부분에 대해 알아보겠습니다. Z 패턴, F 패턴, 시각적 계층에 대해서요. 

출처

https://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals

https://imseongkang.wordpress.com/2014/04/28/uxcrash31korean/