'심플함'이 올바른 UX디자인은 아니다.
ㅡ 올바른 모바일 퍼스트 디자인 원칙
최근 읽고서 정말 공감한 글이 있어 공유드립니다.
모바일 디바이스 사용이 급증함에 따라 모바일 퍼스트 디자인이 당연시되고 있는데요, 여기에도 함정과 많은 문제들이 존재합니다. 어떻게 하면 모바일 퍼스트 디자인의 함정에 빠지지 않고 올바른 디자인을 설계할 수 있을까요?
모바일 퍼스트 디자인은 간결하면서도 알기 쉽고 꽤나 논리적으로 보입니다. 하지만 UX 디자인은 결코 그렇게 간단하지 않으며 진정한 문제가 해결되는 것 또한 아닙니다.
모바일 퍼스트 디자인은 그 진정한 실체를 처음으로 이해할 때 최고의 힘을 발휘한다. '모바일 퍼스트'에 다가설 디자인 원칙의 저면에는 반드시 일정한 로직이 있다. 하나 베테랑 디자이너라 할지라도 사용자 경험의 심각한 오류에 빠질지 모를, '숨겨진 문제'가 있는 점 또한 사실이다.
잘못 사용하면 그에 따른 문제들을 역행시켜 모바일 경험에서의 고통을 제거하는 대신 데스크톱 경험에서의 고통을 낳아버린다. 문제를 해결하는 것이 아니라 오히려 더 악화시키는 것이다.
문제의 시작
모바일 퍼스트 디자인의 함정에 대해 고민하기 시작한 건 애플이 iWork office suite 2013년도 버전의 디자인을 리뉴얼해서 크게 비난당했던 때이다. 나를 포함한 많은 액티비티 유저들이 지금까지 자주 사용했던 기능들이 삭제된 일과 매몰된 점들에 대해 엄청나게 화를 냈다.
같은 무렵 MailChimp(이것도 내가 자주 사용하는 도구)도 비슷한 디자인 리뉴얼을 실시했다는 것을 알았다. 지금까지 사용하던 소프트웨어에 디자인 리뉴얼이 굉장히 많이 나타났고, 이 점들에 대해 딱히 소란 피운 일은 없었지만 MailChimp가 바뀐 점에 대해선 iWork의 새로운 디자인과 마찬가지로 정말 질려버렸다. 모바일 퍼스트 디자인이라는 점은 알 수 있다. 태블릿 등에서 사용하기 쉽게 돼 있었다. 하나 예전에 눈에 띄기 쉽고 이동 노선도 알기 쉬웠던 것이 지금은 어디인지 모를 눈에 띄지 않는 장소에 박혀버려 있다는 점에 나는 불만을 느낀다.
하지만 그럼에도 불구하고 내 불만은 어디까지나 이 빛나는 모바일 퍼스트의 미래에 있을 작은 좌절감에 지나지 않을 것이라 생각했다. 무엇보다 여기서 언급한 것들은 가장 사랑받는 디자인 프렌들리 기업인 애플과 MailChimp다. 양쪽 툴 디자인도 전체적으로는 잘 만들어졌으며 사용법도 알기 쉽다. 내 작은 좌절감 따위와 부딪히는 부분은 무엇인가? 변화에는 아픔이 따라붙기 마련인가?
하나 이 두 가지만으로는 끝나지 않았다. 순식간에 '모바일 퍼스트' 사이트들이 늘어났으며 신통치 못한 데스크톱 경험을 제공하게 되었다. 마치 지금까지 모바일 사용자의 니즈를 경시 여겼던 만큼 다음엔 데스크톱 사용자가 속죄의 고행에 힘쓸 차례라 말하는 것 같았다.
'결점 없는 디자인이 좋은 디자인이다'는 잘못된 생각이며, 어느 기업을 특별하다 취급하는 일은 쉽다. 하지만 얼마나 잘 디자인된 소프트웨어라 할지라도 아직 논의의 여지는 있다. 그리고 다른 뛰어난 인터페이스의 흐름을 분석함으로써 더욱 진화된 사용자 경험에 대해 많은 것을 배울 수 있는 것이다.
Adobe Acrobat의 사례
어제 PDF 파일 페이지를 편집하려고 Adobe Acrobat을 열었을 때 굉장히 새로운 인터페이스로 바뀌어있는 점을 알게 되었다.
잠시 이곳 저곳 둘러보았는데 이전에는 비교적 심플했던 작업 순서가 이해되지 않았다. 그리곤 '아아.. 또 어리석은 모바일 퍼스트 디자인이...'라고 생각한 내 자신에 놀랐다.잠깐만, 뭐라고?
이러한 고민은 가지면 안 되는 거였다.
모바일 퍼스트 디자인은 좋은 거 아냐? 자긍심 높은 UX 디자이너가 잘못된 생각을 머릿속에 띄워선 안될 것이다.
하지만 관심 있어 알아본 바, 디자인 리뉴얼을 알리는 감동적인 비디오를 발견할 수 있었다.
'멀티 디바이스', '클라우드 접속 에코 시스템' 등등...
그들이 하는 말은 매우 올바르다. 분명 경이적인 사용자 경험을 얻을 수 있겠지. 의문의 여지가 없다.
그렇다면 왜 내가 여기서 다시 화나 있는 것일까.
그 원인이 모바일 퍼스트 디자인에 있다고 생각하지 않는가? 이상하지 않은가?
마음을 확실히 하기 위해 트위터를 살펴봤더니 이렇게 생각하는 사람이 나뿐만이 아니었다.
아하, 나뿐만이 아닌 듯하다.
본능적으로 모바일 퍼스트 디자인에 우려를 품기 시작했다. (한 명의 유저로서)라는 사실 외에도 짜증 난 사용자들이 이들 인터페이스에 불만을 말하는 점을 접할 기회가 늘어났으며, 모두들 모바일퍼스트 디자인이란 방법론을 지금까지 순수하게 올바른 정답이라 생각했었겠으나 실제론 그렇지 않을지도 모르겠다고 생각하기 시작했다.
우아한 퇴보 VS 진보적인 강화
스크린 크기의 변화는 항상 UX 디자이너를 괴롭혀왔다. 2007년 아이폰이 등장해 모바일 웹 이용률이 급격히 상승했을 때 이 문제들은 폭발하게 된다. 지금까진 무시했었지만 이젠 고려해야만 하는 요건이 된 것이다.
이들은 원래 '우아한 퇴보(graceful degradation)이라는 개념으로써 주창되었었다. 기본적으로 최대 또는 최강의 장치를 위해 디자인하며, 더욱 작고 성능딸리는 디바이스의 제한을 기준으로 두고 기능과 콘텐츠를 서서히 없애나간다는 의미를 지닌다.
이 방법은 모바일 웹 이용이 비약하기 전 매우 잘 알려져 있었다. 디자이너와 개발자들이, 디자인 기술에 대한 지원이 각 브라우저에 있어서 CSS에 무엇을 할 수 있을지를 설명할 때 이 원칙을 이용했기 때문이다. '우아한 퇴보'적 접근 방식의 경우 먼저 아름다운 데스크톱 사이트를 디자인하고 나서 이걸 두드리거나 자르거나 분쇄하거나 제거하거나 기타 무엇이든 해서 모바일 디바이스용으로 타협할 수 있는 버전을 만들게 된다.
대립되는 사고방식으로는 '진보적인 강화(progressive enhancement)'가 있다. Steven Champeon 씨와 Nick Finck 씨가 203년 SXSW에서 '진보적인 강화에 따른 포괄적 웹 디자인의 미래'를 프레젠테이션 한 뒤 인기를 모은 문구다. 이 프레젠에서 그들은 도입 부분에 다음처럼 이야기하였다.
타협하는 일은 가능한 일이며 매우 매혹적입니다. 하지만 이처럼 타협하는 것에 대한 외상값을 사용자에게 지불하게 하지 마십시오. 그보다 사용자가 선택한 디바이스가 지닌 성능의 관점에서 실행해야 합니다. 강력하며 그래피컬한 모던 데스크톱 브라우저에 의해, 많은 브라우저에서 진보적이며 서서히 강화해나가는 경험을 제공할 수 있게 되었습니다. 그것도 하나의 마크업 문서와 다양한 스타일의 시트를 사용한 브라우저를 통해 선택적으로 사용자에게 전달하는 것이 아닌 클라이언트 자체 요청에 따라 전달되는 것입니다. 한 명도 방치하지 마시기 바랍니다.
'진보적인 강화'의 기본적인 전략은 '일반적인 모집단 속에서 최소 환경을 위해 디자인하고 디바이스 성능에 따라 추가 기능을 더해나가는 방식'이다.
'모바일 퍼스트'란 무엇인가?
모바일 이용자가 크게 늘어남에 따라 우세했던 디자인 원칙이 '우아한 퇴보'에서 '진보적 강화'로 전환되기 시작했다. 2009년 Luke Wroblewski 씨는 '모바일 퍼스트'라는 제목의 아티클을 썼는데 '진보적인 강화' 방식의 사고를 지지했을 뿐만 아니라 인상적인 명칭을 부여하였다.
기사 타이틀에 대한 관심도Wroblewski 씨는 모바일을 위해 디자인할 경우 가장 중요한 기능과 우선순위에 주목하게 되며 그 자세가 결국엔 데스크톱 소프트웨어에 있어서도 깔끔한 경험을 실현시킨다고 설명한다.
이 무렵부터 모바일 퍼스트 디자인 아이디어가 퍼지기 시작했으며 이후 이 기세를 몰아 현재에 이르게 되었다.
모바일 퍼스트의 함정
디자이너로서 우리들은 믿고 싶다. 어려운 문제도 머지않아 해결될 것이며 영원히 싸우지 않아도 될 것이라고. 누군가 답을 가르쳐 주었으면 한다. 항상 계속 고민해야 하는 대신 납득이 갈 수 있도록.
모바일 퍼스트 디자인이라는 것은 '진리'다운 특징을 전부 지니고 있었다. 간결하며 알기 쉽고 논리적으로 들린다.
하지만 사용자 경험 디자인은 결코 그 정도로 단순하지 않다. 실제로 커다란 디자인 문제점이 해결된 것처럼 느낀다 하더라도 아마 동시에 불안하기도 할 것이다. 왜냐면 사람은 문제를 해결하고 싶어하면서도 무의식적으로 해결법의 효과를 과장하는 경향이 있다.
아래 보이는 그림은 '우아한 퇴보'(또는 테스크톱 퍼스트) VS'진보적인 강화'(모바일 퍼스트)의 콘셉트를 잘 나타낸다.
위 이미지를 보면 '우아한 퇴보'는 자만심에 근거해 모바일에서는 잘 기능하지 않는 솔루션으로 이어지는데 오답임이 분명히 보인다.
하지만 아직 단언할 수 없는 점은 '진보적인 강화'의 데스크톱 솔루션에도 문제가 있기 때문이다. 데스크톱 표시는 개발이 어중간하며 콘텍스트(맥락)에 맞지 않는 것처럼 보인다.
이것이 모바일 퍼스트의 함정이다. 가장 제약이 어려운 솔루션부터 시작하면 게을러버리며 견고한 콘텍스트를 키워나갈 마음을 잃어버리기 쉽다.
최종적인 결과물이 사용자 디바이스 성능과 콘텍스트의 이점을 최대한 살린 것이 아닌, 최악의 경우 과도하게 단순하거나 유아틱 한 디자인이 되어버리는 것이다.
문제는 뒤집어도 해결되지 않는다.
몇몇 극단적인 상황에 꺾여버릴 것 같을 때 우리들은 다른 극단적인 일로 옮겨버리는 반응을 나타내는 경우가 많다. 데스크톱 퍼스트 디자인을 우선으로 디자인하고, 모바일 취급은 그 다음이라 생각하는 것은 잘못 되었었다. 왜냐면 우리들 업계는 모바일을 가장 우선으로 디자인하며 데스크톱에 대해서는 나중에 생각하자, 고 (대부분) 받아들였기 때문이다.
우리는 문제를 해결하지 않는다. 단지 이를 뒤집을 뿐이다.
스마트폰을 사용할 때라면 새로운 Adobe Acrobat DC와 같은 인터페이스를 환영할 것이다. 내 굵은 손가락은 커다란 액션 버튼 위에서 자유롭게 춤을 추며 이는 작은 스크린에서도 어려움 없이 명확히 보일 것이다.
하지만 책상 위의 커다란 모니터 앞에서 느긋하게 걸터앉아 세밀한 광학식 마우스를 사용할 때엔 동일한 제약이 존재하지 않는다. 이 콘텍스트에서는 거대한 버튼은 소프트웨어를 Fisher Price 장난감처럼 보이게 하며 내가 사용하는 매우 파워풀한 디스플레이와 입력 디바이스에는 가히 해학적이라 할 만큼 밸런스가 맞지 않을 것이다.
신규 유저 VS 파워 유저
내 아내 Katie는 Business as Family라는 팟캐스트를 갖고 있는데 음원 포스트 프로덕션에 Adobe Audition을 사용하고 있다. 훌륭한 소프트웨어로써 신규 유저는 예를 들면 애플의 GarageBand와 같은 심플함은 없다고 느낄 수 있겠지만 전체적으로 더욱 파워풀하며 유연한 툴이다.
GarageBand는 디자인이 훌륭하며 사용하기 쉬운 소프트웨어인데, 왜 Audition을 사용하는 거예요? 라 묻는다면 유저 프렌들리 함에 두 종류가 있다는 게 그 이유가 되겠다.
GarageBand는 신규 유저에게는 친절하지만 파워유저에게는 화나게 만든다. 함축된 기능과 거대한 버튼, 프렌들리 한 애니메이션, 한 스텝씩 단계를 밟아 나가는 프로세스 등등 모든 것이 신규 유저에게 거의 스트레스를 느끼게 하지 않으며 소프트웨어에 익숙해져 바로 사용을 시작할 수 있게 만들어 준다.
한편 Audition은 작업에 익숙하며 콘셉트를 이해하고 있고, 예를 들어 인터페이스가 어수선해도 정보와 기능을 넘나들며 바로 액세스 할 수 있는 편리성을 선호할 파워 유저를 위해 디자인되어있다. 전문가용으로 디자인된 소프트웨어들을 관찰해보면 익숙지 않은 사람에겐 복잡하게 보이는 경우가 많다.
사용자 경험 영역에서는 위 첫 번째 유저 프렌들리 함에 강한 편향이 있다. 우리들은 집착하는 새로운 사용자를 위해 최적화하며 새로운 사용자들에게 좋은 것은 누구에게나 다 좋은 것이라고 (대체로 오해하며) 생각해버리곤 한다. 안 좋게 만들어진 소프트웨어가 널려있는 오늘날, 신규 유저가 간단하게 사용하는 것을 만드는 건 커다란 진보이기는 하지만 사용자 경험의 퍼즐 전체류 본다면 이는 매우 작은 1장의 조각에 지나지 않는다.
이 '신규 유저 바이어스'를 이해하는 점은 중요하다. 왜냐면 이것이 모바일 퍼스트가 잘못된 이유 중 하나이기 때문이다. 때때로 우리는 '미니멀리즘', '심플', ' 억제' 등의 개념에 집중한 나머지 그들의 항상 정답이 아니라는 사실을 잊어버린다. 경우에 따라선 특히 자주 사용하는 소프트웨어에선 열람성과 효용성을 높일 복잡한 인터페이스가 실제로 적절히 사용된 예도 있다.
모바일 퍼스트 디자인 접근법은 이 신규 유저 바이어스에 있어 유효하게 움직인다. 그렇기 때문에 디자인 커뮤니티에 순식간에 퍼졌던 것이다. 우리는 무언가를 '아이가 사용할 정도로 간단하게'디자인하는 것을 좋아한다. 그리고 실제 아이가 아닌 타겟층이 이와 같은 인터페이스에 불만을 더해가고 있다는 점은 잊어버린다.
모바일 퍼스트는 타협해야 하는 해결책이다.
어딘가 완벽한 세상이 있다면, 소프트웨어는 이를 시작할 수 있는 다양한 디바이스 스크린 사이즈를 지닌 것들에 꼭 들어맞을 것이다. 모바일 폰 버전은 화면 크기와 입력 디바이스에 맞춰 조절됨에 틀림없다. 태블릿 버전은 또 별개로, 아마 태블릿만의 쥐는 방법이 활용되어 화면 크기에 따라 손가락 움직임이 적어지거나 할 것이다. 그리고 데스크톱 버전은 와이드 스크린 사이즈, 모바일과 다른 유저 포지션, 높은 입력 디바이스의 유연성을 기준으로 한 전혀 다른 레이아웃일 것이다.
(이들은 많은 디자인 예제의 일부에 지나지 않는다. 실제 전화, 태블릿, 데스크톱용 이외에도 아주 다양한 콘텍스트를 예상할 수 있다.)
하지만 여긴 완벽한 세상이 아니다. 이 세상에선 다양한 일들에 예산과 마감이 존재한다. 즉 효율성을 위해 타협해야 한다는 점이다.
모바일 퍼스트 디자인 자체는 올바른 정답이다. 효율적으로 대답해라 해도 좋다. 하나의 디바이스를 위해 디자인하며 그다음에 다른 디바이스를 위해 디자인하고, 그다음에 다른 디바이스에서는 기능이 늘거나 주는 등 조작할 수 있게 되고, 디자인 프로세스에서 상당한 시간을 줄여줄 것이다. 디자인해야만 하는 대상의 디바이스가 풍부하다면 이는 분명 좋은 일이다.
(그리고 다양한 디바이스에서 인터페이스의 일관성을 강요하는 것에 대해 말하고 싶은 점이 있다. 이 중요성에 대해 너무 과대평가되어 있다. 예를 들면 페이스북 모바일앱과 페이스북 데스크톱 웹 경험은 꽤나 다른데 일반 유저가 두 개의 디바이스를 넘나드는데 고생했단 소린 들은 적이 없다.)
모바일 퍼스트 디자인에 대해 논의, 프로모션을 진행할 때 이는 한정된 예산과 일정 내에 허용될 좋은 결과를 얻기 위한 효율적인 타협의 해결법임을 잊지 말자. 이 방법 자체는 다양한 모든 디바이스에 있어 이상적인 인터페이스에 이르게 하는 빛나는 길은 아니다.
올바른 모바일 퍼스트 디자인의 원칙
어떠한 일관된 원칙에 유의하자면, 모바일 퍼스트 디자인은 매우 잘 기능할 때도 있다.
너무 빠른 것을 멈춰라.
데스크톱 버전 디자인이 단지 모바일 인터페이스를 크게 넓힌 대용품이 되어서는 안 된다. 인터페이스 대부분을 다른 미디어용으로 대체하는 웹 기술은 많이 나와있는데 예를 들면 모바일 버전으로 리스트 표시되어 있는 것이 데스크톱 버전에선 데이터 테이블로 바뀌어 있는 경우가 있다. 어느 요소를 크게 변경해야한다하더라도 인터페이스는 콘텍스트에 따라 작업할 것.
디바이스와 입력방법을 고려한다.
스마트폰 앱 사용자는 세로보기 화면에서 왼손 엄지를 사용해 많은 동작을 실행한다. 따라서 내비게이션과 기능을 스크린 하단과 중앙에 계속해서 표시하는 것이 이상적이라 할 수 있겠다. 태블릿에선 가로 표시 상태에서 양손(엄지손가락 포함)을 사용할 때가 많으니 닿기 쉬운 범위에 기능을 추가할 여지가 많다. 테스크톱은 아마 조작성 좋은 마우스나 트랙패드가 사용되어 커다란 스크린에 미세한 점까지 쉽게 표시되며, 중요한 기능은 하단보다 가장 위에 표시됨이 기대된다. 물론 이들 원칙은 모두 앱 성질에 따라 다를 것인데 콘텍스트의 차이에 따라 인터페이스도 크게 바뀌는 점은 당연하다는 걸 알 수 있을 것이다. 사용자가 디스플레이 밝기와 입력 제한을 늘렸다면 이를 적절하면서도 유용하게 활용하자.
레이아웃이 아닌 기능에 포커스 한다.
모바일 퍼스트 디자인이 가져온 가장 큰 변화는 '이는 모바일에선 불가능해'란 사고방식이 과거의 것이 되어버렸다는 점이다. 지금은 모바일 인터페이스가 데스크톱 솔루션이 제공하는 기능에 풀 액세스함을 기대할 수 있다. 이는 모바일 퍼스트 디자인의 중요한 가치 기준이다. 이와 비교하자면 인터페이스 레이아웃이 복수의 디바이스를 넘나들며 '같아야 한다는 점'은 하찮을 뿐이다.
이용 빈도가 높은 콘텍스트에 우선순위를 맞춘다.
원자력 발전소를 감시하는 인터페이스를 디자인한다 하면 사람들 대부분이 누군가 하루 종일 워크 스테이션 앞에 앉아 사용할 것이라 상상할 수 있겠다. 데스크톱 퍼스트로 디자인해도 아무런 문제가 없다. (물론 모바일 인터페이스가 기능을 제한한 쓰고 남은 버전이어도 좋다는 말은 아니다. 데스크톱 버전에서 할 수 있는 거의 모든 것을 망라해야 한다. 하지만 이용 상황이 어느 특정 콘텍스트에 크게 편향되어 있는 경우엔 다른 콘텍스트를 위해 디자인된 인터페이스를 생각하기보다 이용 빈도가 높은 콘텍스트를 우선시하여 디자인하는 것이 합리적이다.)
진정한 핵심 기능을 최우선시한다.
가장 제한이 심한 인터페이스 버전에서도 가장 안정된 버전과 마찬가지로 핵심기능을 제공해야만 한다. 하지만 사용자의 니즈나 상황에 있어 더욱 적절하다 하면 어느 특정 콘텍스트에 있어서는 보여주는 방법, 동작하는 방법이 전혀 다르더라도 상관없다.
신규 유저와 파워 유저 사이의 적절한 균형을 취한다.
소프트웨어 중엔 한번 사용한 다음 거의 사용하지 않는 것들도 있다. (예: 쇼핑몰 내 안내 스탠드) 이러한 경우 '심플함'을 위해 디자인하는 건 당연히 있을 수 있다. 하지만 직장과 생활상에서 일상적으로 사용하는 앱을 디자인할 땐 복잡한 인터페이스가 되어 버린다 하더라도 가시성과 효율성을 최우선으로 삼는 것이 중요하다. 모바일 퍼스트 디자인을 이유로 부적절한 미니멀리즘에 치우치지 않도록 하자. 미니멀리즘은 모든 디자인을 해결해주는 만능 해결사가 아니다.
모바일 퍼스트 디자인은 훌륭하다.
하지만 UX 디자인은 심플하지 않다.
모바일 퍼스트 디자인의 근거를 조금이라도 깨뜨리려 했으나 확실히 해두자면 나는 이 방법론의 팬이자 인터페이스 디자인에 관해 말하자면 사고 과정을 단련할 수 있는 좋은 방법이라 생각한다.
그럼에도 불구하고 특정 UX솔루션에 대한 숭배로 끝나지 않도록 명심했으면 한다. 왜냐하면 UX는 범용적인 답변을 얻을 수 있을 만큼 심플하지 않기 때문이다. 모바일 퍼스트 디자인은 제한된 예산과 스케줄에 있어 좋은 결과를 내기 위한 타협적인 접근법이며, 이 점에 있어서 모든 디자인상황에 대한 '진리'가 아니라 할지라도 아주 좋은 일을 하고 있다 할 수 있겠다. 모바일 퍼스트 디자인은 그 진정한 실체를 이해하며 진정한 콘텍스트에 맞는 디자인 사고를 생략하기 위한 핑곗거리도 안되며, 앞으로 나아가기 위한 플랫폼으로써 그것을 선택했을 때야말로 가장 좋은 힘을 발휘할 것이다.
(번역끝/묭니)
