Clay 와 Forge
콘마켓은 디자인 시스템을 두 개 써요. 고객 앱은 SEED 계열 Clay, 사내·업무 도구(콘마켓 워크스페이스)는 Atlassian 계열 Forge예요.
콘마켓 제품은 누가 쓰는 화면인지에 따라 디자인 시스템이 달라요. 고객이 쓰는 모바일 앱과 직원이 쓰는 업무 도구는 화면의 밀도도, 자주 쓰는 컴포넌트도 다르기 때문이에요. 두 시스템 모두 콘마켓 오렌지와 Pretendard 서체를 써서, 브랜드 인상은 같게 유지해요.
| Clay | Forge | |
|---|---|---|
| 시스템 id | clay | forge |
| 제품 | 콘마켓 고객 앱 | 콘마켓 워크스페이스 |
| 계열 | SEED 계열 | Atlassian 계열 (Steel 에서 파생) |
| 쓰는 사람 | 고객 | 콘마켓 직원·파트너 |
| 대표 화면 | 홈 피드, 상품 상세, 주문·결제, 채팅 | 어드민, 운영 콘솔, 주문·정산 관리, 사내 위키 |
| 화면 특징 | 모바일 중심, 큰 터치 영역, 여유 있는 간격 | 데스크톱 중심, 표·필터·폼이 많은 촘촘한 화면 |
| 컴포넌트 | registry/ui (/components/...) | registry/steel/ui (/steel/components/..., Steel 과 공유) |
| 토큰 유틸 | bg-bg-brand-solid, p-x4, rounded-r2 | bg-ds-background-brand-bold, p-ds-200, rounded-ds-small |
| 테마 설치 | clay-theme | forge-theme |
언제 무엇을 쓰나요?
Clay(clay) 를 쓰는 경우
- 고객이 앱이나 모바일 웹에서 보는 화면이에요.
- 바텀시트, 큰 액션 버튼, 카드형 목록처럼 손가락으로 다루는 UI 가 중심이에요.
- 마케팅 페이지, 이벤트 페이지처럼 브랜드 표현이 큰 화면이에요.
Forge(forge) 를 쓰는 경우
- 직원이나 입점 파트너가 데스크톱에서 오래 쓰는 업무 도구예요.
- 표, 필터, 사이드 내비게이션, 긴 폼, 모달처럼 정보가 빽빽한 화면이에요.
- 여러 사람이 상태를 바꾸고 기록을 남기는 협업 흐름(검수, 승인, 이슈 처리)이 있어요.
한 화면에 섞지 않아요
두 시스템은 토큰 체계(--rb-* / --ds-*)와 컴포넌트가 따로예요. 한 제품 안에서는 한 시스템만 골라 쓰고, Clay 컴포넌트와 Forge(Steel) 컴포넌트를 한 화면에 섞지 않아요.
Forge 는 어떻게 만들었나요?
Forge 는 컴포넌트를 새로 만든 시스템이 아니라 Steel 에서 파생한 Atlassian 계열의 두 번째 시스템이에요. Steel(Atlassian Design System 클론)의 컴포넌트·토큰을 그대로 쓰고, 브랜드·선택 역할의 색만 콘마켓 오렌지로 바꿨어요. 링크·포커스 링·정보 색은 Atlassian 파랑, 경고는 노랑을 그대로 둬서 접근성과 관례를 지켜요.
Forge 는 packages/tokens/scripts/derive-brand.ts 로 brands/steel 을 복제하고 브랜드 역할의 색만 바꿔 만들었어요. 역할별로 무엇이 바뀌었는지, 대비 결과, 같은 방법으로 다른 시스템을 만드는 명령은 Steel 문서에 정리했어요.