표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Monochrome Design
단일 색상의 다양한 톤과 음영을 사용하여 세련되고 일관된 느낌을 줍니다.
- YEAR
- Timeless
- MOOD
- 미니멀 · 럭셔리
- PRIMARY#000000
- SECONDARY#666666
- ACCENT#AAAAAA
- BG#FFFFFF
- SURFACE#F5F5F5
취급 표시
- 살짝 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 2단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 3단계
- 미니멀
- 럭셔리
어디에 쓰나
실제로 쓰는 곳
- Chanel 웹사이트
- 일부 사진작가 포트폴리오
사용 사례
- 패션·럭셔리 브랜드
- 포트폴리오
- 사진작가 사이트
- 편집 디자인
이런 프로젝트에 맞습니다
- 패션·럭셔리
- 포트폴리오
- 사진작가 사이트
- 편집 디자인
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 일관성
- 세련됨
- 집중
주요 특징
- 단일 색상 기반
- 톤과 음영 활용
- 명확한 대비
- 우아한 느낌
- 집중력 향상
장점과 한계
장점
- 색상 충돌 없이 항상 조화로움
- 고급스럽고 세련된 이미지
- 타이포그래피와 구조가 돋보임
한계
- 지루하거나 단조로울 수 있음
- 상태·카테고리 구분에 색상 사용 불가
- 활기차고 에너지 넘치는 브랜드엔 부적합
컬러 시스템
단 하나의 색상(또는 흑백)만. 명도와 채도의 변화만으로 모든 계층을 표현
색의 역할
- base: 선택한 단일 색상 (또는 흑백)
- light-variant: base의 밝은 버전 — 배경, 카드
- dark-variant: base의 어두운 버전 — 텍스트, 아이콘
- tint: base에 흰색 혼합한 버전 — 서브 영역
- shade: base에 검정 혼합한 버전 — 강조, 호버
제약
- 두 번째 색상 추가 금지 — 단일 색 계열만
- 채도 완전히 없애면 흑백(monochrome) — 채도 있으면 single-hue monochrome, 둘 다 허용
- 텍스트와 배경의 명도 차이 반드시 충분히
다크모드 — light/dark variant 반전. base 색상 자체는 유지
명도 대비 — WCAG AAA (7:1) 권장 — 색상이 없을수록 명도 대비가 전부
타이포그래피
폰트가 단조로운 색을 보완하는 핵심 — 개성 있는 폰트 선택 권장
글꼴은 최대 2종 · 스케일 비율 1.333 이상 — 색 없이 위계를 크기로 강하게 표현
- 폰트 weight 대비 충분히 — 색 없이 계층 구분 수단
- letter-spacing으로 분위기 차별화 가능
설계 제약
반드시 포함
- 명도 계층 최소 3단계 (배경/중간/텍스트)
- strong/weak 텍스트 계층으로 정보 위계 표현
하지 말 것
- 두 번째 색상 사용 금지
- 색상으로 강조 표현 금지 — 크기·굵기·여백만 사용
모션 — 선택적. 사용 시 opacity 또는 scale 변화. 색상 변화 없음.
자주 묻는 질문
Monochrome Design이란 무엇인가요?
단일 색상의 다양한 톤과 음영을 사용하여 세련되고 일관된 느낌을 줍니다.
Monochrome Design의 핵심 디자인 원칙은 무엇인가요?
Monochrome Design의 핵심 원칙은 일관성, 세련됨, 집중입니다.
Monochrome Design은 어떤 프로젝트에 적합한가요?
Monochrome Design은 패션·럭셔리 브랜드, 포트폴리오, 사진작가 사이트, 편집 디자인, 패션·럭셔리, 포트폴리오, 사진작가 사이트, 편집 디자인 등의 프로젝트에 적합합니다.
Monochrome Design의 장단점은 무엇인가요?
장점으로는 색상 충돌 없이 항상 조화로움, 고급스럽고 세련된 이미지, 타이포그래피와 구조가 돋보임이 있습니다. 단점으로는 지루하거나 단조로울 수 있음, 상태·카테고리 구분에 색상 사용 불가, 활기차고 에너지 넘치는 브랜드엔 부적합이 있습니다.
Monochrome Design에서 색상은 어떻게 사용하나요?
단 하나의 색상(또는 흑백)만. 명도와 채도의 변화만으로 모든 계층을 표현 색상 역할은 base: 선택한 단일 색상 (또는 흑백), light-variant: base의 밝은 버전 — 배경, 카드, dark-variant: base의 어두운 버전 — 텍스트, 아이콘입니다. 주의사항: 두 번째 색상 추가 금지 — 단일 색 계열만, 채도 완전히 없애면 흑백(monochrome) — 채도 있으면 single-hue monochrome, 둘 다 허용.
Monochrome Design에 어울리는 폰트 스타일은 무엇인가요?
Monochrome Design에는 폰트가 단조로운 색을 보완하는 핵심 — 개성 있는 폰트 선택 권장 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 폰트 weight 대비 충분히 — 색 없이 계층 구분 수단, letter-spacing으로 분위기 차별화 가능.
Monochrome Design 디자인에서 하면 안 되는 것은 무엇인가요?
Monochrome Design에서 피해야 할 것: 두 번째 색상 사용 금지, 색상으로 강조 표현 금지 — 크기·굵기·여백만 사용.
Monochrome Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Monochrome Design을 적용한 대표적인 제품·서비스로는 Chanel 웹사이트, 일부 사진작가 포트폴리오 등이 있습니다.