기능에 브랜드를 부여하는 리멤버 앱 머티리얼 디자인 리뉴얼 과정

상세페이지

  • HOME > 월별 특집 & 기획

기능에 브랜드를 부여하는 리멤버 앱 머티리얼 디자인 리뉴얼 과정

머티리얼 디자인 material design

1. 머리티얼 디자인 가이드의 핵심과 의의
2. 기존 사용자들을 위한 이밥차의 현명한 투자
3. 기능에 브랜드를 부여하는 리멤버 앱 머티리얼 디자인 리뉴얼 과정
4. "앱 체류시간 3배 늘었어요" 해먹남녀의 '머티리얼 디자인' 적용기
5. 청춘, 구글이 정의 내린 디자인 트렌드
6. PC 웹은 머티리얼 디자인 가이드를 따라야 할까? 머리티얼 디자인 라이트 함께 보기

구글이 지난해 공개한 머티리얼 디자인 가이드는 모바일 화면 디자인의 혁명이었다. 애플만이 자체 원칙에 따라 철저하게 조작하던 모바일 친화 UI·UX를 시작부터 마무리 단계까지 재정립해 하나의 사조를 완성했다. 이를 계기로 화면이 부족하지 않은 간결하고 유려한 디자인에 사용자 만족도가 높아지고 있다. 최근 구글은 머티리얼 디자인을 적용한 앱들의 성과에 대해서도 공개했는데, 제대로 적용한 앱의 경우 그 성과가 상당히 높아졌다. 과연 머티리얼 디자인은 모바일 UX의 해답일까. 머티리얼 디자인의 핵심과 의의, 머리티얼 디자인을 적용한 후 달라진 앱 서비스, 그리고 웹 디자인에의 적용 가능성까지. 머티리얼 디자인의 모든 것을 알아본다.

진행. 월간 w.e.b. 편집국


콘텐츠 앱인 ‘이밥차’, 소셜 미디어이자 동시에 콘텐츠 앱인 ‘해먹남녀’와는 다르게 리멤버는 순수한 생산성 앱이다. 즉, 컴퓨터로 따지면 유틸리티에 가깝다. 콘텐츠 베이스인 두 앱에 비해 기능이나 성능이 중요한 리멤버도 이번 머티리얼 디자인 우수사례로 뽑혔는데, 이러한 생산성 앱도 머티리얼 디자인을 입힐 이유가 있었을까. 

글. 이종철 편집장 jude@websmedia.co.kr





강민석 디자이너(좌), 정현호 PM(우)


▼ 리뉴얼 전(좌)과 후(우)의 아이콘

 



60만 명이 사용하는 명함 수기 입력 앱 리멤버

리멤버는 지난해 출시한 명함 관리 앱이다. 명함을 찍으면 타이피스트가 해당 정보를 직접 손으로 입력해주는 방식이다. 따라서 정확도와 보안이 뛰어나다. 동시에, 명함을 관리하고 공유할 수 있는 기능을 제공한다. 현재 총 사용자는 약 60만 명이며, 처리 명함은 약 2,200만 장에 달하는 한국이 자랑하는 앱 중 하나다.


생산성 앱 리멤버의 머티리얼 디자인 리뉴얼 배경

콘텐츠나 애니메이션 등의 재미요소가 핵심인 앱과 달리, 리멤버의 기본 기능은 생산성이다. 굳이 우선순위를 꼽자면 속도나 기능이 더 중요하다. 그런 리멤버가 디자인을 리뉴얼한 이유는 무엇일까. 리멤버를 만드는 드라마앤컴퍼니의 디자이너 강민석 씨에게 물었다.

“안드로이드 앱은 만드는 데 급급해서 정리가 전혀 안 돼 있는 상태였어요. OS 특성에 대해서도 스터디를 못한 상태였죠. 빨리 출시하고 수정하는 게 스타트업의 방식이니까요. 정리를 해야하는 시기에 머티리얼 디자인 가이드가 나왔고, 다른 형태로 정리했다가 재정리하느니 지금 시도하는 게 좋을 거라고 봤어요.”

강민석 디자이너는 개편 전 머티리얼 디자인을 기반으로 목업을 만들어, 팀에게 선보였고, 호평을 받은 후 실제 개편에 돌입했다. 세부 개편 내용은 컬러 팔레트 정리, 여백 정리, 앱 바 개편, 레프트 사이드 내비게이션 액션(내비게이션 드로어) 도입 등이다.


컬러 팔레트 정리

머티리얼 디자인 컬러 가이드는 선명하고 그래픽적이며 의도적으로 디자인해야 하며, 각 요소는 출판 디자인의 핵심 원칙을 고수해야 한다고 제시한다. 그 두 핵심 원칙은 컬러와 여백이다. 가이드에서는 형광에 가까울 정도로 강한 색을 추천하는데, 이는 어두운 녹색 계열을 주조색으로 하는 리멤버의 색과는 맞지 않았다. 이에 제작팀은 기존 리멤버 그린의 주조색에 형광 느낌을 약간 부여한 뒤, 이 컬러(리멤버 그린)를 기준으로 머티리얼 디자인 가이드에 맞춘 컬러 팔레트를 만들었다. 동시에 아이콘 역시 플랫에 맞는 산뜻한 느낌으로 재정비했다. 컬러는 앱 바에 쓰는 리멤버 그린 500(#15A181)을 기준으로, 작은 영역은 700(#018B69), 콘텐츠(명함) 영역은 50(#E7F5F2) 등으로 처리했는데, 이 분류 기준이 머티리얼 가이드와 동일하다. 즉, 다른 앱에서도 앱 바는 OOO레드 500, 작은 요소는 700 등을 적용하는 것이다. 색감이 완전히 달라 동일한 디자인으로 느껴지진 않지만, 안드로이드 사용자는 이 앱들에 대해 안정성과 편안함을 느끼게 된다.

제작사 내부의 효과라면 개발자와 대화하기 좋아졌다는 점이 있다. 숫자로 간편히 대화할 수 있어서 업무 효율성이 늘었다고 한다.

앱 전체 컬러의 경우 기존에는 콘텐츠에 집중하도록 앱 바와 배경에 대부분 검정색 혹은 모노톤을 적용한 상태였는데, 페이스북, 카카오톡, 지메일 등 앱 바에 브랜드 컬러를 삽입하는 여러 앱의 사례를 참고해 배경에도 리멤버 그린을 도입했다. 그런데 유일한 수기 입력 앱인 리멤버에 컬러 브랜딩이 필요했을까? 정현호 PM에게 해답을 들었다.

“일반 사용자들은 명함을 수기로 입력하는 것까지에는 관심이 없거든요. 그들에게는 명함 스캔 앱과 리멤버가 별반 차이가 없는 셈이죠. 리멤버가 다른 앱과 구별되는 브랜드를 갖고 있어야 했어요.”


대량 콘텐츠를 줄이고 여백을 강조

출판 디자인 핵심 원칙 중 하나인 여백 정리 역시 리멤버 앱 지표에 좋은 역할을 했다. 기존 리멤버는 명함을 많이 보여주고자 하는 욕심에 자기 명함을 포함해 총 여섯 장의 명함을 한 화면에서 보여주는 식이었다. 이를 머티리얼 디자인 가이드에 맞춰 명함 간격을 조정하고, 자신의 명함을 다른 영역으로 이동시킨 후 총 다섯 장의 명함을 보여주도록 했다. 이때 사용한 구분선은 세로선은 좌우 여백 16dp, 여백 포함 왼쪽 메뉴까지 72dp를 사용했다. 머티리얼 디자인 가이드와 일치한다. 명함간 간격의 경우 구글이 제시하는 리스트 내 여백(8dp)과는 달리, 다른 메뉴로 보이도록 하는 16dp를 적용했다. 주로 두 줄인 구글 리스트 정리 방식과 달리 이름, 직책, 회사 세 줄이 들어가는 명함 요소를 반영하기 위해서일 것이다.

여백과 마찬가지로 콘텐츠 영역 역시 재단장했는데, 이 역시 머티리얼 디자인 가이드를 사용했다. 특정 명함을 터치해 들어가는 영역에서, 기존에는 한 화면에 모든 정보를 보여줄 수 있도록 했는데, 메타포(암시)가 가능하다는 것에 착안해 터치 영역을 44dp에서 56dp로 키웠다. 커진 안드로이드폰 해상도를 반영해 적용한 수치였다. 그 결과 상세화면에서 전화를 걸거나 문자를 보내는 비율이 55% 증가했다.

해당 항목을 정리한 이유는 ‘안드로이드 기본 연락처’ 앱 때문이다. 사용자는 안드로이드 앱 본 연락처의 UI에 익숙하며, 이 앱은 기본적으로 머티리얼 디자인 가이드를 충분히 준수했기 때문에, 해당 앱의 간격과 정보 정리 단계를 모방했을 때 사용자가 얻을 수 있는 심리적 안정감이 커지고 UX 오류가 줄어든다.


사이드 내비게이션 액션과 탭

머티리얼 디자인과 iOS 플랫 디자인의 가장 큰 차이가 탭의 기능이다. 아이폰은 레프트 내비게이션 바(통칭 햄버거 메뉴)를 거의 사용하지 않고 다섯 개의 탭 내에서 모든 메뉴를 소화할 수 있도록 하는데, 구글은 탭과 플로팅 버튼, 내비게이션 드로어 액션을 모두 사용한다. iOS의 탭 하나는 하나의 메뉴 혹은 기능 버튼을 의미하나 안드로이드 머티리얼에서의 탭은 항목 혹은 기능 중 하나다. 두 OS의 페이스북 앱을 보면 이 같은 설정이 잘 드러난다. 리멤버의 경우 탭을 쓰지 않고 가장 자주 사용하는 기능, 사진촬영 버튼을 플로팅으로 띄웠다. 이외의 항목은 내비게이션 드로어(액션) 기능에 모두 숨어있다. 지메일 앱에서 햄버거 메뉴를 누르면 기본 설정인 받은 편지함에서 다른 편지함으로 이동할 수 있는 것과 마찬가지다. 부가 기능은 스와이프해서 볼 수 있도록 하는 게 구글이 생각한 좁은 스크린을 활용하는 방식이다. 이 화면이 펼쳐졌을 때의 면적과 정렬 역시 머티리얼 디자인의 것을 준수했다. 따라서 리멤버 앱은 컬러와 핵심 기능은 리멤버 그대로, 디자인은 산뜻하고 편리한 머티리얼 디자인 앱이 됐다.


적용 효과

리멤버 앱은 처리명함 수로만 봐도 이미 뛰어난 성과를 보이는 앱 중 하나였다. 그러나 머티리얼 디자인 가이드를 적용한 후의 성과는 더 좋다. 주요 지표 성과는 [표 1]과 같으며, 정현호 PM과 강민석 디자이너를 비롯한 제작사가 가장 기뻐했던 성과는 구글이 전 세계 기준으로 ‘아름답게 디자인된 앱 모음’에 선정했다는 것이었다.


 


➊ 리멤버 그린 팔레트, ➋ 머티리얼 디자인 가이드의 컬러 팔레트


 

리멤버 세로선(좌)과 머티리얼 디자인 세로선(우)


 

리멤버 가로선(좌)과 머티리얼 디자인 가이드 가로선(우)




tags 디아이투데이 , ditoday , 월간웹 , 월간web , 이종철 편집장 , 리멤버 , 드라마앤컴퍼니 , 명함 앱 , 명함 , 명함 입력 , 생산성 앱 , 앱 개편 , 앱 디자인 , 앱 개발 , 강민석 디자이너 , 정현호 PM , 머티리얼 디자

저작권자 © 웹스미디어 무단 전재-재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다.
본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은
반드시 기사의 출처(로고)를 붙여주시기 바랍니다.
영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라
그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

URL 복사 출력하기 목록보기 스크랩하기

관련기사

최신뉴스
월별 특집 & 기획
머티리얼 디자인 가이드 핵심과 의의
월별 특집 & 기획
기존 사용자들을 위한 이밥차의 현명한 투자
월별 특집 & 기획
기능에 브랜드를 부여하는 리멤버 앱 머티리얼 디자인 리뉴얼 과정
월별 특집 & 기획
“앱 체류시간 3배 늘었어요” 해먹남녀의 ‘머티리얼 디자인’ 적용기
월별 특집 & 기획
청춘, 구글이 정의 내린 디자인 트렌드

정기구독신청