UI 가이드 작성 시 고려해야 할 점
서비스디자인 랩 김성동선임
UI 가이드 작성 시 필요한 부분들에 대해서 정리해 보고자 합니다.
느낀 점 또는 의문점?이라고 해야 할까요.. 가볍게 적어보도록 하겠습니다.
1. 기준 정하기
우선 기준 정하기 먼저 시작합니다. 타깃이 되는 디바이스, 호환성, 언어 등등
아주 기본이지만 또 매우 중요한 기준들을 정리합니다.
Android/iOS 플랫폼 모두 각각의 UI 가이드라인이 존재합니다.
우리는 우리의 가이드라인을 만들어야 합니다. 하지만, 우리는 그들의 플랫폼 영향권을 벗어나지는 못합니다.
그럼 몇 가지 질문이 나오네요. 추려보겠습니다.
Android/iOS 각각 플랫폼 기준에 맞출 것인가?
적절히 혼합하여 사용할 것인가?
우리 서비스만의 커스텀 UI를 만들 것인가?
어쩌면 가장 중요한 질문이 되겠네요. 이에 따라 프로젝트의 WBS가 달라지게 되겠습니다.
실제론 WBS에 맞춰 위 기준을 정리하겠지요.
자체 서비스를 진행하는 경우 아래와 같이 더욱 심도 깊은 고민을 할 수 있겠습니다.
- 우리는 디자인에 많은 것을 투자하지만 그것을 모든 플랫폼(Android, iOS, Desktop/Web)마다 투자할 수는 없다. 특히 플랫폼의 디자인은 iOS7과 Android L의 디자인처럼 갑자기 변할 수 있기 때문에 플랫폼의 디자인을 따른다는 것은 어느 순간 플랫폼과 디자인이 맞지 않을 수도 있다는 것을 의미한다. 동시에, 플랫폼의 방식을 따르지 않는 것에 대한 위험성도 알고 있다. 그래서 우리는 항상 반복과 조정을 통해 적절한 균형을 찾기 위해 노력하고 있다. 그래서 우리는 디자인이 플랫폼에 관계없이 쉽게 이해되도록 단순하게 만들었다.
—Priidu Zilmer, Wire's head of design
https://brunch.co.kr/@monodream/2
고민해 볼 가치가 있는 내용입니다.
사용성, Usability가 중요해진 만큼 플랫폼 UI는 언제든 쉽게 적용될 수 있고 안전합니다.
아이폰을 사용하다 갑자기 안드로이드폰을 사용하면 매우 낯선 것처럼 각각의 플랫폼을 따르는 것이 가장 안전한 방법일 수 있습니다. 하지만 브랜드적인 느낌은 약해진다고 할 수 있죠.
2. 혼란스러운 UI의 재정의
몇 가지 기준이 정해지면 기준을 뒷받침할 '정의'가 필요합니다.
예를 들어볼게요,
웹이라면 일반적인 경우 내비게이션을 크게 고민하지 않습니다. GNB가 있고 LNB가 있고.. 대부분 이 틀을 따릅니다.
플래시가 웹을 장악했을 때를 제외하곤 대부분 큰 틀은 변하지 않았습니다. 플래시 웹사이트는 숨어있는 버튼을 찾아다니곤 했었죠. 유저빌리티는 개나 줘 버려
현재 모바일의 경우는 조금 다릅니다. 같은 UI를 다른 방식으로 사용하곤 합니다.
대표적인 예는 바로 햄버거 메뉴, 햄거버 메뉴는 아래와 같이 어려가지 형태에 사용되고 있습니다.
전체 메뉴
기타 메뉴
개인화 서비스
추가 콘텐츠
모바일 카톡, 그 안에 이모티콘 페이지에서, 그리고 PC용 카톡에서 햄버거 메뉴가 사용된 방식입니다.
어떠신가요? 굳이 비판하자고 가져온 건 아닙니다. 다 이유가 있겠지요. 플랫폼에 따라 다뤄야 하는 데이터도 다르고요. 하지만 약간 헷갈릴 수 있는 건 사실입니다.
따라서 UI의 사용범위에 따라 확실히 가이드해야 할 필요성이 있습니다.
3. 데이터 vs 익숙함 or 감성
마지막으로, 우리는 합리적인 것과 익숙한 것 사이에서 고민하게 됩니다.
합리적인 것이 늘 옳은 것일까요? 익숙한 것을 사용하는 것이 옳은 판단일까요?
햄버거 메뉴 위치에 대해 고민한 적이 있어서 서치 해 봤었습니다.
대부분 하단 탭이 좋다라거나, 오른손잡이가 많고 대부분의 사람들은 한 손만 쓴다더라, 그래서 오른쪽이 좀 더 낫다.라는 내용들이 있었습니다.
하지만 안드로이드 사용자들이 많은 국내 시장에서는 데이터만으로 적용하기는 힘들지 않을까요? 이미 왼쪽에 햄버거 메뉴가 있는 것이 상대적으로 익숙하기 때문입니다.(anchoring effect).
유튜브 디자인을 잠깐 보겠습니다.
유튜브는 현재 메뉴의 중요 기능을 하단 탭 바로 옮겼습니다. 바로 이전에는 상단 탭 바를 사용했습니다.
형제 격인 YTMusic 앱 디자인을 보면 아직 상단 탭을 유지하고 있는 것을 알 수 있습니다.
MusicPlayer 때문일 수도 있고, 플로팅 플레이어 디자인 때문일 수도 있습니다.
이건 데이터도, 익숙함도 아닌 YTMusic만의 감성을 선택한 것입니다.
하단에 영상플레이어가 플로팅되어 있다.과감히 플랫폼을 깨고 아이덴티티를 만들었던 몇몇 좋은 사례들이 있습니다. 하지만 새로운 방식은 클라이언트와 유저를 설득하기가 매우 어렵습니다.
그럼에도 불구하고 커스텀 UI를 사용하는 이유는 기존 플랫폼 UI보다 더 감성적이고 기억에 오래 남기 때문입니다.
간단하게 UI 가이드 작성 시 고려할 부분을 살펴봤습니다. 어쩌면 너무 당연한 내용을 길게 쓴 것 같기도 합니다.
정답은 없습니다. 위에 언급된 고려사항들을 바탕으로 프로젝트의 성격, 범위, 기타 등등의 조건에 맞는 현명한 선택과 포기를 해야 하겠습니다.
다음 블로깅은 모션과 마이크로 인터랙션에 관해 적어보도록 하겠습니다.
