UNCLESOON'S BLOG

서체가 표현하는 문자의 크기, 표현 양식은 각 언어가 같고 있는 문자셋(Character set)이 영문과 유사한지(English-like), 높게 표현되는지(Tall), 굵게 표현(Dense)되는지 등에 따라 매우 다양합니다. 즉, 하나의 서체가 여러 언어를 지원할 때, 각 언어별로 서체가 표현되는 양식이 달라진다는 것이고, 이러한 세부사항을 머티리얼에서 어떻게 다루는 지 본 포스팅에서 다룰 것입니다.

서체는 계층적 속성을 갖고 있고, 브랜드를 표현합니다. 여기서 계층적 속성이란 서체가 위치하는 기준선(Baseline), 상단기준선(Cap Height) 등을 표현하는 서체와 관련된 규격들을 의미합니다. 서체는 앞서 이야기한것처럼 이미지와 함께 제품을 표현하는 주된 요소이며, 제품에서 표현하고자 하는 브랜드를 서체로 나타낼 수 있습니다.

내비게이션(Navigation)은 앱 전반에 걸쳐 사용자가 이동, 탐색하는 것을 의미합니다. 여기서 앱 전반을 구분하는 기준은 앱을 구성하고 있는 화면(Screen)을 의미하며, 이 화면에 대한 사용자의 이동을 내비게이션(Navigation)으로 간주합니다.

밀집도 적용(Applying density)은 머티리얼 디자인에서 각 구성 요소 간의 간격을 나타내는 것과 관련된 내용을 다룹니다. 해당 내용은 레이아웃, 구성 요소, 접근성, 서체 등의 표현에서 어떤 방식으로 구성 요소들을 밀집시켜 디자인을 하는지를 안내합니다.

머티리얼 디자인에서 구성 요소 동작 방식(Component behavior)은 UI 요소들의 위치를 정의하는 용어 및 방식(Positioning terminology), 구성 요소의 너비(Component width), 반응형 패턴(Responsive patterns)과 관련한 내용을 설명합니다.

머티리얼 디자인에서 간격 설정 방법(Spacing methods)은 기준 격자(Baseline grids), 중심선(Keylines), 패딩(Padding), 비율, 컨테이너, 터치 영역을 적용하기 위해 8의 배수에 해당하는 dp값으로 간격(Incremental spacing)을 설정합니다.

머티리얼 디자인 반응형 레이아웃 격자(Responsive layout grid)는 스크린 사이즈와 화면 회전 등의 상황에서 레이아웃 전반에 일관성을 보장합니다. 다시 말해, 반응형 레이아웃 격자 시스템은 구성한 레이아웃을 스크린 상황에따라 가변적으로 변경하는 방식이라 생각하면 되겠습니다.

머티리얼 기초 중 레이아웃에서 화면의 화소 밀도(Screen pixel density)와 해상도(Resolution)는 플랫폼에 따라 다양할 수 있습니다. 화소 밀도는 픽셀 밀도나 픽셀 퍼 인치(Pixels per inch, PPI) 등의 용어로도 사용됩니다. 이 단위는 장치의 스크린 해상도를 측정하는데 사용됩니다.

머티리얼 기초(Material foundation)에서 레이아웃(Layout)은 플랫폼, 환경, 동일하고 균일한 요소와 간격을 이용하여 스크린 사이즈 전반에 걸쳐 일관성 있는 디자인을 유지시켜주는 역할을 합니다.

머티리얼 기초(Material foundation)에서 빛과 그림자(Light and shadows)는 표면(Surface), 높이값(Elevation)과 함께 머티리얼 환경(Environment)을 이루는 핵심 요소입니다.  그림자(Shadows)는 머티리얼 표면(Surface)이 광원(Light source)을 막을 때, 생성됩니다.

머티리얼 기초(Material foundation)에서 높이값(Elevation)은 평평한 2차원 개체인 표면(Surface)와 함께 구글 머티리얼 디자인(Google material design) 을 이루는 핵심 요소입니다. 머티리얼 디자인에서의 3차원 입체 표현은 표면(Surface)에 높이값을 부여함으로써 완성됩니다. 

머티리얼 기초(Material foundation)에서 환경(Environment)은 UI 요소들을 표현하는 외부적 환경 요소를 의미합니다. 예를 들어, UI 요소(예: 버튼, 텍스트, 이미지)를 3차원(Dimension) 형태로 표현한다고 했을 때, 이를 어떻게 표현하는지 등의 내용 등을 다루고 있습니다.  3차원 표현이라는 것도 다양한 표현이 가능한데, 애플은 iOS 7.0 이전기 버전에서 스큐어모피즘이라는 디자인 방식으로 UI 요소들을 디자인 했었습니다. (스큐어모피즘에서 아이콘이나 기타 요소들은 실제 3차원 사물처럼 디자인이 되었습니다.)  하지만 현재 디자인 추세는 iOS와 안드로이드는 모두 미니멀리즘을 지향하는 디자인 트렌드에따라 플랫 디자인(Flat design) 형태로 3차원을 표현하고 있습니다.  플랫디자인에서 디스플레이는 평면이고, 모든 디자인 요소는 이 디스플레이 위에 올려진 2차원 면(Surface)로 간주합니다. 2차원 면(Surface)을 3차원의 형태로 표현하는 것과 관련된 내용들이 머티리얼 기초(Material foundation)에서 주로 다루는 내용입니다. 

머티리얼 기초(Material foundation)에서는 UI 디자인을 구성하기 위한 광범위한 측면의 요소 뿐만 아니라 버튼, 색상 선정 등의 세부적인 요소들을 모두 포함하고 있습니다.  주로 UI/UX를 기획/디자인 하는 작업자들이 참고할 요소에 해당되지만 제품/서비스의 가장 기초가 되는 내용인만큼 모든 UI/UX 기획, 디자인, 개발 담당자들이 모두 참고하고 있어야 하겠습니다.

구글 머티리얼 스터디(Google material studies)는 구글에서 제안하는 머티리얼 디자인(Material design)의 우수사례(Best practice)를 소개하는 콘텐츠로 구성됩니다. 그 중에서도 바질(Basil)이라는 음식 레시피(Recipe) 소개 애플리케이션을 먼저 살펴보겠습니다.

플러터는 위젯(Widget)의 크기, 여백 등의 설정을 위해 컨테이너(Container) 개념을 두고 있다. 컨테이너는 자식 위젯의 크기와 여백(Margine, Padding) 등을 설정한다. 또한 컨테이너는 다시 부모 위젯으로 컬럼(Column)과 로우(Row)를 둘 수 있다. 개별 위젯을 조종하기 위해서는 먼저 ‘바디(Body) > 컬럼/로우 > 컨테이너 > 위젯(예:TextField, Button)’의 계층 구조를 갖음을 이해해야 한다.

플러터에서 위젯의 레이아웃은 컬럼(Column)과 로우(Row)가 주로 담당하게 된다. 컬럼은 위젯들의 세로배치에 사용되며, 로우는 가로배치에 사용된다. 컬럼과 로우는 위젯의 세로열, 가로열의 배치를 담당하며, 위젯의 크기, 여백 등의 조절에는 관여하지 않는다. 컬럼과 로우는 UI 컴포넌트의 화면배치에 매우 중요한 역할을 담당한다. 계층 구조는 ‘바디(Body) > 컬럼/로우’로 바디의 하위 계층에서 선언된다.

구글 머티리얼 스터디(Google material studies)는 머티리얼 디자인을 토대로 잘 만들어진 실제 서비스 적용 사례(Best practice)를 소개하는 자료입니다. 실제 서비스 적용 시의 원칙은 무엇이 있으며, 어떤 기준으로 서비스를 적용해야 하는지 살펴봅니다.

구글 머티리얼 디자인(Material design)은 혁신적인 기술과 과학적 기반에서 훌륭한 디자인의 표준이 되는 가이드라인을 제공하는 시각적 언어이다.

구글 머티리얼 디자인(Google material design) 목차 구성은 크게 ‘디자인(Design)’, ‘컴포넌트(Components)’, ‘개발(Develop)’, ‘업무 자원(Resources)’ 4가지 항목으로 구성됩니다.  디자인(Design)은 말 그대로 UI/UX 기획, 디자인 담당자가 제품/서비스를 기획/디자인 하는 과정에서 참고해야 되는 가이드라인 내용을 포함하고 있습니다.  컴포넌트(Component)는 화면을 설계하는 과정에 소요되는 구성 요소(예: 버튼, 다이얼로그, 텍스트 필드)들에 대한 설명으로 기획, 디자인, 개발 담당자들이 모두 참고해야 하는 항목입니다.  개발(Develop) 항목은 개발자들이 개발하는데, 필요한 개발환경 개발 가이드를 내용으로 포함합니다. 업무 자원(Resource)은 기획, 디자인, 개발자들에게 필요한 여러가지 실제 파일들을 의미합니다. 아이콘, 플러그인, 기타 플랫폼 가이드라인 등이 여기에 포함됩니다.