디자인 아틀라스
EN
❖ 디자인 스타일

미니멀리즘

Minimalism

꼭 필요한 요소 하나만 남기고 나머지는 다 덜어내는 스타일. "덜어낼 게 더는 없을 때" 완성됩니다.

다른 이름: Minimalist design
···
html
<div class="stage">
  <div class="dot" id="dot"></div>
  <span class="word">less</span>
</div>
css
body{background:#fafaf8}
.stage{display:grid;place-items:center;width:100%;height:100%}
.dot{width:18px;height:18px;border-radius:50%;background:#15151a;margin-bottom:22px;
  animation:breathe 3.2s ease-in-out infinite}
.word{position:absolute;bottom:18%;font:300 12px/1 -apple-system,"Segoe UI",sans-serif;letter-spacing:.5em;
  color:#9a9aa2;text-transform:uppercase}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.35}}

"Less is more(적을수록 풍부하다)"는 건축가 미스 반 데어 로에의 말이 자주 인용되지만, 웹에서의 미니멀리즘은 단순히 요소가 적은 게 아니라 남은 하나에 시선이 확실히 집중되도록 설계하는 것에 가깝습니다. 넓은 여백, 절제된 색(대개 무채색 + 포인트 컬러 하나), 얇은 서체가 특징입니다.

정보를 줄이는 게 아니라 우선순위를 매기는 작업이라는 점이 중요합니다. 화면에 넣을 요소를 고를 때마다 "이게 없으면 사용자가 목적을 못 이루는가"를 자문해서, 아니라면 뺍니다. 애플의 제품 페이지, 일본 건축·공예 브랜드의 사이트가 자주 예시로 꼽힙니다.

정보량 자체가 많아야 하는 화면(관리자 대시보드, 비교표)에 억지로 미니멀리즘을 적용하면 오히려 스크롤과 클릭이 늘어나 사용성이 떨어집니다. 콘텐츠가 적은 브랜드·포트폴리오 사이트에 가장 잘 맞습니다.

언제 쓰나

브랜드·포트폴리오처럼 메시지 하나를 또렷이 전달하면 되는 곳에 씁니다. 정보량이 본질적으로 많은 화면에는 억지로 적용하지 마세요.