표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Flat Design
2D 평면적인 요소를 사용하여 심플하고 미니멀한 디자인을 추구합니다.
- YEAR
- 2012
- MOOD
- 미니멀 · 친근·발랄
- PRIMARY#3498DB
- SECONDARY#2ECC71
- ACCENT#E74C3C
- BG#ECF0F1
- SURFACE#FFFFFF
취급 표시
- 살짝 둥근 모서리
- 테두리 없음
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 2단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 3단계
- 미니멀
- 친근·발랄
어디에 쓰나
실제로 쓰는 곳
- 초기 Windows 8 UI
- 많은 스타트업 랜딩 페이지
사용 사례
- 모바일 앱
- 웹 랜딩 페이지
- 아이콘 및 일러스트
- 인포그래픽
이런 프로젝트에 맞습니다
- 빠른 프로토타이핑
- 모바일 앱
- 아이콘·일러스트
- 인포그래픽
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2012년 Microsoft의 Metro Design과 iOS 7 플랫 전환을 계기로 주류가 됨. 스큐어모피즘에 대한 반작용으로 탄생.
핵심 원칙
- 심플함
- 명료성
- 사용성 우선
주요 특징
- 그림자 없는 평면적 요소
- 단순한 색상 팔레트
- 미니멀한 타이포그래피
- 명확한 아이콘
- 단순한 인터페이스
장점과 한계
장점
- 빠른 로딩 속도 (텍스처·그라데이션 없음)
- 어떤 화면 해상도에서도 선명함
- 디자인·개발 모두 구현이 빠름
- 무채색 배경에서 색상이 돋보임
한계
- 클릭 가능 요소와 불가능 요소 구별이 어려울 수 있음
- 개성 표현이 어려움
- 오남용 시 지루함
컬러 시스템
채도 높은 비비드 컬러를 과감하게 사용. 그라데이션 없이 단색 블록으로 구성
색의 역할
- primary: 버튼, 링크, 핵심 UI — 채도 높은 단색
- secondary: 보조 영역, 아이콘 — primary와 대비되는 색
- background: 밝은 단색 또는 흰색
- text: 어두운 단색 — gray 계열이 일반적
제약
- 그라데이션 금지 — 모든 색상 영역이 단색
- 색상 수 3~5종 이내 제한
- 파스텔보다 채도 있는 색 권장 — flat이지만 생기 있어야 함
다크모드 — 배경 어둡게, 텍스트 밝게. 컬러 역할 유지하되 각 색의 명도 조정
명도 대비 — WCAG AA — 단색 배경이라 대비 확보 쉬움
타이포그래피
깔끔하고 중립적인 기하학 산세리프. 폰트 자체보다 위계 구성이 중요
글꼴은 최대 2종 · 스케일 비율 1.25 (Major Third)
- 세리프·스크립트 폰트 지양
- weight로 계층 구분 — 크기+weight 조합 활용
- line-height 1.4~1.6으로 콘텐츠 밀도 적절히 유지
설계 제약
반드시 포함
- 단색 아이콘 — 선 또는 채워진 단색
- 명확한 색상 대비로 영역 구분
- 여백 충분히 활용
하지 말 것
- 그림자(box-shadow, drop-shadow) 사용 금지
- 그라데이션 배경 금지
- 3D 효과·입체감 표현 금지
모션 — 선택적. 사용 시 단순 ease 200ms. 복잡한 모션은 flat의 단순함과 충돌.
접근성
색상 대비만 잘 지키면 가독성 우수. 단, 클릭 가능 요소 구별을 위한 추가 시각 단서 필요.
자주 묻는 질문
Flat Design이란 무엇인가요?
2D 평면적인 요소를 사용하여 심플하고 미니멀한 디자인을 추구합니다. 2012년 Microsoft의 Metro Design과 iOS 7 플랫 전환을 계기로 주류가 됨. 스큐어모피즘에 대한 반작용으로 탄생.
Flat Design의 핵심 디자인 원칙은 무엇인가요?
Flat Design의 핵심 원칙은 심플함, 명료성, 사용성 우선입니다.
Flat Design은 어떤 프로젝트에 적합한가요?
Flat Design은 모바일 앱, 웹 랜딩 페이지, 아이콘 및 일러스트, 인포그래픽, 빠른 프로토타이핑, 모바일 앱, 아이콘·일러스트, 인포그래픽 등의 프로젝트에 적합합니다.
Flat Design의 장단점은 무엇인가요?
장점으로는 빠른 로딩 속도 (텍스처·그라데이션 없음), 어떤 화면 해상도에서도 선명함, 디자인·개발 모두 구현이 빠름, 무채색 배경에서 색상이 돋보임이 있습니다. 단점으로는 클릭 가능 요소와 불가능 요소 구별이 어려울 수 있음, 개성 표현이 어려움, 오남용 시 지루함이 있습니다.
Flat Design에서 색상은 어떻게 사용하나요?
채도 높은 비비드 컬러를 과감하게 사용. 그라데이션 없이 단색 블록으로 구성 색상 역할은 primary: 버튼, 링크, 핵심 UI — 채도 높은 단색, secondary: 보조 영역, 아이콘 — primary와 대비되는 색, background: 밝은 단색 또는 흰색입니다. 주의사항: 그라데이션 금지 — 모든 색상 영역이 단색, 색상 수 3~5종 이내 제한.
Flat Design에 어울리는 폰트 스타일은 무엇인가요?
Flat Design에는 깔끔하고 중립적인 기하학 산세리프. 폰트 자체보다 위계 구성이 중요 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 세리프·스크립트 폰트 지양, weight로 계층 구분 — 크기+weight 조합 활용.
Flat Design 디자인에서 하면 안 되는 것은 무엇인가요?
Flat Design에서 피해야 할 것: 그림자(box-shadow, drop-shadow) 사용 금지, 그라데이션 배경 금지, 3D 효과·입체감 표현 금지.
Flat Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Flat Design을 적용한 대표적인 제품·서비스로는 초기 Windows 8 UI, 많은 스타트업 랜딩 페이지 등이 있습니다.