표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Minimalism
"적을수록 좋다"는 철학으로, 불필요한 요소를 제거하고 본질에 집중합니다.
- YEAR
- 1960s
- MOOD
- 미니멀 · 럭셔리
- PRIMARY#000000
- SECONDARY#FFFFFF
- ACCENT#888888
- BG#FFFFFF
- SURFACE#FAFAFA
취급 표시
- 살짝 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 1단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 3단계
- 미니멀
- 럭셔리
어디에 쓰나
실제로 쓰는 곳
- Apple 웹사이트
- Google 검색
- Medium 블로그
사용 사례
- 포트폴리오 사이트
- 고급 브랜드 사이트
- 테크 스타트업 랜딩
- 블로그·저널
이런 프로젝트에 맞습니다
- 포트폴리오
- 고급 브랜드
- 블로그·저널
- 테크 스타트업
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
1960년대 미술 운동에서 시작. 디지털 UI에서는 스큐어모피즘에 대한 반작용으로 2010년대 주류 트렌드로 자리잡음.
핵심 원칙
- 단순성
- 기능성
- 본질에 집중
주요 특징
- 제한된 색상 팔레트
- 넉넉한 여백
- 단순한 타이포그래피
- 최소한의 장식
- 명확한 계층
장점과 한계
장점
- 시간이 지나도 낡지 않는 클래식함
- 콘텐츠 집중도 향상
- 빠른 로딩 속도
- 유지보수 및 수정 용이
한계
- 지나치면 개성이 없어 보임
- 복잡한 제품 정보 전달에 부적합
- 잘못 사용하면 밋밋하거나 빈 느낌
컬러 시스템
흑백 기반에 단 1~2색 강조. 색이 적을수록 각 색의 무게가 커지는 시스템
색의 역할
- background: 흰색(#fff) 또는 오프화이트 — 숨 쉬는 공간의 기준
- text: 순수 검정 또는 진한 회색 (#111~#333)
- text-secondary: 중간 회색 (#666~#999) — 보조 정보
- primary: 단 하나의 강조색 — 링크, CTA, 핵심 인터랙션에만 사용
- surface: 아주 연한 회색 (#f5f5f5 수준) — 배경과 거의 구분 안 되게
제약
- 강조색(primary)은 전체 화면에서 10% 이하 면적만 차지해야 함
- 색상 3종 초과 금지 — 배경+텍스트+강조 1색이 원칙
- 그라데이션 사용 금지 — 단색만 허용
- 배경에 패턴·텍스처 사용 금지
다크모드 — 배경과 텍스트만 반전. primary 강조색은 다크 배경에서 명도를 약간 높여 가독성 유지
명도 대비 — 텍스트 WCAG AAA (7:1) 권장 — 미니멀리즘에서 타이포그래피는 유일한 시각 언어
타이포그래피
인지되지 않을 만큼 중립적인 산세리프. 폰트 자체가 눈에 띄면 미니멀이 아님
글꼴은 최대 1종 · 스케일 비율 1.25 (Major Third) — 조용하고 일정한 리듬
- 폰트는 1가지만 — weight와 size로만 계층 구분
- 장식 폰트·스크립트·디스플레이 폰트 금지
- body font-size 16px 이상, line-height 1.6~1.8 — 여백이 곧 디자인
- heading과 body 크기 차이는 의미 있게 — 단 과도한 크기는 지양
설계 제약
반드시 포함
- 넉넉한 여백 (padding/margin이 콘텐츠 크기와 같거나 큰 수준)
- 명확한 타이포그래피 계층 (h1-h3-body 3단계 이내)
- 일관된 spacing 리듬 (8px 또는 4px 기반 그리드)
하지 말 것
- 장식용 도형·선·패턴 사용 금지
- 그림자 강하게 사용 금지 — 없거나 극히 미묘하게만
- 색상 2종 이상의 버튼 변형 금지 — 버튼 유형은 primary 하나만
- 아이콘을 장식용으로 배치 금지 — 의미 있는 곳에만
- 요소 3개 이상 한 줄에 나열 금지 — 밀도 낮게 유지
모션 — 모션 최소화 또는 없음. 필요 시 opacity 페이드 200ms ease-out만 허용. 슬라이드·바운스·회전 등 시선을 끄는 모션 금지.
접근성
높은 여백과 명확한 타이포그래피 계층이 스크린 리더에 유리. 단, 색상만으로 정보 전달하지 않도록 주의.
자주 묻는 질문
Minimalism이란 무엇인가요?
"적을수록 좋다"는 철학으로, 불필요한 요소를 제거하고 본질에 집중합니다. 1960년대 미술 운동에서 시작. 디지털 UI에서는 스큐어모피즘에 대한 반작용으로 2010년대 주류 트렌드로 자리잡음.
Minimalism의 핵심 디자인 원칙은 무엇인가요?
Minimalism의 핵심 원칙은 단순성, 기능성, 본질에 집중입니다.
Minimalism은 어떤 프로젝트에 적합한가요?
Minimalism은 포트폴리오 사이트, 고급 브랜드 사이트, 테크 스타트업 랜딩, 블로그·저널, 포트폴리오, 고급 브랜드, 블로그·저널, 테크 스타트업 등의 프로젝트에 적합합니다.
Minimalism의 장단점은 무엇인가요?
장점으로는 시간이 지나도 낡지 않는 클래식함, 콘텐츠 집중도 향상, 빠른 로딩 속도, 유지보수 및 수정 용이이 있습니다. 단점으로는 지나치면 개성이 없어 보임, 복잡한 제품 정보 전달에 부적합, 잘못 사용하면 밋밋하거나 빈 느낌이 있습니다.
Minimalism에서 색상은 어떻게 사용하나요?
흑백 기반에 단 1~2색 강조. 색이 적을수록 각 색의 무게가 커지는 시스템 색상 역할은 background: 흰색(#fff) 또는 오프화이트 — 숨 쉬는 공간의 기준, text: 순수 검정 또는 진한 회색 (#111~#333), text-secondary: 중간 회색 (#666~#999) — 보조 정보입니다. 주의사항: 강조색(primary)은 전체 화면에서 10% 이하 면적만 차지해야 함, 색상 3종 초과 금지 — 배경+텍스트+강조 1색이 원칙.
Minimalism에 어울리는 폰트 스타일은 무엇인가요?
Minimalism에는 인지되지 않을 만큼 중립적인 산세리프. 폰트 자체가 눈에 띄면 미니멀이 아님 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 폰트는 1가지만 — weight와 size로만 계층 구분, 장식 폰트·스크립트·디스플레이 폰트 금지.
Minimalism 디자인에서 하면 안 되는 것은 무엇인가요?
Minimalism에서 피해야 할 것: 장식용 도형·선·패턴 사용 금지, 그림자 강하게 사용 금지 — 없거나 극히 미묘하게만, 색상 2종 이상의 버튼 변형 금지 — 버튼 유형은 primary 하나만, 아이콘을 장식용으로 배치 금지 — 의미 있는 곳에만, 요소 3개 이상 한 줄에 나열 금지 — 밀도 낮게 유지.
Minimalism을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Minimalism을 적용한 대표적인 제품·서비스로는 Apple 웹사이트, Google 검색, Medium 블로그 등이 있습니다.