# Flat Design

> 2D 평면적인 요소를 사용하여 심플하고 미니멀한 디자인을 추구합니다.

- 층: 스타일 (디자인 스타일)
- ID: flat-design
- 연도: 2012
- 무드 태그: 미니멀, 친근·발랄
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/flat-design

## 정의

2D 평면적인 요소를 사용하여 심플하고 미니멀한 디자인을 추구합니다.

## 역사·배경

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의 단순함과 충돌.

## 무드 프로파일

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

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

## 사용 사례

- 모바일 앱
- 웹 랜딩 페이지
- 아이콘 및 일러스트
- 인포그래픽

## 추천 프로젝트 유형

- 빠른 프로토타이핑
- 모바일 앱
- 아이콘·일러스트
- 인포그래픽

## 장단점

### 장점

- 빠른 로딩 속도 (텍스처·그라데이션 없음)
- 어떤 화면 해상도에서도 선명함
- 디자인·개발 모두 구현이 빠름
- 무채색 배경에서 색상이 돋보임

### 단점·한계

- 클릭 가능 요소와 불가능 요소 구별이 어려울 수 있음
- 개성 표현이 어려움
- 오남용 시 지루함

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

- 초기 Windows 8 UI
- 많은 스타트업 랜딩 페이지

## 접근성

색상 대비만 잘 지키면 가독성 우수. 단, 클릭 가능 요소 구별을 위한 추가 시각 단서 필요.

## 자주 묻는 질문

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

2D 평면적인 요소를 사용하여 심플하고 미니멀한 디자인을 추구합니다. 2012년 Microsoft의 Metro Design과 iOS 7 플랫 전환을 계기로 주류가 됨. 스큐어모피즘에 대한 반작용으로 탄생.

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

Flat Design의 핵심 원칙은 심플함, 명료성, 사용성 우선입니다.

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

Flat Design은 모바일 앱, 웹 랜딩 페이지, 아이콘 및 일러스트, 인포그래픽, 빠른 프로토타이핑, 모바일 앱, 아이콘·일러스트, 인포그래픽 등의 프로젝트에 적합합니다.

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

장점으로는 빠른 로딩 속도 (텍스처·그라데이션 없음), 어떤 화면 해상도에서도 선명함, 디자인·개발 모두 구현이 빠름, 무채색 배경에서 색상이 돋보임이 있습니다. 단점으로는 클릭 가능 요소와 불가능 요소 구별이 어려울 수 있음, 개성 표현이 어려움, 오남용 시 지루함이 있습니다.

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

채도 높은 비비드 컬러를 과감하게 사용. 그라데이션 없이 단색 블록으로 구성 색상 역할은 primary: 버튼, 링크, 핵심 UI — 채도 높은 단색, secondary: 보조 영역, 아이콘 — primary와 대비되는 색, background: 밝은 단색 또는 흰색입니다. 주의사항: 그라데이션 금지 — 모든 색상 영역이 단색, 색상 수 3~5종 이내 제한.

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

Flat Design에는 깔끔하고 중립적인 기하학 산세리프. 폰트 자체보다 위계 구성이 중요 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 세리프·스크립트 폰트 지양, weight로 계층 구분 — 크기+weight 조합 활용.

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

Flat Design에서 피해야 할 것: 그림자(box-shadow, drop-shadow) 사용 금지, 그라데이션 배경 금지, 3D 효과·입체감 표현 금지.

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

Flat Design을 적용한 대표적인 제품·서비스로는 초기 Windows 8 UI, 많은 스타트업 랜딩 페이지 등이 있습니다.

## 참고 디자인 토큰

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

### 색상

- primary: #3498DB
- secondary: #2ECC71
- accent: #E74C3C
- background: #ECF0F1
- surface: #FFFFFF
- text: #2C3E50
- textSecondary: #7F8C8D
- border: #BDC3C7

### 타이포그래피

- fontFamily: Lato, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em

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

- spacing: unit 8px × scale 1
- borderRadius: sm 3px / md 6px / lg 12px / full 9999px
- shadow sm: none
- shadow md: none
- shadow lg: none
- border: 0px none transparent

### 컴포넌트 형태

- button: rounded / hover darken / text none
- card: flat / hover darken
- input: filled / focus border
- badge: rounded / solid
- icon: lucide / stroke 2 / size 24px
- layout: boxed / section normal
- animation: 200ms ease

## 관련 링크

### 관련 스타일

- [Minimalism](https://ui.buildersgate.com/styles/minimalism)
- [Material Design](https://ui.buildersgate.com/styles/material-design)
- [Neobrutalism](https://ui.buildersgate.com/styles/neobrutalism)

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

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

### 비교

- [Flat Design vs Bootstrap](https://ui.buildersgate.com/compare/bootstrap-vs-flat-design)
- [Flat Design vs Brutalism](https://ui.buildersgate.com/compare/brutalism-vs-flat-design)
- [Flat Design vs Corporate Memphis](https://ui.buildersgate.com/compare/corporate-memphis-vs-flat-design)
- [Flat Design vs Material Design](https://ui.buildersgate.com/compare/flat-design-vs-material-design)
- [Flat Design vs Metro Design](https://ui.buildersgate.com/compare/flat-design-vs-metro-design)
- [Flat Design vs Minimalism](https://ui.buildersgate.com/compare/flat-design-vs-minimalism)
- [Flat Design vs Neobrutalism](https://ui.buildersgate.com/compare/flat-design-vs-neobrutalism)
- [Flat Design vs Swiss Design (국제 타이포그래피 양식)](https://ui.buildersgate.com/compare/flat-design-vs-swiss-design)
- [Flat Design vs Toss Design System (TDS)](https://ui.buildersgate.com/compare/flat-design-vs-toss-design-system)

### 쓰임새별 추천

- [SaaS 대시보드](https://ui.buildersgate.com/for/saas-dashboard)
- [이커머스·쇼핑몰](https://ui.buildersgate.com/for/ecommerce)
- [핀테크·금융 서비스](https://ui.buildersgate.com/for/fintech)
- [기업·공공 사이트](https://ui.buildersgate.com/for/corporate-public)
- [커뮤니티·소셜](https://ui.buildersgate.com/for/community)
- [모바일 앱](https://ui.buildersgate.com/for/mobile-app)

---

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

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