Clay 디자인 시스템
Rebar 의 첫 번째 시스템, 콘마켓 고객 앱을 위한 Clay 의 색과 형태를 어떻게 정했는지 소개해요.
Rebar 의 첫 번째 시스템은 콘마켓 고객 앱을 위한 Clay(clay)예요. 공통 시스템이 실제로 한 서비스의 얼굴이 될 수 있는지 확인하는 첫 시험대이기도 했어요.
따뜻한 오렌지
Clay 의 브랜드 색은 콘마켓의 따뜻한 오렌지 톤이에요. 사고파는 일이 일상적이고 편안하게 느껴지도록, 강하지만 날카롭지 않은 색을 골랐어요.
팔레트는 SEED Design 과 같은 100~1000 단계로 구성하고, 시맨틱 토큰이 이 단계를 참조해요.
| 시맨틱 토큰 | 쓰임 |
|---|---|
$color.bg.brand-solid | 화면에서 가장 중요한 액션 (CTA 버튼) |
$color.bg.brand-weak | 선택된 칩, 약한 강조 배경 |
$color.fg.brand | 링크, 강조 텍스트 |
$color.stroke.brand-solid | 선택된 입력 필드, 강조 테두리 |
라이트와 다크 모드 각각에서 fg.on-brand-solid 와 bg.brand-solid 의 명도 대비를 토큰 빌드가 자동으로 검사해요.
형태는 그대로
색을 제외한 간격·모서리·글자 크기는 SEED Design 의 값을 그대로 썼어요. 4px 단위 간격(x1x16), 8px 기본 모서리(r2), 14단계 글자 크기(t1t14)는 이미 많은 화면에서 검증된 값이라, 바꾸기보다 지키는 쪽이 낫다고 판단했어요.
글꼴은 한글 가독성이 좋은 Pretendard 를 기본으로 써요.
브랜드를 바꿔 보세요
문서 사이트 상단의 브랜드 선택기로 다른 브랜드를 고르면, 같은 컴포넌트가 다른 브랜드의 토큰으로 그려지는 것을 볼 수 있어요. 새 브랜드를 직접 만들어 보고 싶다면 새 브랜드 추가하기 를 참고해요.