표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Metro Design
마이크로소프트의 타일 기반 디자인 언어로, 타이포그래피와 콘텐츠 중심의 심플한 인터페이스를 추구합니다.
- YEAR
- 2010
- BY
- Microsoft
- MOOD
- 화려한 · 신뢰감
- PRIMARY#0078D7
- SECONDARY#00BCF2
- ACCENT#FFB900
- BG#FFFFFF
- SURFACE#F2F2F2
취급 표시
- 각진 모서리
- 테두리 없음
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 3단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 2단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 4단계
- 화려한
- 신뢰감
어디에 쓰나
실제로 쓰는 곳
- Windows Phone UI
- Windows 8 시작 화면
- Xbox 대시보드
사용 사례
- Windows Phone 앱 (역사적)
- Windows 8/10 스타트 화면 앱
- 타일 기반 대시보드
이런 프로젝트에 맞습니다
- Windows 생태계 앱 (역사적 레퍼런스)
- 타일 기반 대시보드
- 정보 중심 UI
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2010년 Windows Phone 7과 함께 공개된 Microsoft의 첫 플랫 디자인 언어. 이후 Fluent Design으로 진화.
핵심 원칙
- 콘텐츠가 크롬을 대신한다 (Content, not chrome)
- 타이포그래피 중심
- 움직임이 생명을 준다
주요 특징
- 라이브 타일 (Live Tiles)
- 대담한 타이포그래피
- 플랫한 색상 팔레트
- 그리드 기반 레이아웃
- 애니메이션 전환
장점과 한계
장점
- 콘텐츠 중심의 깔끔한 UI
- 타이포그래피만으로 강력한 시각 효과
- 라이브 타일로 실시간 정보 표시
한계
- Windows Phone 단종으로 현재는 역사적 의미
- 터치와 마우스 모두 완벽히 최적화하기 어려움
- 타일 크기 제한으로 복잡한 UI 표현 어려움
컬러 시스템
선명한 단색 타일 기반. 각 타일이 하나의 채도 높은 색상 블록
색의 역할
- 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.
접근성
대담한 타이포그래피와 플랫 색상으로 기본 접근성은 양호. 타일의 색상 대비 확인 필요.
자주 묻는 질문
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 대시보드 등이 있습니다.