# Flat Design — 디자인 스타일 가이드

## 기본 정보
- **ID**: flat-design
- **카테고리**: design-style
- **연도**: 2012

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

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

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

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

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

## 실제 사용 제품·서비스
- 초기 Windows 8 UI
- 많은 스타트업 랜딩 페이지

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

## 관련 스타일
- [minimalism](https://ui.buildersgate.com/styles/minimalism)
- [material-design](https://ui.buildersgate.com/styles/material-design)
- [neobrutalism](https://ui.buildersgate.com/styles/neobrutalism)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

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

### 헤더
- background: #3498DB
- textColor: #FFFFFF
- accentColor: #E74C3C

### 타이포그래피
- fontFamily: Lato, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: none
- md: none
- lg: none
- xl: none

### Border Radius
- none: 0
- sm: 3px
- md: 6px
- lg: 12px
- full: 9999px

### 테두리 (Borders)
- width: 0px
- style: none
- color: transparent

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease

### 애니메이션
- duration: 200ms
- easing: ease

### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=darken / textTransform=none
- 카드: style=flat / hoverEffect=darken
- 인풋: style=filled / focusEffect=border
- 배지: shape=rounded / style=solid
- 아이콘: package=lucide / strokeWidth=2 / defaultSize=24

### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal

### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false

## 자주 묻는 질문 (FAQ)

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

### Q: Flat Design의 핵심 디자인 원칙은 무엇인가요?
A: Flat Design의 핵심 원칙은 심플함, 명료성, 사용성 우선입니다.

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

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

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

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

### Q: Flat Design 디자인에서 하면 안 되는 것은 무엇인가요?
A: Flat Design에서 피해야 할 것: 그림자(box-shadow, drop-shadow) 사용 금지, 그라데이션 배경 금지, 3D 효과·입체감 표현 금지.

### Q: Flat Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Flat Design을 적용한 대표적인 제품·서비스로는 초기 Windows 8 UI, 많은 스타트업 랜딩 페이지 등이 있습니다.

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=flat-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=flat-design&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Flat Design

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

연도

2012

2012년 Microsoft의 Metro Design과 iOS 7 플랫 전환을 계기로 주류가 됨. 스큐어모피즘에 대한 반작용으로 탄생.

#3498DB

핵심 원칙

1

심플함

2

명료성

3

사용성 우선

주요 특징

  • 그림자 없는 평면적 요소
  • 단순한 색상 팔레트
  • 미니멀한 타이포그래피
  • 명확한 아이콘
  • 단순한 인터페이스

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

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

실제 사용 예시

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

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Flat Buttons

그림자 없는 평면적인 버튼 디자인

Flat Cards

단순하고 깔끔한 평면 카드

📊

Analytics

1,234 방문자

💰

Revenue

₩12,345,678

👥

Users

567 활성

Icon Buttons

아이콘만으로 구성된 심플한 버튼

Input Fields

미니멀한 입력 필드

Toggle Switch

평면적인 토글 스위치

Enabled
Disabled

Flat Typography

그림자 없는 평면적 타이포그래피 — 색상과 무게로만 계층 구분

Flat Design

심플함이 곧 아름다움

2D 평면 · 단순한 색상 · 명료한 아이콘

Flat Design은 2012년 스큐어모피즘에 대한 반작용으로 등장했습니다. 그림자, 그라데이션, 텍스처를 배제하고 색상과 형태 자체로 정보를 전달합니다.

PrimarySuccessWarningDanger

자주 묻는 질문

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, 많은 스타트업 랜딩 페이지 등이 있습니다.

관련 스타일 탐색

Minimalism

"적을수록 좋다"는 철학으로, 불필요한 요소를 제거하고 본질에 집중합니다.

Material Design

구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.

Neobrutalism

브루탈리즘의 현대적 해석으로, 굵은 테두리와 대담한 색상을 사용합니다.