Rebar 를 소개해요
여러 제품이 함께 쓰는 디자인 시스템 모음, Rebar 를 왜 만들었고 어떻게 만들었는지 소개해요.
프로젝트가 하나둘 늘어날 때마다 같은 버튼, 같은 입력 필드, 같은 바텀 시트를 다시 만들고 있었어요. 색과 모서리만 조금씩 다를 뿐, 눌렀을 때의 반응이나 오류를 알리는 방식은 같아야 하는 것들이었죠. Rebar 는 이 반복을 끝내기 위해 시작했어요. 철근(rebar)이 겉으로 드러나지 않으면서 건물을 받치듯, 여러 제품의 화면 밑에서 같은 뼈대가 되려고 해요.
하나의 시스템, 여러 개의 얼굴
Rebar 의 핵심 아이디어는 단순해요. 컴포넌트는 하나로, 브랜드는 토큰으로.
- 버튼이 어떻게 생기고 어떻게 반응하는지는 모든 프로젝트가 공유해요.
- 버튼이 어떤 색이고 얼마나 둥근지는 브랜드마다
brands/<id>/폴더의 토큰이 정해요.
그래서 새 프로젝트가 생기면 컴포넌트를 다시 만들 필요 없이, 브랜드 폴더 하나만 추가하면 돼요. 같은 화면이 토큰만 바뀌어 전혀 다른 서비스처럼 보여요.
세 개의 시스템
Rebar 안의 디자인 시스템은 모두 건축 자재의 이름을 따요. 지금은 세 개예요.
| 시스템 | 계열 | 쓰는 곳 |
|---|---|---|
Clay (clay) | SEED 계열 | 콘마켓 고객 앱 |
Forge (forge) | Atlassian 계열 | 콘마켓 워크스페이스 (사내·업무 도구) |
Steel (steel) | Atlassian 계열 | Atlassian Design System 을 따르는 기준 시스템 |
같은 계열의 시스템은 컴포넌트를 함께 쓰고 토큰 값만 달라요. Forge 는 Steel 의 컴포넌트에 콘마켓 오렌지를 입힌 시스템이에요.
바퀴를 다시 발명하지 않기
좋은 디자인 시스템을 처음부터 만드는 데는 오랜 시간이 걸려요. 토큰 이름을 짓고, 상태별 스펙을 정하고, 수많은 화면에서 검증해야 하죠. 그래서 이미 잘 검증된 시스템 위에서 시작하기로 했어요.
SEED 계열 시스템은 SEED Design 을 바탕으로 해요. SEED 는 Apache-2.0 으로 공개된 디자인 시스템으로, 토큰 체계(Rootage)와 컴포넌트 스펙, 디자인 가이드가 탄탄하게 정리돼 있어요. 우리는 이 체계를 거의 그대로 따르면서, 브랜드 자산은 모두 덜어내고 여러 브랜드를 담을 수 있는 구조로 바꿨어요. Atlassian 계열은 같은 방식으로 @atlaskit/tokens(Apache-2.0)의 토큰을 가져와 만들었어요.
shadcn 처럼 가져다 쓰기
컴포넌트는 npm 패키지가 아니라 shadcn/ui 와 같은 registry 로 배포해요.
pnpm dlx shadcn@latest add <site>/r/clay-theme.json
pnpm dlx shadcn@latest add <site>/r/action-button.json코드가 내 프로젝트로 복사되므로, 필요하면 언제든 고칠 수 있어요. 버전 충돌이나 스타일 덮어쓰기 싸움이 없어요.
앞으로
- 더 많은 컴포넌트와 패턴
- React Native 토큰과 컴포넌트 (로드맵)
- 새 브랜드 추가 경험 다듬기
첫 번째 시스템인 Clay 이야기는 Clay 디자인 시스템 에서 이어서 읽을 수 있어요.