# Metro Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: metro-design
- **카테고리**: design-language
- **연도**: 2010
- **제작자**: Microsoft
## 설명
마이크로소프트의 타일 기반 디자인 언어로, 타이포그래피와 콘텐츠 중심의 심플한 인터페이스를 추구합니다.
## 역사·배경
2010년 Windows Phone 7과 함께 공개된 Microsoft의 첫 플랫 디자인 언어. 이후 Fluent Design으로 진화.
## 핵심 원칙
- 콘텐츠가 크롬을 대신한다 (Content, not chrome)
- 타이포그래피 중심
- 움직임이 생명을 준다
## 주요 특징
- 라이브 타일 (Live Tiles)
- 대담한 타이포그래피
- 플랫한 색상 팔레트
- 그리드 기반 레이아웃
- 애니메이션 전환
## 색상 팔레트
- MS Blue (#0078D7): Primary — 기본 강조색
- White (#FFFFFF): Background
- Dark (#1E1E1E): 다크 테마 배경
- Accent Red (#E81123): 알림·오류
## 사용 사례
- Windows Phone 앱 (역사적)
- Windows 8/10 스타트 화면 앱
- 타일 기반 대시보드
## 추천 프로젝트 유형
- Windows 생태계 앱 (역사적 레퍼런스)
- 타일 기반 대시보드
- 정보 중심 UI
## 장점
- 콘텐츠 중심의 깔끔한 UI
- 타이포그래피만으로 강력한 시각 효과
- 라이브 타일로 실시간 정보 표시
## 단점·한계
- Windows Phone 단종으로 현재는 역사적 의미
- 터치와 마우스 모두 완벽히 최적화하기 어려움
- 타일 크기 제한으로 복잡한 UI 표현 어려움
## 실제 사용 제품·서비스
- Windows Phone UI
- Windows 8 시작 화면
- Xbox 대시보드
## 접근성
대담한 타이포그래피와 플랫 색상으로 기본 접근성은 양호. 타일의 색상 대비 확인 필요.
## 관련 스타일
- [fluent-design](https://ui.buildersgate.com/styles/fluent-design)
- [flat-design](https://ui.buildersgate.com/styles/flat-design)
- [minimalism](https://ui.buildersgate.com/styles/minimalism)
## 디자인 토큰
### 색상
- primary: #0078D7
- secondary: #00BCF2
- accent: #FFB900
- background: #FFFFFF
- surface: #F2F2F2
- text: #000000
- textSecondary: #666666
- border: #D6D6D6
### 헤더
- background: #0078D7
- textColor: #FFFFFF
- titleFont: Segoe UI Light, sans-serif
- accentColor: #FFB900
### 타이포그래피
- fontFamily: 'Segoe UI', 'Noto Sans KR', Tahoma, sans-serif
- headingWeight: 300
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: none
- md: none
- lg: none
- xl: none
### Border Radius
- none: 0
- sm: 0
- md: 0
- lg: 0
- full: 0
### 테두리 (Borders)
- width: 0px
- style: solid
- color: #D6D6D6
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1)
### 애니메이션
- duration: 300ms
- easing: cubic-bezier(0.1, 0.9, 0.2, 1)
### 컴포넌트 토큰
- 버튼: shape=square / hoverEffect=darken / textTransform=none
- 카드: style=flat / hoverEffect=darken
- 인풋: style=outlined / focusEffect=border
- 배지: shape=square / style=solid
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=20
### 레이아웃
- containerStyle: fluid
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=metro-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=metro-design&merged=true
Metro Design
마이크로소프트의 타일 기반 디자인 언어로, 타이포그래피와 콘텐츠 중심의 심플한 인터페이스를 추구합니다.
2010년 Windows Phone 7과 함께 공개된 Microsoft의 첫 플랫 디자인 언어. 이후 Fluent Design으로 진화.
색상 팔레트
MS Blue
#0078D7
Primary — 기본 강조색
핵심 원칙
1
콘텐츠가 크롬을 대신한다 (Content, not chrome)
주요 특징
- 라이브 타일 (Live Tiles)
- 대담한 타이포그래피
- 플랫한 색상 팔레트
- 그리드 기반 레이아웃
- 애니메이션 전환
장단점
장점
- +콘텐츠 중심의 깔끔한 UI
- +타이포그래피만으로 강력한 시각 효과
- +라이브 타일로 실시간 정보 표시
단점 / 한계
- −Windows Phone 단종으로 현재는 역사적 의미
- −터치와 마우스 모두 완벽히 최적화하기 어려움
- −타일 크기 제한으로 복잡한 UI 표현 어려움
적합한 사용처
사용 사례
- Windows Phone 앱 (역사적)
- Windows 8/10 스타트 화면 앱
- 타일 기반 대시보드
이런 프로젝트에 추천
Windows 생태계 앱 (역사적 레퍼런스)타일 기반 대시보드정보 중심 UI
접근성대담한 타이포그래피와 플랫 색상으로 기본 접근성은 양호. 타일의 색상 대비 확인 필요.
실제 사용 예시
Windows Phone UIWindows 8 시작 화면Xbox 대시보드
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Live Tiles
Metro Design의 가장 특징적인 요소인 라이브 타일 - 실시간 정보를 보여주는 타일
Typography-Focused Buttons
콘텐츠와 타이포그래피를 강조하는 플랫한 버튼
Content-First Cards
크롬(장식)보다 콘텐츠를 우선하는 깔끔한 카드
Weather Update
Sunny skies throughout the day with temperatures reaching 23°C.
View Details →
Calendar
You have 3 meetings scheduled for today.
Open Calendar →
News
Breaking: New design language takes the world by storm.
Read More →
Messages
12 new messages from your contacts.
View All →
Grid-Based Layout
정렬된 그리드 시스템으로 콘텐츠를 구조화
Section A
Content aligned to grid system with precise spacing
Grid Column 1
Grid Column 2
Full Width Section
App Bar
간결하고 기능적인 상단 네비게이션 바
metro app
Metro Typography
콘텐츠 자체가 크롬이 되는 타이포그래피 중심 디자인
Heading 1 (42px)
metro design
Title (20px)
TYPE IS THE UI
Body (14px)
Metro Design은 2010년 마이크로소프트가 Windows Phone 7과 함께 공개한 플랫 디자인 언어입니다. 타이포그래피와 콘텐츠 자체가 인터페이스의 크롬을 대신합니다.
Annotation (11px)
microsoft · 2010 · windows phone