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 · 커머스 · 레퍼런스
Ant Design 규칙으로 지은 화면
LUMA 원두 스토어의 쇼핑 한 페이지를 39가지 디자인 스타일로 각각 다시 지었습니다. 상품과 장바구니는 그대로, 규칙만 갈아끼운 화면입니다.
이 화면이 지키는 규칙
엔터프라이즈급 UI 디자인 언어로, 중국 알리바바 그룹에서 개발했습니다. 커피 구독 브랜드 LUMA의 랜딩 한 페이지를, Ant Design 규칙만 갈아끼워 다시 지은 화면입니다. 이 스타일이 붙들고 있는 축은 네 가지 — 자연스러움 (Natural) · 확실함 (Certain) · 의미있음 (Meaningful) · 성장 (Growing). 그래서 다른 걸 다 포기하더라도 화면에 끝까지 남는 것은 상태 피드백 (loading, disabled, success, error) 모든 인터랙션에 적용 / 폼 유효성 검사 메시지 — error/warning 색상 및 메시지 텍스트 병행 쪽입니다. 무드로 읽으면 미니멀 · 신뢰감 계열, 여백이 넓은 · 차가운 · 시대색이 옅은 · 격식 있는 자리에 놓입니다. 실제로는 중국계 테크 스타트업 · B2B SaaS 대시보드 · 관리자 패널 같은 화면에서 자주 만납니다.
색이 하는 일
Ant Blue 기반 semantic token 시스템. 기능별 색상을 엄격히 구분하는 기업용 팔레트. 색의 역할은 이렇게 나뉩니다 — primary (Brand Blue): CTA, 링크, 활성 상태 / success (Green): 성공·완료 상태 / warning (Yellow/Orange): 경고 상태. 대신 넘지 않는 선이 있습니다 — semantic 색상 역할 외 용도로 혼용 금지 (e.g. success 녹색을 강조로 쓰지 않음) / gray 계열 10단계 사용 — 임의 회색 사용 금지. 이 페이지에 실제로 물려 있는 값은 강조색 #1890FF, 배경 #FFFFFF, 표면 #FAFAFA입니다. 대비 기준은 WCAG AA (4.5:1) 기본.
글자와 리듬
중립적이고 기능적인 산세리프. 다국어(중국어 포함) 가독성 필수. 글꼴은 최대 1종까지 씁니다. 타입 스케일은 Ant Design 공식 스케일 (12/14/16/20/24/30/38px). 기본 14px, line-height 1.5714 준수 — Ant Design 비율 / heading은 h1(38px)~h5(16px) 공식 스케일 사용 — 히어로와 본문 사이의 거리가 여기서 정해집니다. 이 화면에 물린 값은 -apple-system 계열, 제목 600 · 본문 400 두께, 자간 0em입니다. 섹션 사이 여백은 표준적인 쪽으로 잡혀 있습니다.
손끝에서 갈리는 차이
Ant Design에서 하지 않는 것은 분명합니다 — 컴포넌트 변형 없이 직접 색 덮어쓰기 금지 — theme token으로만 커스터마이징 / 버튼/폼 크기를 임의 변경 금지 — small/default/large 3단계만. 버튼은 모서리를 살짝 굴린 모양에 살짝 떠오르는 호버, 카드는 바닥에서 떠 있는 표면에 살짝 떠오르는 반응으로 물려 있습니다. 전환은 300ms cubic-bezier(0.645, 0.045, 0.355, 1) 한 박자로 통일했습니다. Ant Motion 기반. 기본 200~300ms ease-in-out. 페이지 전환은 slide/fade 중 선택. 과도한 모션은 기업 UI에 부적합. B2B SaaS · React 기반 관리자 페이지 · 기업용 대시보드 같은 프로젝트라면 이 조합이 가장 오래 버팁니다.