Fast campus School

UX/UI 디자인

UX/UI 디자인의 기본 (6)

모바일, 더 빨리 더 적게 읽는다.

2017.03.13 | 2223 명 읽음


지금까지 사용자의 관점에서 '웹'의 사용성을 높이기 위한 UX/UI 디자인의 기본에 대해 살펴보았습니다. 우리가 지금까지 함께 읽어오고 있는 <사용자를 생각하게 하지 마!> 는 UX/UI 디자인의 bible이라고 불리는 책인데 그만큼 오래된 책입니다. 그래서 후에 개정되면서 모바일에 대한 내용이 추가되었는데요. 간단하게 말하면 '이 작은 화면에 사용자가 고민 없이 자기가 찾는 정보를 찾아갈 수 있도록 해봐'라는 입 아픈 이야기죠.


아, 스마트폰! 이제는 슬슬 기억도 나지 않을 시절부터 모바일은 '고려'해야하는 부분이 아니라 '최우선'으로 생각해야 하는 부분이 되었습니다. 그렇다면 모바일에서 사용자를 생각하게 하지 않기 위해 우리가 알아야 할 내용들에 대해 살펴보겠습니다.


UX/UI 디자인의 기본 (1) - 사용자를 고민에 빠뜨리지 말 것

UX/UI 디자인의 기본 (2) - 사용자는 필요한 곳만 판단하여 본다

UX/UI 디자인의 기본 (3) - 웹 내비게이션 디자인

UX/UI 디자인의 기본 (4) - 웹 디자인의 빅뱅이론

UX/UI 디자인의 기본 (5) - 유저가 좋아할까?라는 고민의 부질없음



더 빨리 움직이고 더 적게 읽는다.


모바일 환경에서 UX/UI디자인시 사용자의 경험을 높이기 위한 디자인은 어떻게 달라져야 할까요? 굳이 답을 하자면 '별반 차이는 없다'라고 할 수 있겠습니다. 굳이 차이를 찾자면 모바일에서는 '더 빨리 움직이고 더 적게 읽는다'는 점일 것입니다.



우리는 두 번째 포스팅에서 이미 당연하게 쓰이고 있는 디자인 '관례'들에 대해 살펴보았는데요. 좋은 소식일지 모르겠으나 웹에서는 이미 많은 관례들이 만들어졌고 광범위하게 굳어져 사용되는 것에 비해 모바일 웹/앱의 인터페이스 디자인의 관례는 여전히 만들어지고 있는 단계이고 우리가 따라갈 수 없을 정도로 빠르게 변화하고 있습니다. 좀 더 연구해서 개선해볼 여지가 많다고도 이야기할 수 있겠죠. 그럼에도 불구하고 우리가 이 공부를 하고 있는 이유인 모바일 환경의 UX/UI 디자인시 꼭 견지해야 할 포인트들을 살펴볼까요?



트레이드오프를 고려하라.


분야를 막론하고 어떤 디자인에서든 제약과 트레이트오프를 잘 다루는 게 관건이라는 말이 있습니다. '제약'은 해야만 하는 일, 할 수 없는 일 즉 컨트롤할 수 없이 주어지는 것이고 '트레이드오프'는 제약 때문에 이상을 버리고 선택하는 대안을 뜻합니다. 결국 트레이드오프를 고려하라는 말은 모든 것을 얻을 순 없으니 더 중요한 것을 취하고 포기하는 것에 대한 대안을 잘 마련해라라는 말 정도로 이해할 수 있을 것 같습니다.


모바일의 경우, 환경적인 제약 때문에 더 많은 대안을 생각해야 합니다. 그런데 제약이 많을수록, 그래서 고려해야 하는 트레이드오프가 많을수록 공유지의 비극이 발생하기 쉽죠. 어떤 제약을 만났을 때 그에 대한 트레이드오프를 결정하는 과정에서 다양한 이해관계를 만나게 되고, 그 과정에서 자신들은 최선이라고 생각하는 '타협안'을 결정하게 되는데 이러한 과정이 사용성 문제를 낳는 가장 큰 원인이 되곤 합니다. 우리가 고려해야 할 것은 각 팀의 이해관계가 아니라 사용자에게 좋은 경험을 만들어 주기 위한 트레이드오프입니다.





공간이 좁아서 생기는 문제


화면 공간 부족 때문에 사용성이 희생되면 안 된다.


모바일 환경에서 우리가 만나는 첫 번째 문제는 '작다'는 것입니다. 이 문제에 대처하기 위해 가장 먼저 고려해볼 만한 선택은 '덜어내기'입니다. 그렇다면 어떻게 덜어내면 좋을까요?


'Mobile First' 방식을 적용할 수 있습니다. 정말 필요한 콘텐츠만을 담고 데스크탑 버전에서든 모바일 버전에서든 완전하게 같은 경험을 하게 하는 페이지들도 요즘은 많이 볼 수 있지만 인터페이스 상의 어쩔 수 없는 차이로 보았을 때 모바일 버전을 별도로 고려해야 하는 것은 너무나 당연한 사실입니다. 이미 많은 서비스를 모바일에서만 소비하고 있기 때문입니다. Mobile First 방식은 콘텐츠로 빵빵하게 채워진 웹사이트를 모바일 버전으로 축소하는 것이 아니라 사용자에게 가장 중요한 기능이나 콘텐츠로 채운 모바일 버전을 먼저 디자인하고, 데스크탑 버전에 추가적인 기능과 콘텐츠를 더하는 방법입니다.


하지만 이 방식에서 쉽게 할 수 있는 아주 위험한 착각 하나는 '모바일 버전'이라는 것에 사로잡혀 사람들이 모바일로 많이 할 것 같은 활동을 찾아내서 이를 모바일 버전에 넣어야 한다고 생각하는 것입니다. 이런 착각은 쇼핑하던 사람이 모바일로 은행 잔고는 확인하고 싶을 수 있지만, 새로운 계좌를 개설하고 싶어 하지는 않을 거라는 결론으로 이어집니다. 이 글을 보고 있는 여러분도 그렇듯 우리는 스마트폰을 이동하면서 쓰고, 일을 하다가도 쓰고, 누워서도 씁니다. SNS를 하고 장을 보고 투자도 합니다. 이런 착각을 이겨내고 모든 유저의 행동들을 고려하고 나면 결국은 우선순위를 매기게 됩니다. 


급하게 혹은 자주 사용하는 것은 가까이, 아주 잘 보이는 곳에 두어야 합니다. 그 외의 요소라면 몇 번의 탭을 거쳐야 하는, 깊은 곳에 있어도 됩니다. 하지만 이도 접근할 수 있는 경로는 분명하게 알 수 있어야 합니다. 작은 화면을 모바일은 데스크탑(풀 버전) 버전보다 더 깊은 경로를 사용하게 되는 것을 피하기 어렵습니다. 그렇기에 사용자가 더욱 확신을 가지고 그 경로를 선택할 수 있도록 해야 합니다. A 버튼을 클릭하고 나면 다음에 B 버튼이 나오고 나는 원하는 것을 얻을 수 있겠구나 라는 사용자의 기대에 충족해야 합니다.



결국 모든 것을 아울러 모바일 환경에서 생각해야 하는 가장 강력한 포인트는 '모바일 환경에서 사용자는 더 더 더 참을성이 없다'라는 것입니다. 시간 공간의 제약 없이 원하는 정보에 접근할 수 있는 모바일 환경에서 사용자들은 몇 초의 로딩, 본 것을 또 보고 또 봤을 때의 짜증과 같은 (사소하지만 강력한) 허들을 만나게 되면 고민없이 '뒤로' 혹은 '홈'키를 누른다는 것입니다. 결국 데스크탑도 모바일도 모든 내용이 <사용자를 고민하게 하지 마!> 책 제목처럼 사용자를 고민에 빠지지 않도록 직관적으로 원하는 정보를 알아서 찾아갈 수 있게 만들어야 한다는 결론에 이릅니다.


직무를 막론하고 UX/UI를 고민하는 사람에게는 '유저'의 입장에서 생각할 수 있는 능력이 필요합니다. 데드라인에 맞추는 것, 개발하기 수월한 것, 디자인하기 용이한 것을 먼저 생각하는 것이 아니라 이 서비스의 원래의 목적에 집중하여야 합니다. 물론 공급자의 입장에서 서비스의 원래의 목적은 '비즈니스'겠지만 그 비즈니스는 '유저가 찾아와서 사용해야만' 이루어지는 목적일 테니까요. 그래서 거의 모든 기업이 UX/UI 디자인에 집중하고 이에 관련한 인력을 찾는 것이 아닐까요?



지금까지 여섯 번의 포스팅을 통해 UX/UI 디자인의 바이블이라 불리는 <사용자를 생각하게 하지 마!>를 함께 읽어보았는데요. 

이번 시리즈를 통해 UX/UI 디자인에 대한 관심을 가지게 되셨거나, 바쁜 업무에 잊고 있던 기본에 대해 다시 생각해볼 수 있는 시간이 될 수 있었다면 더할 나위 없이 좋겠습니다. 감사합니다 :)



UX프로세스의 실적용부터 UI설계까지 스스로 완성할 수 있는 역량을 기르는

3개월 전일제 교육과정

UX/UI 디자인 스쿨 >>