맨위로가기

머티리얼 디자인

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

1. 개요

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

더 읽어볼만한 페이지

  • 디자인 언어 - 메트로 (디자인 언어)
    마이크로소프트가 스위스 그래픽 디자인과 런던 지하철 표지판에서 영감을 받아 개발한 메트로 디자인 언어는 큰 텍스트, 간결한 타이포그래피, 라이브 타일 등의 특징을 가지며 Windows, Xbox, Microsoft Office 등 다양한 제품에 적용되었고, 상표권 문제와 함께 명칭 변경 및 MDL2로 진화하며 사용자 경험에 대한 엇갈린 평가를 받았다.
  • 디자인 언어 - 윈도우 에어로
    윈도우 에어로는 윈도우 비스타에서 처음 도입된 사용자 인터페이스 디자인으로, 투명 효과, 창 미리 보기 등의 기능을 제공하여 사용자 경험을 향상시켰으며, 윈도우 11에서는 대부분의 기능이 폐지되었다.
  • 2014년 소프트웨어 - 아마존 알렉사
    아마존 알렉사는 아마존이 개발한 인공지능 음성 비서로, 스마트홈 기기 제어, 음악 스트리밍, 정보 검색 등의 기능을 제공하지만 개인 정보 보호 논란도 있으며, 아마존은 기능 확장과 수익성 개선을 위해 노력 중이다.
  • 2014년 소프트웨어 - 안드로이드 TV
    안드로이드 TV는 구글 TV의 후속으로 발표된 운영체제로, 구글 플레이 스토어를 통해 앱을 설치하고 음성 검색, 콘텐츠 추천 등의 기능을 제공하며, 스마트 TV, 셋톱박스 등 다양한 기기에서 사용된다.
  • 그래픽 사용자 인터페이스 - 메트로 (디자인 언어)
    마이크로소프트가 스위스 그래픽 디자인과 런던 지하철 표지판에서 영감을 받아 개발한 메트로 디자인 언어는 큰 텍스트, 간결한 타이포그래피, 라이브 타일 등의 특징을 가지며 Windows, Xbox, Microsoft Office 등 다양한 제품에 적용되었고, 상표권 문제와 함께 명칭 변경 및 MDL2로 진화하며 사용자 경험에 대한 엇갈린 평가를 받았다.
  • 그래픽 사용자 인터페이스 - 작업 표시줄
    작업 표시줄은 윈도우 운영체제에서 화면 하단에 위치하여 프로그램 실행, 창 관리, 시스템 상태 확인 기능을 제공하는 사용자 인터페이스 요소이며, 윈도우 95부터 도입되어 다양한 사용자 정의 설정을 지원하며 발전해 왔다.
머티리얼 디자인 - [IT 관련 정보]에 관한 문서
개요
구글 머티리얼 디자인 로고
구글 머티리얼 디자인 로고
개발사구글
최초 출시일2014년 6월 25일
종류디자인 언어 소프트웨어
웹사이트Material Design 3 (최신 버전)
기술 정보
프로그래밍 언어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

2. 구현

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

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

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

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

2. 1. 1. Material Components 라이브러리 종류

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

개발자와 디자이너는 각 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|머티리얼 컴포넌츠 포 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|릿엘리먼트영어[24][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 컨퍼런스에서 처음 발표된 이후 지속적으로 업데이트되고 있다. 머티리얼 디자인은 사용자가 접하는 화면에 머티리얼(물질)과 은유의 개념을 사용하여 일관성 있는 사용자 경험을 제공한다.[20]

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

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


  • - --

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

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

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

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

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

참조

[1] 웹사이트 Exclusive: Quantum Paper And Google's Upcoming Effort To Make Consistent UI Simple http://www.androidpo[...] 2014-06-11
[2] 웹사이트 Material design https://www.popwebde[...] 2024-04-10
[3] 웹사이트 Google's new 'Material Design' UI coming to Android, Chrome OS and the web https://www.engadget[...] 2014-06-26
[4] 웹사이트 Google's New, Improved Android Will Deliver A Unified Design Language http://www.fastcodes[...] 2014-06-26
[5] 웹사이트 Google Reveals Details About Android L at Google IO http://www.anandtech[...] 2014-06-26
[6] 웹사이트 Android 12 preview: first look at Google's radical new design https://www.theverge[...] 2021-05-18
[7] 웹사이트 Google's Material Design is about to change the way we look at the worldwide web http://bgr.com/2014/[...] BGR 2014-07-30
[8] 웹사이트 We just played with Android's L Developer Preview https://www.engadget[...] AOL 2014-06-26
[9] 웹사이트 Google's next big Android redesign is coming in the fall https://www.theverge[...] Vox Media 2014-06-25
[10] 웹사이트 Web – Material Design 3 https://m3.material.[...]
[11] 웹사이트 What exactly is this so-called 'Material Design 2,' and what will it look like? https://9to5google.c[...] 2018-04-26
[12] 웹사이트 Material Design https://material.io/[...] 2020-09-06
[13] 웹사이트 Now we know: Google Sans is actually a size-optimized version of Product Sans https://9to5google.c[...] 2018-05-09
[14] 트윗 "🎊 The latest in Material Design is NOW available. With Material Design 3, our next generation of the system, we're introducing Material You — a new set of features that help make your apps more personalized. Give it a try → goo.gle/m3-material-io #AndroidDevSummit" 2021-10-27
[15] 웹사이트 Google's Material You design is coming to Gmail, Calendar, and Docs on Android https://www.theverge[...] 2021-09-10
[16] 웹사이트 Google Photos rolling out Material You redesign, but without Dynamic Color https://9to5google.c[...] 2021-09-15
[17] 웹사이트 Google Contacts is already getting its Material You UI makeover https://www.androidp[...] 2021-07-29
[18] 문서 Material Design is a design system created by Google. https://material.io/[...]
[19] 문서 Material design, Introduction https://www.google.c[...] Google Material design
[20] 웹사이트 マテリアル・デザインって何？ Androidデザイン責任者にインタヴュー http://www.gizmodo.j[...] GIZMODO 2014-07-08
[21] 웹사이트 Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users https://www.nngroup.[...] Nielsen Norman Group 2019-11-10
[22] 문서 Material Components are interactive building blocks for creating a user interface. https://material.io/[...]
[23] 웹사이트 Components https://material.io/[...] 2020-01-08
[24] 문서 Built on top of the Material Components Web project and LitElement https://github.com/m[...]
[25] 웹인용 Exclusive: Quantum Paper And Google's Upcoming Effort To Make Consistent UI Simple http://www.androidpo[...] 2014-06-11


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com