디자인 스타일
플랫 디자인(Flat Design)
플랫 디자인(Flat Design)은 현실적인 질감과 과도한 깊이를 걷어내고 색, 형태, 타이포그래피와 아이콘의 명확한 대비로 인터페이스의 기능을 표현하는 디자인 접근입니다.
쉬운 설명
입체적인 재질과 장식 그림자를 줄이고 단색 면과 단순한 아이콘으로 기능을 직접 전달하는 UI 스타일.
Visual sample
눈으로 보면 이렇습니다
단색 면, 단순한 벡터 아이콘과 명확한 상태 색으로 구성한 플랫 디자인 샘플
- 단색 표면
- 최소화한 그림자
- 단순한 벡터 아이콘
Flat UI design, solid color surfaces, simple vector icons, minimal shadows, clear visual hierarchy, accessible state colors Style variations
같은 스타일도 이렇게 달라집니다
그림자를 완전히 제거한 클래식 플랫, 일러스트를 강조한 친근한 변형과 얇은 구분선으로 밀도를 높인 제품 UI까지 색과 정보량에 따라 달라집니다.클래식 플랫
원색에 가까운 단색 면과 단순한 기하 아이콘으로 기능을 가장 직접적으로 보여줍니다.
Classic flat UI, solid blue color blocks, crisp geometric icons, no gradients, no decorative shadows 친근한 플랫
따뜻한 팔레트와 둥근 벡터 일러스트를 더해 교육·소비자 앱에 부드러운 인상을 만듭니다.
Friendly flat design, warm solid colors, rounded vector illustrations, simple filled icons, clear readable text 제품형 플랫
중성 배경, 얇은 구분선과 제한된 상태 색으로 데이터와 업무 화면의 판독성을 높입니다.
Product flat UI, neutral surfaces, thin dividers, one functional blue accent, compact typography, no elevation Visual DNA
스타일을 만드는 구체적인 요소
단어 하나보다 아래 요소를 함께 지정해야 AI가 더 일관된 결과를 만듭니다.선과 테두리
0–1px · Crisp면의 색 차이로 구분하고 필요한 입력창과 표에만 얇은 선을 사용합니다.
모서리
0–12px · Consistent제품 성격에 맞는 한 가지 라운드 체계를 모든 컴포넌트에 일관되게 적용합니다.
컬러 톤
Solid · 2–4 colors단색 표면과 한두 개의 기능 색으로 계층과 상태를 구분합니다.
타이포그래피
Neutral Sans · 400–700단순한 표면에서도 위계가 보이도록 크기와 굵기를 명확히 나눕니다.
아이콘
Geometric Vector같은 채움 또는 같은 굵기의 선 아이콘을 사용하고 현실적인 질감은 넣지 않습니다.
그림자
없음 또는 1단계기본적으로 사용하지 않고 떠 있는 메뉴 등 실제 계층이 필요한 곳에만 아주 약하게 적용합니다.
간격과 밀도
8pt · Clear면과 글자 사이의 일정한 간격으로 깊이 효과 없이도 그룹을 알아보게 합니다.
모션
120–220ms · Direct색과 투명도의 짧은 상태 전환으로 조작 결과를 즉시 보여줍니다.
Where it works
어떤 프로젝트에 잘 어울리나요?
스타일의 강도는 제품의 목적과 사용자가 읽어야 하는 정보량에 맞춰 조절해야 합니다.적극적으로 추천
가볍고 명확한 컴포넌트를 여러 화면에 반복하기 좋습니다.
장식보다 상태와 데이터 판독에 집중할 수 있습니다.
단순한 아이콘과 색으로 다양한 사용자가 기능을 빠르게 이해합니다.
강도를 조절해서 적용
평면성만 사용하면 인상이 약할 수 있어 타이포그래피와 이미지가 필요합니다.
악기, 물리 컨트롤과 고급 제품의 촉감을 전달하기에는 한계가 있습니다.
Compare
비슷한 스타일과 무엇이 다른가요?
플랫 디자인은 색과 단순한 형태로 기능을 직접 표현하고, 스큐어모피즘은 현실 사물의 재질과 조작 방식을 화면에 재현합니다.플랫 디자인(Flat Design)
- 단색 면과 단순한 기하 형태
- 그림자와 질감을 최소화
- 아이콘과 상태 색 중심
Skeuomorphism
- 현실적인 금속·종이·가죽 재질
- 빛과 음영으로 물리적 깊이 표현
- 실제 사물의 조작 비유 중심
Prompt recipe
AI에게 요청할 때는 이렇게 조합하세요
Flat UI design, solid color surfaces, simple vector icons, minimal shadows, clear visual hierarchy, accessible state colors. Use solid surfaces, one consistent radius scale, crisp vector icons, accessible functional colors, and direct state transitions; avoid decorative gradients, multiple shadow styles, photoreal textures, and color-only status communication. Final check
완성 전에 확인하세요
- 01
그림자 없이도 클릭 가능한 요소가 보이는가?
- 02
아이콘의 채움과 선 스타일이 통일됐는가?
- 03
상태 색이 충분한 대비를 갖는가?
- 04
면의 그룹이 간격만으로 구분되는가?
- 05
모바일에서 터치 영역이 충분한가?
- 06
플랫함이 정보 위계를 약하게 만들지 않는가?
Explore more
다른 스타일도 보러 가기
작은 미리보기로 분위기를 비교하고 다음 디자인 용어로 이어가세요.관계 지도
