시각적 위계를 활용한 경험 설계
처음부터 시각적 위계를 세워놓지 않고 프로덕트를 진행하다 보면 관리상 어려움이 발생한다. 만들어가면서 버튼에 그림자도 추가하고, 배경에 그라데이션도 넣다 보면 디자인 가이드가 금세 지저분해지기 마련이다. 최근에는 누구라도 쉽게 오픈소스에 접근할 수 있게 되었다. 하지만 시각언어에 대해 무지한 상태로 라이브러리를 활용한다면 프로덕트 전반에 악영향을 끼칠 가능성이 높다. 시각적 위계를 효율적으로 활용한다면 더 나은 경험을 설계할 수 있을 것이다.
시신경 자극과 시각적 위계
시각 디자인과에 입학하면 가장 처음 배우는 이론이 점/선/면 일 것이다. 나는 이 이론이 사람에게 끼치는 조형의 시각적 자극 정도로 이해한다. 따분할 수 있는 이론이고, 누구나 안다고 생각하는 기초 조형일 것이다. 하지만 구글의 머테리얼 가이드나 애플의 쿠퍼티노 디자인처럼 동시대를 지배하는 디자인 이데올로기들 모두 이 이론을 바탕으로 세워졌다고 해도 과언이 아닐 것이다.
같은 프로덕트. 좌 iOS /우 Android (flutter 홈페이지 발췌)예전 진행했던 프로덕트의 시각적 위계를(hierarchy) 세워보니 아래와 같았다. 좌에서 우로 갈수록 시각적 자극이 강해진다. 비교하기 쉽게 동그라미를 이용해보니 가장 낮은 시각적 위계는 점이 아닌 선이었다. 우측으로 갈수록 'Line < Plane < Plane+Shadow < Reality'로 정리할 수 있었다. 이는 실제로 시신경이 받는 시각적 강도와 연관이 깊다.
조형의 시각적 위계, 우측으로 갈수록 시신경 자극이 강해진다.시각디자인의 기초 조형은 인쇄물을 기반으로 한 그래픽 디자인에 바탕을 두는 경우가 많다. 하지만 디지털을 기반으로 하는 UI/UX 디자인의 경우 항상 인터렉션을 염두에 두고 조형적 요소가 세팅되어야 한다. '점'이라는 요소는 가뜩이나 작은 모바일 화면에서 상대적으로 더 작게 위치한다. 보통 최소 터치 사이즈를 44*29픽셀로 설정하는데 ‘점’은 인터렉션 요소로서의 활용성이 떨어진다. 그래서 ‘점’은 디지털 환경에서 콘텐츠 내용이나 레이아웃 요소로 활용되는 경우가 많다.(물론 점 세 개를 활용한 'Option' 같은 아이콘도 있지만 이는 다분히 면적인 성격이 강하다.) 그런 이유 때문인지 디지털 디자인의 시각적 위계를 세울 때 최소 단위를 점이 아닌 선부터 시작하는 경우가 많다.
그렇다면 ‘flat design’의 시각적 위계는 어떻게 바라보아야 할까? 여기서 디자이너는 시각적 위계의 범위를 강박적으로 제한한다. 디자이너가 조형 요소를 'Line < Plane' 까지만 사용하겠다는 일종의 선언이라고 봐도 무방하기 때문이다.
어느 크기부터 점이라고 할지 사전 논의가 필요하긴 하겠지만, 인터페이스 최소 위계를 '선'부터 시작하는 경우가 일반적이다.
인쇄물을 통해 더 잘 설명되는 점/선/면Case Study_1
아래는 'Honey'라는 쇼핑 관련 애플리케이션이다. 세 장의 스틸만 봐도 애플리케이션 내 사용될 시각적 위계에 대한 범주가 느껴진다. Honey의 디자이너는 'Line < Plane'까지만 조형적 요소를 제한했다. 화면 위계상 가장 강조되어야 할 정보에 상대적으로 강한 '색면'을 사용했다. 강한 색은 비즈니스적으로 가장 중요한 CTA(Call To Action)를 유도할 때 사용되었다. 면적이 넓게 사용되지는 않았지만 오렌지 색상이 프로덕트 전체의 Identity 컬러처럼 느껴진다. 화면에서 높은 위계로 설정된 오렌지색은 행동 유도 차원을 넘어, 유저 머릿속에 프로덕트 고유의 감정선을 그어준다.(우리가 피츠제럴드와 헤밍웨이를 다르게 인식하듯.) 강조 컬러 선택은 유저가 앱 내 중요한 결정을 내릴 때 프로덕트를 감정적으로 어떻게 느끼게 할 것인가를 '프레이밍'하는 것이기도 하다.
플랫하게 스타일링 된 쇼핑 관련 애플리케이션위의 가장 좌측 화면에서 'Add to Cart' 주황색 버튼은 화면에서 가장 높은 시각적 위계를 획득하고 있다. 왼쪽에 더 강한 빨간색 원이 존재 하긴 하지만 면적 대비상 Add to Cart 버튼보다 낮은 위계를 가진다. 상단에 Saved to Christmas라고 쓰인 블루 띠배너의 경우 오렌지와 보색 관계로 설정되어 있어 서로의 위계를 침범하지 않는다. 이러한 결과로 유저는 깨끗하게 애플 와치를 감상할 수 있게 되었다. 가장 우측 화면의 경우 에어팟 제품의 할인된 오렌지색 가격 텍스트가 시각적 위계상 가장 높게 설정되어 있다. 오렌지색은 화면상 작은 영역으로 존재하지만 강한 존재감을 과시한다. 조형의 경제성이 매우 높은 셈이다.
<Honey의 전체 플로우>
https://mobbin.design/apps/honey
색상환은 프로덕트 디자이너에게 중요한 기준이 된다.(특히 flat 하게 UI를 운용하는 경우) 대부분의 시각적 위계는 최초 설정된 Key 컬러와 정반대 어느 지점으로부터 시작되기 때문이다. 또한, 최근 UI 트렌드 역시 명도나 채도를 조절하지 않은 순색 위주로 컬러 시스템이 운용되는 경향도 간과해서는 안 될 것 같다.
Honey에 사용된 보색 시스템Case Study_2
시각적 위계를 조금 더 요령 있게 활용할 수 있는 방법은 없을까? 아래는 다양한 미팅 관련 기능을 제공하는 'Navigator'라는 애플리케이션이다. 이 애플리케이션의 경우 'Line < Plane < Plane+Shadow < Reality'의 시각적 위계를 모두 다 사용하고 있다. 진입 화면부터 등장하는 '심벌 아이콘'은 프로덕트를 상징하며 앱 내 최상위 위계를 가진다. 심벌 아이콘은 실제와 유사하게 디자인돼 정보 차원 UI들보다 통상 두 차원 높은 위계를 가진다. 그래서 가장 우측 화면처럼 말풍선이 밀집되어 있는 영역에서도 존재감이 상실되지 않을 수 있다. 또한, 유저 입장에서 심벌 아이콘은 화면에 시선이 처음으로 찍히는 '시각적 구두점'역할을 해준다. 이는 프로덕트 디자이너의 평생 숙제인 시각적 위계의 최상위를 어떻게 설정할 것인가에 대한 명쾌한 해법이기도 한 셈이다. 물론 이 애플리케이션이 대부분 채팅창 형태의 인터페이스를 가지고 있기에 가능한 것이기는 하다. 만약 먼저 소개한 Honey에 로봇이 떠다녔다면 끔찍한 상황이 벌어졌을지 모른다.(위계상 실제 사진과 충돌하기 때문에)
미팅 관련 애플리케이션 'Navigator'Navigator는 꼭 심벌 아이콘이 아니더라도, 시각적 위계와 정보 간 관계 설정도 재미있다. 위 중간 화면에서 유저의 정보 입력을 받을 때 '거절' 버튼은 Line으로 위계가 설정되어 있다. 이름을 입력하는 인풋 창보다 위계가 낮은 셈이다.(Line < Plane) 일반적으로 행동을 결정짓는 버튼이 인풋 창보다 높은 위계를 가지는데, 이 사례에서는 위계가 역전된 셈이다. 가장 우측 화면 메일링 유도 버튼은 남색 면으로 디자인되어 있다. 선으로 디자인된 거절 버튼보다 어포던스가 강하게 설정되어있다. 유저 입장에서 선으로 디자인된 버튼을 누르지 않고, 면으로 된 이메일 구독 버튼을 누를 확률이 무의식적으로 높아진 셈이다. Navigator의 조형 요소는 강압하지 않고 부드럽게 화면에 개입한다. 유저는 설계자가 행한 넛지에 따라 결정하게끔 세밀하게 유도되어 있다.
<Navigator의 전체 플로우>
https://mobbin.design/apps/navigator
시각적 위계의 범위를 설정하는 이유?
아래는 전자계산기가 - UI가 되고 - 미니멀화되어가는 과정이다. 가장 좌측은 실제 카시오사의 전자계산기이고, 중간은 iOS 초창기 '스큐어모피즘'으로 연출된 UI이다. 스큐어모피즘의 핵심은 현실에 존재하는 사물을 인터페이스에 '아날로그적'으로 재현함으로써 새로운 기술에 대한 유저의 심리적 저항감을 감소시키는 것에 달려있다. 개인적으로 iOS초창기 때 애플이 'Flat'한 디자인을 채택했다면 유저들이 지금처럼 잘 적응할 수 있었을까 하는 의문이 든다.(당시에도 미니멀한 디자인 스타일이 없었던 것은 아니다.) 가뜩이나 스마트폰이라는 것도 생소한데 인터페이스도 추상적이면 유저가 길을 잃을 가능성이 높아지기 때문이다.
중간 계산기에 디자인된 '볼록함'은 유저에게 버튼을 누르고 싶게 만들었다. UX차원에서 행동 유도성(Affordance)이 다분히 높게 설정되어있는 셈이다. 현재 우리가 쓰고 있는 것과 유사한 우측 계산기에서 강한 어포던스를 찾아볼 수는 없다. 하지만 스큐어모피즘 시대를 지난 우리는 불편함 없이 버튼을 누를 수 있다. 이는 몬드리안 '나무 연작'처럼 미학의 순수한 발전과정으로의 미니멀리즘과는 사뭇 결이 다른 것이다. 애플사의 스큐어모피즘은 다분히 비즈니스적 선택이었고, 볼록한 버튼은 아날로그와 디지털을 이어주는 가교 역할을 한 셈이었다.
디지털 트랜스포메이션화가 덜 된 인류는 중간이 더 좋을 수 있다.iOS7때부터 시작된 애플의 flat 한 디자인 형식은 기술발전과도 깊은 관련이 있다. 애플은 iOS7과 함께 더 또렷하게 액정을 볼 수 있는 '레티나 디스플레이'를 도입했다. 더불어 기술력을 더 잘 보여주기 위해 아이덴티티 ‘7’을 Helvetica의 가장 얇은 두께로 디자인했다. '7'은 레티나 이전 기술에서 안티앨리어싱의 한계 때문에 모두가 숨기고 싶어 했던 기술적 한계이기도 한 셈이었다. 레티나라는 새로운 기술은 ‘극도로 얇은 두께’라는 디자인 형식으로 대변된 것이다.
극명하게 얇아진 iOS7의 아이덴티티iOS 변천사는 미학과 기술이 뒤범벅돼 많은 것을 시사한다. 애플처럼 거대한 영향력을 끼치는 브랜드에 종사하지 않더라도, 현재 프로덕트 디자이너로 일하고 있다면 구체적으로 달성해야 할 목표가 모니터 앞에 놓여 있을 것이다. 고객을 전환시킬 버튼 디자인이 됐든, 고객의 눈을 사로잡을 아름다운 스플래시 화면이 됐든, 바이럴 루프를 위한 셰어 버튼이 됐든 모두 중요하다. 디자이너의 시각적 위계 설정은 눈앞의 문제 해결에서 출발해야 거의 옳다.
기술과 동의어가 되어가는 미학
2013년을 기점으로(iOS7와 레티나가 등장한 해) 디지털 프로덕트에서의 미학은 기술을 드러내는 기표로서의 기능이 강해졌다고 생각한다. 사진 연출에 용이한 iOS13의 'Dark Mode'에서 iphone11의 트리플 카메라로 이어지는 애플의 행보를 보면 그런 생각이 더 깊어진다.
아래 몬드리안의 나무를 보면 구상에서 추상으로 나아가려는 예술의 순수한 추동력 같은 것이 느껴진다. 물론 나도 이러한 과정이 멋지다고 생각한다. 하지만 디지털 인터페이스의 진화 과정은 예술과 기술, 그리고 자본이 뒤범벅돼 무엇 하나 확실히 구별할 수 없게 되었다. 기술이 예술이고 예술이 곧 기술. 이 모든 것이 자본으로 수렴되는 시대다. 순수 예술 영역에서도 디지털 인터페이스를 자신의 순수 도료로 삼은 아티스트들이 너무나 많다. 구분 자체가 무의미한 시대다.
몬드리안 그림의 미니멀화 하는 과정과 UI의 미니멀화 과정은 매우 다른 지향성을 가진다.앞으로 디지털 인터페이스를 다루는 디자이너에게 엔지니어적 측면이 더 강하게 요구될 가능성이 높다. 우리는 Framer로 프로토타이핑도 해야 하고, 영상을 JSON으로 뽑아내고, 쿼리를 이용해 데이터도 봐야 한다. 역설적으로 엔지니어 출신 프로덕트 디자이너들이 미대 출신보다 더 좋은 연봉을 받는 사례가 많아졌다.
돌아보면 플래시로 웹이 디자인되던 과거에는, 화려한 효과나 멋진 인터렉션 그 자체가 더 중요하게 생각되는 경향이 있었다. 다양한 디바이스를 대응할 필요도 없었고, 웹 표준을 그리 신경 쓰지도 않았다. 회사에서도 웹디자이너를 아티스트 보듯 하는 분위기가 있었던 것 같다. 지금은 디지털 디자이너들 사이 농담에서만 존재하는 시대지만.(용량이 너무 커서 구동되는데 3분이 걸리는 마이크로 사이트를 만들었다고 자랑하는 과거 내 디자인 사수.)
하지만 지금도 낮은 수준의 디자인 라이브러리와 또 그걸 여과 없이 사용해 론칭하는 애플리케이션들을 볼 때면 '플래시 시대보다 과연 무엇이 발전했을까?'라는 의문이 들기도 한다.(시대는 발전이 아닌 공회전의 연속일까?)
현재가 예전보다 디지털 디자이너에게 더 큰 책임을 전가하는 시대인 건 맞는 것 같다. 사업도 챙겨야 하고, 데이터도 봐야 하고, 예쁘기도 해야 한다. 한 가지 확실한 것은, 디지털 디자이너 개인이 어떠한 미학적 기준을 세워놓지 않으면, 우리의 정체성이 시대가 흘러가는 대로 모델링 될 확률이 크다는 점이다. 디자이너가 시각적 위계를 잘 아는 것이 이지점에서 소극적이나마 보탬이 된다고 생각한다.
