틀에 박힌 디자인 말고!

UX/UI는 결국 고객의 경험을 색인하는 일 아니던가

흔히 '디자인은 감각이다'라는 말을 많이 듣습니다. 여기서 감각은 좋은 감각, 감각이 좋은 사람을 의미하는 '센스'의 의미로 사용된 것 같습니다. 또 요즘은 '디자인은 논리다'라는 말 또한 종종 듣습니다. 문제 해결에 중점을 둔 디자인이 각광받으면서 자주 듣게 되는 말 같습니다. 이 '감각'과 '논리'는 개념적으로 꽤나 사이가 어색한 녀석들인데, 어째서 디자인은 이 두 명을 함께 옆에 두고 싶은 것일까요? 또 어떻게 하면 이 두 명을 친하게 붙여 놓아 흔히 말하는 '좋은 디자인'을 만들 수 있을까요?

먼저 제 생각을 말씀드리면, 디자인은 감각과 논리가 서로 싸워서 한쪽이 이기는 장면을 보는 것이 아닌, 이 둘을 사이좋게 붙여놓는 것이 백미인 장르인데요. 말은 쉽지... 그게 어디 쉽겠습니까. 제 나름의 영업 비밀은 우리 모두가 갖고 있는 기억 속에 저장된 '직관'과 'Affordance'를 활용하면 한 층 수월해진다는 것입니다.

IT 프로덕트를 만드는 사람들은 자신의 프로덕트가 잘 만들어졌는지 객관적으로 바라보기 어렵죠. 그럴 때마다 의문을 제기하는 방법은 오프라인 경험과의 연관성입니다. 고객에게 전달하는 언어나 이미지가 오프라인의 경험과 다르지 않은지 먼저 점검을 해보는 일인데요, 고객의 기억을 프로덕트의 메타포로 연결하는 것이죠.

B마트의 마감세일 라벨

가령 마트 장보기 서비스의 경우라면, 온라인에서의 장보기보다 오프라인 마트에서의 장보기의 역사가 더 오래됐고 고객에게 더욱 보편적인 경험이기 때문에 오프라인의 문법을 최대한 따르는 것인데요. 고객 친화적인 UX의 시작점이 바로 이런 부분 아닐까 싶습니다. 배민B마트의 '마감할인' 라벨을 예로 들면, 어딘가 익숙한 형태를 띠고 있습니다.

마트에서 흔히 볼 수 있는 마감세일 가격 할인 라벨

마감세일 상품을 표현하기 위해 가장 좋은 방법은 고객의 기억에 자리 잡은 맥락을 그대로 사용하는 것인데요. 혼자만의 만족이 아닌 많은 사람들의 공감을 끌어내는 부분이 어렵지만, UX/UI 디자이너가 마땅히 해야 하는 역할이 바로 이런 것이라고 생각합니다.

헤이딜러 앱 화면

이런 예시는 헤이딜러에서도 확인할 수 있습니다. 내 차 번호를 입력하는 화면에서도 실제 번호판 이미지를 고객에게 보여주고, 홈 화면의 상단 내비게이션에도 번호판의 형태를 그대로 사용하고 있습니다. 어쩌면 고객이 매일 마주치고 있을 자동차 번호판이라는 메타포! 헤이딜러 서비스의 정체성을 드러내는 가장 중요한 지점에 그 메타포를 배치하는 UX가 돋보입니다.

 

좌: YES24 / 우:만화경

YES24에서도 오늘의 책을 책의 겉표지만 덜렁 보여주는 것이 아니라, 한 권의 '책을 그대로 펼쳐 세워둔 것처럼' 이미지로 표현하고 있습니다. 만화경에서는 웹툰 콘텐츠를 '만화책의 형태'로 굳이 가공해서 보여주고 있었죠. 웹툰은 실제로 단행본이 아니지만, 서비스를 이용하는 고객의 기억 속 만화책을 끄집어온 것입니다. 단순히 이미지만 덜렁 보여주는 것이 아닌, 서비스의 정체성을 드러냄과 동시에 직관적인 표현방식이 돋보입니다.

2호선 잠실역 영어 변경 전 역명판

좌: 카카오 지하철 / 우:네이버 지도

카카오와 네이버의 지하철 서비스의 현재 역 정보도 어딘가 익숙하고 눈에 잘 들어오죠? 오프라인의 경험을 모티브로 삼아 UI로 표현하고 있었습니다. 이처럼 서비스를 사용하게 될 고객의 경험을 긁은 디자인은 더 좋은 사용자 경험을 제공할 확률이 높습니다. 목적에 맞춰 조형적으로 해결하는 것 역시 디자인의 역할이니까요. 고객의 경험은 대부분 오프라인으로부터 온다는 것을 명심해야겠습니다.

지금까지 이야기한 내용은 사실 전혀 새로울 것이 없는, 이미 세상에 널리 널리 쓰이는 개념입니다. 우리가 하루에도 몇 번씩 들락날락하는 폴더 아이콘의 기원을 생각해보면 됩니다. 이제는 관공서나 공기업에서 '결재 화일'이라고 불리는 저 녀석이 예전에는 문서를 정리하고 구분하는 글로벌 스탠다드였죠. 물론 현재도 글로벌 스탠다드이긴 합니다... 그래서 아직 우리는 매일 컴퓨터에서 저 폴더 녀석을 보고 있는 것이지요.

반면에 이제는 글로벌 스탠다드는 커녕 사용하는 사람이 없어서 찾아보기 힘들어진, 그래서 사라진 녀석도 있는데요. 바로 저장하기의 상징이었던 플로피디스크 아이콘입니다. 고객의 경험이 세대가 바뀌면서 달라졌기에 아이콘의 형태도 그에 맞게 달라진 것입니다. 플로피디스크보다 더욱 직관적인 저장매체가 등장한다면 현재의 애매한 아이콘도 언젠가 바뀔거라 생각합니다.

2009년에 개봉한 단편 애니메이션 LOGORAMA의 한 장면

이쯤에서 드는 질문이 하나 있을 텐데, 문제 해결에 대한 논리는 그렇다 치고!

좋은 감각은 어떻게 기를 수 있을까요? 

No input, No output. 평소에 심미적 체험을 많이 하는 것이 중요하다고 생각합니다. 아름답고 멋있는 것들을 눈에 많이 담아두는 것이 첫 번째. 그것을 최대한 자주 접하면서 '나는 왜 이것이 아름답고 멋지다 느꼈을까' 고민해보고 이왕이면 따라 해 보는 두 번째 과정이 더해진다면 좋은 감각은 금세 길러질 것입니다.

직접 느끼고 배운 것이야말로 진짜 자신의 감각이니까요.

저 역시 앞으로 틀에 박힌 디자인 말고, 틀을 깨는 디자인을 하기 위해 노력하겠습니다.