머티리얼 디자인 가이드 핵심과 의의

상세페이지

  • HOME > 월별 특집 & 기획

머티리얼 디자인 가이드 핵심과 의의

머티리얼 디자인 material design

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

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

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


미래의 모바일 트렌드는 모든 것이 다 중요해진다. 디자인, 기능, 사용성에 가치와 여운까지 줘야 하는 게 앞으로의 모바일 서비스다. 마이크로와 심플을 강조하지만 이를 추구하는 일은 방대하고도 복잡하다. 이에 구글은 안드로이드 모바일 시장 생태계의 질적 풍요를 위해 자사의 디자인 가이드를 체계화하고는 만천하에 공개해 버렸다. 머티리얼 디자인 가이드를 말하는 것이다. 이날을 계기로 모바일 생태계는 요동쳤고, 이는 구글이 해낸 최고의 혁신 중 하나로 꼽힌다.

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




왜 머티리얼 디자인인가

구글의 안드로이드 모바일 시장은 애플의 그것과 달리 몹시도 파편화됐다. 똑같은 안드로이드 스마트폰이더라도 삼성의 갤럭시와 샤오미의 홍미는 너무도 다른 제품이다. 애초에 모든 걸 열어두는 것이 구글의 방침이지만 입김이 최소한은 먹힐 만큼 통제할 필요는 있다. 자칫하면 제조사에서 안드로이드를 ‘이용’만 할 뿐, 구글이 안드로이드를 ‘활용’할 수 없게 될지 모르니까.

문제는 더 있다. 모바일 시장의 후발주자였던 구글은 빠른 성장을 위해 애플의 폐쇄적인 앱 마켓과 달리 개방형 정책을 구사했다. 애플의 앱 등록 절차가 몇 주라면 구글은 몇 시간이다. 이에 안드로이드 앱 마켓은 빠르게 비옥해졌지만, 곧 통제나 관리를 할 수 없을 정도의 밀림으로 변하고 말았다. 앱 간 디자인과 인터페이스의 통일성은 기대조차 못 했다. 하지만 사람들은 좀 더 안정적이고 일관된 사용자 경험을 제공받길 원했다. 애플이 줄곧 밀어온 가치다. 24시간 내내 쥐고 있는 이 기계만큼은 집안 구석에 처박힌 PC처럼 쉬이 대하고 싶지 않았던 것이다.

구글도 노력했다. 꼭 필요한 앱은 자체 서비스로 제공했고, 제조사를 돌아가며 간택해 안드로이드 레퍼런스 기기인 넥서스를 만들어왔다. 하지만 부족했다. 예쁘질 않았다. 쓰고 싶지 않은 서비스로 사용자 경험을 통제할 순 없었다. 구글은 조용하게도 이를 해결할 방법을 강구했다. 그것이 바로 ‘머리티얼 디자인(Material Design)’이다. 머티리얼 디자인은 구글이 안드로이드의 사용자 경험을 통합하기 위해 디자인, 인터페이스, 그리고 UX까지 세밀하고 촘촘하게 재단하고 계산해 만든 디자인 정책이자 방법론이다. 이것은 가히 혁신이다. 지금의, 그리고 앞으로의 모바일 트렌드를 모두 꿰뚫은 디자인 및 모바일 UX 혁신 말이다.


 

[사진 01] 머티리얼 디자인은 진짜 종이를 오리고 붙이는 과정으로 탄생했다  


머티리얼 디자인의 의의

모바일 시대가 열린 이래 인터페이스의 화두는 어떻게 콘텐츠를 모듈화할 것인가였다. 이때 MS는 윈도우 8에서 완전한 플랫 디자인에 도전했고, 모바일 뉴스큐레이션 서비스 플립보드(Flip Board)는 카드뷰 디자인을 구사했다. 시간이 지나 둘 다 정답은 아닌 것으로 결론 났지만 그 숭고한 시도는 머티리얼 디자인에까지 영향을 미쳤다.

그럼 모듈화 방식은 왜 필요할까? 데스크톱의 마우스 기반 GUI에서 터치 UI로 인터페이스 패러다임이 변했기 때문이다. 엄지와 검지로 조작하는 스마트폰의 터치 디스플레이는 작게 나열된 버튼을 누를 요량이 없으니, 모든 메뉴는 콘텐츠를 품고 커져야 한다. 두 번째로 모바일 콘텐츠가 삽시간에 기하급수적으로 쌓인 탓도 있다. 페이스북 타임라인에 하루에도 수백 개씩 올라오는 포스트에 모두 디자인을 입힐 순 없다. 디자이너도 힘들고 그걸 보는 사용자도 피곤해진다. 콘텐츠가 많을수록 조립 및 분리가 자유로운 모듈 방식이 훨씬 이롭다.

머티리얼 디자인은 윈도우 8의 플랫 디자인과 플립보드의 카드 뷰 디자인을 결합한 ‘카드 UI’를 디자인의 중심축으로 삼아 지금의 방대한 가이드로 확장·발전시켰다. 모바일 시대가 열리고 모두가 막연히만 알고 있던 카드 UI를 논리적으로 재구축해 하나의 완성된 방법론으로 만들어 놓은 것이다. 이제 서로 머릿속에 있는 그것을 힘겹게 꺼내며 뜬구름 잡을 필요 없이 ‘안드로이드 디자인 서포트 라이브러리(goo.gl/v15tJ1)’에 가면 하늘까지 맑아진다.

머티리얼 디자인은 많은 걸 바꿔놨다. 안드로이드 스마트폰이 아이폰만큼 예뻐졌다. 머티리얼 디자인을 적용한 구글 캘린더와 이메일을 한 번 열어보자. 사용성의 진일보다. 메뉴와 버튼의 위치부터 디자인 색감까지, 머티리얼 디자인 하나로 안드로이드는 더욱 편리하고 쓰고 싶은 모바일 서비스가 됐다. 더욱 중요한 변화는 서드파티 앱 제조사에게 따를 가치가 충분한 표준이 생겼단 것이다. 이는 안드로이드 플랫폼 내 콘텐츠 품질의 상향 평준화를 뜻한다. 본 특집은 머티리얼 디자인의 핵심 가치를 여기서 찾는다. 그 좋다는 머티리얼 디자인이 실제로 무엇을 어떻게 변하게 만들었느냐는 것이다. 그 전에, 머티리얼 디자인 가이드의 주요 원칙을 복습해보자.


하나.
입체적인 표면  UI를 구성하는 표면(이를 머티리얼(Material)이라 부른다)들은 다양한 높낮이를 가질 수 있다. 높낮이는 표면 뒤 은근한 그림자로 확인한다. 즉, 완전한 평면 디자인이 아니라 플랫 머티리얼을 쌓아 만들었다는 것이다. 완벽한 평면을 지향했던 윈도우의 플랫 디자인에서 겪은 혼란을 줄이기 위함이다. 이에 머티리얼 디자인은 ‘플랫 2.0’이라고도 불린다. 여기서 사용자는 입체감을 느끼며 전체 UI의 계층을 쉽게 파악할 수 있다.

사용자의 인터랙션을 필요로 하는 가장 중요한 머티리얼은 맨 위에 위치한다. 모든 그림자는 남동쪽 45도 각도를 유지해야 하고 그 길이도 정해졌다. 하나의 화면에 10개 이상의 그림자가 져선 안 된다. 복잡하기 때문이다. 특정 콘텐츠가 화면 끝이나 다른 표면 아래로 이동하는 인터랙션이 있을 경우, 콘텐츠를 담은 표면 자체가 움직인다는 걸 알 수 있도록 가장자리나 표면 아래에 그림자를 표시한다. 우리가 콘텐츠가 아닌 머티리얼 단위로 조작한다는 경험을 심는 것이 포인트다. 둘.
일관된 컬러 조합  머티리얼 디자인에서 스마트폰 화면은 디지털 종이다. 이 위를 수놓는 컬러는 디지털 잉크다. 전통적인 인쇄물 디자인과 같이 색상과 이미지, 구조적 여백이 중요하다. 머티리얼 디자인 적용 전 스마트폰 화면이 종이 신문이었다면, 지금은 월간 웹과 같은 잡지가 된 것이다. 각 앱이 브랜딩을 위해 구사하는 컬러 팔레트는 강조 색이 무엇이냐에 따라 기본색 조합이 결정된다. 강조 색과 기본색은 대비를 이뤄야 하는데, 예컨대 기본색이 파랑일 때 강조 색은 네온 핑크가 된다. 그 외 상세한 컬러 팔레트 조합은 머티리얼 디자인 가이드를 참고하자. 왜냐면 지면에 싣기엔 지침이 너무 많다.

셋.
시각적 연속성을 주는 모션  모든 모션은 사용자에게 시각적 연속성을 제공해야 한다. 사용자가 현재 벌어지는 인터랙션이 뭘 뜻하는지 알아챌 수 있도록 하기 위함이다. 이에 모든 요소는 갑자기 나타나거나 사라지지 않고 자연스러워야 한다. 좌측 아래 카드를 누르면 우측 위로 조금씩 커지며 나타나는 식이다. 이것을 ‘Hero 전환’이라 부른다. 안드로이드 폰을 쓰다 종종 발견하는 잔물결 효과는 터치가 일어난 자리에서 시작해 주변부로 퍼진다. 그 지점을 터치했다는 피드백을 주기 위함이다. 역시나 더욱 구체적인 사항은 가이드를 참조하자.

넷.
반응형 디자인과 UI 패턴  머티리얼 디자인은 모바일 안에서의 사용자 경험 통합을 넘어 멀티 디바이스 시대의 경험 연속성을 추구한다. 각 디자인 요소는 스마트폰, 태블릿PC, 랩톱, 데스크톱, TV, 웨어러블 기기까지 어떤 스크린에서든 사용자에게 통일성을 줘야만 한다. 그것이 어떻게 가능할까? 머티리얼 디자인에서의 ‘머티리얼’은 모듈 형태의 콘텐츠 단위와 일치한다. 화면 크기에 따라 이 모듈을 어떻게 배치할 것인지 로직을 짜둔 것이다. 디자이너는 이에 맞춰 디자인하면 그뿐이다. 이렇듯 머티리얼 디자인은 완벽한 반응형 디자인이길 꿈꾼다. 화면의 크기, 가로·세로 회전 여부에 따라 앱 UI가 알맞게 변경되는 것. 지금 구글은 웹사이트까지도 반응형 트렌드를 따르지 않으면 검색엔진의 상위 노출을 제한하고 있다. 안드로이드 점유율이 과반수를 차지하는 한국이 머티리얼 디자인 가이드를 따를 또 다른 이유다.


 

[사진 02] 멀티 디바이스에 완벽히 대응하는 반응형 디자인을 꿈꾼다 




[사진 03] 얼핏 평평해보이지만 모든 머티리얼은 차곡히 쌓여있다

tags 디아이투데이 , ditoday , 월간웹 , 월간web , 이창민 기자 , 머티리얼 디자인 가이드 , 머티리얼 디자인 , Material Design , 구글 , 안드로이드 , 모바일 앱 , , 앱 디자인 , 앱 개발 , 카드 뷰 , 플랫

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

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

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

관련기사

최신뉴스
월별 특집 & 기획
모바일 앱은 위기인가?
월별 특집 & 기획
반짝이는 점들을 잇다, 반응형 웹사이트 빌더 ‘크리에이터링크’
월별 특집 & 기획
머티리얼 디자인 가이드 핵심과 의의
월별 특집 & 기획
기존 사용자들을 위한 이밥차의 현명한 투자
월별 특집 & 기획
기능에 브랜드를 부여하는 리멤버 앱 머티리얼 디자인 리뉴얼 과정

정기구독신청