# Minimalism

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

- 층: 스타일 (시각적 스타일)
- ID: minimalism
- 연도: 1960s
- 무드 태그: 미니멀, 럭셔리
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/minimalism

## 정의

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

## 역사·배경

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 크기 차이는 의미 있게 — 단 과도한 크기는 지양

## 설계 제약

### 하면 안 되는 것

- 장식용 도형·선·패턴 사용 금지
- 그림자 강하게 사용 금지 — 없거나 극히 미묘하게만
- 색상 2종 이상의 버튼 변형 금지 — 버튼 유형은 primary 하나만
- 아이콘을 장식용으로 배치 금지 — 의미 있는 곳에만
- 요소 3개 이상 한 줄에 나열 금지 — 밀도 낮게 유지

### 반드시 포함할 것

- 넉넉한 여백 (padding/margin이 콘텐츠 크기와 같거나 큰 수준)
- 명확한 타이포그래피 계층 (h1-h3-body 3단계 이내)
- 일관된 spacing 리듬 (8px 또는 4px 기반 그리드)

### 모션 가이드

모션 최소화 또는 없음. 필요 시 opacity 페이드 200ms ease-out만 허용. 슬라이드·바운스·회전 등 시선을 끄는 모션 금지.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: -2 (여백 −2 ↔ +2 빽빽)
- 온도감: 0 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: 0 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 포트폴리오 사이트
- 고급 브랜드 사이트
- 테크 스타트업 랜딩
- 블로그·저널

## 추천 프로젝트 유형

- 포트폴리오
- 고급 브랜드
- 블로그·저널
- 테크 스타트업

## 장단점

### 장점

- 시간이 지나도 낡지 않는 클래식함
- 콘텐츠 집중도 향상
- 빠른 로딩 속도
- 유지보수 및 수정 용이

### 단점·한계

- 지나치면 개성이 없어 보임
- 복잡한 제품 정보 전달에 부적합
- 잘못 사용하면 밋밋하거나 빈 느낌

## 실제 사용 제품·서비스

- Apple 웹사이트
- Google 검색
- Medium 블로그

## 접근성

높은 여백과 명확한 타이포그래피 계층이 스크린 리더에 유리. 단, 색상만으로 정보 전달하지 않도록 주의.

## 자주 묻는 질문

### Q1. Minimalism이란 무엇인가요?

"적을수록 좋다"는 철학으로, 불필요한 요소를 제거하고 본질에 집중합니다. 1960년대 미술 운동에서 시작. 디지털 UI에서는 스큐어모피즘에 대한 반작용으로 2010년대 주류 트렌드로 자리잡음.

### Q2. Minimalism의 핵심 디자인 원칙은 무엇인가요?

Minimalism의 핵심 원칙은 단순성, 기능성, 본질에 집중입니다.

### Q3. Minimalism은 어떤 프로젝트에 적합한가요?

Minimalism은 포트폴리오 사이트, 고급 브랜드 사이트, 테크 스타트업 랜딩, 블로그·저널, 포트폴리오, 고급 브랜드, 블로그·저널, 테크 스타트업 등의 프로젝트에 적합합니다.

### Q4. Minimalism의 장단점은 무엇인가요?

장점으로는 시간이 지나도 낡지 않는 클래식함, 콘텐츠 집중도 향상, 빠른 로딩 속도, 유지보수 및 수정 용이이 있습니다. 단점으로는 지나치면 개성이 없어 보임, 복잡한 제품 정보 전달에 부적합, 잘못 사용하면 밋밋하거나 빈 느낌이 있습니다.

### Q5. Minimalism에서 색상은 어떻게 사용하나요?

흑백 기반에 단 1~2색 강조. 색이 적을수록 각 색의 무게가 커지는 시스템 색상 역할은 background: 흰색(#fff) 또는 오프화이트 — 숨 쉬는 공간의 기준, text: 순수 검정 또는 진한 회색 (#111~#333), text-secondary: 중간 회색 (#666~#999) — 보조 정보입니다. 주의사항: 강조색(primary)은 전체 화면에서 10% 이하 면적만 차지해야 함, 색상 3종 초과 금지 — 배경+텍스트+강조 1색이 원칙.

### Q6. Minimalism에 어울리는 폰트 스타일은 무엇인가요?

Minimalism에는 인지되지 않을 만큼 중립적인 산세리프. 폰트 자체가 눈에 띄면 미니멀이 아님 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 폰트는 1가지만 — weight와 size로만 계층 구분, 장식 폰트·스크립트·디스플레이 폰트 금지.

### Q7. Minimalism 디자인에서 하면 안 되는 것은 무엇인가요?

Minimalism에서 피해야 할 것: 장식용 도형·선·패턴 사용 금지, 그림자 강하게 사용 금지 — 없거나 극히 미묘하게만, 색상 2종 이상의 버튼 변형 금지 — 버튼 유형은 primary 하나만, 아이콘을 장식용으로 배치 금지 — 의미 있는 곳에만, 요소 3개 이상 한 줄에 나열 금지 — 밀도 낮게 유지.

### Q8. Minimalism을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Minimalism을 적용한 대표적인 제품·서비스로는 Apple 웹사이트, Google 검색, Medium 블로그 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #000000
- secondary: #FFFFFF
- accent: #888888
- background: #FFFFFF
- surface: #FAFAFA
- text: #000000
- textSecondary: #666666
- border: #E0E0E0

### 타이포그래피

- fontFamily: 'Helvetica Neue', 'Noto Sans KR', sans-serif
- headingWeight: 300
- bodyWeight: 300
- letterSpacing: 0.02em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1.5
- borderRadius: sm 2px / md 4px / lg 8px / full 9999px
- shadow sm: 0 1px 2px rgba(0,0,0,0.05)
- shadow md: 0 2px 4px rgba(0,0,0,0.08)
- shadow lg: 0 4px 8px rgba(0,0,0,0.12)
- border: 1px solid #E0E0E0

### 컴포넌트 형태

- button: rounded / hover none / text none
- card: flat / hover none
- input: underlined / focus border
- badge: pill / subtle
- icon: feather / stroke 1.5 / size 20px
- layout: boxed / section spacious
- animation: 300ms ease

## 관련 링크

### 관련 스타일

- [Flat Design](https://ui.buildersgate.com/styles/flat-design)
- [Swiss Design (국제 타이포그래피 양식)](https://ui.buildersgate.com/styles/swiss-design)
- [Dark Mode Design](https://ui.buildersgate.com/styles/dark-mode)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/minimalism)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/minimalism)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/minimalism)

### 비교

- [Minimalism vs Corporate Memphis](https://ui.buildersgate.com/compare/corporate-memphis-vs-minimalism)
- [Minimalism vs Dark Mode Design](https://ui.buildersgate.com/compare/dark-mode-vs-minimalism)
- [Minimalism vs Flat Design](https://ui.buildersgate.com/compare/flat-design-vs-minimalism)
- [Minimalism vs Human Interface Guidelines (HIG)](https://ui.buildersgate.com/compare/human-interface-guidelines-vs-minimalism)
- [Minimalism vs Metro Design](https://ui.buildersgate.com/compare/metro-design-vs-minimalism)
- [Minimalism vs Monochrome Design](https://ui.buildersgate.com/compare/minimalism-vs-monochrome)
- [Minimalism vs Neumorphism](https://ui.buildersgate.com/compare/minimalism-vs-neumorphism)
- [Minimalism vs Organic & Natural](https://ui.buildersgate.com/compare/minimalism-vs-organic-natural)
- [Minimalism vs Swiss Design (국제 타이포그래피 양식)](https://ui.buildersgate.com/compare/minimalism-vs-swiss-design)

### 쓰임새별 추천

- [SaaS 대시보드](https://ui.buildersgate.com/for/saas-dashboard)
- [이커머스·쇼핑몰](https://ui.buildersgate.com/for/ecommerce)
- [포트폴리오](https://ui.buildersgate.com/for/portfolio)
- [핀테크·금융 서비스](https://ui.buildersgate.com/for/fintech)
- [기업·공공 사이트](https://ui.buildersgate.com/for/corporate-public)
- [모바일 앱](https://ui.buildersgate.com/for/mobile-app)
- [브랜드 사이트](https://ui.buildersgate.com/for/brand-site)

---

HTML 버전: https://ui.buildersgate.com/styles/minimalism

이 문서는 https://ui.buildersgate.com/styles/minimalism.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.