# Metro Design

> 마이크로소프트의 타일 기반 디자인 언어로, 타이포그래피와 콘텐츠 중심의 심플한 인터페이스를 추구합니다.

- 층: 레퍼런스 (디자인 언어)
- ID: metro-design
- 연도: 2010
- 제작자: Microsoft
- 무드 태그: 화려한, 신뢰감
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/metro-design

## 정의

마이크로소프트의 타일 기반 디자인 언어로, 타이포그래피와 콘텐츠 중심의 심플한 인터페이스를 추구합니다.

## 역사·배경

2010년 Windows Phone 7과 함께 공개된 Microsoft의 첫 플랫 디자인 언어. 이후 Fluent Design으로 진화.

## 주요 특징

- 라이브 타일 (Live Tiles)
- 대담한 타이포그래피
- 플랫한 색상 팔레트
- 그리드 기반 레이아웃
- 애니메이션 전환

## 핵심 원칙

- 콘텐츠가 크롬을 대신한다 (Content, not chrome)
- 타이포그래피 중심
- 움직임이 생명을 준다

## 컬러 시스템

선명한 단색 타일 기반. 각 타일이 하나의 채도 높은 색상 블록

### 색상 역할

- 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.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: 0 (여백 −2 ↔ +2 빽빽)
- 온도감: -1 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: +1 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- Windows Phone 앱 (역사적)
- Windows 8/10 스타트 화면 앱
- 타일 기반 대시보드

## 추천 프로젝트 유형

- Windows 생태계 앱 (역사적 레퍼런스)
- 타일 기반 대시보드
- 정보 중심 UI

## 장단점

### 장점

- 콘텐츠 중심의 깔끔한 UI
- 타이포그래피만으로 강력한 시각 효과
- 라이브 타일로 실시간 정보 표시

### 단점·한계

- Windows Phone 단종으로 현재는 역사적 의미
- 터치와 마우스 모두 완벽히 최적화하기 어려움
- 타일 크기 제한으로 복잡한 UI 표현 어려움

## 실제 사용 제품·서비스

- Windows Phone UI
- Windows 8 시작 화면
- Xbox 대시보드

## 접근성

대담한 타이포그래피와 플랫 색상으로 기본 접근성은 양호. 타일의 색상 대비 확인 필요.

## 자주 묻는 질문

### Q1. Metro Design이란 무엇인가요?

마이크로소프트의 타일 기반 디자인 언어로, 타이포그래피와 콘텐츠 중심의 심플한 인터페이스를 추구합니다. 2010년 Windows Phone 7과 함께 공개된 Microsoft의 첫 플랫 디자인 언어. 이후 Fluent Design으로 진화.

### Q2. Metro Design의 핵심 디자인 원칙은 무엇인가요?

Metro Design의 핵심 원칙은 콘텐츠가 크롬을 대신한다 (Content, not chrome), 타이포그래피 중심, 움직임이 생명을 준다입니다.

### Q3. Metro Design은 어떤 프로젝트에 적합한가요?

Metro Design은 Windows Phone 앱 (역사적), Windows 8/10 스타트 화면 앱, 타일 기반 대시보드, Windows 생태계 앱 (역사적 레퍼런스), 타일 기반 대시보드, 정보 중심 UI 등의 프로젝트에 적합합니다.

### Q4. Metro Design의 장단점은 무엇인가요?

장점으로는 콘텐츠 중심의 깔끔한 UI, 타이포그래피만으로 강력한 시각 효과, 라이브 타일로 실시간 정보 표시이 있습니다. 단점으로는 Windows Phone 단종으로 현재는 역사적 의미, 터치와 마우스 모두 완벽히 최적화하기 어려움, 타일 크기 제한으로 복잡한 UI 표현 어려움이 있습니다.

### Q5. Metro Design에서 색상은 어떻게 사용하나요?

선명한 단색 타일 기반. 각 타일이 하나의 채도 높은 색상 블록 색상 역할은 tile-primary: 주요 타일 색 — Microsoft Blue 계열, tile-accent: 보조 타일 색 — 다른 채도 높은 단색, background: 흰색 또는 아주 연한 회색입니다. 주의사항: 타일별 단색 사용 — 그라데이션·패턴 금지, 색상 수는 많아도 됨 — 각 타일이 독립적 색을 가질 수 있음.

### Q6. Metro Design에 어울리는 폰트 스타일은 무엇인가요?

Metro Design에는 Segoe UI 계열 또는 유사한 휴머니스트 산세리프. 극단적으로 얇거나 굵은 weight 활용 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 세리프 폰트 금지, heading 매우 크게, 얇은 weight (Thin/Light) — 대담한 타이포 전략.

### Q7. Metro Design 디자인에서 하면 안 되는 것은 무엇인가요?

Metro Design에서 피해야 할 것: 둥근 모서리 사용 금지 — 타일은 반드시 직각, 그림자 사용 금지 — 완전 플랫, 타일 외 자유 레이아웃 사용 금지 — 그리드 기반 타일만.

### Q8. Metro Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Metro Design을 적용한 대표적인 제품·서비스로는 Windows Phone UI, Windows 8 시작 화면, Xbox 대시보드 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #0078D7
- secondary: #00BCF2
- accent: #FFB900
- background: #FFFFFF
- surface: #F2F2F2
- text: #000000
- textSecondary: #666666
- border: #D6D6D6

### 타이포그래피

- fontFamily: 'Segoe UI', 'Noto Sans KR', Tahoma, sans-serif
- headingWeight: 300
- bodyWeight: 400
- letterSpacing: 0em
- titleFont: Segoe UI Light, sans-serif

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 0 / md 0 / lg 0 / full 0
- shadow sm: none
- shadow md: none
- shadow lg: none
- border: 0px solid #D6D6D6

### 컴포넌트 형태

- button: square / hover darken / text none
- card: flat / hover darken
- input: outlined / focus border
- badge: square / solid
- icon: lucide / stroke 1.5 / size 20px
- layout: fluid / section normal
- animation: 300ms cubic-bezier(0.1, 0.9, 0.2, 1)

## 관련 링크

### 관련 스타일

- [Fluent Design System](https://ui.buildersgate.com/styles/fluent-design)
- [Flat Design](https://ui.buildersgate.com/styles/flat-design)
- [Minimalism](https://ui.buildersgate.com/styles/minimalism)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/metro-design)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/metro-design)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/metro-design)

### 비교

- [Metro Design vs Flat Design](https://ui.buildersgate.com/compare/flat-design-vs-metro-design)
- [Metro Design vs Fluent Design System](https://ui.buildersgate.com/compare/fluent-design-vs-metro-design)
- [Metro Design vs Minimalism](https://ui.buildersgate.com/compare/metro-design-vs-minimalism)

---

HTML 버전: https://ui.buildersgate.com/styles/metro-design

이 문서는 https://ui.buildersgate.com/styles/metro-design.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.