[UX] 구글 머티리얼 디자인 – 1.목차 구성(Material design index)
구글 머티리얼 디자인(Google material design) 목차 구성은 크게 ‘디자인(Design)’, ‘컴포넌트(Components)’, ‘개발(Develop)’, ‘업무 자원(Resources)’ 4가지 항목으로 구성됩니다.
디자인(Design)은 말 그대로 UI/UX 기획, 디자인 담당자가 제품/서비스를 기획/디자인 하는 과정에서 참고해야 되는 가이드라인 내용을 포함하고 있습니다.
컴포넌트(Component)는 화면을 설계하는 과정에 소요되는 구성 요소(예: 버튼, 다이얼로그, 텍스트 필드)들에 대한 설명으로 기획, 디자인, 개발 담당자들이 모두 참고해야 하는 항목입니다.
개발(Develop) 항목은 개발자들이 개발하는데, 필요한 개발환경 개발 가이드를 내용으로 포함합니다.
업무 자원(Resource)은 기획, 디자인, 개발자들에게 필요한 여러가지 실제 파일들을 의미합니다. 아이콘, 플러그인, 기타 플랫폼 가이드라인 등이 여기에 포함됩니다.
1. 머티리얼 디자인(Material design) – 디자인(Design)
디자인(Design) 항목에서는 서비스를 기획/디자인 하는 단계에서 필요한 기본 사항들을 다루고 있습니다. 머티리얼 디자인 구성 전반에 대한 철학 및 기타 기본 요소들을 다루고 있습니다. 실질적인 기획/디자인에 구체적 설명 보다는 머티리얼 디자인을 이루고 있는 주변 환경(Environment) 요소들에 대한 설명에서부터 광범위한 차원에서의 설명이 포함됩니다.
2. 머티리얼 디자인(Material design) – 컴포넌트(Components)
컴포넌트(Component) 항목에서는 UI 개별 요소에 대한 설명을 합니다. 예를 들어, 앱 바(App bar)는 어떻게 구성을 해야 하는지, 팝업창 등의 대화상자(Dialogs)는 어떤 것들이 있는지 등의 세부적인 UI 요소들에 대한 내용을 다루고 있습니다.
3. 머티리얼 디자인(Material design) – 개발(Develop)
개발(Develop) 항목에서는 개발 업무에 필요한 환경 설정 등에 필요한 튜토리얼 등을 제공합니다. 각 개발 언어 별 소스 출처(예: GitHub) 등의 안내를 하고 있습니다.
4. 머티리얼 디자인(Material design) – 업무 자원(Resources)
업무 자원(Resources) 기획/디자인/개발 업무에 필요한 이미지 자원, 컬러 선택 툴, 폰트, 작업 툴에 필요한 확장 도구(예: XD, Sketch, Figma), 모션 디자인 도구, 아이콘 디자인 템플릿, 사운드 파일, 프로토타입 예시, 머티리얼 템플릿 등이 제공됩니다. 예시가 될 수 있는 서비스(예: Reply, Owl 등)에 대한 소개를 포함하며, 모바일 및 PC 외에 다양한 플랫폼 환경(예: 안드로이드 오토(차량용 안드로이드 플랫폼 서비스), VR, Wear OS, Android TV 등) 에서의 추가적으로 고려할 수 있는 가이드라인들을 다룹니다.
본 포스팅에 이어 각 단계별 내용을 순차적으로 다룰 예정이며, 필자가 다루기 어려운 개발(Develop) 항목을 제외한 나머지 요소들을 하나하나 상세히 설명해 보도록 하겠습니다.
댓글
댓글 쓰기