“앱 체류시간 3배 늘었어요” 해먹남녀의 ‘머티리얼 디자인’ 적용기

상세페이지

  • HOME > 월별 특집 & 기획

“앱 체류시간 3배 늘었어요” 해먹남녀의 ‘머티리얼 디자인’ 적용기

머티리얼 디자인 material design

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

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

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



머티리얼 디자인이 보기에 좋다는 것은 그저 보는 것만으로 확인할 수 있다. 그렇다면 머티리얼 디자인 덕에 사용자 만족도가 더욱 높아진다는 것까지도 두 눈으로 볼 수 있을까? 모바일 레시피 서비스 ‘해먹남녀’를 만드는 정지웅 바이탈힌트 대표는 이를 경험적으로 입증해냈다. 기존 원콘텐츠 방식의 디자인을 고수하던 해먹남녀 앱에 머티리얼 디자인을 적용하니, 사용자의 앱 체류시간이 3배, 익일 재방문율은 2배 이상 늘어난 것이다.  (본 인터뷰는 정지웅 대표와 장진호 디자이너가 함께 했습니다)

글. 이창민 기자 whale@websmedia.co.kr










해먹남녀, 머티리얼 디자인으로 요리하다

모바일 레시피 서비스인 해먹남녀. 음식을 더욱 쉽고 맛있게 만들어 먹을 수 있는 감칠맛 도는 레시피 콘텐츠를 제공한다. 우리는 서핑하듯 둘러보며 먹고 싶은 걸 골라 볼 수 있다. 원하는 음식을 미리 생각해두곤 검색할 수도 있고, 자신만의 레시피를 ‘스토리’에 올려 자랑할 수도 있다. 지금은 해먹남녀 자체적으로 스튜디오에서 쿡방을 찍어 제공하는 수준에 이르렀다. 레시피 콘텐츠라면 전문 정보든 일반 정보든 가리지 않고 모두 제공하는 것. 쿡방과 먹방이 넘실대는 시대, 해먹남녀의 서비스는 확실한 소비자 니즈를 쥐고 있다.

니즈는 분명하지만 한정됐다. 이 땅의 모두가 삼시세끼 거르지 않지만, 요리법과 쿡방까지 꼬박꼬박 챙겨 먹는 사람은 많지 않다. 아니, 오히려 적은 편이다. 그래서 해먹남녀는 그 니즈가 분명한 소수를 위한, 버티컬 타깃을 겨냥한 모바일 서비스다(물론 모두가 써주면 더욱 기쁘다). 정지웅 바이탈힌트 대표(이하 정 대표) 역시 이를 잘 안다. 그래서, 콘텐츠가 중요하다. 일반 사용자가 참여할 수 있도록 문을 열어뒀대도 그들에게만 떠맡길 순 없는 노릇이다. 자체 콘텐츠가 가장 뛰어나야 한다. 그런 면에서 해먹남녀는 플랫폼보다 콘텐츠 제작사에 가깝다.

정 대표는 모바일 특성을 꿰고 있는 사람이고, 이 시장에서 UI·UX가 얼마나 중요한지 잘 알고 있다. 문제는 이 시장은 참고할만한 사례가 없단 것. 버티컬한 서비스는 더욱 그렇다. 그러니 직접 부딪혀 길이 아닌 곳도 길로 닦아내며 스스로 정답을 찾아야 한다. 어마어마한 자본력을 등에 업은 대기업이 아닌 조그만 스타트업이기에, 빠른 호흡으로 짧은 실험을 자주 벌였다. 쉽게 말해 남들보다 더 많이, 더 빨리 일했다.

처음에는 한 화면에 한 콘텐츠만을 보여주는 원 콘텐츠 디자인을 추구했다. 콘텐츠 하나하나를 더욱 부각하기 위함이다. 합리적인 추론이다. 해먹남녀 모바일 앱 디자인 실무를 맡은 장진호 디자이너(이하 장 디자이너)는 이 요구를 또 잘 반영했다. 결과물도 생각대로 나왔다. 하지만 소비자 반응은 예상에 못 미쳤다. 사용자는 오히려 원 콘텐츠 디자인에서 답답함을 느꼈던 것. 특정 콘텐츠를 보겠다는 목적성 없이 목록을 훑어보다가 원하는 걸 골라 보는 게 해먹남녀를 써먹는 맛이었던 것이다.

걱정에 빠진 정 대표는 우연찮은 기회로 만난 구글 코리아 임직원에게 속내를 털어놨다. 사용자 방문율 증대 방안과 UX 패턴에 대한 고민이다. 그때 임직원에게 ‘머티리얼 디자인’을 적용해 개편해보는 게 어떻겠냐는 제안을 받았다. 단 보름이었다. 그 짧은 시간에 사용자 앱 체류시간이 3.5배 늘었고, 다음날 재방문율을 나타내는 코호트(Cohort) 지표도 2배나 늘었다. 더 이상의 실험을 끝낼 기회가 온 것이다.


 

정지웅 대표(우) 장진호 디자이너(좌)


스타트업 생태계의 든든한 서포터

해먹남녀는 잘해서 잘 된 케이스다. 모든 스타트업이 빠르고 짧은 호흡으로 소비자 피드백에 일일이 대응하기란 쉽지 않다. 우리가 아는 스타트업 중에는 디자인 리소스가 아예 없다가 바로 얼마 전 투자를 받고 디자인 인력을 충원한 경우도 있다. 소셜미디어나 글로벌 서비스는 자체적으로 유니버설 가이드라인이 있어 거기에 맞추면 그만이지만, 한국 모바일 스타트업 대부분이 버티컬 서비스고 사용자에게 전해야 할 가치는 각각 다르다. 그만큼 참고할 예제와 사례는 한정됐다.

구글이 머티리얼 디자인을 위해 제공하는 촘촘하고 구체적인 가이드는 대형 서비스에 제약으로 다가올 수도 있다. 어떤 서비스건 규모가 비대해지면 자신의 아이덴티티를 지키려 하기 때문이다. 스타트업은 좀 다르다. 소수 인원이 짧고 빠른 호흡으로 움직이는 이쪽 생태계는 부릴 수 있는 리소스가 적은 만큼 UX 방면에 많은 투자를 못 한다. 오히려 해먹남녀 같은 버티컬 서비스는 콘텐츠나 비즈니스 모델 구축에 더욱 힘을 쏟아야 한다. 이때 구글의 머티리얼 디자인은 스타트업 생태계를 위한 든든한 서포터가 된다.

장 디자이너는 “머티리얼 디자인 가이드는 잘 정리된 교과서다. 그전에도 방법론은 있었지만 다양한 예제와 사례, 방법론을 이렇게 체계적으로 정리한 것은 머티리얼 디자인 가이드가 처음”이라며 “디자이너의 자율적 역량을 제한하는 요소로 느낄 수도 있는데, 지금의 디자이너는 자신의 디자인 감각을 보편적이고 표준화한 UI·UX에 맞출 수 있는 것까지가 능력”이라고 말했다. 교과서 위주로 공부하면 결과는 늘 좋은 법. 가이드는 그만큼 디자이너의 고민을 줄여준다.

이제 고민은 다른 데서 온다. 머티리얼 디자인은 모바일을 더욱 간결하고 단순한 디자인 추세로 몰아갈 것이다. 그렇다면 페이스북의 ‘파랑’, 에버노트의 ‘초록’처럼 포인트 컬러 말고는 비주얼 방면에서 브랜드를 차별화하기 힘들다. 장 디자이너도 동감한다. 데이터가 방대해질수록 개별 콘텐츠를 일일이 이미지화하기 힘드니 사용자가 직관적으로 인지하게끔 간결하고 단순한 비주얼을 지향하는 게 맞다. 장 디자이너는 한발 더 나아가 이 안에 브랜드 아이덴티티를 녹여야 한다고 지적한다. 해먹남녀의 포인트 컬러는 개발 단계 때 여러 논문의 결과를 분석한 후 경험적 데이터를 접목해 사람의 식욕을 가장 돋우는 주황색으로 선정한 것이다.

이렇게나 논리적인 과정으로 앱의 포인트 컬러를 고르면 유사 서비스도 결국 같은 답으로 회귀하지 않을까? 정 대표는 혹 그렇더라도 그것만으로는 브랜드 아이덴티티를 잃지 않을 것이라고 말한다. 지금은 사용자 경험, 포인트 컬러, 기능 등 모든 것이 합쳐질 때 비로소 ‘브랜드’가 완성된다. 그렇다면 간결한 디자인 트렌드가 강화될수록 모바일 서비스는 더욱더 UI·UX 개선에 힘써야 한다. 이때 머터리얼 디자인 가이드는 스타트업이 더욱 본질적인 것에 집중할 수 있도록 해준다. 해먹남녀는 콘텐츠다. UI·UX 쪽 고민은 구글이 대신 해준다.


모바일 UX 패턴의 표준으로

얼마 후 출시할 해먹남녀 iOS 앱 역시 메뉴바 위치나 홈버튼처럼 하드웨어 제약으로 인한 사소한 몇 부분을 제외하곤 머티리얼 디자인 가이드를 표준으로 삼아 제작했다고 한다. 지금은 린마케팅(Lean-Marketing)이 아니라 린유엑스(Lean-UX) 시대, 누구든 보고 참고할 수 있는 구글의 머티리얼 디자인 가이드는 구글 플랫폼에 종속된 비개방형 디자인 아이덴티티를 넘어서 모바일 UX 패턴의 표준으로 자리 잡은 것이다.

마지막으로 하고 싶은 말을 물으니 정 대표는 “비즈니스 관점으로 봤을 때 ‘모바일 비즈니스’는 빠르다. 스타트업 생태계는 원래 빠르다. 그래서 모바일 스타트업은 더욱 빠르다. 트렌드는 금방 변하기 때문에 잘할 수 있는 것에 집중해 뭐든 빨리 해내야 한다”며 “예전 스타트업은 플랫폼에 대한 거부반응이 좀 있었지만 지금은 이를 적극적으로 이용할 때다. 소셜 플랫폼을 활용한 마케팅뿐 아니라 플랫폼이 제공하는 디자인 및 UX 인사이트도 수용할 줄 알아야 한다”고 말했다. 머티리얼 디자인 가이드는 스타트업이 잘하는 것에 더욱 집중할 수 있도록 해주는 좋은 비즈니스 파트너니까.




머티리얼 디자인 적용 전 원콘텐츠 방식의 UI 구성
 


머티리얼 디자인 적용 후 

tags 디아이투데이 , ditoday , 월간웹 , 월간web , 이창민 기자 , 해먹남녀 , 바이탈힌트 , 요리 앱 , 레시피 , 머티리얼 디자인 , 정지웅 대표 , 장진호 디자이너 , 버티컬 서비스 , 머티리얼 디자인 적용 사례

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

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

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

관련기사

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

정기구독신청