'본다'라는 행동에 대한 잡담 1
UX 디자인 잡담 #2
사용자들은 우리가 만든 서비스를 사용합니다. 사용하기 위해선 정보를 얻어야 하고 그 정보의 대부분은 시각으로 얻게 되죠. 사용자들은 우리의 디자인을 봅니다. 그래서 우리가 색상, 문자, 위치나 형태를 잘못 사용하면 사용자들도 잘못 사용하게 됩니다. 예전에 인쇄물을 디자인할 때도 사용자들이 어떻게 보는지를 이해한다면 디자인하는 데 도움이 될 것 같은 생각에 시각에 대한 궁금증을 많이 가졌었습니다. '어떤 부분이 먼저 눈에 들어올까?' '시선의 흐름은 어떻게 진행될까?' '우리도 눈이 달렸으니 우리가 보는 것과 비슷하겠지.'라는 생각도 할 수 있겠죠. - 물론, 이건 부분적으로 잘못된 생각이에요. 요즘 자료를 찾고 있고 책을 보고 있지만, 유용한 정보들이 많지는 않네요. 그래서 여기에 섣불리 글을 쓰는 것이 부담은 되지만 고민해보는 수준의 이야기들을 해보려고 합니다. 사실 그 부담을 없애려고 '잡담'이라는 단어를 사용하고 있습니다.
본다는 것은 무엇일까?
우리의 행동은 크게 의식과 무의식으로 나뉩니다. 그 기준은 제어가 가능한지에 달려있다고도 얘기합니다. 예를 들어 우리는 땀이 흐르는 것을 의지만으로 멈출 수 없습니다. 심장 박동이 빨라져도 속도를 늦출 수 없습니다. 이런 부분은 의식이 아닌 영역이죠. 그런데 양다리를 걸친 부분도 있습니다. 호흡이 그렇습니다. 우리는 의식하지 않아도 숨을 쉬지만, 의식적으로 멈출 수 있죠. 공기를 더 많이 흡입할 수도 있고 짧고 빠르게 숨을 쉴 수 있습니다. 그렇다면 시각은 어떨까요?
눈의 홍채는 빛의 양에 따라 스스로 조절을 합니다. 우리는 의지로 눈에 들어오는 광량을 컨트롤할 수 없습니다. 그러나 눈꺼풀을 이용해 빛을 차단할 수는 있죠. 그런데 빛을 차단했다고 해서 '본다'라는 행동이 멈춰진 것은 아니라고 생각합니다. 빛이 차단된 눈꺼풀의 안쪽을 보고 있는 상태거든요. 해석에 따라 조금 달라질 수도 있는데, 정보(명암, 색이 가진 파장)를 차단할 수는 있지만, 시신경 자체를 차단할 수는 없습니다. 이렇게 생각하면 무의식이라고 생각해도 되지 않을까요?
눈으로 보는 것이 아니라 뇌로 본다
그런데 이 과정은 빛이 눈을 통과해 시신경을 통해 뇌에 전달되는 과정일 뿐입니다. 뇌에서 정보를 해석하는 과정이 빠진 거죠. 사실 이 부분의 '본다'는 행위의 핵심입니다. 시신경은 단지 세상으로부터 얼마나 많은 빛이 들어왔는지, 그리고 그 파장은 어느 정도의 길이인지에 대한 정보만을 줄 뿐입니다. 본다는 것을 이해하려면 눈이라는 기관을 통해서는 기본적인 메커니즘 빼고 그다지 얻을 수 있는 것이 없습니다. 적어도 제가 궁금하게 여기는 부분에서는요. 눈이 정보를 어떻게 받아들이는지보다 어떻게 보이고 해석되느냐가 더 중요하다고 생각합니다. 그래서 우리가 더 알아봐야 할 부분은 바로 ‘뇌의 해석과 활동'입니다.
중심시와 주변시
그래도 눈에 대해 조금만 얘기하고 넘어가죠. 중심시와 주변시입니다. 왼쪽은 중심시 영역을, 오른쪽은 주변시 영역을 임의로 표시한 이미지입니다.
중심시와 주변시중심시
중심시의 영역은 우리가 생각하는 범위보다 매우 좁아질 수 있습니다. 위의 사진에서 사람 한 명까지 좁아질 수 있습니다. 어쩌면 그 사람이 들고 있는 가방, 우산까지도 좁아집니다. 이건 어떤 부분에 ‘주의’를 기울였느냐에 따라 변합니다. 그리고 이 주의는 의식적일 때도 있지만 무의식적일 때도 있습니다.
우리가 주의할 점은 메이커(기획자, 디자이너, 개발자 등)로서 보는 시각은 의식적인 경우가 많고 사용자는 무의식적으로 보는데 그 간극 때문에 우리는 오류를 범하게 됩니다. 그리고 의식이 만들어낸 논리들이 그럴듯하게 느껴져서 의견으로 받아들여질 때가 많죠.
의식적 시각과 무의식적 시각의 차이를 느꼈던 경험이 있었는데 면접을 위해서 전자상거래 사이트를 분석할 때였습니다. 타이포그래피나 색상 및 레이아웃 같은 디자인 요소를 중심으로 보고 있는 과정에서 관심이 있는 상품을 발견한 순간 관점이 바뀌어 버렸고 저는 그 사실을 전혀 느끼지 못하고 있었습니다. 결제를 하고 기억을 되짚어 보고 나서야 디자인 요소는 제쳐두고 상품의 정보만을 찾고 있었던 저를 발견했던 것입니다. 의식적인 시각에서 무의식적인 시각으로 전환된 순간이었습니다.
그 순간은 디자인이 예쁘고 안 예쁘고 가 중요하지 않았습니다. 제가 찾는 정보가 얼마나 눈에 띄었는지가 중요했죠. 그리고 그걸 찾기 어려웠을 때 스트레스가 발생했습니다. 아마 기억을 되짚어 보지 않았다면 깨닫지도 못했을 겁니다. 이 점이 바로 사용자와 서비스 제공자의 시각차라고 생각합니다
예전부터 많은 디자인, 기획자가 모바일의 내비게이션 바를 접어 두려는 시도를 많이 했습니다. 화면이 답답하다는 이유입니다. 그럴듯하게 들립니다. 저도 완전히 부정하지는 않습니다. 다만 뭐가 중요한지 판단을 더 해봐야 할 문제인데 단지 화면이 답답하다는 이유로는 부족합니다. 그렇게 생각하는 이유는 위 이미지의 첫 번째의 시각으로 바라봤기 때문입니다. 우리는 전체를 바라보며 판단할 경우가 많습니다. 그리고 사용자도 그렇게 바라볼 것으로 생각하죠. 다시 말하지만 중심시의 영역은 굉장히 좁습니다.
화면에서 보이는 여러 요소에 한꺼번에 주의를 기울일 수 없습니다. 예외의 케이스라고 말할 수 있는 경우는 컨텐츠 크기가 너무 커서 사용자가 화면에서 보기 편한 위치로 잦은 스크롤을 통해 조작해야 하는 경우입니다. 그러나 이런 경우도 기우라고 생각되네요. 왜냐하면 이런 불만들을 사용자에게서 들어본 적은 거의 없거든요. 전부 메이커들이 늘어놓는 불만이었습니다. 더군다나 항상 손쉽게 접근해야 하는 내비게이션 바를 숨겨놓는 것에 개인적인 우려가 있습니다. 이런 경우는 인지 비용과 인터렉션 비용이 둘 다 늘어납니다. 1) 순간적으로 내비게이션 메뉴를 찾으려 탐색한다. 2) 스크롤로 내비게이션 바를 펼친다. 물론 그 비용은 매우 적습니다. 크게 문제가 되지 않을 수도 있고요. 그런데 그 비용이 순간순간 계속 쌓인다면 어떻게 될까요? 개인적으로는 안정성이 깨질 수도 있는 상황을 무척 경계하기에 조심스럽습니다.
중심시의 움직임은 파악하려는 정보의 맥락에 따라 달라진다
Yarbus, A. (1967). Eye movements and vision (B. Haigh & L. A. Riggs, Trans.)1960년대에 야르부스(Yarbus)는 안구운동측정 장치를 이용해서 시선과 그림의 지각에 대한 반응을 실험했습니다. 러시아의 화가 레핀의 그림을 보여주고 몇 개의 질문을 주며 그림을 바라보는 안구 운동을 측정했는데, 경제 상황과 연령을 추정하라고 했을 때(그림 3-7의 B와 C), 그들이 방문객을 맞이하기 전에 무엇을 했는지를 추정하라고 했을 때(그림 3-7의 D) 등 각 상황마다 그림을 보는 시선이 다르다는 것이 나타났습니다. 이는 문맥이나 인지의 틀에 의해 시선 자체가 바뀐다는 사실을 보여줍니다. [1]
주변시
개인적으로는 주변시의 특징이 흥미로웠습니다. 왜냐하면, 이 영역은 색을 인지하지 못하기 때문이죠. 대부분 이 말을 들었을 때 의구심이 들었을 것이라 생각합니다. 분명 지금 이 화면을 주시하면서도 주변의 색을 느낄 수 있기 때문입니다. 하지만 이것은 이미 중심시가 주변 스캔을 해두었고 뇌가 그것을 보완하고 있는 상태입니다.
주변시는 색을 인지하지 못하지만 중심시가 빠르게 스캔한 정보를 뇌가 계속 보완해주고 있다.우리는 느끼지 못하지만, 우리의 눈은 잠시도 쉬지 않고 움직이고 있습니다. Eye tracking에서 나타나는 움직임은 굉장히 빠르고 우리도 모르게 일어나는 현상입니다. 흔히 말하는 '동공 지진’은 일상적으로 일어나고 있는 것입니다. 위기에 몰리면 더 많은 정보를 찾기 위해 더 열심히 움직이기 때문에 잘 보이는 경우겠죠. 깜짝 놀라는 경우에 눈이 커지는 현상 또한 위험한 상황에 생존을 위해 더 많은 정보를 얻기 위해 발생하는 무의식적인 현상입니다. 이 안구 운동의 중요성은 움직임이 멈췄을 때 나타납니다. 안구를 움직이게 하는 근육을 마취시켰을 때 일정 시간이 지나면 실험 대상자들은 세상이 흑백으로 보인다고 말했습니다. 그리고 시간이 더 흐르면 시각을 완전히 잃어버립니다.
이렇게 중심시가 열심히 움직여준 덕분에 우리는 모든 시각 영역에서 색을 인지할 수 있습니다. 이것도 간단한 실험으로 확인할 수 있습니다. 먼저 크레용 같은 색이 있는 작은 물건을 준비합니다. 친구에게 정면을 바라보라고 하고 시야 한쪽 옆에 그 물건을 들고 색을 물어보세요. 잠깐이라도 눈동자를 돌리지 않았다면 색을 얘기할 수 없을 겁니다. 하지만 시야 중심으로 움직이면 색을 맞출 수 있습니다. 그런데 흥미로운 점은 정면에서 측면으로 이동하면 시야의 구석으로 옮겨도 계속 그 색을 인지할 수 있다는 점입니다. 이미 뇌가 색을 인지하고 그 정보를 보완해주기 때문입니다.
하지만 주변시는 움직임에 굉장히 민감합니다.
모바일은 GIF 지원이 안되나 보네요! 모니터가 아무리 크더라도 주변시의 범위 안에 있다면 우리는 그 움직임을 매우 민감하게 인지합니다. 보고 싶지 않아도 알림 팝업이 뜨면 우리도 모르게 시선이 쏠리죠. 그래서 너무 잦으면 짜증을 유발하기도 합니다. ‘주의’를 방해하니까요. 이것은 주변의 위험으로부터 자신을 지키기 위해 진화한 결과입니다. 사냥감에 집중하면서도 주변에서 다가오는 맹수의 위협도 감지해야 생존에 유리하죠. 그래서 주변시는 움직임에 굉장히 민감하게 진화했습니다. 주의를 끌게 하여 자세히 보게 만들고 판단하게 합니다.
이런 중심시와 주변시의 특성 때문에 발생하는 부작용은 당연히 인지 비용의 증가입니다. 뇌는 잠시도 쉬지 않고 정보를 받아들이며 이를 해석하려고 합니다. 모든 것은 무의식적인 과정입니다. 다만 익숙한 정보라면 기존의 기억을 바탕으로 해석을 넘겨버리지만 잘 모르는 형태 등 특이점이 발견되면 그것을 해석하기 위해 뇌는 평소보다 많은 에너지를 사용하게 되죠. ‘모른다’는 것은 과거부터 생존에 매우 큰 위협이었기 때문입니다. 익숙한 형태면 쉽게 인지하고 익숙하지 않으면 어렵게 인지됩니다. 그래서 우리는 익숙한 곳에 가면 편안하고 낯선 곳에 가면 쉽게 피로해지게 됩니다.
'뇌는 복잡한 자극보다 약간 정형화 또는 단순화된 패턴의 자극을 좋아한다. 사실 자연은 아주 무작위하고 복잡하다. 그런 자연을 있는 그대로 판단하고 기억하기란 힘들다. 그래서 뇌는 그 속에 숨겨진 패턴을 찾아 단순화시키려고 노력한다.' [2]
다양한 UI vs 단조로운 UI
꽤 많은 서비스가 한 페이지에서 다양한 UI를 제공하려는 성향을 가지고 있습니다. 특히 제가 몸담은 이커머스에서는요. 일부 컨턴츠 소비형 서비스들도 그런 현상이 발견됩니다. 그 이유는 대부분 ‘지루하니까’입니다. 메이커는 UI에 신경을 쓰지만, 사용자는 콘텐츠를 봅니다. 앞에서 말했듯이 콘텐츠를 담는 UI의 패턴이 다양해지면 뇌는 무의식적으로 그 형태와 맥락을 이해하려고 소모하게 되는 에너지양이 많아지고, 그 에너지 소모는 스트레스로 전환됩니다. 그래서 차라리 사용자에겐 다양함보다는 지루함이 더 낫습니다. 반복된다는 것은 한 가지만 알면 나머지는 저절로 풀리기 때문이죠.
인간은 크게 도움이 되지 않는 곳에 에너지 소모하는 것을 굉장히 꺼리니 주의해야 합니다. '이득'보다는 '손실'에 굉장히 민감하게 반응하기 때문입니다. 서비스를 이용하는데 인지 비용이나 인터랙션 비용이 많이 발생한다면 사용자는 그 서비스를 이용하지 않으려 할 것입니다. 더 큰 가치를 발견하기 전까지는 말이죠.
일정한 패턴이 계속 반복되면 지루해지는 것은 동의합니다. 그런데 그것은 UI의 단조로움에서 오는 것이 아니라 콘텐츠의 단조로움에서 온다고 생각합니다.
약간의 스트레스는 활력을 불러오기도 합니다. 아무 소리도 들리지 않은 밀폐된 공간보다 생활 소음이 있는 카페가 더 좋을 수도 있기 때문입니다.
단조로움과 변화의 비율이 8:2냐 9:1 정도의 범위에서 벗어난다면 단순함의 의미는 사라질 수도 있습니다. 모든 것은 균형의 문제입니다. 그런데 실무에서 설득하기 어려운 이유는 이런 얘길 간단하게 설명하기가 너무 어렵고 잘 받아들여지지 않기 때문입니다. - 그래서 이런 글을 쓰게 됐습니다.
중심시나 주변시는 짧게 넘어가려고 했는데 생각보다 주절주절 글이 길어졌습니다. 사실 이번 글도 뇌에 관한 얘기라고 볼 수 있어요. 무의식적인 뇌의 해석이 핵심이니까요. 다음엔 시각의 정보처리 순서에 따른 UI 색상 전략의 중요성과 초반부에 얘기했던 뇌의 해석과 활동, 진화심리학에 대해 조금 더 얘기해볼까 합니다.
이번 주제는 올해가 지나가기 전에 꼭 쓰겠다고 다짐했던 터라 조금이라도 정리해봤습니다. 당분간은 또 업무에 집중해야 해서요. 올해의 마지막 글이었습니다.
뒤숭숭하고 어수선한 2016년.
잡담 #2. 끝
인용
[1] 인지심리학 | 하코다 유지, 츠즈키 타카시 외 2명 저 | 강윤봉 역 | 한국뇌기반교육연구소 | 2014.03.10
[2] 감각, 착각, 환각 | 최낙언 저
UI/GUI Designer
Personal Site : http://www.frozensound.com
