머티리얼 디자인은(는) 무엇을 하나요?

디지털 표면은 두께와 그림자가 있는 종이처럼 동작하므로, 깊이와 움직임이 인터페이스의 계층 구조를 설명합니다.

정의된 고도에 위치하며 왼쪽 상단의 키 라이트에서 그림자를 드리우는 평평한 색상 표면 시스템으로, 대담한 색상, 8dp 그리드 및 목적 있는 움직임을 특징으로 합니다. Google은 2014년 6월 I/O에서 이를 발표했습니다.

시기: 2014년~현재 · 시대: 터치스크린 · 분야: 그래픽 및 UI 디자인 · 다른 이름: Material, Google Material, Material 2

이 스킬을 로드해야 하는 경우

사용자가 다음을 요청할 때 로드하세요: "material design", "material ui", "google material", "elevation", "floating action button", "fab", "android style", "ripple effect", "app bar", "paper and ink", "md2".

적합한 대상: Android 애플리케이션, 관리자 대시보드, 많은 컴포넌트가 있는 웹 앱, 디자인 시스템, 생산성 도구.

다음의 경우 사용하지 마세요:

브랜드에 독특한 목소리가 필요한 경우. 기본 모양이 Google 스타일임을 인지할 수 있기 때문입니다.
페이지가 에디토리얼 성격이고 대화형 컴포넌트가 적은 경우.
디자인이 그림자가 전혀 없는 순수 2D 스타일을 필요로 하는 경우.

시스템 지침

머티리얼 디자인으로 UI 또는 그래픽 레이아웃을 생성할 때 반드시 다음을 따라야 합니다:

모든 표면을 1dp 두께의 종이로 취급하며, 절대 구부러지거나, 늘어나서 크기가 변하거나, 다른 표면을 통과하지 않습니다.
계층 구조를 dp 단위의 고도로 표현합니다: 페이지는 0, 카드는 1, 앱 바는 4, 기본 상태의 플로팅 버튼은 6, 메뉴는 8, 네비게이션 드로어는 16, 다이얼로그는 24.
모든 레이아웃을 8dp 그리드로 구축하고, 작은 글자와 아이콘 정렬에는 4dp를 사용하며, 터치 대상은 48dp를 사용합니다.
기본 색상과 강조 색상에서 대담한 색상을 사용하고, 상태 표시줄은 기본 색상의 700 농도, 앱 바는 500 농도를 사용합니다.
Roboto 폰트에서 12, 14, 16, 20, 34, 45, 56sp의 정의된 스케일로 큰 글자를 사용합니다.
모든 터치에 반응을 제공합니다: 터치 지점에서 300ms 동안 퍼져나가는 원형 파문(ripple).
요소를 곡선 경로를 따라 빠르게 시작하고 느리게 끝나는 이징으로 움직이며, 각 움직임이 요소가 어디서 왔는지 설명하도록 합니다.

가드레일

아래 각 줄은 스타일을 위반합니다. 출력을 반환하기 전에 목록과 비교하여 확인하세요.

절대 안 됨: 표면에 그라데이션이나 텍스처.
절대 안 됨: 일관된 고도 레벨이 없거나 다른 광원 방향을 가진 그림자.
절대 안 됨: 동일한 고도에서 겹치는 표면.
절대 안 됨: 48dp 미만의 터치 대상.
절대 안 됨: 4.5:1 미만의 명암비로 유색 배경 위에 유색 텍스트.
절대 안 됨: 움직임이나 파문 피드백 없이 즉시 상태 변경.
절대 안 됨: 한 화면에 둘 이상의 플로팅 액션 버튼.

벡터 프로필

축	점수	1의 의미	5의 의미
장식성	`■■□□□` 2/5	순수 미니멀	최대주의
입체감	`■■■□□` 3/5	엄격한 2D	완전 3D / 공간적
그리드 엄격성	`■■■■□` 4/5	혼란 / 유기적	엄격한 수학적 그리드
스큐어모픽 사실성	`■■□□□` 2/5	추상적 디지털	포토리얼리스틱 소재
타이포그래피 표현성	`■■□□□` 2/5	중립 / 보이지 않음	실험적 / 삽화적

이 점수를 유지하세요. 요청이 축을 2점 이상 이동시키면 스타일을 벗어난 것입니다: "계통 대안(Lineage fallbacks)"으로 이동하세요.

공간 및 그리드 로직

그리드 메커니즘: 8dp 기준 그리드, 아이콘과 글자에는 4dp, 16dp 여백의 4열 휴대폰 그리드, 24dp 여백의 8열 태블릿 그리드, 12열 데스크톱 그리드; 앱 바는 휴대폰에서 56dp, 데스크톱에서 64dp.
여백 비율: 표면의 25~40%는 비어 있어야 함; 간격 스케일은 4, 8, 16, 24, 32, 48, 56dp이며, 카드 패딩은 16dp.
정렬 규칙: 아바타가 있는 목록에서는 콘텐츠가 왼쪽 가장자리에서 72dp 키라인에 정렬되고, 그 외에는 16dp 키라인에 정렬됨; 플로팅 액션 버튼은 오른쪽 및 아래쪽 가장자리에서 16dp 떨어져 위치.
컨테이너 지오메트리: 카드와 버튼은 2dp 모서리 반경 사용; 플로팅 액션 버튼은 56dp 원, 미니 버튼은 40dp; 다이얼로그는 최소 너비 280dp.

타이포그래피

분류: 네오그로테스크 산세리프 · 휴머니스트 산세리프
자간: 34sp 이상의 디스플레이 크기는 0em ~ -0.01em; 본문은 +0.01em; 버튼은 대문자 +0.09em.
행간: 제목 1.2; 본문 1.4 ~ 1.5 (14sp, 20dp 줄 기준); 목록 텍스트는 16sp에 24dp.
계층 규칙:
- 12, 14, 16, 20, 34, 45, 56sp 스케일을 사용하고 그 사이의 크기는 사용하지 않음.
- 제목과 버튼에는 medium(500), 본문에는 regular(400), 45sp 이상의 디스플레이 크기에는 light(300) 사용.
- 표면 위 텍스트는 기본 텍스트에 87% 검정, 보조 텍스트에 54% 검정, 비활성 텍스트에 38% 검정으로 설정.
- 버튼 레이블은 대문자 14sp, 가중치 500으로 설정.

폰트 페어링

디스플레이	본문	참고
Roboto	Roboto	Material 1 및 2의 시스템 서체, 가중치 300~900의 단일 패밀리로 사용.
Roboto Condensed	Roboto	조밀한 헤더를 위한 압축된 디스플레이 서체와 표준 본문 서체.
Noto Sans	Noto Sans	동일한 가중치와 메트릭의 비라틴 문자를 위한 대체 패밀리.

색상 및 조명

팔레트 구조: 500 및 700 농도의 기본 색상 1개, A200 ~ A400 범위의 강조 색상 1개, 중성 회색; 기본 색상은 앱 바와 표면의 10~20%를 차지.
대비 규칙: 본문 텍스트는 최소 4.5:1, 큰 텍스트는 최소 3:1 유지; Indigo 500 위의 흰색 텍스트는 7.5:1에 도달하고 Pink A200 위의 흰색 텍스트는 3.4:1에 도달하여 18sp 텍스트에만 충분함.
표면 처리: 그라데이션이나 텍스처 없이 단색의 불투명한 평면 채움; 스크림은 다이얼로그 뒤에 32% 불투명도의 검정 사용.
빛과 그림자: 위쪽에서 오는 키 라이트와 부드러운 앰비언트 라이트; 각 그림자는 반음영(penumbra), 본음영(umbra), 앰비언트 레이어를 가지며, 블러와 오프셋은 고도에 따라 증가.

팔레트

이름	헥스 코드	역할
Surface	`#FFFFFF`	카드 및 시트 표면
Background	`#FAFAFA`	페이지 배경
Indigo 500	`#3F51B5`	기본 색상 및 앱 바
Indigo 700	`#303F9F`	상태 표시줄
Pink A200	`#FF4081`	강조 색상 및 플로팅 액션 버튼
Grey 900	`#212121`	87% 불투명도 텍스트

물질성 및 텍스처

표면 시뮬레이션: 디지털 종이: 그림자를 드리우지만 결, 베벨, 텍스처가 없는 1dp 두께의 평평한 시트.
테두리 규칙: 표면에는 외곽선이 없음; 구분선은 가장자리에서 72dp 또는 16dp 안쪽으로 1px 검정, 12% 불투명도; 텍스트 필드는 포커스 시 2px으로 두꺼워지는 1px 하단선 사용.
블러 및 고도: 고도 그림자는 1dp의 경우 0 1px 3px 20% + 0 1px 1px 14%, 4dp의 경우 0 4px 5px 14% 및 0 1px 10px 12%, 12dp의 경우 0 9px 12px 14%; 시스템은 0~24dp의 25개 레벨.

장식 및 아이콘

아이콘: 20dp 활성 영역에 24dp 시스템 아이콘, 2dp 스트로크 두께, 2dp 둥근 모서리의 사각형 터미널, 단색 채움, 54% 검정의 단일 색상.
일러스트레이션: 팔레트의 평면 벡터 형태와 20~40% 스크림 아래의 전체 너비 사진; 외곽선이나 원근법 없음.
장식 요소: 플로팅 액션 버튼 · 파문 · 고도 그림자 · 색상 블록 앱 바 · 전체 너비 히어로 이미지 · 카드

모션 및 상호작용성

화면에서 탄생: 예
전환 물리: 표면이 곡선 경로를 따라 Z축과 화면 평면을 따라 이동; 요소는 빠르게 가속되고 부드럽게 느려지며, 공유 요소는 시작점에서 목적지까지 이동.
이징: cubic-bezier(0.4, 0, 0.2, 1)
지속 시간(ms): 300
호버 및 활성: 호버 시 4% 검정 오버레이 추가; 누르기 시 300ms 동안 터치 지점에서 퍼져나가는 12% 검정 파문 표시; 올라온 버튼은 누를 때 2dp에서 8dp로 상승.

코드 및 토큰 프라이머

루트 요소에 data-style="material-design"를 설정하고 토큰을 붙여넣으세요. 파일 tokens.css에는 동일한 토큰과 참조 규칙 세트가 있습니다.

[data-style="material-design"] {
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-text: rgba(0, 0, 0, 0.87);
  --color-muted: rgba(0, 0, 0, 0.54);
  --color-primary: #3F51B5;
  --color-accent: #FF4081;
  --color-border: rgba(0, 0, 0, 0.12);
  --font-sans: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --border-radius: 2px;
  --border-width: 1px;
  --shadow-elevation: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 300ms;
  --color-primary-dark: #303F9F;
  --shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
  --shadow-24dp: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
  --touch-target: 48px;
  --color-on-bg: #212121;
  --color-on-surface: #212121;
  --color-on-primary: #FAFAFA;
  --color-on-accent: #212121;
  --color-muted-on-bg: #737373;
  --color-muted-on-surface: #757575;
  --color-link: #3F51B5;
  --color-link-on-surface: #3F51B5;
  --display-weight: 300;
  --subhead-weight: 500;
  --body-weight: 400;
  --strong-weight: 500;
  --label-weight: 500;
  --display-tracking: 0em;
  --display-leading: 1.15;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 16px;
  --icon-stroke: 2;
}

Tailwind 패턴:

요소	클래스
page	`min-h-screen bg-[#FAFAFA] font-sans text-black/[0.87] antialiased`
app-bar	`flex h-14 md:h-16 items-center bg-[#3F51B5] px-4 text-xl font-medium text-white shadow-[0_2px_4px_-1px_rgba(0,0,0,0.2),0_4px_5px_0_rgba(0,0,0,0.14),0_1px_10px_0_rgba(0,0,0,0.12)]`
card	`rounded-sm bg-white p-4 shadow-[0_1px_3px_0_rgba(0,0,0,0.2),0_1px_1px_0_rgba(0,0,0,0.14),0_2px_1px_-1px_rgba(0,0,0,0.12)]`
button	`h-9 min-w-[64px] rounded-sm bg-[#3F51B5] px-4 text-sm font-medium uppercase tracking-[0.09em] text-white shadow-md transition-shadow duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:shadow-lg active:shadow-xl`
fab	`h-14 w-14 rounded-full bg-[#FF4081] text-white shadow-[0_3px_5px_-1px_rgba(0,0,0,0.2),0_6px_10px_0_rgba(0,0,0,0.14),0_1px_18px_0_rgba(0,0,0,0.12)]`

비주얼 팩

이 스타일의 그림과 아이콘은 파일입니다. 있는 그대로 사용하거나, 명세로 읽고 동일한 언어로 직접 그리세요.

파일	내용
`pack/hero.svg`	히어로 플레이트, 800x600. 스타일의 비주얼 언어로 된 추상 그림.
`pack/pattern.svg`	패턴 타일, 80x80. 양방향으로 반복됩니다.
`pack/icons.svg`	아이콘 스프라이트: home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders.

아이콘: 단색, 24px 필드에 스트로크 2, 버트 캡, 라운드 조인, 컨테이너: 없음. 사용법: <svg class="icon"><use href="pack/icons.svg#home"/></svg>. 아이콘은 currentColor를 사용합니다.
아이콘 패밀리: 스프라이트는 Google의 Material Symbols (Baseline, filled)에서 가져왔으며, 라이선스는 Apache 2.0입니다. 이유: 스타일 자체의 채워진 시스템 세트로, 24dp 그리드에 있습니다. 데모용 오픈소스 대체재입니다. 실제 제품에는 브랜드의 아이콘 라이브러리를 사용하고 아래 규칙에 따라 패밀리를 선택하세요.
디스플레이 타입: 가중치 300, 자간 0em, 행간 1.15, 대소문자: 없음.
가중치: 디스플레이 300, 부제목 500, 본문 400, 텍스트 내 볼드 500, 레이블 및 버튼 500. 스타일은 3가지 가중치(300, 400, 500)만 사용하며 다른 것은 사용하지 않습니다. 디스플레이는 본문보다 100 더 가벼우므로 크기가 계층을 전달합니다. 악센트는 가중치입니다: 더 무거운 단어가 강조이므로 가중치 간 단계가 명확합니다.
본문 타입: 16px, 행간 1.5.
페이지: 히어로 분할, 왼쪽 정렬, 일반 밀도, 강조 기울임 0°.
텍스트 색상: --color-text는 주요 읽기 영역에만 사용됩니다. 각 영역에는 해당 토큰을 사용하세요: --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

아이콘 팩 선택 방법

아이콘 팩은 그림을 위한 서체입니다. 텍스트 서체와 동일한 주의를 기울여 선택하세요. 다음 규칙은 오픈소스 세트와 라이선스 라이브러리 모두에 적용됩니다.

획이 줄기와 일치합니다. 텍스트 크기에서 본문 텍스트 옆에 아이콘을 배치하세요. 아이콘의 선과 글자의 줄기가 동일한 두께를 가집니다.
터미널과 모서리는 반경 토큰을 따릅니다. 버트 캡과 마이터 조인은 반경 0과 함께 사용됩니다. 라운드 캡과 라운드 조인은 부드러운 반경과 함께 사용됩니다.
채움 모드는 시대의 기술을 따릅니다. 인쇄 시대는 단단한 형태를 깎습니다. 깊이가 있는 스크린 시대는 형태를 채우고 음영을 줍니다. 현재 제품 인터페이스는 윤곽선을 그립니다.
은유는 스타일보다 젊지 않습니다. 각 그림은 그 시대가 알고 있던 대상입니다. 더 최근의 은유가 있는 아이콘은 시대를 깨뜨립니다.
하나의 패밀리, 하나의 그리드. 모든 아이콘은 하나의 패밀리와 하나의 변형에서 나오며, 하나의 필드에 그려집니다. 한 표면에 패밀리를 혼합하지 마세요.
패밀리는 제품을 포괄합니다. 커밋하기 전에 제품에 필요한 각 개념을 나열하세요. 그 중 하나에 대한 아이콘이 없는 패밀리는 잘못된 패밀리입니다.
색상은 토큰입니다. 아이콘은 currentColor를 사용합니다. 두 번째 톤은 파일이 아닌 토큰에서 가져옵니다.
라이선스가 사용을 허용합니다. 세트의 라이선스를 읽으세요. 라이선스가 요구하는 경우 출처를 표시하세요. 브랜드가 있는 제품은 라이선스된 라이브러리를 사용하고 동일한 규칙을 적용하여 패밀리를 선택합니다.

계통 대안(Lineage fallbacks)

사용자가 변형을 요청할 때 즉흥적으로 대응하지 마세요. 여기에 명명된 이웃 스타일로 혼합하고 해당 스킬을 로드하세요.

사용자가 더 평평한(flatter) 스타일을 요청하면 flat-design (Flat Design)으로 이동하세요. 모든 고도 그림자를 제거하고, 색상으로만 표면을 구분하며, 색상 팔레트와 8dp 그리드는 유지하세요.
사용자가 더 질감 있는(more tactile) 스타일을 요청하면 skeuomorphism (Skeuomorphism)으로 이동하세요. 5~10% 그라데이션, 1px 내부 하이라이트 및 5% 불투명도의 표면 텍스처를 추가하고, 고도와 레이아웃은 유지하세요.

[번역 중단됨]

머티리얼 디자인