Google for Developers Korea Blog: 2014 구글 I/O 앱의 머티리얼 디자인

2014 구글 I/O 앱의 머티리얼 디자인

2014년 8월 7일 목요일

By Roman Nurik, lead designer for the Google I/O Android App
매년 구글 I/O에서는, 안드로이드용 I/O 앱이 두 가지 목적에서 출시됩니다. 첫 번째는 컨퍼런스 참석자들을 위한 안내 및 집에서 각자의 스케줄에 맞추어 컨퍼런스를 즐길 수 있도록 해주는 것입니다. 두 번째는, 어떻게 보면 더 중요한 목적인데, 새로운 안드로이드 디자인과 기능을 가장 잘 적용한 예제로 활용하기 위해서 입니다. 저번 주 구글 I/O 2014 앱 소스코드가 공개되어, 각각의 디자인 요소가 어떻게 구현되었는지 자세히 살펴보실 수 있습니다. 이 포스팅에서는 이번 2014년 I/O 앱의 디자인에 대해 간략히 소개해 봅니다.
이번 I/O 앱에서는 새로운 머티리얼 디자인이 적용되었으며, 합리적이고 실제 적용 가능한 안드로이드 L 개발자 프리뷰의 특징들을 살려 보여주고 있습니다. 그럼 이번 앱의 디자인 원리와 결과물에 대해 더 자세히 살펴볼까요?

표면과 그림자
머티리얼 디자인에서는 앱의 구조를 표현하는데 표면과 그림자가 중요한 역할을 합니다. 머티리얼 디자인 가이드라인에는 앱의 구성 요소를 배치할 때 참고할 수 있는 레이아웃 원칙이 포함되어있습니다. 이를 참고하면 언제 어느 곳에 그림자가 나타아야 하는지 감을 잡을 수 있는데요, 한 가지 예로 아래 스케줄 화면에 어떤 반복이 나타나는지 한번 살펴보시길 바랍니다.

예시1

예시2

예시3

첫번째 예시에는 여러가지 문제가 있습니다. 우선, 앱 바 아래 그림자로 인해 화면이 두 개의 시트로 나누어져 있는 것으로 보입니다. 이렇게 되면, 하단의 시트에는 탭 바를 포함하여, 텍스트 뷰와 같은 다양한 요소들이 추가로 포함됩니다. 시트 안의 내용물을 표시하는 “잉크" 는 가능한 단순하게 유지되어야 합니다.

예시1에서는 잉크가 단순하지 않아 시작적으로 다소 지저분 해 보입니다. 그 외 앱 바와 콘텐츠 사이에 있는 이 탭을 아예 제3의 시트로 만들 수도 있겠으나 그렇게 되면 한 화면 안에 지나치게 많은 레이어링이 들어가게 됩니다. 두 번째와 세 번째 예시는 보다 깔끔하며 잉크가 글자, 아이콘, 강조된 영역에만 쓰이도록 구현되어 있습니다.

“표면” 영역 또한 페이지의 디테일에서 중요한 역할을 합니다. 아래 예시를 보면 첫번 번째 릴리즈 버전에서 페이지 스크롤을 내림에 따라 맨 위의 배너가 세션 이미지에서 세션 컬러로 자연스럽게 바뀌는 것을 볼 수 있습니다. 또한 세센 이미지 부분의 스크롤 속도는 세션 타이틀 부분 스크롤 속도의 절반으로 시차적(parallax) 효과를 줍니다. 한 가지 문제는 머티리얼 디자인의 이런 효과가 실제 물리적 현상을 지나치게 왜곡한다는 점이었습니다. 텍스트가 슬라이딩 되면서, 마치 배경 종이의 투명도가 애니메이션 동작에 따라 바뀌는 것처럼 보였습니다.

그래서 6월 25일 릴리즈 된 업데이트 버전에서는 타이틀 텍스트가 놓여지는 표면을 분리했습니다. 이 표면은 컬러와 투명도가 동일하게 유지됩니다.스크롤을 내리기 전에 이 표면은 본문 텍스트를 담고 있는 시트와 맞붙어 경계선(seam)을 형성합니다. 스크롤을 내리기 시작하면 이 표면은 본문 텍스트 위로 올라오며, 본문 텍스트가 이 표면의 아래로 들어가도록 합니다.

이러한 정렬 방식은 머티리얼 디자인의 원리를 잘 반영하고 있으며 사용자들이 더 유기적인 비주얼, 실제적인 동작을 느낄 수 있도록 해줍니다. (코드 보기 : Fragment / Layout XML)

컬러
머티리얼 디자인의 중요한 원칙 중 하나는 인터페이스가 “선명하고(bold), 그래픽적이며(graphic), 의도적(intentional)”으로 디자인 되어야 하며, 각각의 요소들을 디자인 할 때는 출판물 디자인의 핵심 원칙을 잘 준수해야 한다는 것 입니다. 그 중 두 가지 요소는 컬러와 여백입니다.

머티리얼 디자인에서 UI 컬러 팔레트는 하나의 주요 색, 하나의 강조 색으로 구성됩니다. 앱 바의 배경색과 같이 큰 크기의 영역은 주요 색의 500 shade로 들어가고, 상태 바와 같이 작은 영역들은 700 shade처럼 더 짙은 색으로 들어갑니다. 강조 색은 사용자의 주의를 끌어야 하는 영역에 사용됩니다. 이렇게 톤을 달리한 주요 색들과 밝은 컬러의 강조 색의 병렬은, 실제 내용을 압도하지 않으면서 앱이 더 대담하고 컬러풀해 보이도록 합니다.
I/O 앱에서는 두 가지 컬러가 다양하게 활용되었습니다. 대부분의 강조 색은 Pink 500 이 쓰였고, Add to Schedule 메뉴의 경우는 좀 더 차분한 느낌의 Light Blue 500 이 쓰였습니다. (코드 : XML color definitions / Theme XML )

세션 컬러에는 각각의 디테일에 따라 다른 컬러를 사용했습니다. 우리는 일관된 밝기를 유지하고 플로팅 액션(floating action) 버튼과 세션 이미지의 최적화 된 대비 효과를 위해 기본 머티리얼 디자인 컬러 팔레트를 사용했습니다.

컬러 간 대비 효과를 보기 위해 플로팅 액션 버튼들을 모아 정렬한 세션 컬러들입니다.

밝기를 비교하기 위해 채도를 뺀 세션 컬러들입니다.

여백

우리가 생각한 “전통적 프린트 디자인”의 또다른 중요한 요소는 여백으로, 그 중 특히 키라인(keyline)에 중점을 두었습니다. 이미 수직 4dp 그리드(버튼과 간단한 리스트 아이템은 48dp, 표준 액션 바는 56dp, etc.) 를 사용하고 있지만 키라인 자체에 대한 가이드는 머티리얼 디자인에서 새롭게 추가된 내용입니다. 특히 다른 텍스트 아이템들을 키라인 2 (핸드폰에서는 72dp, 태블릿에서는 80dp)로 정렬하는 것은 깨끗하고, 용지에 인쇄된 것 같은 느낌이 스크린에서 표현되도록 해줍니다. 동시에 스크린에서 텍스트 내용을 빠르게 훑어볼 수 있도록 해주기도 하죠.

그리드

머티리얼 디자인은 “모든 경우에 적용 가능”해야 합니다.

통합적인 디자인 시스템은 상호작용과 공간을 잘 정리해 줍니다. 동일한 디자인 시스템이 각각의 기기에 맞게 재단되고 적절한 상호작용이 적용되어 사용자들에게 보여집니다. 컬러, 아이콘, 정렬 방식, 공간 활용은 그대로 유지되어야 합니다.

현재 I/O 앱의 많은 스크린들은 여러 세션을 모아서 보여주고 있습니다. 이 여러 세션을 보여주는 데에 있어서 카드. 리스트, 그리드가 사용되었습니다. 본래는 카드 방식이 주로 사용되었으나 세션들이 비슷한 콘텐츠들을 포함하고 있기 때문에 카드는 부적절한 방법이라고 판단했습니다. 카드의 가장 자리의 그림자는 지나치게 많은 시각적 효과를 주었고 시각적으로 콘텐츠를 분류해서 보여주지 못했기 때문입니다. 이런 경우 그리드가 더 적절한 방법입니다. 스크린 사이즈에 따라 행렬을 다양하게 정리할 수 있고 (코드) 텍스트와 이미지를 원하는 자리에 배치해 공간을 자유롭게 사용할 수 있습니다.

세심한 디테일

2014 I/O 앱에서 특히 L 개발자 프리뷰와 관련해 심혈을 기울인 부분은 터치 잔물결 효과와 Add to Schedule 플로팅 액션 버튼이었습니다. 우리는 클립된 물결과 클립되지 않은 물결 두 가지를 모두 사용했고 배경색에 상관없이 물결이 보일 수 있도록 물결 효과의 컬러를 지정했습니다. (코드 : 밝은 물결 / 어두운 물결 )

하지만 가장 심혈을 기울인 부분은 세션이 개인 스케줄에 추가되었는지 아닌지, 모양이 바뀌며 알려주는 플로팅 액션 버튼입니다.

이 구현을 위해 많은 L 프리뷰의 API 를 사용했습니다.

1. View.setOutline and setClipToOutline 원형 클리핑과 동적인 그림자 렌더링

2. android:stateListAnimator 손가락으로 누르는 위치에 버튼이 떠오르도록 하기

3. RippleDrawable 터치 했을 때의 피드백 잉크

4. ViewAnimationUtils.createCircularReveal 블루/화이트 컬러 배경의 상태 변화

5. AnimatedStateListDrawable 프레임 애니메이션이 아이콘 상태에 따라 변하도록 정의(체크됨, 체크 안됨 상태)

다음 단계는?

안드로이드 L 개발자 프리뷰의 요소와 폴백 코드 패스(fallback code path)가 포함된 이 코드 소스들을 활용해 여러분의 앱에 디자인을 적용해 보세요. I/O 앱의 디자인이 어떤 원리로 구현되었는지 설명한 이 포스트를 통해, 여러분이 아름다운 안드로이드 앱을 제작하는 데에 도움이 되었길 바랍니다.