Good to Great UX/UI Design

불필요한 일을 없애는 '훌륭한' 디자인을 위해

# 구별할 수 있는 지혜

혹시 평온의 기도(Serenity Prayer)라고 알고 계신가요? 20세기 신학자인 라인홀트 니버(Karl Paul Reinhold Niebuhr)가 쓴 기도문이고 내용은 위와 같습니다.

바꿀 수 없는 것들을 받아들일 수 있는 평온을/

바꿀 수 있는 것들을 변화시킬 수 있는 용기를/

그리고 그 둘을 구별할 수 있는 지혜를 주세요/

개인의 종교와 상관없이, 저는 이 기도문을 보고 참 좋았습니다. 데이터가 넘쳐흐르는 시대에 사용자 경험을 디자인하는 UX/UI 디자이너로 일하면서 어떤 생각으로 문제를 바라보고 해결해야 하는지 그 메시지를 주는 것 같았기 때문입니다. 인터페이스를 위한 인터페이스가 아닌 최소한만 남겨둔 인터페이스. 단순하면서 완성도 높은 '훌륭한' 디자인을 하기 위해서 어떻게 해야 하는지 다시 한번 생각해보았습니다.

# 덜어내는 일에 집중

액티브 X 당신은 대체...

무엇이 됐든 미련을 버리기란 참 쉽지 않습니다. 아직도 곳곳에 살아있는 악성 액티브 X의 종말을 기원합니다. 덜어내야 하는 이유. 긴 말은 생략하겠습니다.

사용자가 원하는 목적지에 도달하기까지 번거로움과 방지턱을 없애는 것, 최소한만 남겨둔 인터페이스를 개인적으로 선호하며 좋은 인터페이스라 생각합니다. 여기서 최소한만 남겨둔다는 것은 디자인을 안 한다 혹은 하지 말라는 것이 아닌, 프로세스를 걷어낸다는 의미에 가깝습니다.

모바일 배너에서도 내용을 덜어내자 더 좋은 결과가!

사실 '덜어내는 것'은 줄줄이 써 내려가는 것보다 훨씬 어렵습니다(저 또한 그렇습니다). 장황한 설명보다는 간결한 메시지가 듣는이에게는 임팩트 있는 법이죠. 그러나 그것을 혼자 해내기란 때론 쉽지 않습니다. 자신만의 생각과 관점에 갇혀있지 말고 여러 사람의 시각을 통해 불필요한 부분을 덜어내는 것도 하나의 방법입니다. 우리가 협업을 해야 하는 이유! 끊임없이 고민하고 테스트해서 더 이상 뺄 것이 없을 때, 화면 속 UI 요소들이 내뿜는 메시지는 더욱 강력해질 것입니다. 불필요한 정보와 콘텐츠를 덜어냄으로써 오히려 정말 중요한 정보들이 돋보이는 것이 훌륭한 UI 디자인이라고 생각합니다.

최근의 앱 중에 덜어내기에 집중한 서비스로 모바일 금융 플랫폼 'TOSS'가 있습니다. TOSS가 어떤 것을 어떻게 덜어냈는지 알기 위해선 기존 은행 앱을 살펴볼 필요가 있습니다. 뱅킹 서비스의 대표적인 예로 그래도 나름 신경 쓰고 있는 것 같은 KEB하나은행 앱을 살펴보겠습니다. 두 개의 서비스에서 친구에게 송금을 해보았습니다.

Version 6.22 KEB 하나은행 앱

1. 앱 실행

2. 빠른이체 선택

3. 비밀번호 터치

4. 비밀번호 입력

5. 비밀번호 입력완료

6. 출금금액 터치

7. 출금금액 입력

8. 출금금액 확인

9. 계좌입력(은행 선택, 계좌번호 입력)

10. 확인 버튼 터치

11. 이체실행 버튼 터치

자 그럼 이번에는 TOSS를 살펴보겠습니다.

Version 4.0.0 토스

1. 앱 실행

2. 금액입력(첫 화면이 송금 금액 입력이라니 ㄷㄷ)

3. 보내기 버튼 터치

4. 계좌입력(연락처or계좌번호를 입력하면 은행명 알아서 찾아줌)

5. 보내기 터치

11개의 스텝이 5개의 스텝으로 줄어들었습니다. 물론 은행 앱이 TOSS보다 더 넓은 범위의 금융업무를 커버하기 때문에 어느 정도 핸디캡은 있다고 볼 수 있으나, 체감상 너무나 큰 차이가 있네요. 사실 TOSS 앱은 최근 버전이 업데이트되면서 기존보다 한, 두 스텝을 더 덜어냈습니다. 첫 화면에서 '송금할 금액 입력'버튼을 없애고 바로 위와 같이 첫 화면을 만든 것이 그 첫 번째이고, 사이사이 터치하던 과정과 각 영역에서 알맞은 키보드를 바로 제공하여 디테일을 채웠습니다. 그 결과 5단계만으로 송금이 가능해진 것이죠. TOSS의 서비스를 만드는 분들이 얼마나 덜어 내는 일, 프로세스를 걷어내는 일에 집중했는지 알 수 있었습니다. TOSS는 뭔가 계속해서 디테일을 만들고 완성도를 높이는 중인 것 같네요!

가장 좋은 제품 사용 설명서는 제품 사용서가 없는 게 아닐까요.

가끔은 덜어낼수록 더 좋아지는 법입니다. UI뿐만 아니라 브랜드 역시나 그렇다고 생각합니다.

#방지턱 없애기

사실 우리들은 하루 종일 스크린에 노출되어 있습니다. 또 너무나 다양한 화면에 노출되어 있어서 인터페이스를 없애는 것은 불가능하다고 생각합니다. 하루 중 눈 떠 있는 시간의 80%는 아마도 스크린을 마주하고 있는 것 같습니다. 일하는 중에는 말할 것도 없으며 운전을 하는 중에도 내비게이션을 보고 있으니 말이죠. 이렇게 오랜 시간 내 시간을 책임지는 스크린이라면 방지턱이 없는 고속도로처럼 잘 닦여있어야 불편함 없이 만족하며 사용할 수 있겠죠?

나르코스 시즌 1,2 꼭보고 두 번 보세요

저도 한때 넷플릭스에 빠져있던 때가 있었습니다. 다들 왜 이렇게 넷플릭스에 열광할까 궁금했었는데, 저 역시나 잠자는 시간을 포기하면서까지 누워서 넷플릭스를 보고 있더군요. 저는 넷플릭스에 구독료를 지불하고 편리함을 샀던 것이라 생각합니다. 넷플릭스의 사용자 기반 추천 로직과 높은 콘텐츠 퀄리티는 차치하고 그 '편리함' 때문에 말이죠. 기존에 우리가 미드나 영화를 집에서 보던 방식은 P2P 사이트나 토렌트에서 다운을 받았어야 했습니다. 그리고 한글 자막을 다운받고, 다운받은 폴더에서 해당 파일을 선택해 재생했죠. 물론 영상 재생 프로그램을 설치해놨어야 했고, 영상파일과 자막의 파일명이 상이할 경우 두 개의 파일명을 수정하는 번거로움까지 있었습니다. 그제야 안도하며 내가 원하던 영상을 시청할 수 있었죠.

이와 대조적으로 넷플릭스는 그 흔한 액티브 X나 추가 설치 프로그램도 필요 없이 바로 영상을 볼 수 있습니다. 회원가입은 또 얼마나 간편하던가요. 자막? 알아서 제공하죠. 넷플릭스의 다음 에피소드 자동 넘어가기와 인트로 스킵 기능은 미드&영드 정주행의 지름길이 되었습니다. 접근성이 말도 안 되게 편리한 것이죠. 이마저도 귀찮은 사용자를 위해 크롬에서 넷플릭스 재생 시 인트로 스킵 기능을 자동으로 실행해주는 플러그인도 있더라고요.

또 하나의 디테일.

넷플릭스는 실제로 같은 콘텐츠에도 여러 가지의 커버 이미지를 사용하고 있습니다. 사용자의 취향과 선호도에 따라 커버 이미지를 다르게 적용하고 있는 것이죠. 정말 작은 차이일지라도 사용자가 원하고 사용자에게 더 어필되는 이미지를 보여주면서 콘텐츠를 제공하고자 하는 넷플릭스의 디테일..! 몰랐다고요? 저도 얼마 전에 알게 된 사실이니만큼 제가 확인 시켜드리겠습니다.

레이첼 ㅜㅜㅜ

저와 제 친구가 워킹데드와 SUITS를 검색해봤습니다. 각각의 콘텐츠를 검색한 시간을 확인하면 아시겠지만 거의 같은 시간에 검색했고요, 친한 친구이니만큼 선호도는 비슷하지만, 평소 콘텐츠를 소비하는 취향이 다른만큼 커버 이미지가 조금 다르게 뿌려지네요.

훌륭한 디자인은 불필요한 일은 줄입니다. 그리고 최고의 인터랙션은 예쁘고 화려한 것이 아닌 자연스러운 것이라고 생각합니다. 넷플릭스의 이러한 자연스러움, 편리함은 1억 5천만 명의 회원, 아니 그 이상의 '사용자 데이터'를 갖고 있기 때문에 가능하지 않았을까요.

# 데이터의 가치

그렇다면 어떻게 해야 넷플릭스와 같은 방지턱이 없는 편리한 서비스를 만들 수 있을까요.

80s : Connecting Computuers

90s : Connecting Pages

00s : Connecting People

10s : Connecting Data

데이터의 가치는 어떤 결정에 미치는 영향에 따라 달라지지만, 그 중요도는 아무리 강조해도 지나치지 않다고 생각합니다. 데이터는 사용자가 더 나은 선택, 더 좋은 결정을 할 수 있도록 도와줍니다. 이러한 데이터 기반의 추천은 사용자의 신뢰를 확보할 수 있죠. 그리고 사용자가 앱에서 머무는 시간을 더 지속시키고 유효한 행동을 이끌어 낼 수 있습니다. 넷플릭스처럼 말이죠.

이제는 내가 어디에 가고 싶은지 아는데 '방법을 모르는'상황 보다,

내가 어디에 가고 싶은지 '내가 모르는'상황이 더 많은 것 같습니다.

이미 우리 주변에 정보는 넘치기 때문에 조금만 노력하면 방법을 찾아낼 수 있습니다. 내가 뭘 원하는지 모르는 상황이 많이 발생하기 때문에 유튜브와 넷플릭스 같은 추천 서비스가 나의 행동에 큰 영향을 미치는 것 같습니다. 실제로 그러합니다. 오늘도 누워서 유튜브를 뒤적뒤적...

그런데 말입니다

징비록과 류성용을 혹시 알고 계신가요. (징비록은 예전에 드라마로 제작되어 KBS에서 정도전이 끝난 후 방송을 탔습니다) 류성용은 임진왜란 당시 조선의 행정과 군사를 총괄한 사람으로 전쟁이 끝난 후 '징비록'이라는 전쟁의 기록을 책으로 남깁니다. 징비록에서 류성용은 일관되게 '왜적'이라는 표현을 쓰기보다 '일본'이라는 국호를 동시에 사용합니다. 무분별한 적개심의 표현보다는 사건과 현상을 냉정하게 바라보는 시각을 보여줍니다. 이를 통해 임진왜란의 상황을 그 어떤 책 보다 상세히 설명하며 전쟁을 막지 못한 것에 대해 스스로 깊은 반성을 하며 훗날의 위기에 대비해야 한다는 메시지를 전달합니다.

사용자가 남긴 지난날의 데이터를 기록, 분석하여 사용자가 더 나은 선택과 더 좋은 결정을 할 수 있도록 유도하는 것이 진정 '훌륭한 UX/UI 디자이너'의 역할이 아닐까 생각해봅니다. 저 역시 스스로를 냉정하게 되돌아보고 반성하려 하지만 참 쉽지 않네요.

그리고 여기 우리가 기술과 데이터와 친해져야 할 이유가 하나 더 있습니다.

오늘의 띵언

제가 너무나 좋아하는 픽사 토이스토리의 디렉터 존 라세터는 '예술은 기술을 발전시키고, 기술은 예술에 영감을 준다'라는 멋진 말을 남겼습니다. 디자이너가 기술&데이터와 친해질수록 예술적 영감도 얻을 수 있을 거라 생각됩니다.

최근 읽은 책 '인터페이스 없는 인터페이스'에서 참 좋았던 구절을 소개하며 마무리하겠습니다.

맥락을 이해하고 일상적으로 해오던 행동들을 고려한다면 우리는 마법처럼 느껴지는 더 유려한 솔루션들을 찾아낼 수 있다. 그리고, 훌륭한 UX는 좋은 UI를 만드는 게 아니라 좋은 경험을 만드는 것이다.

읽어주셔서 감사합니다.

그리고 새해 복 많이 받으시길 바랍니다!

+

이미지 출처

UX Note 네이버 콜로키움 2017

www.netflix.com

https://sheislittleandfierce.wordpress.com/tag/pixar/