News Today, UI & UX, UX & Design

화면이 복잡할 때 꺼내 읽기 좋은 UX 이야기

단순함은 좋은 가치다. 본질을 쉽게 파악할 수 있기 때문이다. 하지만 단순함 자체가 언제나 목표일 필요는 없다. 피아노 건반은 88개나 있지만 건반의 수를 줄여야 한다고 주장하는 사람은 드물다. 모든 건반을 다 활용해 연주를 하는 사람이 거의 없다 하더라도 말이다. 비행기 조종실의 복잡성 역시 이유가 있다. 조종사들은 뚜렷한 정보 체계와 명확한 구조를 통해 복잡함을 이해한다. 심리학에서 종종 거론되는 *테슬러의 법칙(Tesler’s Law)은 이와 관련해 다음과 같이 말한다.

‘모든 시스템에는 더 이상 줄일 수 없는 일정 수준의 복잡함이 존재한다.’

조종사들은 뚜렷한 정보 체계와 명확한 구조를 통해 복잡함을 다스린다

이를 ‘내재된 복잡성’이라고 한다. 우리가 매일 사용하는 카카오톡을 떠올려보자. 우선 메시지를 보내는 사람과 받는 사람이 존재하며, 메시지를 입력할 수 있는 키보드가 필요하다. 이메일 역시 수신자나, 제목 등을 제거한다면 큰 불편함이 따를 것이다. 테슬러의 법칙을 곰곰이 들여다보면 복잡함은 완벽히 제거할 수 없는 세상의 일부처럼 보인다. 어떤 사람의 지저분한 책상에는 그 사람이 부여한 임의의 질서가 존재하는 것처럼 말이다. ‘디자인과 인간 심리’의 저자 도널드 노먼은 ‘복잡함 자체는 좋은 것도 나쁜 것도 아니며 우리가 제거해야 할 대상은 바로 혼란스러움’이라고 말한다. 노먼의 말에 따르면 UX 디자이너는 덜 복잡함을 맹목적으로 쫓기보다, 혼란스러움을 다스리는 사람에 가깝다. 즉, 사용자 경험을 디자인할 때 단순함 자체가 목표가 돼서는 안 된다. 서비스에 남길 수 있는 최소한의 기능을 고려한 뒤 혼란스러움을 야기하는 요소를 제거해 나간다면 단순함은 자연스럽게 찾아온다.

*테슬러의 법칙(Tesler’s Law): 복잡성 보존의 법칙이라고도 알려짐. 1980년대 중반 제록스 파크에서 컴퓨터 과학자로 재직 중이었던 레리 테슬러가 인터랙션 디자인 언어를 개발할 때 발견함

복잡함을 다스릴 수 있는 수단, 질서

대표적인 예로 계산기가 있다. 아마 태어나 처음 계산기를 본 사람이 있다면 많은 양의 버튼 때문에 복잡하다고 느낄 것이다. 하지만 대부분의 성인은 계산기를 복잡하다고 느끼지 않는다. 왜 그럴까? 답은 바로 질서에 있다.

복잡하지만 질서가 느껴지는 계산기

일반적으로 계산기는 두 영역으로 구성된다. 중간 영역은 많은 숫자 버튼으로 구성됐고, 가장 우측면은 계산에 필요한 등식들이 배치돼 있다. 이러한 규칙은 우리가 꽤 오래전부터 받아들여온 것이다. 만약 계산기에 규칙성이 느껴지지 않는다면 어떻게 될까. 아마 큰 혼란에 빠질 것이다. 즉, 사람들은 버튼이 많아도 스스로에게 익숙한 질서라고 받아들였기에 그리 어렵게 느끼지 않았다. 더불어 많은 심리학자가 인간은 완벽히 단순한 것보다 약간의 복잡성을 바라는 경향이 있다고 주장한다. 예를 들어 야구는 얼핏 보기에 단순해 보이지만 규칙을 모아놓은 책의 분량만 약 200쪽에 달한다. 야구를 사랑하는 사람들은 표면의 단순함 속 수많은 규칙의 상호작용으로 만들어지는 관계의 미묘함을 즐기는 걸지도 모르겠다.

사회적 기표란?

세상에는 수많은 사회적 약속이 존재한다. 대표적으로 문자와 기호다. 우리는 문자를 통해 타인과 복잡한 커뮤니케이션을 할 수 있다. 신호등의 빨간불은 사람을 멈추게 하고 녹색불은 움직이게 한다. 놀이공원의 긴 줄은 꽤 오랜 시간을 기다려야 한다는 걸 암시한다. 시계는 12개의 큰 단위와 60개의 작은 단위로 나뉜다. 학자들은 시계에 맞춰 먹고 자는 것이 인간의 욕구 체계와 완벽히 일치하지는 않는다고 하지만, 우리는 이러한 사회적 약속을 자연스레 따르고 있다. 지금은 이러한 사회적 약속을 쉽고 당연하게 여기지만, 어릴 때의 체득 과정은 그리 녹녹지 않았다. 하물며 한 사회에서 새로운 시스템을 받아들이는 과정은 또 얼마나 어려운 일일까.

도널드 노먼은 『복잡한 세상의 디자인』에서 세상이 보내오는 신호를 ‘사회적 기표’라고 이름 붙였다. 기표는 쉽게 말해 의미를 전달하고 다음 할 일을 알려주는 지시자다. 때로는 문화적인 차이에 따라 같은 기표라도 다르게 해석된다. 예를 들어 한국과 일본에서 ‘손가락 링 사인’은 돈을 나타내지만, 미국에서는 OK, 브라질에서는 외설적인 뜻으로 간주한다.

다행히 낯선 곳에서도 사회적 기표를 쉽게 체득할 수 있는 방법이 있다. 바로 다른 사람의 행동을 유심히 관찰하는 것이다. 만약, 처음 프랑스 여행을 가서 레스토랑에 방문했다면, 우선 주변 사람이 먹는 모습을 서서히 관찰하며 적응하면 된다. 우리는 해당 과정을 통해 냅킨을 펴는 것부터 샐러드나 빵은 나이프로 잘라먹지 않는 프랑스식 식사예절까지 터득할 수 있다.

특정 행동을 유도하는 어포던스(출처. medium.com/@thoughtbottler)

UX 용어 중 어포던스(Affordance)라는 개념이 있다. 쉽게 말해 어떤 행동을 유도하게끔 하는 요소로 ‘행동 유도성’이라고도 부른다. 손잡이는 문을 열게끔 유도하는 대표적인 어포던스다. 회원가입 창은 정보를 입력하게 하며, 에디팅 화면의 버튼은 여태껏 썼던 글을 안전하게 저장하게끔 유도한다. UX 디자이너는 사회적 기표를 고려해 적당한 시점에 정확한 어포던스를 배치할 의무가 있다. 만약 혼란스러움이 느껴지는 UX라면, 적당한 어포던스를 맥락에 맞게 배치했는지부터 확인하면 좋다.

익숙한 경험을 활용해 UX 설계하기

사회적 기표는 우리에게 다양한 정보를 제공한다. 지하철 승강장이 북적북적하다면 출퇴근 시간임을 알 수 있다. 반면 승강장이 한가하면 지하철이 막 출발한 뒤라고 여겨진다. 헌책방에서 어떤 책의 특정 귀퉁이가 닳아있다면 책의 옛 주인이 선호했던 페이지라고 예상할 수 있다. 옆집 문 앞에 택배 박스가 많이 쌓여있다면 휴가를 갔다고 유추할 수 있다.

이처럼 세상은 우리에게 사회적 기표를 지속적으로 보내온다. UX 디자이너는 이러한 사회적 기표 즉, 세상의 작동 방식에 집중할 필요가 있다. 앞서 말한 혼란스러움은 실제 세계의 규칙을 통해 해결할 수 있기 때문이다. UX에서의 혼란은 실제 세계의 규칙과 어포던스 사이의 불일치에서 주로 발생한다. 예를 들어 오프라인에서 활자를 읽는 진행 방향은 왼쪽에서 오른쪽인데, 온라인에서는 반대로 읽어야 한다면 큰 불편함이 발생할 것이다. 이에, 도널드 노먼은 사회적 기표와 UX를 매핑하는 과정을 개념적 모델(Conceptual Model)이라고 명명했다. 즉, 실제 세계의 복잡 미묘한 질서는 디지털에서 새로운 경험을 만들 때 활용할 수 있는 훌륭한 소재가 된다. 지금부터는 이러한 개념적 모델을 활용해 실제로 디자인한 예시를 살펴보자.

가장 대중적인 앱에서 출발하기

예시를 살펴보기 전 현재 가장 대중적인 앱부터 생각해 보자. 카카오톡의 채팅창, 쿠팡의 상품 리스트, 구글맵의 지도 검색, 토스의 송금 화면같이 대중성을 이미 획득한 앱의 UX 자체가 개념적 모델이다. 현재 새로운 프로덕트를 기획하고 있다면 진입할 카테고리 선두주자의 UX를 면밀히 살펴볼 필요가 있다. 이런 서비스에 익숙한 사용자라면 새로운 앱 설치 전, 자신에게 익숙한 사용자 경험을 예상할 가능성이 높기 때문이다. UX는 사용자의 예측과 실현된 것 사이의 적절한 간극 조절이라고도 할 수 있다. 지금부터는 개념적 모델을 프로덕트나 서비스에 실제 적용한 사례를 살펴보자.

1. 지도와 구글맵

구글맵은 2005년 처음 탄생했다. 당시만 해도 온라인 지도가 어떤 모양으로 디자인돼야 할지 예상하지 못했다. 더불어 우리 일상에 어떤 영향을 미칠지도 가늠하기 어려웠다. 아래 그림은 구글맵의 초기 모습이다. 페이지가 넘어가지 않는 종이 지도의 모습을 그대로 재현하고 있다. 참고로 최초 온라인 지도는 구글맵이 아니라 1994년 캐나다에서 탄생한 국립 지도라고 한다.

초기 구글맵의 모습(출처. vox.com)

2. 카드놀이와 틴더 UX

세계적인 데이팅 앱 틴더를 오늘날 위상으로 만든 건 다름 아닌 UX다. 틴더의 핵심 UX는 매우 단순하다. 이성이 마음에 들면 오른쪽, 마음에 들지 않으면 왼쪽으로 넘긴다. 이 모습이 마치 카드게임을 할 때 넘기는 모습과 비슷하다고 해서 Card Swipe UI라고도 부른다. 실제로 포커나 솔리테어 같은 전통적인 카드게임에서 나온 개념이나 경험들은 독창적인 UX를 만드는데 단골 소재로 활용된다.

카드 게임이 연상되는 틴더의 UI(출처: markolazic.com)

3. 머릿속에 비교상 만들기

사람들은 비교를 통해 대상의 실체를 종종 확인한다. 혼자 있을 때보다 비교할 수 있는 대상이 옆에 있을 때 가치를 더 명확히 느낄 수 있기 때문이다. 디자인에서 비교 기법이 널리 쓰이는 이유이기도 하다. 이러한 개념이 커머스에 활용된 대표적인 예시가 마켓컬리다.

마켓컬리 상세 페이지에 활용된 비교 기법

온라인에서 물건 구매 시 고민되는 부분 중 하나는 크기일 것이다. 수치로 크기가 설명됐지만 쉽게 와닿지 않는다. 마켓컬리는 일상에서 자주 접하는 소품을 통해 상품의 실제 크기를 직관적으로 파악할 수 있게 했다.

이러한 비교 기법은 꼭 이미지로만 디자인될 필요는 없다. 아래는 온라인에서 수집한 두 가지 버튼이다. [노란색 버튼]은 한 B2B 서비스, [파란색 버튼]은 결혼 정보 회사에서 발견했다. 버튼 아래에는 해당 서비스를 이미 경험한 사람을 숫자로 표시했다. 이를 통해 해당 서비스에 대한 정보가 없는 사용자라도 검증된 서비스라는 심리가 발동해 신뢰감을 얻는다. 이를 사회적 증명(Social Proof) 심리라고도 부른다.

사회적 증명 심리로 CTA 버튼 디자인하기

4. 감정 스티커와 무다

오프라인의 오브제들을 온라인으로 옮기는 것도 개념적 모델을 UX에 활용하는 방법 중 하나다. 무다는 매일 쓰는 일기와 감정을 함께 온라인으로 기록할 수 있도록 돕는 앱이다. 이는 다이어리에 직접 붙일 수 있는 스티커에서 본 익숙한 개념이다.

(좌) 감정 기록 다이어리 앱 ‘무다’, (우) ‘스트레스 컴퍼니’

5. 슬롯머신과 인스타그램의 당겨서 새로고침

당겨서 새로고침은 인스타그램이나 페이스북, 심지어 메일링 서비스에서도 활용되는 대중적인 인터페이스다. 주로 현재 보고 있는 피드를 완전히 새롭게 고치고 싶을 때 활용한다. 구글 디자인 윤리학자 트리스탄 해리스는 ‘당겨서 새로고침을 사용하는 사람들이 슬롯머신에서 느끼는 중독성을 거의 동일하게 느낀다’고 말한다.

슬롯머신과 동일한 메커니즘을 가진 당겨서 새로고침 UI

이처럼 피드를 아래로 당기는 간단한 행동이 새로운 피드라는 가변적 보상 심리로 연결되는 것이다. 가변적 보상 심리의 대표적 예로는 스키너의 상자 실험이 있다. 프레드릭 스키너라는 심리학자가 고안한 것으로, 상자 속 쥐가 장치의 레버를 누르면 정기적으로 먹이가 나오는 패턴과 비정기적으로 먹이가 나오는 패턴을 관찰했다. 그랬더니 쥐는 즉시 먹이가 나오는 것보다 비정기적으로 먹이란 보상을 받을 때 레버를 당기는 행위를 멈추기 어려워했다. 즉, 동일하고 간단한 행동을 반복할 때 주어지는 보상이 랜덤으로 이뤄질수록 더 중독된다는 것이다. UX 디자이너라면 이러한 심리를 이용해 악의적으로 UX를 설계하지 않도록 주의해야 한다.


지금까지 복잡함과 혼란스러움의 구별에서 출발해 개념적 모델을 활용한 UX 예시까지 살폈다. UX에서의 창의성은 아예 없던 개념을 창조하는 것과는 거리가 멀다. 오히려 창의성은 세상의 질서와 작동원리에 관심을 기울이고 그것을 활용해 사용자 머릿속에 명확한 구조를 만들 때 발생한다. 내일은 세상에 조금 더 관심을 기울여보는 건 어떨까? 익숙한 경험으로 더 나은 UX를 만들기 위해.

Comments
  • digitla-insight-202102-offline-ads-does-interactive
© DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

Related Posts