YG
예가체페 코체레
에티오피아 · 라이트 · 200g
자몽과 홍차, 산뜻한 끝맛
18,000원/ 200g
4.8 (214)
원두 스토어
이번 주 로스팅 일정에 올라간 원두만 보여드립니다.
정렬
이번 주 원두
목요일 로스팅분으로 준비합니다.
전체 8종
HU
우일라 수프리모
콜롬비아 · 미디엄 · 200g
캐러멜과 견과, 부드러운 바디
15,500원/ 200g
4.6 (167)
AN
안티구아 파스토레스
과테말라 · 미디엄 · 200g
다크초콜릿과 은은한 향신료
16,500원/ 200g
4.5 (132)
KE
신상품
키암부 AA
케냐 · 미디엄 · 200g
자두와 토마토, 묵직한 단맛
19,000원/ 200g
4.7 (98)
MD
만델링 G1
인도네시아 · 다크 · 200g
삼나무와 흑설탕, 낮은 산미
14,500원/ 200g
4.3 (76)
HB
베스트
하우스 블렌드
블렌드 · 미디엄 다크 · 500g
우유와 잘 어울리는 기본 블렌드
23,000원/ 500g
4.9 (503)
DC
디카페인 콜롬비아
콜롬비아 · 미디엄 · 200g
늦은 저녁에도 부담 없는 한 잔
17,000원/ 200g
4.4 (88)
DB
재고 임박
드립백 12개입
블렌드 · 미디엄 · 12개 · 120g
사무실과 여행용으로 담는 구성
16,000원/ 12개 · 120g
4.6 (341)
DEMO · 커머스 · 레퍼런스
Wanted Design System (Montage) 규칙으로 지은 화면
LUMA 원두 스토어의 쇼핑 한 페이지를 39가지 디자인 스타일로 각각 다시 지었습니다. 상품과 장바구니는 그대로, 규칙만 갈아끼운 화면입니다.
이 화면이 지키는 규칙
CC BY 4.0 오픈소스 디자인 시스템으로, 명도 기반 넘버링 컬러 체계(0=Black, 100=White), Pretendard JP 타이포그래피, 5단계 Normal/Spread 엘리베이션, 7개 카테고리 40+개 컴포넌트를 갖춘 원티드의 크로스 플랫폼 디자인 시스템입니다. 커피 구독 브랜드 LUMA의 랜딩 한 페이지를, Wanted Design System (Montage) 규칙만 갈아끼워 다시 지은 화면입니다. 이 스타일이 붙들고 있는 축은 세 가지 — Modularity — 독립적 재사용 가능한 컴포넌트 단위 · Seamlessness — iOS, Android, Web 모두 하나의 시스템 · Openness — CC BY 4.0으로 누구나 자유롭게 활용. 그래서 다른 걸 다 포기하더라도 화면에 끝까지 남는 것은 4px 기반 스페이싱 (시각보정 시 2px, 불가피 시 1px까지 허용) / 8px 그리드 + 20px 거터의 반응형 컬럼 시스템 (Mobile 2단, Tablet 3단, Desktop 12단) 쪽입니다. 무드로 읽으면 미니멀 · 신뢰감 계열, 여백이 넓은 · 차가운 · 시대색이 옅은 · 격식 있는 자리에 놓입니다. 실제로는 채용 / HR 플랫폼 · B2B SaaS 대시보드 · 크로스 플랫폼 앱 (iOS + Android + Web) 같은 화면에서 자주 만납니다.
색이 하는 일
명도 기반 넘버링(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 사용. 이 페이지에 실제로 물려 있는 값은 강조색 #3366FF, 배경 #FFFFFF, 표면 #FFFFFF입니다. 대비 기준은 시맨틱 토큰 레벨에서 역할별 대비 자동 보장 — 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(긴 텍스트) 두 가지 행간 제공 — 히어로와 본문 사이의 거리가 여기서 정해집니다. 이 화면에 물린 값은 Inter 계열, 제목 700 · 본문 400 두께, 자간 0em입니다. 섹션 사이 여백은 표준적인 쪽으로 잡혀 있습니다.
손끝에서 갈리는 차이
Wanted Design System (Montage)에서 하지 않는 것은 분명합니다 — 시맨틱 토큰을 무시하고 Atomic 컬러 직접 사용 금지 / Line 컬러(투명값)를 중첩하여 사용 금지 — Line-Solid로 대체 / 4px 기반 스페이싱 규칙을 벗어나는 임의 간격 사용 금지. 버튼은 모서리를 살짝 굴린 모양에 어두워지는 호버, 카드는 선으로만 그은 표면에 살짝 떠오르는 반응으로 물려 있습니다. 전환은 200ms ease 한 박자로 통일했습니다. ease 200ms 기본 — 사용자 플로우를 방해하지 않는 간결하고 빠른 트랜지션. 오픈소스 디자인 시스템을 기반으로 자사 시스템 구축 · 한·영·일 다국어 지원이 필요한 서비스 · 정보 밀도가 높은 데이터 중심 웹/앱 같은 프로젝트라면 이 조합이 가장 오래 버팁니다.