Rebar

Rebar 디자인 시스템 · Clay · Forge · Steel

Rebar

제품을 받치는 디자인 시스템

Clay 시작하기시스템 보기
시스템
3
Clay · Forge · Steel
Clay 컴포넌트
54
registry/ui · shadcn 으로 설치
Clay 토큰
300
색 187 · 간격 25 · 글자 59
문서 예제
337
모든 예제는 라이브로 렌더링

시스템

세 개의 시스템, 같은 뼈대

모든 시스템은 건축 자재에서 이름을 가져왔어요. 같은 계열의 시스템은 컴포넌트를 함께 쓰고 토큰 값만 달라요.

물레 위에서 테라코타 그릇을 빚는 손
Clay — 점토. 손에 직접 닿는 고객 앱이라 둥근 모서리와 따뜻한 오렌지로 빚었어요.

Clay

콘마켓 고객 앱을 위한 디자인 시스템이에요. SEED Design 의 토큰 체계를 바탕으로 따뜻한 오렌지와 둥근 모서리를 써요.

계열
SEED 계열
제품
콘마켓 고객 앱
토큰
300개
컴포넌트
54개
Clay 문서
모루 위에서 달군 쇠를 두드리는 대장장이와 튀는 불꽃
Forge — 대장간. Steel 의 컴포넌트를 콘마켓 오렌지로 다시 벼려 낸 업무 도구용 시스템이에요.

Forge

콘마켓 사내·업무 도구를 위한 디자인 시스템이에요. Steel 의 컴포넌트에 콘마켓 오렌지를 브랜드 색으로 입혔어요.

계열
Atlassian 계열
제품
콘마켓 워크스페이스
토큰
797개
컴포넌트
52개 (Steel 과 공유)
Forge 문서
흐린 하늘 아래 볼트로 이어 붙인 낡은 철골 보
Steel — 철골. Atlassian Design System 을 그대로 옮긴 기준 시스템으로, Forge 가 이 위에 서요.

Steel

협업 도구를 위한 디자인 시스템이에요. Atlassian Design System 의 최신 토큰·컴포넌트 체계를 따라요.

계열
Atlassian 계열
제품
Atlassian 계열 기준 시스템
토큰
785개
컴포넌트
52개
Steel 문서

실제 화면

콘마켓 고객 앱 홈을 Clay 컴포넌트로만

아래 영상은 이 사이트의 데모 화면을 그대로 녹화했어요. 카테고리 탭, 상품 목록, 관심 버튼, 바텀시트와 스낵바까지 모두 문서에 있는 컴포넌트예요.

/demo/clay-app-demo · 390×760 녹화

이 화면에 쓴 컴포넌트

상품 사진과 가게 이름은 예시예요. 색, 간격, 모서리, 눌림 효과는 전부 Clay 토큰에서 와요.

데모 직접 눌러보기
Forge 앱 셸콘마켓 워크스페이스의 사이드 내비게이션과 상단 바. Steel 과 같은 코드에 Forge 토큰만 입혔어요.데모 열기

만드는 방식

토큰에서 컴포넌트, 그리고 내 프로젝트로

시스템이 셋이어도 만드는 순서는 하나예요. 색 하나를 바꾸면 그 토큰을 쓰는 모든 컴포넌트에 반영돼요.

  1. 01

    토큰

    시스템마다 brands/<id>/ 폴더에 YAML 로 값을 적어요. 빌드하면 CSS 변수, Tailwind 유틸리티, React Native 객체가 함께 나와요.

    디자인 토큰
    brands/clay/color.yaml
    $color.bg.brand-solid:
  values:
    theme-light: $color.palette.orange-600
    theme-dark: $color.palette.orange-700
  2. 02

    컴포넌트

    Clay 컴포넌트 54개는 SEED 스펙의 variant·size·state 값을 그대로 옮겼어요. 동작은 Radix UI, 바텀시트는 vaul 위에 있어요.

    컴포넌트 목록
    registry/ui/action-button.tsx
    <ActionButton variant="brandSolid" size="large">
  장바구니 담기
</ActionButton>
  3. 03

    배포

    패키지를 설치하는 대신 shadcn registry 로 코드를 내 프로젝트에 복사해요. 복사한 코드는 마음대로 고쳐 써도 돼요.

    설치 방법
    terminal
    npx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/action-button.json

업데이트

전체 글