기존 사용자들을 위한 이밥차의 현명한 투자

상세페이지

  • HOME > 월별 특집 & 기획

기존 사용자들을 위한 이밥차의 현명한 투자

머티리얼 디자인 material design

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

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

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


사용자 수 약 80만 명, 하루 PV 170만 회. 이밥차는 머티리얼 디자인을 적용하기 전에도 괜찮은 성적을 내고 있었다. 전체 트래픽 중 페이지 노출수 66% 증가, 사용자 트래픽 중 방문당 페이지 노출 수 53% 증가, 검색 이용수 47% 증가. 하지만 머티리얼 디자인을 활용해 앱을 개편한 후 더욱 좋은 결과를 만들었다. 이밥차 앱을 만든 메조미디어의 윤정은 서비스 기획자를 만나 구체적으로 어떻게 머티리얼 디자인을 활용했는지 알아봤다.

글. 남은선 기자 es@websmedia.co.kr





 

iOS에서 보이는 앱 아이콘 / 안드로이드에서 보이는 앱 아이콘
IT 업계 사람이라면 자유로운 영혼을 가진 ‘남자’일 것이라는 편견이 있었다. 하지만 분당에 있는 사옥에서 만난 서비스 기획자는 긴 생머리에 환한 웃음을 가진 여자 분이었다. 이밥차는 ‘이천원으로 밥상 차리기’의 줄임말. 출판사 그리고책이 콘텐츠를 제공하고, 메조미디어가 앱을 기획, 개발 그리고 서비스 운영한다. 출판사 그리고책에서 출간하는 <2000원으로 밥상 차리기>라는 월간지의 레시피, 사진, 텍스트를 기반으로 콘텐츠를 구성했다. 윤정은 메조미디어 서비스기획자는 UX 디자인 전공자로서 디자인에도 조예가 깊다. “어떻게 하면 요리하는 사람이 편하고 쉽게 앱을 이용할 수 있을지 고민했어요. 사용자 패턴을 최대한 고려했습니다. 앱의 레시피 대로 요리도 직접 해보면서요. (웃음)”라고 말하며 이밥차 서비스를 더 잘 만들고 싶었다는 그녀는 직접 준비해온 아이폰과 갤럭시 두 대의 휴대전화기를 꺼내어 어떤 부분에 머티리얼 디자인 요소를 적용했는지 비교해 설명해주셨다.

이밥차 앱의 주요 콘텐츠인 월간지 <2000원으로 밥상 차리기>는 11만 부를 발행하고, 4만 명의 정기 구독자를 확보하고 있을 정도로 이미 팬층이 두터웠다. 앱은 2014년 1월에 오픈했다. 주로 30~40대 주부층이 사용하며, 여성은 90.4%, 주 5회 이상 요리하는 사용자는 41.5%를 차지한다. 사용자 수는 약 80만 명, 하루 PV도 170만 회. 괜찮은 성적을 기록하고 있었는데 왜 머티리얼 디자인을 적용했는지 궁금했다.

“안드로이드와 iOS의 플랫폼 성격도, 디바이스 특징도 다르잖아요. 그에 따라 더 적합한 디자인이 필요하다고 판단했습니다. 기존 사용자가 혼란스럽지 않게 하는 것도 중요했고요. 마침 구글이 제공한 머티리얼 디자인 가이드에 개발 소스 도구도 있어서 작업 효율을 높일 수 있었습니다.”

윤정은 기획자는 개편 이유를 밝히며 앱 아이콘을 예시로 보여줬다. 기존에는 주황색 정사각형 안에 하얗고 동그란 접시가 들어간 모양. 머티리얼 디자인을 적용하면서 주황색 테두리가 없는 앱 아이콘으로 다시 태어났다. 메조미디어는 이밥차를 올해 6월 8일 머티리얼 디자인을 적용한 3.0.0 버전으로 개편했다. 머티리얼 디자인 가이드를 이해하고, 해당 디자인을 적용한 사례를 수집, 기획하는 데 약 5주 정도, 개발 및 디자인에는 약 3주를 소요했다. 그 후에는 태블릿 최적화, 밥상 및 찜한 레시피 기능 추가 등의 업데이트를 진행했고, 현재 버전은 3.0.7이다.


 

➊ 앱 바, 섬네일 변경 전 
➋ 앱 바, 섬네일 변경 후


 

 ➌ 플로팅 액션 버튼
 ➍ 페이지에 따라 플로팅 액션 버튼을 적용하지 않는 경우도 있다 


 

 ➎ 내비게이션 드로어를  적용한 모습
 ➏ 머티리얼 디자인을 변형해 카드형 UI,  가로 스와이프를 적용했다

중요 요소 강조, 작업 효율 상승

머티리얼 디자인은 기획, 개발 과정을 간소화하고 효율적으로 할 수 있도록 도왔다. 대표적인 예시가 앱 바(App Bar)다. 상단에 있기에 눈에 가장 잘 띄는 앱 바를 가이드에 맞게 수정했다. 앱 바와 메뉴 바의 색상을 주황색으로 통일했으며, 메뉴 바에 아이콘을 없앴다. 이 작업을 할 때 기존에는 앱 바, 메뉴 바 등을 디자인 단에서 색상, 아이콘 제작 등을 한 후에 따로 개발을 진행했다. 하지만 머티리얼 디자인을 적용하면서 개발단에서 바로 색상과 레이아웃을 수정할 수 있었다. 머티리얼 디자인 가이드가 제공한 개발 소스를 잘 활용한 덕분이었다.

가이드에서는 전반적으로 중요한 요소를 강조하면서 콘텐츠 전달력을 높이는 데 주목했다. 그에 따른 특징이 바로 카드뷰, 그림자 효과 등이다. 이밥차는 개편 전에도 카드뷰를 사용하고 있었기 때문에 더 자연스럽게 머티리얼 디자인과 시너지 효과를 얻을 수 있었다. 이를 바탕으로 수정한 부분은 섬네일 콘셉트와 그림자 효과, 여백 등이다. 기존 콘셉트는 폴라로이드 사진과 같은 레이아웃이었다. 하지만 사진 콘텐츠가 중요한 만큼 불필요한 공간을 제거하고, 여백을 축소해 전체적으로 섬네일 크기를 확장했다. 섬네일 테두리에는 그림자 효과를 적용했다. 입체 효과를 주기 위해서다. 이를 통해 콘텐츠 집중력을 높일 수 있었다.

표면과 그림자(Surfaces & Shadows)를 살리기 위한 요소 중의 하나는 플로팅 액션 버튼(Floating Action Button). 각 서비스의 핵심 기능을 이 버튼을 클릭 시 이용할 수 있도록 해야 한다. 이밥차는 ‘밥상 차리기’를 가장 간편하게 언제든지 이용하도록 만들었다. 단 모든 페이지에 플로팅 액션 버튼을 사용하진 않았다. 페이지 특성에 맞게 검색란 옆에 ‘밥상 차리기’ 버튼을 배치하기도 했다.







모션을 첨가해 기존 사용자들의 트래픽 53% 상승

그밖에 머티리얼 디자인에서 강조한 점은 ‘의미 있고 재미있는 모션(Meaningful & Delightful motion)’이다. 가장 먼저 내비게이션 드로어(Navigation Drawer). 이밥차도 좌측에서 ‘나의 공간’ 페이지가 나오도록 설정했다. 그리고 히어로(Hero) 전환과 패럴랙스(Parallax) 효과를 적용해 사용자들이 콘텐츠를 즐기는 데 더 재미를 느낄 수 있도록 만들었다. 히어로 효과의 주요 목적은 콘텐츠 간에 부드럽게 이동해 자연스러움을 가미하는 것이다. 커브 형으로 할지 다른 모양으로 넘어가게 할지는 기획 개발자가 정하면 된다. 윤정은 기획자는 “이밥차는 연못에 돌을 던졌을 때 파형을 그리며 점차 퍼지듯이 넘어가게 했어요. 모션이 재미있어 져서인지, 기존 사용자들이 이전 보다 더 오래 머무는 효과를 얻었습니다.” 라고 밝혔다. 또 하나는 패럴럭스 효과. 스크롤 시 앱 바의 넓이가 좁아지면서 자동으로 같이 위쪽으로 올라간다. 이 효과는 콘텐츠 영역이 더 커 보이며 가독성, 집중도를 높일 수 있게 만든다.

머티리얼 디자인은 가이드이자 수단일 뿐. 결국 각자 서비스의 특성과 사용자 경험에 맞게 활용하는 것이 관건이다. 이밥차는 다른 앱과 어떤 차별점을 두었을까. “구글 패밀리 앱을 보면 한 페이지에 세로 스크롤로 콘텐츠를 볼 수 있게 설정해놨더라고요. 이밥차는 요리 만드는 법을 차례로 보여줘야 하는 과정을 중요한 콘텐츠를 다룹니다. 그래서 머티리얼 디자인의 일부 특성인 카드형 UI 그리고 스크롤은 세로가 아니라 가로 스와이프로 적용했어요.”

기획자가 직접 앱을 이용해 요리를 해보면서까지 고민한 결과다웠다. 이뿐만 아니라 삼시세끼 콘텐츠를 추가하면서 삼시세끼 로고 폰트를 그대로 메뉴바에 삽입했다. 그 결과 주목도를 높인 셈이 됐고 사용자들의 반응도 좋았다. 이미 완성한 앱을 부분 수정하려다 보니 활용 범위가 좁거나 섬네일 사진 변경을 위한 이슈 등이 있었다. 하지만 가이드를 통해 명확하게 기준을 정해주고 개발 소스도 제공해줬기 때문에 효율적이고 신속하게 진행할 수 있었다고. 머티리얼 디자인을 적용한 후 신규 사용자 유입 증가보다는 기존 사용자들이 더 오래 머물며 콘텐츠를 이용하게 됐다. 또한 검색, 레시피 댓글 수 등이 증가했다.




윤정은 메조미디어 서비스기획자


안드로이드와 iOS를 비교해서 디자인을 설명하는 중

tags 디아이투데이 , ditoday , 월간웹 , 월간web , 남은선 기자 , 이밥차 , 메조미디어 , 2000원으로 밥상 차리기 , 요리 앱 , 머티리얼 디자인 , 앱바 , 플로팅 액션 버튼 , 내비게이션 드로어 , 앱 개편 , 앱 디자인 ,

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

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

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

관련기사


정기구독신청