구글 머티리얼 디자인을 읽고 기억에 남는 10가지

Google Material Design 리뷰

디자인 가이드는 보자 보자 하면서도 항상 미루게 된다. 당장 업무가... 시간이... 하며 미루고 pxd 포스팅으로 위로하며.

그러다 한 번 카페에서 ken오빠 디자인 작업하는 거보다 뽐뿌 받아서 구글 머티리얼 디자인(https://material.google.com/)완독(?)했다. 그냥 순서대로 주욱 읽음. 회사에서 스터디도 함.

그 기념으로 감상을 포함해 기억에 남는 내용들을 내 맘대로 순으로 적어본다.

01

종이

머티리얼 디자인은 이런 느낌이다. 종이를 여러 장 잘라서 올린 모습을 상상하면 된다. flat 디자인이 다 같이 플랫플랫(?)해서 경계 구분이 모호했다면 Material은 이름대로 재료들이 저렇게 제 높이에 올라가 있어서 음영의 깊이를 표현하고 기능과 영역을 구분한다.

아래는 머티리얼 디자인 방식으로 아이콘을 디자인하는 프로세스다.

종이 공작(?)으로 출발하는 아이콘 디자인  (https://material.google.com/style/icons.html)

아이콘을 만들기 위해 종이를 자르고 접고 빛을 쏘인 후 그래픽으로 단순화한다.

포스팅 커버 사진을 검색하다가 Material Design 방식으로 만든 페이퍼 제품이 있어서 이 이미지도 가져와봤다.  머티리얼 디자인이 적용된 서비스들이 실물로 만들어진다면 있다면 이런 느낌일 것이다.  

MANUAL(http://manualcreative.com/)의 프로젝트 중 Material Design의 Print ver.

'여러장의 종이 느낌'..

02

Don’t do 가이드

주로 가이드의 Don't 부분이 재밌다

Avoid making the user hunt for the meaning in the image. 사용자가 이미지의 의미를 사냥하도록(.. 찾도록) 만들지 마라.

적고 보니 내 직역 때문에 혼자 웃긴 것 같다.

아래도 혼자 실소가 나왔던 예시 (세상에 재밌는 게 없나 봄)

이 정도로 깨지는 이미지를 쓰는 건 안된다고 말해주거나

이 네비게이션 바처럼 컬러를 쓰지 말라는데... 이런 실수를 하는 게 더 힘들 것 같다.

그렇다. 난 이걸보고 재미있었다고 한다.

03

상세한 스펙 가이드

스펙 가이드는 여러 경우가 고려되어있다. 이정도로 디테일하게 설명되어 있는지는 몰랐다. 리스트를 예를 들어보면 기본 가이드도 있고, 빽빽한 버전의 가이드도 있다.

스낵바 스펙 안내에는 아래 처럼 텍스트가 한 줄 일 때 가이드와 두 줄 일 때, 액션 버튼이 텍스트 오른쪽에 위치하는 경우와 하단에 위치하는 경우도 나눠서 제시한다.

디자이너들은 이제 이런거 고민 안해도 되겠구나...했다

04

인터렉션 컴포넌트

특별히 유용했던 구간을 꼽자면 Progress&activity, snackbar, error부분이다.

Component> Progress & activity
https://material.google.com/components/progress-activity.html

Component> Snackbar
https://material.google.com/components/snackbars-toasts.html

Pattern> Error
https://material.google.com/patterns/errors.html

잘 동작하는 화면 중심으로 사용자 시나리오를 떠올리다보면 사용자와 서비스간에 디테일한 Interaction이나 사용자에게 줄 수 있는 피드백들을 놓치는 경우가 있다.

사진이 업로드 되는 동안 업로드 진행상황을 알려주는 프로그레스바, refresh 후 로딩바가 돌다가 위쪽에서 새롭게 추가되기, 삭제를 눌렀을 때 '되돌리기' 액션이 포함된 '삭제되었습니다.'는 안내 토스트 같은 것들.

사용할 땐 아무 생각없이 자연스럽게 쓰고 있지만 기획할 땐 놓치는 경우가 종종 있어서 숙지해 두려고 두 번 보았다.

05

고도개념

가이드에 컴포넌트별 높이(고도)가 잘 정리되어있다.

컴포넌트별 높이(dp)는 단면도는 이렇다.

사이트엔 표로도 정리되어있다.

상단 앱 바는 4dp 높이에, 오른쪽 하단에 있는 플로팅 버튼은 6dp높이에 있다. 하단에 내비게이션 바가 있을 경우 하단 내비게이션 바는 8dp..

이 높이들은 아래처럼 그림자에 영향을 준다.

위처럼 3개의 개체가 있다고 했을 때 오브젝트가 높이 위치할 수록 그림자는 부드럽게 퍼지고 낮을 수록 더 작게 퍼진다.

사이트에서 제공하는 와이어프레임 포을 받아보니 그림자가 일괄되게 적용되어 있었다. 디자인 진행상태일 땐 느낌만 파악하고 정확히는 개발자에게 고도와 그림자 설정을 가이드대로 해달라고 요청해야할 것 같다. (우리 앱은 가이드를 따르고 있는 게 아니어서 개발할 때 오히려 디폴트로 들어가는 그림자를 빼 달라고 한 적도 있었다.)

06

회색 텍스트 대신 오퍼시티

텍스트 색상 자체를 회색으로 하는 것이 아니라 텍스트 오퍼 시티를 조정하는 게 낫다고 한다.

흰색 배경인 경우에는 텍스트 색이 회색이든 투명도 먹은 검은색이든 별 차이가 없지만 배경이 흰색이 아닐 경우라면 얘기가 달라진다. 아래 이미지를 보면 알 수 있다.

회색 텍스트는 이렇게 처리하는 것으로 습관을 들이면 좋을 것 같다.

07

접근성을 위한 최소 기준: 아무리 아이콘이 작아도 가로세로 48dp

터치영역 부분을 보고 앱 테스트할 때가 떠올랐다. 테스트를 하다보면 종종 버튼이 잘 안 눌릴 때가 있다. 그 이유가 작은 아이콘 사이즈대로 터치 영역도 작은 경우가 많았다. 내 손가락 끝이 이따만한 면적일 수도 있따 

시력이 안 좋거나 손에 문제가 있는 사람들에게는 너무 작은 터치영역은 큰 불편함을 줄 수 있으니 아이콘이 크기가 작더라도 터치 영역은 최소 48x48 dp를 유지하라고 권장한다.

08

타임 피커 UI...

아래는 머티리얼 기본 시간 피커 인터페이스다.

시 영역(3)을 누르면 위 그림처럼 나와서 선택할 수 있다. 분(30)을 누르면 시곗바늘 끝이 시 분 단위로 숫자로 바뀌고 이를 선택하면 된다. 나는 잠시 혼란했다. (내가 현iOS유저라 덜 익숙한 것인가)

시계 피커가... 별로여서 기억에 남는다. 가이드는 권고일 뿐 정답은 아니라지만 이 부분을 보고 가이드는 맹신하지 말아야겠다는 생각을 했다. 좋은 효과였다.

09

8, 16, 24, 48, 72 - 4의 배수

하필 여기엔 12, 20 이런 숫자들이 있네...

스펙을 훑어보면 4와 8의 배수가 익숙하게 자주 쓰인다. 리스트 간 간격 4dp 혹은 8dp, 리스트 양쪽 마진 16dp, 버튼 양쪽 마진 16dp, 텍스트 필드 위아래 패딩 16dp, 버튼 높이 36dp, 리스트 세로 높이 48dp, 텍스트 필드 높이 48dp... 외우고 있다는 게 아니고 익숙한 숫자가 높이, 마진, 패딩에 쓰인다. 22, 23 같은 숫자는 없다.

자꾸 보다 보면 머티리얼 가이드를 따른 디자인을 보고 여기 마진이 몇 dp인지 맞출 수도 있다! useless?

10

검색하면 다 나옴

검색하면 다나옴

기획이나 디자인 중에 필요할 때 필요한 것만 찾아보면 되는데 생각해보니 그간 써본 적이 없다. 앞으로 고민되는 것 있으면 여서도 검색해봐야지.'했다.

또 디자이너님께 앞으로 고민되는 부분 있으면 가이드 참고해봐요라고 했다. 물론 이미 자체 기본값들이 정해져 있는 상태라 적용할 만한게 있을지는 모르겠다. 참고하면 좋을 것 같다.

되도록 가이드에서 하지말라는건 하지말아야지. (가이드 잘 지키면 피쳐드도 되니까.. 이전 앱에서 피처드 안내 메일은 받은 적이 있었는데 가이드를 벗어난 몇가지를 고쳐달라는 요청과 함께였다.)

여기까지 기억에 남는 것들을 나열해보았다. 머티리얼 룰을 적용해서 디자인을 한다면 내 콘텐츠가 어떤 스타일-레이아웃-컴포넌트-패턴에 적합한지만 판단하면 될 것 같다. 이 폰트를 13pt를 할까, 여백을 19 할지 고민하지 말고 이 화면에 무엇을-왜 올릴 것인가를 고민하는데 더 많은 시간을 쓸 수 있을 거다. (가이드에서는 본문 폰트는 14sp, 기본 양쪽 마진은 16dp를 default로 권장한다)

지금 운영 중인 앱은 우리 스타일대로 디자인한 것이라 가이드는 필요한 부분만 활용할 계획이다. 다음에 새 앱을 만들면 안드로이드는 가이드를 활용해보는 것도 괜찮을 것 같다. 색상 외에 서비스 고유의 느낌 전달은 조금 덜 하더라도 개발 시간 대비 완결성 있는 제품이 나올 것 같은 느낌적인 느낌?!

전체 가이드를 따르진 않더라도 않더라도 최소한 마진이나 타이포그래피 가이드는 지키는 게 좋다고 생각한다. 많이 대중적인 앱들 중 가이드를 지키고 있는 경우가 많다보니 사용자에게도 익숙하기 때문이다.

이어서 iOS 휴먼 인터페이스 가이드 리뷰도 할 예정이다. 각 OS 모바일 가이드를 훑을 목적으로 본 거지만 두 가이드는 이름도 스타일도 다르다. 머터리얼 디자인은 텍스트 설명에 이미지와 사례를 더했고 디자인 스펙이 더 지나칠정도로 상세하게 제시되어 있다.

결국 우리 스타일대로 디자인을 해나가겠지만 기본 가이드를 알고 그렇게 하는 것과 모르고 하는 것은 다르다고 생각한다. 기본 가이드를 알면 가이드에서 제시하는 영역 외에 더 중요한 것들에 더 많은 고민의 시간을 쓸 수 있고 그렇게하면 더 나은 우리 스타일의 디자인을 찾을 수 있을거다.  좋은데?