플랫 디자인

Flat design

그림자·그라데이션·질감을 걷어내고 단색 도형과 여백만으로 만드는 2차원적 디자인. 2013년 iOS 7과 Windows Metro가 대중화했습니다.

다른 이름: Flat UI

···

html

<div class="poster">
  <div class="icon" id="icon"></div>
  <h1>Weather</h1>
  <p>Clear skies, 21°C</p>
  <button class="btn">Open app</button>
</div>

css

body{background:#eef1f6}
.poster{width:min(84%,280px);background:#fff;border-radius:14px;padding:26px;text-align:center;
  font-family:-apple-system,"Segoe UI",sans-serif}
.icon{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:#3ecbe0;position:relative}
.icon::after{content:'';position:absolute;inset:14px;border-radius:50%;background:#fff}
.icon.cloud::after{border-radius:40% 40% 45% 45%/60% 60% 40% 40%;inset:16px 8px 14px 8px;background:#e4967a}
h1{margin:0 0 4px;font-size:20px;font-weight:700;color:#1c2733}
p{margin:0 0 18px;font-size:13px;color:#6b7686}
.btn{background:#3ecbe0;color:#fff;border:0;border-radius:10px;padding:10px 22px;font-weight:700;
  font-size:13px;cursor:pointer}

const icon = document.getElementById('icon');
setInterval(() => icon.classList.toggle('cloud'), 1700);

스큐어모피즘이 "실물처럼 보이게"였다면 플랫 디자인은 정반대입니다 — 화면은 화면일 뿐, 종이나 가죽인 척하지 않습니다. 아이콘은 단색 실루엣이나 두께 균일한 선으로, 버튼은 그림자 없이 색상 대비만으로 구분됩니다.

이런 전환이 일어난 실용적 이유도 있습니다. 고해상도(레티나) 화면이 보급되면서 정교한 그라데이션·질감 이미지를 여러 배율로 준비하는 비용이 부담스러워졌고, 반응형 웹에서는 벡터 기반의 단순한 도형이 다루기 쉬웠습니다.

너무 단순화하면 뭐가 눌리는 버튼이고 뭐가 그냥 텍스트인지 구분이 안 되는 문제가 생겨서("플랫 디자인의 발견 가능성 문제"), 이후 살짝의 그림자나 색 대비를 더한 "플랫 2.0"으로 다시 조정됐습니다.