brunch

You can make anything
by writing

C.S.Lewis

by 우디 Dec 20. 2022

왜 앱 화면을 단순하게 만들어야 할까?

선택권과 통제권

사용자 경험을 설계할 때 화면을 단순하게 구성해야 한다는 것은 이제 일종의 통념으로 자리 잡은듯하다. 그런데 한걸음 더 들어가 왜 화면을 단순히 구성해야 하는지를 질문해보면 생각보다 답이 쉽지 않다. 미니멀리즘 같이 디자인의 미학적인 측면으로만 대답하는 것은 어딘지 부족하다. 지금부터 화면을 단순하게 만들어야 하는 진짜 이유들을 함께 살펴보자.



인간은 공통된 기반 위에서 사고하려 한다

UX는 인간의 커뮤니케이션 체계를 자연스레 닮는다. 매표소 줄이 길면 시간이 걸릴 거라 예상한다. 느리게 채워지는 프로그레스 바를 보면 비슷한 답답함을 느낀다. 항목 선택 시에는 빈 박스에 색칠을 해야 할 것 같고, 선택하고 싶지 않다면 비워둔다. 이처럼 일상에서 우리가 자연스럽다고 느끼는 커뮤니케이션 시스템은 UX의 훌륭한 재료가 된다. UX의 창시자로 알려진 도널드 노먼은 이러한 자연스러운 커뮤니케이션 시스템을 "개념 모형"이라고 정의한다. 쉽게 말해 “아 저거 저렇게 동작하겠네”처럼 머릿속에 상이 쓱싹 그려지는 것을 의미한다. 그리고 디지털이 일상이 된 현재, 반복적으로 활용되어온 UX/UI들 역시 개념 모형으로 자리 잡았다. 가령 회색 카메라 아이콘이 있으면 자연스레 시스템이 내 사진첩에 접근하려는 것을 감지하고, 하단의 플러스 아이콘은 새로운 무언가를 생성할 수 있을 것 같은 기대감을 준다. 다양한 서비스에서 활용되는 '지도' 역시 아날로그에서 출발한 훌륭한 개념 모형중 하나다. 아래 세 이미지는 모두 다른 서비스지만 지도라는 개념 모형을 통해 각자의 가치를 전달하고 있다.

왼쪽부터 타다, 카카오 T, 직방. 출처: @WWIT

반면 시니어가 느끼는 앱 사용의 어려움에는 화면의 복잡함이 존재한다. 하지만 돋보기를 대보면 짧은 기간 압축적으로 축척된 모바일 커뮤니케이션의 많은 문법이 낯설어서인 경우가 더 많다. 어머니가 쿠팡을 쓰는 모습을 옆에서 유심히 관찰해본 적이 있다. 어머니의 최대 적은 다름 아닌 햄버거 아이콘이었다. 카트 아이콘이 장바구니를 연상시키는 것과는 달리, 직선 세 개에는 누군가에게는 불친절하고 매우 추상화된 상징의 논리가 적용된다. 우리가 어떤 서비스를 사용하기 쉽다고 느끼는 것은 시각 요소의 적음을 넘어 받아들이기 쉬운 개념 모형들이 대상에 맞게 적절히 활용되고 있을 때다.



다양한 개념 모형들이 만드는 혼란스러움

자연스러운 개념 모형을 활용하면 분명 사용성이 좋아진다. 아쉽게도 실무에서 만나는 기획은 언제나 제한된 화면에서 사용자에게 최대의 가치를 전달하고자 한다. 디자이너는 자연스레 각 기능을 대변할 수 있는 가장 적합한 개념 모형들을 찾을 것이고, 이를 한 화면에 모두 배치하게 된다. 내가 겪은 혼란스러움은 대체로 이지점에서 출발했다. 아래는 생산성 앱인 'Flipd'의 홈 화면이다. Flipd는 동기부여를 통해 작업시간을 늘리고 더 높은 생산성을 추구할 수 있는 좋은 앱이다(실제로 나도 이 앱을 집중 시 애용한다). 그런데 Flipd의 홈 화면은 시각적인 복잡도가 그리 크지 않은데도, 사용자가 화면 전체를 이해하는데 시간이 꽤나 걸리게 설계되었다. 바로 서로 다른 층위의 개념 모형들이 한 화면에 나열되었기 때문이다.

한 화면에 다양한 개념 모형을 활용한 모습. 출처: Flipd

가장 우측 상단에는 동그란 프로필이 있다. 동그란 외곽에 빨간 선이 약간 있는데, 처음에는 단순한 꾸밈 요소인지 기능이 있는 건지 의도를 이해하기 어려웠다. 클릭해보니 프로필 입력 진행도를 뜻하는 것을 알 수 있었다(예시는 아직 아무것도 기입하지 않은 상태다). 의도가 그렇다면 빨간 선이 12시에서 3시 방향으로 차있었다면 어땠을까 하는 생각이 들었다. 아래로 공부한 날을 체크할 수 있는 캘린더, 다양한 사람들과 같이 접속해 집중할 수 있는 라이브 커뮤니티, 내 입맛에 맞게 설정할 수 있는 스톱워치 기능 등이 존재한다. 처음 이 화면을 마주한 사용자는 서로 연관성이 낮은 개념적 모델을 한 번에 4개나 해석해야 한다. 이러한 설계 방식은 사용자에게 꽤 높은 해석 비용을 발생시킨다. 화면에 질서가 느껴질수록 사용자는 많은 노력 없이도 만드는 이의 의도를 쉽게 이해할 수 있을 것이다. 어떻게 하면 사용자의 해석 비용을 똑똑하게 줄일 수 있을까? 다음 예시는 개념 모형을 잘 활용한 당근마켓이다.

화면에 시각 요소가 많은데도 불구하고 그렇게 혼란스럽지 않다.

왼쪽은 내 동네 설정하기 메뉴다. 당근마켓의 중요 룰 중 하나인 최대 2개까지 선택할 수 있는 동네 버튼이 상단에 배치되어있다. 아래는 슬라이더로 내 근처 동네를 쉽게 확장/축소할 수 있다. 사실 당근마켓 화면의 시각적 복잡도만 놓고 보면 flipd와 크게 다르지 않다. 하지만 당근마켓의 내 동네 설정하기 화면이 상대적으로 더 쉽게 다가오는 것은 상하로 나뉜 기능에 적용된 개념 모형이 친숙하고, 서로 긴밀한 연관성을 가지고 있기 때문이다. 우측 역시 거래 상대에 대한 평가와 체크리스트 기능이 하나의 목적을 향한다는 느낌이 들어 그리 어렵지 않게 느껴진다.

    우리가 사람을 보고 첫인상을 판단하는 시간은 7초에 불과하다. 앱 역시 짧은 시간에 좋은 첫인상을 주어야 하는 것은 마찬가지다. 이를 위해 우리는 사용자에게 혼란이 아닌 질서를 보여주기 위해 노력해야 한다. 첫인상이 혼란스러웠던 앱에 사용자가 다시 접속하는 경우는 무척 드물다.



사용자가 통제권을 가진다고 느끼게 만들기

지금까지 익숙한 경험을 토대로 화면을 단순하게 만드는 것의 긍정적인 측면을 살펴보았다. 이를 통해 사용자는 시스템에 대한 통제권을 자신이 가지고 있다고 느끼게 된다. 이때부터 신비로운 일이 벌어진다. 서비스를 사용하고 싶은 사용자의 동기가 높아져 앱의 세부 기능들을 마구 사용하기 시작한다. 이는  의미 있는 행동 데이터로 앱에 고스란히 축척된다. 반면 통제권을 가지지 못했다고 느끼는 대표적인 경우는 너무 많은 정보가 한꺼번에 주어졌을 때다. 서비스를 제공하는 입장에서는 자신들이 가지는 수많은 멋진 정보를 한꺼번에 노출하기를 원한다. 하지만 이러한 정보의 나열이 사용자 경험으로 오롯이 연결되지는 않는다. 아이러니하게도 선택권(정보) 적게 줄수록 경험으로 연결될 가능성이 높아진다. 아래  리모컨을 비교해보면 이해가 쉽다. 인간의 뇌는 고민하기를 극도로 싫어하는 “인지적 구두쇠라는 사실을 항상 잊지 말자.

복잡도는 사용자의 통제권에 지대한 심리적 영향을 미친다

사용자가 가질 수 있는 고민을 앱에서 미리 해결해주는 것도 통제권 향상에 도움이 된다. 예를 들어 서술형 질문의 경우 사용자가 갑자기 많은 고민을 떠안아야 할 수도 있다. 이때 질문 형태를 바꿔 한 번에 하나씩만 하는 형태로 쪼개거나, 객관식으로 바꿔보는 것도 좋다. 커머스의 경우 제품의 크기를 나타내는 정보라면 정직한 숫자가 아니라, 일상적인 물건(스마트폰 등)을 옆에 배치해 크기를 쉽게 가늠할 수 있도록 유도하는 것도 도움이 된다. 볼보 차량 판매 페이지에서 트렁크 공간의 크기는 주 고객들의 라이프스타일을 반영해 '골프백 4개 수납 가능'같은 형태로 풀어냈다. 이러한 노력들은 사용자의 고민을 줄여 통제권을 가지고 있다는 믿음으로 연결되는 속성이 있다.



UX/UI를 상품처럼 삼으려고 한다고?

최근에 UX/UI를 하나의 상품이자 캐릭터처럼 구성해야 한다는 아티클을 읽은 적이 있다. 그 글의 주인공은 바로 데이팅 앱 '틴더'였다. 실제로 틴더를 상징하는 좌/우 카드 스와이프는 하루 30억 회를 넘기며 공전의 히트 상품이 되었다. 하지만 우리가 아는 대부분의 앱들은 유니크하거나 화려한 UX/UI 때문에 성공하지 않았다. 오히려 기존의 불편했던 문제를 파고들어 경험을 단순화시키고 쉬운 개념 모형으로 대치하는 경우가 대부분이다. 이는 제품의 성공을 위해 독창적이고 자극적인 UX/UI를 추구하는 것과는 무척 다른 방향이다. 추측이지만 스와이프 기능 역시 틴더가 추구하는 가치에 가장 부합하는 개념 모형들을 탐색하다 우연히 발견하지 않았을까(카드 게임 중 새로운 카드를 받았을 때의 떨림?).

우측 스와이프=LIKE


복잡함과 혼란스러움 구별하기

화면을 시각적으로 단순하게만 만드는 것을 목표로 삼아서는 안된다. 문제가 느껴지면 대부분 화면에서 중요도 순으로 시각 요소를 빼게 된다. 이경우 전달해야 할 가치들이 누락하는 경우가 발생하니 주의해야 한다. 때에 따라서는 가치를 잘 전달하기 위해 어느 정도의 복잡도가 필수 조건일 수 있다. 다행히 질서가 느껴지는 복잡성은 용인이 가능하다. 예를 들어 비행기 조종실은 일반인이 보기에는 무척 복잡하지만 파일럿이 보기에는 어렵게 느껴지지 않는다. 정보 입력을 위한 키패드 UI도 사실 시각적으로는 복잡한 수준이다. 그럼에도 이들이 받아들여지는 이유는 사용하는 사람에게는 익숙한 질서이기 때문이다. 하지만 정보가 전달되는 과정에서 낯선 개념 모형들이 한꺼번에 전달된다면 전체의 질서를 느끼기 어려워져 사용자가 혼란에 빠지기 쉽다. 사용자 경험 설계의 핵심은 복잡이 아닌 혼란을 적극적으로 다스리는 구간에 있다.



'왜 앱 화면을 단순하게 만들어야 할까?(끝)'


<참고자료>


매거진의 이전글 왜 브랜딩 프로세스가 통하지 않을까?
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari