디자인 스타일
머티리얼 디자인(Material Design)
머티리얼 디자인(Material Design)은 색, 타이포그래피, 형태, 컴포넌트와 모션을 토큰과 가이드로 정의해 여러 화면과 플랫폼에서 일관된 제품 경험을 만들도록 돕는 디자인 시스템입니다.
쉬운 설명
색상 역할, 컴포넌트 상태, 형태와 모션을 하나의 규칙으로 연결하는 Google의 오픈 디자인 시스템.
Visual sample
눈으로 보면 이렇습니다
적응형 색상, 대비되는 둥근 형태와 명확한 컴포넌트 상태로 구성한 Material 3 샘플
- 토큰 기반 색상
- 명확한 컴포넌트 상태
- 의미 있는 형태와 모션
Material Design 3 Expressive, adaptive color roles, clear component states, contrasting rounded shapes, flexible typography, token-based spacing Style variations
같은 스타일도 이렇게 달라집니다
중립적인 생산성 제품, M3 Expressive의 대비되는 형태와 다크 모드처럼 같은 시스템 안에서도 색상 역할과 형태 강도에 따라 다른 브랜드 인상을 만들 수 있습니다.M3 익스프레시브
대비되는 둥근 형태, 유연한 타이포그래피와 생동감 있는 상태 모션으로 감정적인 제품 경험을 만듭니다.
Material 3 Expressive, contrasting rounded shapes, vibrant adaptive colors, flexible type scale, responsive state motion 프로덕티브
중성 표면과 절제된 색상 역할, 조밀한 컴포넌트로 업무와 관리 화면의 효율을 높입니다.
Productive Material 3 UI, neutral surface roles, compact accessible components, green functional accent, restrained elevation 다크 머티리얼
반전이 아닌 다크 전용 톤 팔레트와 상태 레이어로 어두운 환경에서도 계층과 대비를 유지합니다.
Material 3 dark theme, tonal dark surfaces, light blue primary, visible state layers, accessible contrast, adaptive components Visual DNA
스타일을 만드는 구체적인 요소
단어 하나보다 아래 요소를 함께 지정해야 AI가 더 일관된 결과를 만듭니다.선과 테두리
1px 또는 State layer아웃라인 컴포넌트에는 토큰화된 선을, 채움 컴포넌트에는 상태 레이어를 사용합니다.
모서리
4–32px · Shape scale작은 입력창부터 큰 카드까지 단계적인 형태 스케일을 사용합니다.
컬러 톤
Role-based tonal paletteprimary, surface, error처럼 의미를 가진 색상 역할과 톤 단계를 정의합니다.
타이포그래피
Display–Label rolesdisplay, headline, title, body와 label의 역할별 크기와 굵기를 사용합니다.
아이콘
Material Symbols일관된 기하학과 채움 정도를 가진 심볼을 라벨과 함께 사용합니다.
그림자
0–5 Elevation물리적 장식보다 메뉴, 다이얼로그와 떠 있는 행동의 실제 계층에만 적용합니다.
간격과 밀도
4dp Grid · Adaptive4dp 간격을 기본으로 화면 크기와 입력 방식에 맞춰 밀도를 조절합니다.
모션
Meaningful · Physics상태와 공간 관계를 설명하는 지속 시간과 물리 기반 전환을 사용합니다.
Where it works
어떤 프로젝트에 잘 어울리나요?
스타일의 강도는 제품의 목적과 사용자가 읽어야 하는 정보량에 맞춰 조절해야 합니다.적극적으로 추천
검증된 컴포넌트와 적응형 규칙을 빠르게 적용할 수 있습니다.
다양한 입력, 상태와 피드백을 공통 규칙으로 관리합니다.
토큰과 컴포넌트 역할이 개발·디자인 협업을 돕습니다.
색상과 형태 스케일을 조정해 브랜드 개성을 유지할 수 있습니다.
강도를 조절해서 적용
표준 컴포넌트 인상이 강하므로 에디토리얼 구성이나 이미지가 필요합니다.
Compare
비슷한 스타일과 무엇이 다른가요?
둘 다 단순한 면과 아이콘을 사용하지만 머티리얼 디자인은 색상 역할, 컴포넌트 상태, 접근성과 모션까지 정의하는 시스템이고 플랫 디자인은 주로 시각적 표현 방식입니다.머티리얼 디자인(Material Design)
- 토큰·컴포넌트·상태를 포함한 시스템
- 단계적인 형태와 고도 규칙
- 적응형 색상과 의미 있는 모션
Flat Design
- 평면적인 시각 언어
- 단색 면과 최소 그림자
- 구현 규칙은 프로젝트마다 다름
Prompt recipe
AI에게 요청할 때는 이렇게 조합하세요
Material Design 3 Expressive, adaptive color roles, clear component states, contrasting rounded shapes, flexible typography, token-based spacing. Use semantic color roles, a consistent shape scale, explicit hover pressed focus and disabled states, responsive components, and motion that explains hierarchy; avoid copying default components without brand adaptation, random radii, color-only meaning, and elevation used as decoration. Final check
완성 전에 확인하세요
- 01
색상이 이름이 아닌 역할 토큰으로 정의됐는가?
- 02
모든 컴포넌트 상태가 구분되는가?
- 03
형태 스케일이 일관적인가?
- 04
다크 모드가 단순 반전이 아닌가?
- 05
모션이 공간 관계와 상태를 설명하는가?
- 06
터치·키보드와 스크린 리더를 함께 지원하는가?
Explore more
다른 스타일도 보러 가기
작은 미리보기로 분위기를 비교하고 다음 디자인 용어로 이어가세요.관계 지도
