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

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

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

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

## 핵심 원칙
- 심플함
- 명료성
- 사용성 우선

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

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

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

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

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

## 실제 사용 제품·서비스
- 초기 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

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

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

관련 스타일 탐색

Minimalism

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

Material Design

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

Neobrutalism

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