Get Started

Rebar 란?Copy Anchor Link

Rebar 는 여러 제품이 함께 쓰는 디자인 시스템 모음이에요. 철근(rebar)이 겉으로 드러나지 않으면서 건물을 받치듯, 토큰 형식·빌드·배포 방식을 하나로 두고 그 위에 제품별 디자인 시스템을 세워요. 그래서 Rebar 안의 시스템은 모두 건축 자재의 이름을 따요.

• Clay: SEED Design 을 바탕으로 한 모바일 중심 시스템이에요. 따뜻한 콘마켓 오렌지와 둥근 모서리를 써요.
• Steel: Atlassian Design System 의 최신 모습(FY27 "Finesse")을 따르는 시스템이에요. Atlassian 계열의 기준이에요.
• Forge: Steel 의 컴포넌트·토큰을 그대로 쓰고 브랜드 색만 콘마켓 오렌지로 바꾼 시스템이에요.

콘마켓 제품에서 어떤 시스템을 고를지는 Clay 와 Forge 에 정리했어요.

계열Copy Anchor Link

시스템은 brands/<id>/brand.yaml 의 system 값으로 계열을 골라요. 같은 계열의 시스템은 컴포넌트 코드와 토큰 이름을 함께 쓰고, 토큰 값만 달라요.

두 계열 모두 다음 원칙을 따라요.

• 컴포넌트는 하나, 토큰은 시스템마다: 시스템마다 brands/<id>/ 폴더에 토큰 값을 따로 두고, 같은 컴포넌트가 시스템에 맞는 색과 형태로 그려져요.
• shadcn 호환: 컴포넌트는 shadcn/ui 관례로 만들고 shadcn registry 로 배포해요. shadcn add 한 줄로 내 프로젝트에 코드가 복사돼요.
• 검증된 원본 위에서: 토큰 체계와 스펙은 SEED Design·Atlassian Design System 을 거의 그대로 따르고, 브랜드 자산은 덜어냈어요.

이 사이트는 경로가 계열을 정해요. 루트 섹션(/foundations, /components …)은 Clay, /steel 아래는 Atlassian 계열이에요. 상단 선택기로 Forge 나 Steel 을 고르면 /steel 로 이동해요.

구조Copy Anchor Link

brands/<id>/                    시스템별 토큰 원천 (Rootage 형식 YAML)
  clay/                         Clay — SEED 계열 (color, dimension, radius, font-size …)
  steel/                        Steel — Atlassian 계열 (color, elevation, space, shape, typography …)
  forge/                        Forge — steel 에서 파생 (derive-brand)
  */brand.yaml                  system·이름·제품·설명·폰트·shadcn 별칭
packages/tokens/                YAML 검증 + 빌드 → CSS 변수 / Tailwind 테마 / React Native 객체
  scripts/import-atlassian.ts   @atlaskit/tokens → brands/steel 재생성
  scripts/derive-brand.ts       기존 시스템에서 브랜드 색만 바꾼 새 시스템 생성 (예: steel → forge)
apps/docs/                      문서 사이트 (React Router v7 + Vite + Fumadocs) + shadcn registry
  registry/ui/                  SEED 계열(Clay) 컴포넌트 원본
  registry/steel/ui/            Atlassian 계열(Steel·Forge) 컴포넌트 원본
  content/docs/                 문서 (MDX)
scripts/new-brand.ts            기존 시스템 폴더를 복사해 새 시스템 생성

토큰은 YAML 에서 시작해 @rebar/tokens 패키지가 CSS 변수와 Tailwind v4 테마로 바꿔요. 컴포넌트는 bg-bg-brand-solid, p-x4, rounded-r2 같은 토큰 유틸만 쓰기 때문에, 토큰 값만 바뀌면 컴포넌트 코드를 건드리지 않고도 시스템의 얼굴이 바뀌어요.

Clay 이해하기Copy Anchor Link

여러 시스템 다루기Copy Anchor Link

개발 시작하기Copy Anchor Link

도구와 소식Copy Anchor Link

라이선스 고지Copy Anchor Link

Clay(SEED 계열)의 토큰 체계, 컴포넌트 스펙, 디자인 가이드 문서는 당근의 SEED Design을 바탕으로 만들었어요. Steel·Forge(Atlassian 계열)의 토큰과 컴포넌트 스펙은 npm 의 @atlaskit/* 패키지를 바탕으로 했어요. 두 원본 모두 Apache License 2.0 으로 공개돼 있고, Rebar 도 해당 부분에 같은 라이선스를 따라요. 저작권 고지와 라이선스 사본은 저장소의 NOTICE 와 brands/LICENSE-seed 에 있어요.

원본에서 브랜드 이름·색 값·문서 문구를 바꾸고, 컴포넌트를 shadcn/ui 방식으로 다시 구현했어요. 당근·Atlassian 의 로고, 캐릭터, 서체 등 브랜드 자산은 포함하지 않으며, Rebar 는 당근이나 Atlassian 과 제휴하거나 그들이 보증하는 프로젝트가 아니에요.