onul.works
오늘의 업무 도구로 이동

머티리얼 디자인

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.

1. 개요

머티리얼 디자인은 구글이 개발한 시각 디자인 언어이다. 구글은 머티리얼 디자인을 자사 제품에 통합하고, 개발자들이 자체 애플리케이션에 적용할 수 있도록 API를 제공했다. 머티리얼 디자인을 구현하는 UI 요소 라이브러리 집합인 머티리얼 컴포넌트(MDC)를 통해 개발자들은 쉽고 체계적으로 디자인을 적용할 수 있다. 2018년에는 "머티리얼 디자인 2"로 불리는 구글 머티리얼 테마가 도입되었고, 2021년에는 개인화된 UI 요소를 강조하는 "머티리얼 유"가 공개되어 안드로이드 12에 적용되었다.

머티리얼 디자인 - [IT 관련 정보]에 관한 문서
개요

이미지 준비중입니다.

구글 머티리얼 디자인 로고
개발사구글
최초 출시일2014년 6월 25일
종류디자인 언어 소프트웨어
웹사이트Material Design 3 (최신 버전)
Material Design 1 (보관된 버전)
Material Design 2 (보관된 버전)
기술 정보
프로그래밍 언어HTML
CSS
Sass (v4)
자바스크립트
AngularJS
앵귤러
Java
Objective-C
Swift
Dart
지원 플랫폼Android
iOS
Web
라이선스Android, iOS: Apache-2.0 License
Flutter: BSD-3-Clause License
Web: MIT License
저장소
웹Material Components Web
안드로이드Material Components Android
iOSMaterial Components iOS
FlutterMaterial Components Flutter
📚 더 읽어볼만한 페이지
  • 디자인 언어 - 메트로 (디자인 언어)
    마이크로소프트가 스위스 그래픽 디자인과 런던 지하철 표지판에서 영감을 받아 개발한 메트로 디자인 언어는 큰 텍스트, 간결한 타이포그래피, 라이브 타일 등의 특징을 가지며 Windows, Xbox, Microsoft Office 등 다양한 제품에 적용되었고, 상표권 문제와 함께 명칭 변경 및 MDL2로 진화하며 사용자 경험에 대한 엇갈린 평가를 받았다.
  • 디자인 언어 - 윈도우 에어로
    윈도우 에어로는 윈도우 비스타에서 처음 도입된 사용자 인터페이스 디자인으로, 투명 효과, 창 미리 보기 등의 기능을 제공하여 사용자 경험을 향상시켰으며, 윈도우 11에서는 대부분의 기능이 폐지되었다.
  • 2014년 소프트웨어 - 아마존 알렉사
    아마존 알렉사는 아마존이 개발한 인공지능 음성 비서로, 스마트홈 기기 제어, 음악 스트리밍, 정보 검색 등의 기능을 제공하지만 개인 정보 보호 논란도 있으며, 아마존은 기능 확장과 수익성 개선을 위해 노력 중이다.
  • 2014년 소프트웨어 - 안드로이드 TV
    안드로이드 TV는 구글 TV의 후속으로 발표된 운영체제로, 구글 플레이 스토어를 통해 앱을 설치하고 음성 검색, 콘텐츠 추천 등의 기능을 제공하며, 스마트 TV, 셋톱박스 등 다양한 기기에서 사용된다.
  • 안드로이드 (운영체제) - 구글 어시스턴트
    구글 어시스턴트는 2016년 구글에서 개발한 인공지능 음성 비서 서비스로, 양방향 대화 지원, 다양한 기기 및 플랫폼 확장성, 인터넷 검색, 일정 관리, 홈 오토메이션 제어 등의 기능을 제공하지만 개인정보 보호 문제에 대한 비판도 존재한다.
  • 안드로이드 (운영체제) - 웨어 OS
    웨어 OS는 구글이 개발한 스마트워치용 운영 체제로, 구글 서비스 통합, 음성 제어, 피트니스 추적 등의 기능을 제공하며 안드로이드 및 iOS 기기와 연동되고, 핏비트 인수 후 디자인 개선 및 피트니스 기능 통합, 삼성 갤럭시 워치 시리즈 탑재 등을 통해 지속적으로 발전하고 있다.
목차

2. 구현

머티리얼 디자인은 구글의 웹 및 모바일 제품 전반에 걸쳐 점진적으로 확장되어, 모든 플랫폼과 애플리케이션에서 일관된 사용자 경험을 제공한다. 구글은 타사 개발자가 디자인 언어를 자체 애플리케이션에 통합할 수 있도록 응용 프로그래밍 인터페이스(API)를 제공한다.

웹 애플리케이션 사용자 인터페이스를 위한 머티리얼 디자인의 표준 오픈 소스 구현은 Material Web이라고 한다. 구글은 아파치 2.0 라이센스에 따라 라이센스가 부여된 아이콘 집합을 만들었다.

2.1. 머티리얼 컴포넌트 (Material Components)

머티리얼 컴포넌트(Material Components, MDC)는 구글이 머티리얼 디자인을 쉽게 구현할 수 있도록 제공하는 UI 요소 라이브러리 집합이다. 개발자와 디자이너는 MDC를 통해 머티리얼 디자인을 UI에 쉽고 체계적으로 적용할 수 있다. MDC는 안드로이드, iOS, 웹 등 다양한 플랫폼을 지원한다.

2.1.1. Material Components 라이브러리 종류

머티리얼 컴포넌트(Material Components, MDC)는 머티리얼 디자인을 따르는(머티리얼 디자인을 구현하는) UI 요소 라이브러리 집합의 총칭이다.

개발자와 디자이너는 각 UI 요소에 대해 일일이 머티리얼 디자인을 적용하지 않아도, MDC를 사용함으로써 쉽고 체계적으로 머티리얼 디자인을 모든 UI에 적용할 수 있다. 네이티브(스마트폰) 및 웹, 특정 디자인 패키지를 위한 라이브러리가 준비되어 있다.

👆
좌우로 밀어서 보기
Material Components 라이브러리
플랫폼이름약칭보충페이지레포지토리
AndroidMaterial Components for Android영어MDC-Android[https://material.io/develop/android/][https://github.com/material-components/material-components-android]
iOSMaterial Components for iOS영어MDC-iOS[https://material.io/develop/ios/][https://github.com/material-components/material-components-ios]
WebMaterial Components for the web영어MDC Web[https://material.io/develop/web/][https://github.com/material-components/material-components-web]
Web/WebComponentsMaterial Web Components영어MDC Web + LitElement영어[https://material-components.github.io/material-components-web-components/demos/index.html demo][https://github.com/material-components/material-components-web-components]
Web/ReactMaterial Components for React영어MDC React
WebMaterial Design Lite영어MDL개발 중단, MDC Web으로 이전[https://getmdl.io/][https://github.com/google/material-design-lite]
FlutterMaterial Components for Flutter영어MDC-Flutter[https://material.io/develop/flutter/][https://github.com/material-components/material-components-flutter]

3. 업데이트

머티리얼 디자인은 2014년 6월 구글 I/O 컨퍼런스에서 처음 발표된 이후 지속적으로 업데이트되고 있다. 머티리얼 디자인은 사용자가 접하는 화면에 머티리얼(물질)과 은유의 개념을 사용하여 일관성 있는 사용자 경험을 제공한다.

스마트폰, 태블릿 등 다양한 장치에서 머티리얼 디자인을 통해 통일된 디자인을 제공하여, 사용자는 장치가 바뀌어도 일관된 조작감을 느낄 수 있다.

이 디자인 체계는 디자인을 단순화하는 플랫 디자인에, 물질의 질감을 표현하기 위해 장식을 더하는 스키어모피즘을 도입한 "플랫 2.0"의 한 예로 언급되기도 한다.

-- --

3.1. 머티리얼 디자인 2: 구글 머티리얼 테마

2018년 개편 이후 구글은 대부분의 앱을 구글 머티리얼(Google Material) 테마라고 하는 맞춤형 및 적응형 머티리얼 디자인 버전으로 재설계하기 시작했다. 이 버전은 '머티리얼 디자인 2'라고도 불리며, 공백, 둥근 모서리, 다채로운 아이콘, 하단 탐색 모음을 크게 강조한다. 구글은 Product Sans라는 독점 글꼴의 특수 크기 최적화 버전을 구글 산스(Google Sans)라고 사용하기 시작했다.

3.2. 머티리얼 디자인 3: 머티리얼 유

2021년 구글 I/O에서 기존 머티리얼 디자인에서 더 나아간 머티리얼 유(Material You, 머티리얼 디자인 3)를 공개하였다. 머티리얼 유는 고유한 팔레트 색상, 크기, 기기 유형 등 UI 요소들의 개인화를 강화한 디자인 시스템이다. 안드로이드 12의 기본 UI로 적용되었으며, 안드로이드 버전의 다양한 구글 앱에 점진적으로 출시되었다. 픽셀 6 및 픽셀 6 Pro 스마트폰 시리즈에도 적용되었다.

머티리얼 유는 사용자의 배경화면에서 맞춤형 UI 테마를 생성하는 기능, 향상된 애니메이션, 더 큰 버튼을 강조한다.