# Metro Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: metro-design
- **카테고리**: design-language
- **연도**: 2010
- **제작자**: Microsoft
## 설명
마이크로소프트의 타일 기반 디자인 언어로, 타이포그래피와 콘텐츠 중심의 심플한 인터페이스를 추구합니다.
## 역사·배경
2010년 Windows Phone 7과 함께 공개된 Microsoft의 첫 플랫 디자인 언어. 이후 Fluent Design으로 진화.
## 핵심 원칙
- 콘텐츠가 크롬을 대신한다 (Content, not chrome)
- 타이포그래피 중심
- 움직임이 생명을 준다
## 주요 특징
- 라이브 타일 (Live Tiles)
- 대담한 타이포그래피
- 플랫한 색상 팔레트
- 그리드 기반 레이아웃
- 애니메이션 전환
## 컬러 시스템 가이드
선명한 단색 타일 기반. 각 타일이 하나의 채도 높은 색상 블록
### 색상 역할
- tile-primary: 주요 타일 색 — Microsoft Blue 계열
- tile-accent: 보조 타일 색 — 다른 채도 높은 단색
- background: 흰색 또는 아주 연한 회색
- text: 타일 위 흰색 또는 배경 위 검정
### 색상 제약 조건
- 타일별 단색 사용 — 그라데이션·패턴 금지
- 색상 수는 많아도 됨 — 각 타일이 독립적 색을 가질 수 있음
- 채도 낮은 파스텔 지양 — 선명한 Metro 색상 팔레트
### 다크모드 전략
배경 어둡게, 타일 색상은 동일하게 유지
### 대비 요구사항
타일 위 텍스트는 흰색으로 단일화 — 대비 확보 쉬움
## 타이포그래피 가이드
- **폰트 성격**: Segoe UI 계열 또는 유사한 휴머니스트 산세리프. 극단적으로 얇거나 굵은 weight 활용
- **권장 폰트 수**: 최대 1개
- **타입 스케일**: 1.5 이상 — 타일 UI의 대담한 크기 대비
### 타이포그래피 제약
- 세리프 폰트 금지
- heading 매우 크게, 얇은 weight (Thin/Light) — 대담한 타이포 전략
- letter-spacing 기본값
## 하면 안 되는 것 (안티패턴)
- 둥근 모서리 사용 금지 — 타일은 반드시 직각
- 그림자 사용 금지 — 완전 플랫
- 타일 외 자유 레이아웃 사용 금지 — 그리드 기반 타일만
## 반드시 포함해야 하는 것
- 균일한 그리드 기반 타일 레이아웃
- 단색 채워진 타일 (background-color solid)
- 타일 안에 아이콘 또는 텍스트만 — 이미지 배경 최소화
## 모션 가이드
타일 호버 시 색상 약간 밝아지거나 scale 1.02. 전환 애니메이션 100~200ms linear.
## 사용 사례
- 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
## 자주 묻는 질문 (FAQ)
### Q: Metro Design이란 무엇인가요?
A: 마이크로소프트의 타일 기반 디자인 언어로, 타이포그래피와 콘텐츠 중심의 심플한 인터페이스를 추구합니다. 2010년 Windows Phone 7과 함께 공개된 Microsoft의 첫 플랫 디자인 언어. 이후 Fluent Design으로 진화.
### Q: Metro Design의 핵심 디자인 원칙은 무엇인가요?
A: Metro Design의 핵심 원칙은 콘텐츠가 크롬을 대신한다 (Content, not chrome), 타이포그래피 중심, 움직임이 생명을 준다입니다.
### Q: Metro Design은 어떤 프로젝트에 적합한가요?
A: Metro Design은 Windows Phone 앱 (역사적), Windows 8/10 스타트 화면 앱, 타일 기반 대시보드, Windows 생태계 앱 (역사적 레퍼런스), 타일 기반 대시보드, 정보 중심 UI 등의 프로젝트에 적합합니다.
### Q: Metro Design의 장단점은 무엇인가요?
A: 장점으로는 콘텐츠 중심의 깔끔한 UI, 타이포그래피만으로 강력한 시각 효과, 라이브 타일로 실시간 정보 표시이 있습니다. 단점으로는 Windows Phone 단종으로 현재는 역사적 의미, 터치와 마우스 모두 완벽히 최적화하기 어려움, 타일 크기 제한으로 복잡한 UI 표현 어려움이 있습니다.
### Q: Metro Design에서 색상은 어떻게 사용하나요?
A: 선명한 단색 타일 기반. 각 타일이 하나의 채도 높은 색상 블록 색상 역할은 tile-primary: 주요 타일 색 — Microsoft Blue 계열, tile-accent: 보조 타일 색 — 다른 채도 높은 단색, background: 흰색 또는 아주 연한 회색입니다. 주의사항: 타일별 단색 사용 — 그라데이션·패턴 금지, 색상 수는 많아도 됨 — 각 타일이 독립적 색을 가질 수 있음.
### Q: Metro Design에 어울리는 폰트 스타일은 무엇인가요?
A: Metro Design에는 Segoe UI 계열 또는 유사한 휴머니스트 산세리프. 극단적으로 얇거나 굵은 weight 활용 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 세리프 폰트 금지, heading 매우 크게, 얇은 weight (Thin/Light) — 대담한 타이포 전략.
### Q: Metro Design 디자인에서 하면 안 되는 것은 무엇인가요?
A: Metro Design에서 피해야 할 것: 둥근 모서리 사용 금지 — 타일은 반드시 직각, 그림자 사용 금지 — 완전 플랫, 타일 외 자유 레이아웃 사용 금지 — 그리드 기반 타일만.
### Q: Metro Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Metro Design을 적용한 대표적인 제품·서비스로는 Windows Phone UI, Windows 8 시작 화면, Xbox 대시보드 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=metro-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=metro-design&merged=true
마이크로소프트의 타일 기반 디자인 언어로, 타이포그래피와 콘텐츠 중심의 심플한 인터페이스를 추구합니다.
연도
2010
제작자
Microsoft
2010년 Windows Phone 7과 함께 공개된 Microsoft의 첫 플랫 디자인 언어. 이후 Fluent Design으로 진화.
#0078D7
핵심 원칙
1
콘텐츠가 크롬을 대신한다 (Content, not chrome)
2
타이포그래피 중심
3
움직임이 생명을 준다
주요 특징
라이브 타일 (Live Tiles)
대담한 타이포그래피
플랫한 색상 팔레트
그리드 기반 레이아웃
애니메이션 전환
장단점
장점
+콘텐츠 중심의 깔끔한 UI
+타이포그래피만으로 강력한 시각 효과
+라이브 타일로 실시간 정보 표시
단점 / 한계
−Windows Phone 단종으로 현재는 역사적 의미
−터치와 마우스 모두 완벽히 최적화하기 어려움
−타일 크기 제한으로 복잡한 UI 표현 어려움
적합한 사용처
사용 사례
Windows Phone 앱 (역사적)
Windows 8/10 스타트 화면 앱
타일 기반 대시보드
이런 프로젝트에 추천
Windows 생태계 앱 (역사적 레퍼런스)타일 기반 대시보드정보 중심 UI
접근성
대담한 타이포그래피와 플랫 색상으로 기본 접근성은 양호. 타일의 색상 대비 확인 필요.
실제 사용 예시
Windows Phone UIWindows 8 시작 화면Xbox 대시보드
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Live Tiles
Metro Design의 가장 특징적인 요소인 라이브 타일 - 실시간 정보를 보여주는 타일
23°
Weather
12
New Messages
📧
Mail
♫
Music
📷
News
9:41
Clock
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
Heading 2 (32px)
콘텐츠 중심
Title (20px)
TYPE IS THE UI
Body (14px)
Metro Design은 2010년 마이크로소프트가 Windows Phone 7과 함께 공개한 플랫 디자인 언어입니다. 타이포그래피와 콘텐츠 자체가 인터페이스의 크롬을 대신합니다.
Annotation (11px)
microsoft · 2010 · windows phone
자주 묻는 질문
Metro Design이란 무엇인가요?
마이크로소프트의 타일 기반 디자인 언어로, 타이포그래피와 콘텐츠 중심의 심플한 인터페이스를 추구합니다. 2010년 Windows Phone 7과 함께 공개된 Microsoft의 첫 플랫 디자인 언어. 이후 Fluent Design으로 진화.
Metro Design의 핵심 디자인 원칙은 무엇인가요?
Metro Design의 핵심 원칙은 콘텐츠가 크롬을 대신한다 (Content, not chrome), 타이포그래피 중심, 움직임이 생명을 준다입니다.
Metro Design은 어떤 프로젝트에 적합한가요?
Metro Design은 Windows Phone 앱 (역사적), Windows 8/10 스타트 화면 앱, 타일 기반 대시보드, Windows 생태계 앱 (역사적 레퍼런스), 타일 기반 대시보드, 정보 중심 UI 등의 프로젝트에 적합합니다.
Metro Design의 장단점은 무엇인가요?
장점으로는 콘텐츠 중심의 깔끔한 UI, 타이포그래피만으로 강력한 시각 효과, 라이브 타일로 실시간 정보 표시이 있습니다. 단점으로는 Windows Phone 단종으로 현재는 역사적 의미, 터치와 마우스 모두 완벽히 최적화하기 어려움, 타일 크기 제한으로 복잡한 UI 표현 어려움이 있습니다.
Metro Design에서 색상은 어떻게 사용하나요?
선명한 단색 타일 기반. 각 타일이 하나의 채도 높은 색상 블록 색상 역할은 tile-primary: 주요 타일 색 — Microsoft Blue 계열, tile-accent: 보조 타일 색 — 다른 채도 높은 단색, background: 흰색 또는 아주 연한 회색입니다. 주의사항: 타일별 단색 사용 — 그라데이션·패턴 금지, 색상 수는 많아도 됨 — 각 타일이 독립적 색을 가질 수 있음.
Metro Design에 어울리는 폰트 스타일은 무엇인가요?
Metro Design에는 Segoe UI 계열 또는 유사한 휴머니스트 산세리프. 극단적으로 얇거나 굵은 weight 활용 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 세리프 폰트 금지, heading 매우 크게, 얇은 weight (Thin/Light) — 대담한 타이포 전략.
Metro Design 디자인에서 하면 안 되는 것은 무엇인가요?
Metro Design에서 피해야 할 것: 둥근 모서리 사용 금지 — 타일은 반드시 직각, 그림자 사용 금지 — 완전 플랫, 타일 외 자유 레이아웃 사용 금지 — 그리드 기반 타일만.
Metro Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Metro Design을 적용한 대표적인 제품·서비스로는 Windows Phone UI, Windows 8 시작 화면, Xbox 대시보드 등이 있습니다.