#21 UI의 퀄리티를 높이는 디테일
정보의 우선순위를 정해주세요, 던져놓은 정보는 혼란스러워요
여러분은 어딘가 새로운 곳에 놀러 갔는데, 길 안내가 불안하거나 내비게이션도 잘 나오지 않을 때 어떤 기분이 드나요? 아마 당황스럼을 넘어 짜증이 날지도 모르겠습니다.
그저 고개를 끄덕일 일이 아닙니다, 이건 아마 여러분의 디자인 결과물을 받아본 평가관의 마음일지도 모르니까요.
인간 시선의 흐름을 결정짓는 주요 요소들
EyeTracker 출처 EIZO Global안구의 움직임을 추적하는 아이 트래커 같은 도구를 통해 우리는 인간이 정보를 탐색하는 순서는 보통 위에서 아래로, 좌에서 우로 향하고 있다는 사실을 상식처럼 알고 있습니다. 그래서 당연히 화면 내에 정보도 그런 순서대로 배치할 거예요.
하지만 인간은 변덕의 동물, 이 상식을 뒤엎는 경우가 있습니다.
보통 인간은 시선 내에 사람의 얼굴이나 표정, 그리고 동물 같은 존재가 있을 경우에는 가장 먼저 시선이 향하게 됩니다. 그게 아주 구석에 처박혀 있는 것만 아니라면요. 그리고 그다음에는 크기(부피)가 큰 것, 색깔이 강한 것 그리고 이 모든 걸 무시하고 시선을 강하게 흡입하는 건 바로 움직이는 것
자, 여러분이 그려놓은 화면을 한번 가만히 들여다보세요. 사용자의 시선이 올바르게 잘 흘러가도록 화면의 강약과 레이아웃을 짜 두었는지를요. 아마 대학교 때 편집 디자인을 잘 수강했던 친구들은 잘했을지도 모르겠어요, 하지만 상당수의 친구들의 화면은 여기저기서 마음대로 소리치고 뛰어다니는 유치원 놀이터처럼 정보들을 던져놨을지도 모릅니다.
여러분이 건네려는 이야기에 맞도록 사용자의 시선을 잘 유도해 주세요. 크기, 색깔, 움직임을 가지고 말이에요.
덜어낼 때에야 빛을 발하는 UI
조형 요소가 최소화될 때에야 빛을 발하는 UI위에 음악을 표현하는 세 가지 정보 형식이 있습니다.
아마 상당수의 친구들이 첫 번째 케이스처럼 박스를 쳐서 클릭커블(Clickable)한 표현과 함께 정보가 흩어지지 않도록 시각적인 군집을 시도할 겁니다. 거기에 배경과의 명확한 구분을 위해 그림자도 넣어서 입체적인 효과로 그 의도를 강화할 테고요. 나쁘지 않습니다.
하지만 이렇게도 생각해 봅시다. 사용자가 핸드폰을 손에 들고 사용할 때 얼마나 많은 경계선들이 생겨나는지. 먼저 핸드폰 케이스 / 하드웨어 베젤 / 앱에서 갖는 여백 / 앱 배경과 여러분이 저렇게 박스 친 사이의 공간 / 박스 안의 앨범 이미지가 갖는 공간 수많은 경계선들이 생겨납니다. 그리고 이건 다시 핸드폰을 들고 있는 사용자의 시선을 끊임없이 유혹하고 컨텐츠에 집중하지 못하도록 하는 원인이 되죠.
그럼에도 불구하고 우리가 억지로 박스를 치고 정보들 간의 관계성을 선언하려고 하는 이유는 정보들 간의 관계가 모호할 때 생기는 혼란 때문일 겁니다. 예시 이미지 중, 가운데 타입의 위에 음악을 보세요. 아티스트인 'Fall out boy'는 과연 위의 컨텐츠에 종속된 친구일까요 아니면 아래 컨텐츠에 종속된 친구일까요?
반면에 아래에 있는 'Sharman's Harvest'는 확실히 'The Come Up'이라는 음악 타이틀을 수식하는 정보처럼 여겨지죠?
이렇게 정보를 어떻게 밀집시키느냐에 따라서 정보 간의 상관관계가 생겨나고 화면에서 불필요한 요소들을 제거해서 사용자가 온전히 컨텐츠에 집중해줄 기회를 마련해 줄 수 있습니다.
그리고 마지막 예시였던 가장 오른쪽 타입. 카드 타입의 클릭커블한 기능성을 위해서 우리는 그래도 박스를 쳐야 하는 순간들이 있을 수도 있어요. 그런데 처음과 다른 건 그림자입니다.
그림자는 손쉽게 입체 효과를 주어 사실감을 높이는 역할을 해주기도 하지만 화면에서 일종의 먹 역할을 해서 저런 것들이 군데군데 화면에 드러나게 되면 화면 전반을 탁하게 만드는 요소로도 작용을 하게 됩니다. 한마디로 화면이 지저분해 보이게 만들어요.
세 번째 타입은 그림자라는 장식 요소를 덜어내기 위해서 그저 배경색만을 명도 대비로 다듬어 줬을 뿐입니다. 이제 박스라는 기능적 형태도 쉽게 식별이 되고, 화면에 불필요한 먹은 사라지고 더욱 명쾌한 시각적인 인상이 남았습니다.
그저 작은 카드 디자인인데도 불필요한 조형 요소를 덜어내기 위한 많은 논리가 숨어있죠? 안타깝게도 이건 아주 작은 예시일 뿐이며, 더 본격적인 이야기들은 따로 할 기회가 있었으면 하네요.
지금은 이것만 기억해 주세요.
인터페이스는 어디까지나 조연입니다.
의미 없는 새로움을 강요하지 마라
가끔 평가관에게 강한 인상을 남겨야 한다는 부담 때문인지 정말 새로운 UI를 창조해서 가져오는 친구들이 종종 있더군요. 사실 그렇게 가져오는 결과물들을 보면 100에 하나 둘, 정도는 건질만한 게 있긴 한데 대부분은 저도 모르게 탄식이 터져 나오곤 합니다.
'아니 세상에, 이게 뭐야?'
여러분 집에 있는 TV 리모컨이 아주 새롭게 바뀌었다고 생각해 보세요. 익숙해져서 편하게 채널을 돌리고 음량을 조절하는데 얼마의 시간이 필요할까요? 그런 학습의 시간 동안에 잘못 눌리고 의도와는 다른 동작이 피드백으로 다가올 때 어떤 기분이 들까요?
사용자가 새로운 것을 기꺼이 수용할 수 있는 경우는 크게 2가지입니다.
1. 새로운 것을 학습해 냈을 때 사용자가 얻을 수 있는 가치가 크거나
2. 아니면 조작 자체가 신선하고 재미있어서 그 자체만으로도 의미를 가질 때
전화 다이얼을 입력하는 새로운 방법 (좌)좌측 이미지를 보세요. 새롭죠?
전화번호를 이런 식으로 입력할 수 있을 줄은 몰랐죠? 전화번호도 길게 늘어놓고 보면 자연수일 뿐이니까 슬라이드를 조정해서 숫자를 증감시켜서 입력시킬 수도 있겠죠? 정말 천재적이죠?
이게 과연 위에서 제시한 새로움을 수용할 수 있는 조건 1/2번 중 어디에 속하는 케이스일까요? 답은 이미 여러분도 알고 있으리라 믿어요.
이런 게 바로 새로움 그 자체에만 치중해서 만들어낸 UI의 모습입니다. 끔찍하다 못해 역겹기까지 합니다. 만든 사람의 의도는 순수할 수 있을지라도 결과적으로는 사용자를 무시하다 못해 조롱하는 결과물일 뿐입니다.
그러니 꼭 새로운 UI를 시도해야 할 땐 정말 사용자가 받아들일 동기가 충분한지부터 생각하고 움직이세요.
다음 글은 포폴 준비하기의 마지막 글로 찾아올게요
