Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Material Design
Code

메터리얼 디자인 팁

by
Difficulty:IntermediateLength:MediumLanguages:

Korean (한국어) translation by JuneHo Suh (you can also view the original English article)

도입

지난 몇달 동안, 메터리얼 디자인은 크게 성장했습니다. 콘텐츠 카드나 향상된 애니메이션 등 메터리얼 디자인의 여러 구성 요소들을 오늘날 우리가 사용하는 많은 어플리케이션에서 찾아볼 수 있습니다.

많은 블로그에서 다루었듯이, 메터리얼 디자인의 성장을 긍정적으로 보는 시선이 있습니다. 이는 메터리얼 디자인을 이용하면 솔리드 디자인을 더 쉽게 제작할 수 있기 때문입니다. 반면에, 모두가 비슷한 스타일을 사용해 독창성이 부족하다며 비판하는 목소리도 있습니다. 게다가, 좋은 디자인 언어를 사용하는 것이 그 언어를 올바르게 적용하고 있다는 것을 의미하지는 않습니다.

이 튜토리얼에서 메터리얼 디자인의 개념을 알아보고 더 나은, 동시에 비주얼 스타일이 더 뚜렷한 인터페이스를 제작하는 법을 알아볼 것입니다. 또한 메터리얼 디자인을 시작하기 전에, 몇몇 일반적인 팁을 알아볼 것입니다.

기반으로서의 메터리얼 디자인

처음으로, 그리고 최우선으로 인터페이스 디자인을 메터리얼 디자인에서 시작하는 것은 비난받지 않아야 합니다. 전혀요. 사실 메터리얼 디자인은 안드로이드 유저에게 어울리는 기반 설정을 돕습니다.

좋은 사용자 경험을 설계할 때, 있는 것을 다시 만드는 것은 일반적으로 권장되지 않습니다.

표준을 이용해 작동하는 무언가를 작업하고 있다는 것을 보장할 수 있습니다. 인터페이스의 구조와 인터페이스의 상호 작용은 작동이 보장되어있습니다. 그렇긴 하지만, 그것이 에러가 없고, 더 이상 개선될 수 없다는 의미는 아닙니다.

디자인에서 카드 사용

An Example of a Card Design
카드 디자인의 예

메터리얼 디자인의 가장 중요한 부분은 콘텐츠 카드의 이용입니다. 이제, 카드는 명백히 매우 많은 상황에서 사용할 수 있는 매우 유용한 디자인 패턴인 구성요소 입니다. 동시에, 더 흥미로운 디자인 대체제가 있는 지 생각해보는 것은 좋은 디자인 도전 과제가 될 수 있습니다. 카드 기반 디자인이 점점 더 많이 사용되는 상황에서, 어떻게 무언가를 더 낫게 디자인할 수 있는 지 생각해 보는 것은 좋은 일입니다.

달력을 예로 들어봅시다. 각 일정을 위한 카드를 가진 하루 단위의 리스트 대신, 어떻게 Sunrise가 일별과 월별 모두를 합쳐 보여주는 지에 유의하십시오.

The Combination View in Sunrise
좌측: 메터리얼 디자인 달력 개념; 우측: Sunrise

영감을 받기 위해 독특한 인터페이스를 찾고 있다면 게임은 또다른 훌륭한 영감의 원천이 될 수 있습니다. 영감을 받기 위해 신선하고 새로운 인터페이스 타입을 보길 원한다면 UIMovement와 같이 영감을 주는 웹사이트를 방문해보십시오.

인터페이스를 구축할 때, 콘텐츠 카드가 가장 최적인 해법일 것인가 아니면 더 나은 해법일 수도 있는 콘텐츠를 표시하는 흥미로운 다른 방법이 있는가?

각 앱은 문제를 그 앱 고유의 독특한 방법으로 해결하려 합니다. 이런 상황에서, 자신의 해법이 다른 종류의 인터페이스를 필요로하는 것이 말이 될지도 모릅니다.

그렇다면, 어떻게 진행할까요? 모든 것은 콘텐츠와 탐색에서 시작합니다. 이 둘은 아래에서 더 자세하게 다룰 것입니다.

부유 액션 버튼에 유의하십시오.

The Floating Action Button
Google의 Inbox에서 볼 수 있는 부유 액션 버튼의 예

메터리얼 디자인이 도입한 또다른 디자인 패턴은 부유 액션 버튼입니다. 부유 액션 버튼은 인터페이스에 액션을 두드러지게 표현하는 훌륭한 방법입니다. 동시에, 부유 액션 버튼은 최악의 디자인 메커니즘이 될 수도 있습니다. 부유 액션 버튼을 잘못 사용하는 수 많은 방법이 있습니다.

  • 하나 뿐이 아닌 여러가지 핵심 사용자 액션을 가진 부유 액션 버튼을 사용
  • 부유 액션 버튼에 메뉴를 감춤
  • 중요한 디자인 요소 차단/방해

개인적으로, 저는 부유 액션 버튼이 상품에 훌륭하게 사용되는 많은 사례를 봤습니다. 대부분의 사례는 사용자를 위한 하나의 핵심 상호작용을 가지고 있습니다. 메시지 앱이 훌륭한 예입니다. 부유 액션 버튼이 사용자가 새로운 메세지를 작성할 수 있도록 합니다. Uber 역시 부유 액션 버튼이 잘 맞는 또다른 훌륭한 예입니다. 이 상품의 핵심 상호작용은 차를 부르는 것입니다.

이 기법은 주의 깊게 사용해야 하며 자신 상품의 문맥 상 어울리는 지를 따져봐야 합니다. 이것은 부유 액션 버튼이 앱에 잘 어울리는 표준 인터페이스 요소이기 때문은 아닙니다. 더 복잡한 상품, 사용자가 자주 여러가지 액션을 취하는 상품에서, 부유 액션 버튼은 잘 어울리는 경우가 적습니다.

사용자 전환 & 유지 전략

메터리얼 디자인이라는 시작하기에 강력한 디자인 방향을 사용할 때, 가끔 디자인을 시작하기 전에 전략적 기반을 까먹기가 꽤 쉽습니다. 어떻게 메터리얼 디자인에서 무엇을 사용할 수 있고 무엇을 향상 시킬 수 있는 지 결정할 수 있을까요?

특정한 디자인 선택, 예를 들어, 콘텐츠 카드를 이용하는 것은 초기에 자신을 제한할지도 모릅니다.

아래는 어떠한 종류의 디자인 결정을 내리기 전에 잘 정의되어야 하는 애플리케이션의 특정한 요소에 관한 간략한 체크리스트 입니다.

자신이 만들고자 하는 것이 무엇인지 더 잘 이해하기 위해 알 맞은 질문을 자신에게 묻고, 더 잘 작동하는 인터페이스를 제작할 수 있는 것을 기초로 하십시오.

탐색

  • 상품에서 가장 중요한 사용자 액션은 무엇인가?
  • 어느 화면에서 그 액션이 발생하는가?
  • 상품의 흐름도가 어떻게 생겼는가?

마지막으로, 제가 상품의 탐색을 구성할 때 명심하려 하는 두 가지 간단한 규칙이 있습니다.

규칙 1: 80/20

80/20 규칙을 적용하십시오. 80%의 사용자는 전체 기능 중 20%만을 이용할 것입니다. 어떻게 그 20%의 기능이 상품에서 가장 접근하기 쉽다고 보장할 수 있을까요?

규칙 2: 일관성

상품의 어느 화면에 접근하는 여러 방법이 있을 때, 매우 일관된 방법으로 접근할 수 있게 보장하십시오. 예를 들어, 오버뷰 화면에서 세부사항 화면으로 이동하는 것은 같은 방식으로 발생해야 합니다.

위를 기초로 하여, 사용자가 상품을 탐색하는 가장 최적의 방법이 무엇일지 결정할 수 있습니다. 수 많은 선택지를 가진 복잡한 상품이라면, 서랍 (drawer) 이 알맞은 선택일 것입니다. 단순한 상품이라면? 탭을 사용하는 것은 일반적으로 해답입니다. 탐색과 메터리얼 디자인에 대한 더 많은 정보로서, browsing the Material Design guidelines (메터리얼 디자인 탐색) 을 권장 합니다.

콘텐츠

Music App Concept
Dribbles에서 찾은 이 음악 앱 컨셉은 다양한 종류의 컨텐츠를 다루는 예입니다.

모든 앱은 콘텐츠를 가지고 있습니다. 다음 질문들은 디자인 관점에서 어떻게 콘텐츠를 구성하고 표시할 것인지 결정하는 것을 도울 것입니다.

  • 어떤 종류의 콘텐츠가 있는가?
  • 얼마나 많은 수준의 콘텐츠를 가지고 있는가 (예로, 오버뷰 화면과 그에 따른 세부사항 화면, 그리고 액션 화면)?
  • 각 콘텐츠 타입의 일반적인 길이는 어느 정도인가?
  • 이 콘텐츠를 표시하는 최적의 방법은 무엇인가? 그 방법이 리스트인가? 아니면 슬라이드쇼인가? 그것도 아니라면 뭔가 더 독특한 것인가?

일단 한번 콘텐츠를 파악하면, 디자인 결정을 내리는 것이 훨씬 쉬워질 것입니다. 그 때가 카드를 이용하는 것이 어울릴지 혹은 더 낫거나 더 흥미로운 대체제가 있는 지를 정의할 수 있는 순간입니다.

다른 종류의 사용자들을 먼저 넣기

직면할 수 있는 가장 큰 디자인 도전 과제는 다음과 같습니다.

어떻게 어플리케이션이 복귀 사용자 및 신규 사용자에게 동일하게 만족스러울 것이라 보장할 것인가? 이것이 어떻게 내 콘텐츠와 탐색에 영향을 미치는가?

이것은 어려운 도전 과제이며 자주 효율적인 온보딩과 상품의 주 화면이 사용자에게 가장 가치있는 화면이라 보장하는 것으로 설명됩니다. 예제가 필요한가요? 다음 상품들을 살펴 보십시오. 그 상품들의 주 화면이 무엇이며 주 화면이 제공하는 가치가 무엇인가요? 그 상품들이 사용자 온보딩에 어떻게 접근했나요?

  • Instagram
  • Facebook
  • Espresso by The Economist

위 상품들은 어느정도의 영감을 줄 것입니다. 처음부터 이것이 벅차게 느껴지더라도 낙담하지 마세요. 위 상품들은 현재처럼 되기 위해서 여러번의 반복을 거쳤습니다.

온보딩은 그 자체로서 주제입니다. 값비싼 통찰을 제공하는 몇몇 자료들, 예를 들어 User Onboard같은 것을 확인하는 것을 권장합니다.

인터페이스 향상

이제 어떻게 상품이 근본적으로 작동하는 지에 더해 메터리얼 디자인에서 사용가능한 요소들에 대해 잘 알게되었으니, 이제 약간 맛을 돋굴 차례입니다. 앱을 심미적으로 향상시킬 다양한 방법이 있습니다. 그 중 일부가 아래에 나열되어있습니다.

타이포그래피

폰트 선택은 상품의 룩앤필(look and feel, 외양과 느낌)에 엄청나게 기여합니다. 커스텀 폰트를 고르는 것은 더 다양한 디자인을 만들고 큰 변화 없이 상품에 독특한 룩앤필을 적용하는 것을 강력하게 돕습니다.  알맞은 폰트를 찾는 것은 어려울 수 있으며 그 중 대부분은 또한 디자인 취향으로 설명됩니다. 개인적으로 좋아하는 리소스는 Typewolf입니다.

아이코노그래피

Dropbox Iconography
Dropbox는 상품 전역에 커스텀 아이콘과 일러스트를 적용한 훌륭한 예입니다.

커스텀 아이콘을 넣는 또다른 방법은 커스텀 룩앤필을 어플리케이션에 삽입하는 것입니다. 커스텀 아이코노그래피를 사용하는 것은 메터리얼 디자인이 훌륭한 표준을 만들었기에 어렵습니다. 아이콘에 대해서, 이것은 특정한 액션, 탐색 그리고 다른 요소들이 같은 아이콘을 가진다는 것을 의미합니다.

자신만의 아이콘들로 작업하기로 했다면, 상기해야할 중요한 두가지 측면이 있습니다.

  • 인식할 수 있음: 사람들이 각 아이콘이 무엇을 내포하는 지를 이해할 수 있도록 하십시오.
  • 일관성: 일반적으로, 여러 집합의 아이콘들을 합치는 것은 피해집니다.

비주얼 에셋

Timehop
Timehop은 뚜렷한 룩앤필을 만들기 위해 커스텀 일러스트를 이용한 훌륭한 예입니다.

사진 콘텐츠를 어떻게 표시할 것인지 혹은 일러스트의 사용은 앱에 쉽게 특징을 더할 수 있습니다. 창조적이십시오.

독특한 애니메이션 & 상호작용

Unique Animations Interactions
이것은 독특한 애니메이션과 그에 상응하는 상호작용의 예입니다. 출처.

커스텀 애니메이션과 상호작용은 노력이 많이 필요하지만, 이것이 상품에서 살아움직이는 것을 보는 것은 흐뭇한 일입니다. 바로 작동하는 독특한 인터페이스 위에 건설된 독특한 애니메이션은 온라인에서 찾을 수 있는 가장 흐뭇한 디자인 작업 중 하나입니다.

독특한 색상 스키마

Stocks App Design Concept
이 디자인은 예상하지 못한 색상을 메터리얼 디자인 컨셉과 함께 이용합니다. L 출처

메터리얼 디자인은 훌륭한 색상표를 제공합니다. 그것이 뭔가 정말로 독특한 것을 만들기 위해 색상을 이용하는, 창의적 활동을 할 수 없다는 것은 아닙니다.

경고의 말

우리가 매일같이 보는 대부분의 인터페이스가 꽤 단순한 디자인인 이유는, 그것이 작동하는 것이 입증되었고 사용자들이 사용하면서 친근하게 느끼는 것이기 때문입니다.

실험적인 디자인은 앱을 훼손할 수 있습니다.

그렇긴 하지만, 약간의 조정, 예를 들어, 단지 타이포그래피와 색상에만 집중한다면, 앱을 위해 독특한 무언가를 오래 디자인할 수 있습니다. 

결론

메터리얼 디자인은 디자인 문제에 봉착했을 때 편안한 대비책을 만들어줬습니다. 그 때까지는, 인터페이스가 어떻게 작동해야할지에 대해 다시 생각할 수 있는 창의적인 자유가 주어졌습니다. Snapchat은 제스쳐 중심 상품을 만들었고, Facebook Paper (iOS)는 계층과 애니메이션을 다시 생각했고, Medium은 단지 읽는 것 (과 쓰는 것) 에만 집중하기 위해 인터페이스를 효율적으로 줄였습니다.

그것을 기억하고, 가서 디자인하세요. 어떠한 의견이나 질문이라도 있나요? 그것을 의견란에 남기거나 Twitter에서 저를 만나세요.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.