더 편한 모바일 UI 디자인/개발하기
화성에서 온 개발자 금성에서 온 디자이너
들어가기에 앞서
몇달 전 카카오톡의 UI가 대거 업데이트되었습니다. 실시간 검색어에도 여러번 올라올만큼 논란이 있었고 많은 사람들이 불편을 겪었습니다. 이에대해 카카오톡이 내놓은 입장은 명료합니다. 구글 디자인 가이드 지침에 따라 스와이프(ViewPager)를 제외하고 메뉴탭을 하단으로 바꾸었다. 이와같은 변화는 유튜브를 비롯한 다른 메이저앱들에서도 볼 수 있습니다. 사실 구글 디자인 가이드를 따르는것이 매우 중요합니다.
가이드에 맞지 않는 디자인
나른한 오후 슬랙으로 디자이너분께 메세지가 옵니다. “방금 디자인시안 보냈는데 확인해주세요~” 떨리는 마음으로 파일을 열어봅니다.
등에서 식은땀이 흐르기 시작합니다. 과연 나는 할 수 있을까 이걸 해야만할까… 일반적으로 디자이너분들은 UI 심미성 그리고 기획자 분들은 UX의 편리성 그다음 개발자는 그렇게 나온 디자인시안의 개발 타당성을 검토하고 개발하게됩니다.
디자인을 할때 단순히 핀테레스트나 비헨스같은 사이트에서 단순히 이쁜 자료들을 조합하여 디자인을 하면 많은 문제가 발생합니다. 첫번째로 안드로이드 같은 아이폰 디자인 아이폰같은 안드로이드 디자인입니다. 각 플랫폼을 존중하지 않은 디자인시안들은 개발자를 더 혼란스럽게합니다.
두번째로 심미성에만 집중되어있는 디자인입니다. 다른사람들이 봐도 디자인이 참 이쁩니다. 하지만 기본 컴포넌트 UI들로는 도저희 구현할 수 없고 구현한다고해도 상당히 난감한 경우입니다. 또한 경험상 이런 UI의 커스터마이징이 많이들어갈수록 시간도 시간이지만 특정디바이스나 특정환경에서 잘안보이거나 크러시가 나는 등 문제날 가능성이 높습니다.
심미성과 편리성도 중요하지만 당장 스토어 콘솔에서 에러가 수십개씩 쌓여있고 할 일은 쌓여가는데 모든 역량을 UI에만 쏟을 수는 없습니다. 간과하지 말아야할것 중 하나는 바로 최소비용 최대효과입니다. 그렇다면 시간은 가장 적게쓰면서 UI의 심미성 UX의 편리성을 극대화 하는 방법은? 바로 가이드라인을 준수하는 디자인입니다.
플랫폼을 존중하자
다시 카카오톡으로 돌아가보겠습니다. 이제 왜 가이드라인이 중요하고 카카오톡의 변화가 수긍이갑니다. 아이폰과 다르게 특히 안드로이드는 수많은 제조사들이 안드로이드 기기를 만듭니다. 많은 제조벤더가 있기때문에 구글,제조사,개발자 사이의 약속된 가이드가 필요하고 이러한 가이드에 맞추어 제조사들은 자사의 안드로이드 OS를 커스터마이징합니다.
가이드라인은 우리가 따랐을때 모든 기기에서 호환될 수 있는 제조사, 개발자자간의 약속입니다. 만약 가이드를 따랐는데도 불구하고 문제가 발생한다면 그것은 제조사의 문제이지 개발자의 문제가 아닐것입니다. 그렇다면 디자인의 시작을 어떻게 해야할까요?
가이드라인 지키기
가이드문서
제일 좋은방법은 구글의 메테리얼 디자인 홈페이지 혹은 IOS의 디자인 가이드 문서를 정독하고 읽어보는것입니다.
메테리얼 테마 가이드
구글의 메테리얼 테마가이드는 이런 가이드라인에 맞는 디자인을 클릭 몇번만으로 자동 생성해줍니다. 아쉬운점은 스케치 전용 플러그인이며 플래시 이후의 구글과 어도비의 관계를보면 포토샵과 XD같은 제품군의 플러그인으로 나오기는 어렵지 않을까 싶습니다. 한번에 커스터마이징 해주는 툴만 제공되 않을뿐 Component 파일들은 제공되며 이곳을 통해 다운받을 수 있습니다.
기본적으로 메테리얼에서 제공하는 모든 Element와 Typo, Color시스템을 사용자 설정에 맞게 자동으로 만들어주며
툴을 통해 몇번의 클릭만으로 전체 UI의 Border Radius, Ripple Effect, 색상, 글씨 크기와 같은 가이드를 변형할 수 있습니다.
가이드에 맞춘 앱은 식상하다?
가이드에 정확하게 맞춘앱들은 느낌이 다소 식상한것은 사실입니다. 창의성이 조금 결여되어보이기도 합니다. 하지만 최근 앱의 트렌드를 보면 많은 앱들이 서로 닮아가고있습니다.
한때 서로 독자적인 디자인과 창의성을 뽑내던 주요 메이저 회사들의 앱이 비슷비슷해지기 시작했습니다. 이번 카카오톡의 업데이트만봐도 노란색 포인트 색상이 사라지고 흰색과 검은색 글씨 위주로 디자인되었습니다. 마찬가지로 인스타그램, 트위터, 에어비앤비 모두 포인트 색상의 헤더를빼고 흰색과 검은글씨로 리뉴얼되었습니다.
INC 블로그에 의하면 이런 디자인에는 몇가지 장점이 있습니다. 첫째 앱의 다른요소들보다 컨텐츠에 더 집중하게 해줍니다. 둘째로 다른 앱들과 비슷할수록 사용자가 더 오래 사용합니다. 스냅챗의 연구에 따르면 사용자가 익숙한 디자인에서 덜 스트레스받고 앱을 지울 가능성이 더 낮아졌습니다.
정리하자면 가이드에 맞는 디자인은 아이폰다운 아이폰앱, 안드다운 안드로이드앱을 만들게 해주며 이는 사용자를 고민하지않게하고 최대한 직관적으로 만들며 컨텐츠에 집중하게하고 스트레스를 줄여줍니다.
가이드에서 변화주기
분명 모든 앱이 동일한 기능 동일한 환경이 아니기때문에 변화를 주어야할때가 있습니다. 전체적인 Dimension은 가이드를 따르지만 앱의 기능 혹은 추구하는 바에 맞게 가이드도 유연하게 사용해야합니다.
변화에 대한 내용 역시 가이드라인을 통해 제공하고있고 위 이미지와 내용은 구글 가이드라인을 통해서 더 자세히 읽어보실 수 있습니다. 위 가이드라인을 토대로보면 24dp가 너무크다면 16dp로 반면에 너무 작다면 32dp로 그래도 작다면 40dp로 변경하면됩니다. 그럼 카카오톡과 유튜브앱을 사례로 살펴보겠습니다.
카카오톡 디자인 다시보기
구글이 제시하고있는 디자인 가이드입니다. 역시 눈에 상당히 익은 가이드입니다.
웹사이트만봐도 구글과 네이버의 가장 큰 차이점은 구글은 딱 검색창만 띄우는데 반해 네이버는 많은 컨텐츠를 보여줍니다. 카카오톡앱 역시 하단의 메뉴에 게임센터와 샵검색을 넣으면서 설정메뉴를 상단으로 옮겼고 이로인해 아이콘 3개를 노출하고있습니다. 가이드를 지킬경우 물방울 아이콘이 아니기때문에 24dp로하면 전체적으로 길어보이는 느낌을 줄 수 있어 한단계 낮은 16dp로 줄인것을 알 수 있습니다.
유튜브 디자인 다시보기
가이드대로라면 상단바는 56dp로 나와야하지만 유튜브의 특성상 사용자에게 더 많은 컨텐츠 리스트를 보여주어야합니다. 이때문에 56dp에서 한단계 낮은 단계인 48dp를 사용하였습니다. 하지만 카카오톡과 달리 가이드에서 제시하는 24dp를 따랐지만 물방울 메뉴를 사용하지 않기때문에 오른쪽 메뉴가 다소 길어보임을 느낄 수 있습니다.
더 참고할만한 자료는?
우리가 수능공부할때 제일 많이하는건 역시 기출문제풀이입니다. 시중에 좋은 문제집도많지만 제일 믿을 수 있는건 기출문제입니다. 앱도 마찬가지라고 생각합니다. 시중에 가이드를 잘 따른 앱들도 많지만 IOS라면 애플에서 만든 앱이 안드로이드라면 구글에서 만든 앱만큼 플랫폼의 디자인가이드를 잘 지키는 앱은 없을것입니다. 이런 앱들을 다운받아 그리드를 한번 보거나 구현방법을 보는것이 큰 도움이 됩니다.
마치며
개발자간의 협업, 디자이너간의 협업은 다소 어렵지 않지만 개발자간 디자이너간 협업은 난감한 영역입니다. 디자이너는 플랫폼을 존중하며 창의력을 발휘했을때 그리고 개발자는 그러한 창의력을 최대한 가능한 범위안에서 구현하고 특화시킬때 훌륭한 디자인 즉 심미성과 가시성이 높으며 개발하기 쉬운 디자인이 나오는것같습니다.
