brunch

매거진 UX 디자인의 모든 것

라이킷 52 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Aug 30. 2016

머티리얼 디자인 6가지 팁

UX 디자인 배우기 #23

Today UX 아티클

Evato에 게재된 Jake Rocheleau의 글 MaterialDesign Tips & Techniques in Web Design을 소개하고자 합니다.

구글의 머티리얼 디자인 언어는 UI 디자이너들이 인터페이스를 만드는 방식을 바꾸었다고 합니다. 이글에서는 사례를 통해 일부 머티리얼 디자인 트렌드를 살펴보며 이를 웹에 어떻게 적용할 수 있는지 얘기합니다. 머티리얼 디자인의 기본적인 핵심을 이해하고 나면, 모든 디지털 인터페이스에 같은 기능을 적용할 수 있을 것이라고 합니다.

뚜렷하게 구별되는 플랫 요소

머티리얼 디자인에서 가장 먼저 눈에 들어오는 것은 전반적으로 플랫 컬러와 플랫 아이콘을 사용하는 것이라고 합니다. 주요 및 강조 색을 이용해 레이아웃에 깊이와 대비 효과를 준다고 합니다.

그렇다고 전부 플랫 디자인으로 하지는 않고 일부는 그림자를 주어 아이템이 부각되는 효과도 준다고 합니다. 예를 들어 아래 KUPON의 레이아웃을 보면 페이지 전반에 걸쳐 밝은 버튼에 그림자 효과를 준 것을 확인할 수 있다고 합니다. 그림자는 매우 미묘하지만 인지 가능하여 버튼에 깊이감을 부여했다고 합니다. 또한 전반적인 색상과 대비되는 오렌지 색 버튼을 활용하여 방문자의 눈길을 성공적으로 끌었다고 합니다.

아래 NRGHostMaterial의 레이아웃도 마찬가지로 플랫 컬러를 많이 사용하고 플랫 컬러에 의존한 페이지 블록과 함께 그림자 효과를 사용하였다고 합니다.

리플 애니메이션(Ripple Animation)

훌륭한 머티리얼 디자인 경험을 위해서는 작은 마이크로 인터랙션이 매우 중요하다고 합니다. 마이크로 인터랙션은 현실에서의 법칙을 복제하면서도 인터페이스에 생명을 불어넣어 준다고 합니다. 이 글에서는 마이크로 인터랙션 중에서도 가장 흔한 리플(ripple) 애니메이션에 주목합니다. 리플이란 잔문결이라는 뜻으로, 리플 효과는 클릭하면 물결이 퍼지듯이 색상 등이 변하는 효과를 뜻합니다.

Skillfully WordPress 테마가 머티리얼 리플을 보여주는 모범사례라고 합니다. 왼쪽 상단의 햄버거 버튼을 누르면 왼쪽에 메뉴가 뜨면서 우측의 페이지는 어둡게 처리되어 클릭 가능한 영역임을 명확히 보여줍니다. 메뉴 중 하나를 클릭하면 리플 효과가 생기면서 선택된 메뉴의 배경 색이 바뀝니다.

구글 머티리얼에서는 이 애니메이션을 ‘반동 리액션(radial reaction)’으로 정의한다고 합니다. 리플 효과는 버튼과 인터랙티브 요소에만 쓰이고, 페이지 상의 링크에는 거의 쓰이지 않는다고 합니다. 페이지에 있는 링크에 쓰면 다른 요소들보다 지나치게 눈에 띌 수 있기 때문이라고 합니다.

아래 사례에서는 위에서 봤던 리플 효과를 이용하지 않지만 다른 방식으로 비슷한 효과를 줬다고 합니다. 상단에 있는 메뉴에 마우스를 올릴 때 해당 메뉴의 세부 메뉴가 뜨는 ‘반동 리액션’을 적용한 사례라고 합니다.

탭을 활용해 콘텐츠 보여주기

원래 네이티브 앱에서 공간 절약과 사용성 개선을 위해 콘텐츠를 보여줄 때 탭(tab)이 많이 사용되었지만, 반응형 디자인이 부상하면서 웹사이트에서도 탭을 활용의 이점이 많아지고 있다고 합니다. 탭을 이용해 콘텐츠를 보여주면 다른 페이지를 로드하지 않고도 관련 콘텐츠를 볼 수 있으며 쉽게 왔다 갔다 할 수 있다는 장점이 있다고 합니다.

아래 사례를 보면 메뉴 리스트를 앙뜨레, 메인 코스, 디저트 등 3 개의 탭으로 보여주고 있습니다. 이렇게 하면 방문자가 새로운 페이지로 들어가지 않고도 모든 메뉴를 볼 수 있다고 합니다.

보통은 최소 세 개의 탭을 사용하지만, 데스크톱 환경에서는 3개 이상의 탭을 넣는 것이 가능하다고 합니다. 활성화된 탭에는 언더라인 효과와 하이라이트 색상이 들어가야 한다고 합니다. 그래야 활성화된 탭이 눈에 잘 들어오고, 머티리얼 디자인 유저들에게 모든 웹사이트에서 따라가면 되는 명확한 패턴을 보여줄 수 있다고 합니다.

특히 탭으로 콘텐츠를 보여주는 방법은 한 페이지에 복잡한 내용을 보여줘야 하는 웹앱에 적합하다고 합니다. 다음 사례는 대시보드의 “서버”페이지로, 탭을 활용해 그래프 데이터를 4가지로 볼 수 있게 만들었다고 합니다.

하지만 이 디자인을 적용하기 전에 왜 필요한지, 무슨 문제를 해결하려고 하는지 고민해봐야 한다고 합니다. 탭을 이용해 한 페이지에 모든 콘텐츠를 집어넣을 수 있다면 아주 간단한 해결 방법이 되겠지만, 탭 안에 또 다른 탭을 만들어야 한다면 따로 페이지를 만드는 것이 더 낫다고 합니다.

깊이 표현을 위한 그림자

대부분의 머티리얼 디자인은 플랫 디자인 원칙을 따르지만 그림자 효과를 통해 레이아웃에 공간적 거리를 부여할 수 있다고 합니다. 현실에서도 거리감을 통해 무엇이 더 가까이 있는지 느끼기 때문에, 그림자 효과를 주면 대상이 메인 스크린과 같은 레벨이 아닌 “위에” 있는 것처럼 보인다고 합니다. 액션을 취할 수 있는 요소나 관심을 끌었으면 하는 요소 등 “위에” 있는 것처럼 보여주고 싶을 때 활용하면 된다고 합니다.

예를 들어 아래 사례에서 우측 하단에 보이는 탑 버튼은 스크롤을 내릴 때 고정되어 있으면서도 그림자 효과를 주어 위에 있는 것처럼 보여 눈에 띈다고 합니다.

또는 다음 사례의 우측 하단에 있는 아이콘은 마우스를 올리면 여러 내비게이션이 나오는 아이콘인데 역시 그림자 효과를 주어 강조했다고 합니다.

이 사례에서는 왼쪽에 “John Doe”라고 적힌 유저 네임 부분을 클릭하면 나오는 드롭다운 메뉴에 그림자 효과를 주었다고 합니다.

숨겨진 플라이아웃 메뉴

많은 디자이너들이 햄버거 메뉴에 대해 논쟁을 벌여왔지만, 햄버거 메뉴는 살아남았다고 합니다. 유저가 햄버거 메뉴를 어떻게 이용하는 것인지 학습했기 때문이라고 합니다. 햄버거 메뉴는 이제 ‘내비게이션을 보여준다’는 상징이 되었기 때문에 반응형 웹사이트에서 플라이 아웃 메뉴를 햄버거 아이콘에 연결하여 많이 사용하고 있다고 합니다.

플라이 아웃 메뉴는 아래 사례처럼 플로팅 액션 버튼을 이용해 보이기도 한다고 합니다. 버튼을 클릭하면 사이드 내비게이션이 나오면서 전체 페이지에는 어두워지는 효과를 주어 내비게이션으로 주의를 끈다고 합니다. 구글은 이런 메뉴를 ‘내비게이션 서랍(navigation drawer)’라고 부른다고 합니다.

글쓴이는 내비게이션 서랍이 모든 웹사이트에 가장 좋은 방법이라고 생각하진 않지만, 아래와 같이 내비게이션 항목이 매우 많을 때는 좋은 방법이라고 합니다.

간결한 머티리얼 아이콘

구글 머티리얼 디자인에서는 아이콘을 크게 두 가지 카테고리, 즉 프로덕트 아이콘과 시스템 아이콘으로 나눈다고 합니다.

프로덕트 아이콘은 브랜드의 제품이나 서비스 툴을 시각적으로 표현한 아이콘으로 그림자 효과를 주거나 현실에서 따와서 그린다고 합니다.

반면 시스템 아이콘은 파일, 기기, 디렉터리 등을 표현한 아이콘으로 주로 평평하면서도 간결하게 디자인하고 한 가지 색상으로 그려진다고 합니다.

프로덕트 아이콘은 웹사이트 디자인엔 별로 쓰이지 않고 주로 애플리케이션 아이콘이나 브랜딩에 사용한다고 합니다. 웹디자인에서 주로 사용되는 것은 시스템 아이콘으로 아래 사례를 보면 왼쪽에 내비게이션에 있는 각 아이콘은 해당 링크가 무엇인지 설명해주는 역할을 한다고 합니다. 또는 상단에 있는 햄버거 아이콘이나 기어 아이콘은 흔히 사용하는 아이콘이어서 어떤 기능인지 쉽게 인지할 수 있다고 합니다. 구글에서 제공하는 머티리얼 아이콘 도큐멘테이션(링크)을 따라 디자인해보면 일관성 있는 아이콘 디자인에 도움이 될 것이라고 합니다.