Wanted Design System (Montage)

CC BY 4.0 오픈소스 디자인 시스템으로, 명도 기반 넘버링 컬러 체계(0=Black, 100=White), Pretendard JP 타이포그래피, 5단계 Normal/Spread 엘리베이션, 7개 카테고리 40+개 컴포넌트를 갖춘 원티드의 크로스 플랫폼 디자인 시스템입니다.

YEAR: 2024
BY: Wanted Lab (원티드랩)
MOOD: 미니멀 · 신뢰감

표본

이 스타일의 기본형

버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.

입력

PRIMARY#3366FF
SECONDARY#F8F8F8
ACCENT#3366FF
BG#FFFFFF
SURFACE#FFFFFF

취급 표시

둥근 모서리
가는 테두리
가는 아이콘 선

표본

이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.

버튼

입력과 토글

이메일

배지

중립강조긍정

탭

스탯과 차트

2,480주간 방문+12%

1.8%이탈률-0.4%p

여덟 달의 지표 흐름을 담은 표본 차트입니다.

아바타와 아이콘

김서이하박지윤채+1

카드

기본 카드

서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.

강조 카드

강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.

LUMA루마구독하기

COFFEE SUBSCRIPTION

매주 새로 볶는 커피 구독

로스팅한 지 사흘 안 된 원두만 담습니다. 취향을 고르면 매주 목요일에 도착합니다.

4,200구독 중인 가정

72시간로스팅 후 배송까지

12종싱글 오리진 원두

루마의 원칙

한 잔의 기준을 정해두고, 매주 그 기준대로 보냅니다.

사흘 이내 로스팅

주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.

취향 진단

다섯 가지 질문으로 산미와 바디를 맞춰 원두를 고릅니다.

산지 직거래

에티오피아와 콜롬비아 농장에서 직접 계약해 들여옵니다.

커핑 기록 동봉

그 주 배치의 커핑 노트와 로스팅 프로파일을 함께 보냅니다.

나눠 받는 계정

한 구독으로 두 가지 원두를 나눠 받을 수 있습니다.

언제든 일시정지

여행이나 출장 주간은 구독 관리에서 한 번에 건너뜁니다.

구독 플랜

원두 양과 주기만 고르면 됩니다. 약정 기간은 없습니다.

Solo

12,900원주 1회

200g 원두 한 봉
분쇄도 선택 가능
배송비 포함
언제든 일시정지

Duo

22,900원주 1회

Solo의 모든 항목
200g 두 종 또는 400g 한 종
커핑 노트 카드 동봉
한정 로스팅 우선 배정

House

39,000원주 1회

Duo의 모든 항목
1kg 업소용 팩
드립백 20개 추가
담당자 상담 연결

첫 주는 취향 진단용 샘플 세 종으로 시작합니다.

브랜드 랜딩 데모 크게 보기

LUMA Studio

주문 검색

구독 운영 현황

이번 주 로스팅과 발송 일정을 한 화면에서 봅니다.

1,284활성 구독+4.2%

312kg이번 주 로스팅+18kg

2.1%해지율-0.3%p

96%정시 출고변동 없음

월별 발송량

1월–12월

최근 12개월 발송 봉 수

원두별 소진

하우스 · 예가체페 · 우일라 · 안티구아 · 키암부 · 만델링

이번 주 생두 소진량, 단위 kg

플랜 구성

Solo · Duo · House

활성 구독의 플랜 비율

최근 주문

목요일 발송분 기준으로 정렬했습니다.

주문번호	고객	플랜	로스팅	금액	상태
LM-2418	김서김서연	Duo	미디엄	22,900원	출고 완료
LM-2417	정도정도현	Solo	라이트	12,900원	로스팅 중
LM-2416	한유한유진	House	다크	39,000원	포장 대기
LM-2415	오세오세훈	Duo	미디엄	22,900원	배송 중
LM-2414	문지문지아	Solo	미디엄	12,900원	일시정지
LM-2413	배승배승우	Duo	라이트	22,900원	출고 완료
LM-2412	신가신가온	House	미디엄	39,000원	결제 대기
LM-2411	류하류하람	Solo	다크	12,900원	출고 완료

로스팅 팀

이번 주 배치를 맡은 인원입니다.

박지이하최민윤채+1

박지훈헤드 로스터
이하늘품질 관리
최민서생두 구매
윤채원포장과 발송
강태오고객 응대

알림 설정

운영 알림을 어디까지 받을지 정합니다.

남은 생두가 20kg 아래로 내려가면 알립니다.

매일 아침 여덟 시에 그날 배치 목록을 보냅니다.

두 주 연속 배송을 건너뛴 구독자를 표시합니다.

SaaS 대시보드 데모 크게 보기

무드와 이웃

밀도여백빽빽

온도감차가움따뜻함

시대감레트로미래적

격식자유분방격식

미니멀
신뢰감

Atlassian Design System아틀라시안의 제품군에 사용되는 디자인 시스템입니다.Atlassian Design System와 비교하기

Carbon Design SystemIBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다.Carbon Design System와 비교하기

Ant Design엔터프라이즈급 UI 디자인 언어로, 중국 알리바바 그룹에서 개발했습니다.Ant Design와 비교하기

어디에 쓰나

실제로 쓰는 곳

원티드 (채용 플랫폼)
원티드긱스 (프리랜서 매칭)
원티드인사이트 (HR 솔루션)
원티드스페이스 (커리어 콘텐츠)

사용 사례

채용 / HR 플랫폼
B2B SaaS 대시보드
크로스 플랫폼 앱 (iOS + Android + Web)
데이터 중심 콘텐츠 플랫폼
오픈소스 기반 자체 디자인 시스템 구축

이런 프로젝트에 맞습니다

오픈소스 디자인 시스템을 기반으로 자사 시스템 구축
한·영·일 다국어 지원이 필요한 서비스
정보 밀도가 높은 데이터 중심 웹/앱
Figma 기반 디자인-개발 협업 워크플로

이런 프로젝트에 권합니다

커뮤니티·소셜

더 읽기

원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.

역사와 배경

원티드랩이 2024년 디자인 라이브러리로 처음 선보인 뒤, 2025년 에이전틱 디자인 시스템 'Montage'로 확장하여 CC BY 4.0 오픈소스로 공개했습니다. 'From Separate Core Blocks To a Seamless Flow'를 슬로건으로, AI가 디자인을 읽고 생성할 수 있도록 설계된 것이 특징입니다.

핵심 원칙

Modularity — 독립적 재사용 가능한 컴포넌트 단위
Seamlessness — iOS, Android, Web 모두 하나의 시스템
Openness — CC BY 4.0으로 누구나 자유롭게 활용

주요 특징

명도 기반 컬러 넘버링 (0=Black, 100=White)
Normal/Spread 듀얼 엘리베이션 시스템
Pretendard JP 기반 19단계 타이포 스케일
4px 기반 스페이싱 + 8px 그리드
CC BY 4.0 오픈소스 라이선스

장점과 한계

장점

CC BY 4.0 오픈소스 — 상업적 사용, 수정, 재배포 자유
명도 기반 숫자 네이밍으로 직관적 색상 선택 가능
Pretendard JP로 한국어/영어/일본어 동시 지원
Figma UI Kit 공개 (Web + Native 별도 제공)
Hover/Active 상태를 Opacity 프레임으로 처리하여 색상 관리 단순화

한계

2024년 공개된 비교적 새로운 시스템으로 커뮤니티 생태계가 작음
Wanted Sans 커스텀 폰트는 별도 적용 필요
채용 도메인 최적화로 타 도메인에 그대로 적용 시 일부 컴포넌트 부족 가능

컬러 시스템

명도 기반 넘버링(0=Black, 100=White)의 시맨틱 컬러 토큰 시스템으로, Primary Blue를 5단위로 세분화하고 Opacity 프레임으로 상호작용 상태를 표현

색의 역할

primary: Blue 계열 — Normal/Strong/Heavy 3단계로 중요도 표현
label: Normal~Disable 6단계로 텍스트 위계 표현
fill: Normal/Strong/Alternative 3단계 투명도 포함 배경
line: Normal/Neutral/Alternative — Solid 변형으로 중첩 방지
background: Normal/Alternative + Elevated(모달용) + Transparent(Chrome 효과)
status: Positive(Green), Cautionary(Yellow), Negative(Red)
accent: Red~Pink 11색 Foreground/Background 쌍 제공

제약

Cool Neutral 팔레트 21단계 — 무채색에도 미세한 쿨톤 적용
Line 컬러는 투명값 포함이므로 중첩 사용 금지 — 중첩 시 Line-Solid 사용
Hover/Active 상태는 색상 변경 대신 Opacity 프레임으로 처리
Static White/Black은 테마와 무관하게 고정 — Inverse 패턴과 구분하여 사용

다크모드 — Background-Elevated에서 Normal과 색상 차이를 두어 층위 구분, Static 컬러는 테마 변경에도 고정 유지

명도 대비 — 시맨틱 토큰 레벨에서 역할별 대비 자동 보장 — Label Normal은 배경 대비 최고, Assistive/Disable은 의도적으로 약한 대비

타이포그래피

Pretendard JP — 한국어/영어/일본어를 단일 폰트로 지원하는 현대적 산세리프

글꼴은 최대 1종 · 스케일 비율 1.143 (Minor Second에 가까운 세밀한 스케일)

Display(56~36px) → Title(32~24px) → Heading(22~20px) → Headline(18~17px) → Body(16~15px) → Label(14~13px) → Caption(12~11px) 19단계 스케일
Body/Label은 Normal(일반)과 Reading(긴 텍스트) 두 가지 행간 제공
큰 텍스트일수록 음수 자간(-0.032em), 작은 텍스트일수록 양수 자간(+0.031em)
음절 단위 줄바꿈(word-break) — 디자인 시 별도 줄바꿈 불필요

설계 제약

반드시 포함

4px 기반 스페이싱 (시각보정 시 2px, 불가피 시 1px까지 허용)
8px 그리드 + 20px 거터의 반응형 컬럼 시스템 (Mobile 2단, Tablet 3단, Desktop 12단)
Normal/Spread 듀얼 엘리베이션 (Ambient + Key shadow 레이어링)
7개 카테고리 컴포넌트 활용 (Actions, Contents, Feedback, Loading, Navigations, Presentation, Selection & Input)
시맨틱 컬러 토큰을 통한 일관된 색상 사용

하지 말 것

시맨틱 토큰을 무시하고 Atomic 컬러 직접 사용 금지
Line 컬러(투명값)를 중첩하여 사용 금지 — Line-Solid로 대체
4px 기반 스페이싱 규칙을 벗어나는 임의 간격 사용 금지
Elevation 레벨을 건너뛰어 깊이 관계 모호하게 만들기 금지

모션 — ease 200ms 기본 — 사용자 플로우를 방해하지 않는 간결하고 빠른 트랜지션

접근성

시맨틱 컬러 토큰으로 Label(Normal~Disable), Status(Positive/Cautionary/Negative), Interaction(Inactive/Disable) 등 상태별 색상을 체계적으로 정의하며, Static White/Black으로 테마 변경에도 고정 대비를 보장합니다.

자주 묻는 질문

Wanted Design System (Montage)이란 무엇인가요?

CC BY 4.0 오픈소스 디자인 시스템으로, 명도 기반 넘버링 컬러 체계(0=Black, 100=White), Pretendard JP 타이포그래피, 5단계 Normal/Spread 엘리베이션, 7개 카테고리 40+개 컴포넌트를 갖춘 원티드의 크로스 플랫폼 디자인 시스템입니다. 원티드랩이 2024년 디자인 라이브러리로 처음 선보인 뒤, 2025년 에이전틱 디자인 시스템 'Montage'로 확장하여 CC BY 4.0 오픈소스로 공개했습니다. 'From Separate Core Blocks To a Seamless Flow'를 슬로건으로, AI가 디자인을 읽고 생성할 수 있도록 설계된 것이 특징입니다.

Wanted Design System (Montage)의 핵심 디자인 원칙은 무엇인가요?

Wanted Design System (Montage)의 핵심 원칙은 Modularity — 독립적 재사용 가능한 컴포넌트 단위, Seamlessness — iOS, Android, Web 모두 하나의 시스템, Openness — CC BY 4.0으로 누구나 자유롭게 활용입니다.

Wanted Design System (Montage)은 어떤 프로젝트에 적합한가요?

Wanted Design System (Montage)은 채용 / HR 플랫폼, B2B SaaS 대시보드, 크로스 플랫폼 앱 (iOS + Android + Web), 데이터 중심 콘텐츠 플랫폼, 오픈소스 기반 자체 디자인 시스템 구축, 오픈소스 디자인 시스템을 기반으로 자사 시스템 구축, 한·영·일 다국어 지원이 필요한 서비스, 정보 밀도가 높은 데이터 중심 웹/앱, Figma 기반 디자인-개발 협업 워크플로 등의 프로젝트에 적합합니다.

Wanted Design System (Montage)의 장단점은 무엇인가요?

장점으로는 CC BY 4.0 오픈소스 — 상업적 사용, 수정, 재배포 자유, 명도 기반 숫자 네이밍으로 직관적 색상 선택 가능, Pretendard JP로 한국어/영어/일본어 동시 지원, Figma UI Kit 공개 (Web + Native 별도 제공), Hover/Active 상태를 Opacity 프레임으로 처리하여 색상 관리 단순화이 있습니다. 단점으로는 2024년 공개된 비교적 새로운 시스템으로 커뮤니티 생태계가 작음, Wanted Sans 커스텀 폰트는 별도 적용 필요, 채용 도메인 최적화로 타 도메인에 그대로 적용 시 일부 컴포넌트 부족 가능이 있습니다.

Wanted Design System (Montage)에서 색상은 어떻게 사용하나요?

명도 기반 넘버링(0=Black, 100=White)의 시맨틱 컬러 토큰 시스템으로, Primary Blue를 5단위로 세분화하고 Opacity 프레임으로 상호작용 상태를 표현 색상 역할은 primary: Blue 계열 — Normal/Strong/Heavy 3단계로 중요도 표현, label: Normal~Disable 6단계로 텍스트 위계 표현, fill: Normal/Strong/Alternative 3단계 투명도 포함 배경입니다. 주의사항: Cool Neutral 팔레트 21단계 — 무채색에도 미세한 쿨톤 적용, Line 컬러는 투명값 포함이므로 중첩 사용 금지 — 중첩 시 Line-Solid 사용.

Wanted Design System (Montage)에 어울리는 폰트 스타일은 무엇인가요?

Wanted Design System (Montage)에는 Pretendard JP — 한국어/영어/일본어를 단일 폰트로 지원하는 현대적 산세리프 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: Display(56~36px) → Title(32~24px) → Heading(22~20px) → Headline(18~17px) → Body(16~15px) → Label(14~13px) → Caption(12~11px) 19단계 스케일, Body/Label은 Normal(일반)과 Reading(긴 텍스트) 두 가지 행간 제공.

Wanted Design System (Montage) 디자인에서 하면 안 되는 것은 무엇인가요?

Wanted Design System (Montage)에서 피해야 할 것: 시맨틱 토큰을 무시하고 Atomic 컬러 직접 사용 금지, Line 컬러(투명값)를 중첩하여 사용 금지 — Line-Solid로 대체, 4px 기반 스페이싱 규칙을 벗어나는 임의 간격 사용 금지, Elevation 레벨을 건너뛰어 깊이 관계 모호하게 만들기 금지.

Wanted Design System (Montage)을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Wanted Design System (Montage)을 적용한 대표적인 제품·서비스로는 원티드 (채용 플랫폼), 원티드긱스 (프리랜서 매칭), 원티드인사이트 (HR 솔루션), 원티드스페이스 (커리어 콘텐츠) 등이 있습니다.

이 스타일로 만들어야 한다면

빌더스게이트가 디자인부터 개발까지 맡습니다.

담아두면 브리프에 그대로 실립니다

제작 문의