브랜드
Atlassian 계열(atlas)에는 Steel 과 Forge 두 브랜드가 있어요. 컴포넌트·문서는 같이 쓰고 브랜드 색과 서체만 달라요.
/steel 아래 문서와 컴포넌트는 Atlassian 계열(atlas) 브랜드가 함께 써요. 어느 계열인지는 경로가 정하고, 계열 안에서 어떤 브랜드로 볼지는 상단 브랜드 선택기나 아래 카드로 골라요. 고르면 이 사이트의 모든 미리보기가 그 브랜드 토큰으로 바로 바뀌어요.
| 브랜드 | id | 브랜드 색 | 쓰는 곳 | 서체 |
|---|---|---|---|---|
| Steel | steel | Atlassian 파랑 | ADS 클론 원본. 협업 도구 일반 | Inter |
| Forge | forge | 콘마켓 오렌지 (#ff6600 기반) | 콘마켓 워크스페이스 — 사내·업무 도구 (어드민, 운영 콘솔, 사내 위키 …) | Pretendard 우선 |
소비자 앱은 다른 계열이에요
고객이 쓰는 콘마켓 모바일 앱은 SEED 계열 브랜드 Clay(clay)를 그대로 써요. Clay 와 Forge 를 언제 쓰는지는 Forge 문서에 정리했어요.
Forge 전략
왜 새 시스템이 아니라 브랜드인가요?
사내 도구는 표, 필터, 사이드 내비게이션, 폼처럼 정보가 빽빽한 화면이 대부분이에요. 이런 화면은 Atlassian Design System 이 오래 다듬어 온 영역이라, 컴포넌트와 간격·타이포그래피 체계를 새로 만들 이유가 없어요.
- 컴포넌트를 다시 만들지 않아요.
registry/steel/ui의 컴포넌트를 그대로 써요. 버그 수정과 새 컴포넌트가 두 브랜드에 한 번에 들어가요. - 문서도 하나예요. 사용 가이드, 접근성, Props 문서를 따로 관리하지 않아요. 브랜드만 바꿔서 보면 돼요.
- 토큰 이름이 같아요.
bg-ds-background-brand-bold같은 유틸은 그대로고, 값만 브랜드마다 달라요. 그래서 테마 파일 하나만 바꾸면 Steel 화면이 Forge 화면이 돼요. - 콘마켓다움은 색과 서체로 충분해요. 업무 도구에서 브랜드가 드러나는 곳은 주요 버튼과 로고 영역 정도예요. 이 부분만 오렌지로 바꾸고 서체를 소비자 앱과 같은 Pretendard 로 맞췄어요.
어떤 역할을 바꿨나요?
경로에 brand 가 들어간 색 토큰(color.*.brand.*, chart.brand*)만 오렌지 팔레트($color.palette.brand-orange-100 … 1000)로 바꾸고, 나머지는 Steel 값을 그대로 둬요. 선택 상태도 바꾸지 않아요.
| 역할 | 토큰 | Forge | 이유 |
|---|---|---|---|
| 브랜드 | color.background.brand.*, border.brand, text.brand, icon.brand, chart.brand* | 오렌지 | 주요 버튼·로고 영역처럼 브랜드가 드러나는 자리예요. |
| 선택 | color.background.selected.*, border.selected, text.selected, icon.selected | Steel 그대로 (중립) | 최신 ADS(FY27 Finesse)가 선택을 진한 중립 글자 + 반투명 중립 배경으로 바꿨어요. 브랜드 색은 주요 액션과 정체성에만 남겨요. 아래 설명을 봐요. |
| 링크 | color.link, link.pressed | 파랑 그대로 | 파란 글자 = 링크라는 관례가 강해요. 오렌지 링크는 경고 문구처럼 읽히기 쉬워요. |
| 포커스 링 | color.border.focused | 파랑 그대로 | 오렌지 버튼 둘레에 오렌지 링을 그리면 구분이 안 돼요. 어떤 배경에서도 눈에 띄는 파랑을 유지해요. |
| 정보 | color.*.information.* | 파랑 그대로 | 안내 메시지는 브랜드가 아니라 의미 색이에요. |
| 경고 | color.*.warning.* | 노랑 그대로 | 브랜드 오렌지와 경고 색이 섞이면 주요 버튼이 경고처럼 보여요. 경고는 원래 노랑을 지켜요. |
| 강조(accent) | color.*.accent.* | 그대로 | 라벨·아바타·차트의 분류 색이라 브랜드와 무관해요. 주황 accent 도 원본 값을 써요. |
선택 상태는 왜 오렌지가 아닌가요?
처음에는 선택 상태도 오렌지로 바꿨어요. 그런데 Steel 이 최신 Atlassian 테마(FY27 "Finesse")를 따르면서 ADS 의 선택 표현이 파랑에서 중립으로 바뀌었어요. 사이드 내비·탭·메뉴에서 선택한 항목은 진한 중립색 글자(text.selected, 다크 모드에서는 밝은 색)와 반투명 중립 배경(background.selected)으로 보여요.
- 브랜드 색을 아껴 써요. 선택 항목까지 브랜드 색이면 화면 곳곳이 오렌지가 돼서, 정작 "이 버튼을 누르세요" 라는 주요 액션이 묻혀요. 브랜드 색은 주요 버튼과 로고 같은 정체성 자리에만 남겨요.
- Steel 과 똑같이 움직여요. 선택 표현을 Steel 에 맡기면 Atlassian 이 선택 스타일을 다시 바꿔도 토큰 동기화와 재생성만으로 Forge 가 따라가요.
팔레트는 이렇게 만들었어요
- Atlassian 파랑
blue-100…blue-1000각 단계의 OKLCH 밝기(L) 와 채도 비율을 읽어요. - 콘마켓 오렌지
#ff6600의 색상(hue)·채도로, 같은 밝기의 단계를 만들어요. 밝기를 맞췄기 때문에 hover·pressed·subtle 관계와 글자 대비가 원본과 거의 같아요. brand.bold가 쓰는 700 단계는 콘마켓(Clay) 과 똑같이#ff6600그대로 써요. 흰 글자 대비는 2.94:1 로 AA 에 못 미치지만, Clay 의brand-solid와 같은 선택이에요. hover 는 600(#d25303), pressed 는 850 이에요.- 대신 브랜드 글자 토큰(
text.brand)은 한 단계 진한 800 을 써요. 흰 배경 위 오렌지 글자도 AA 를 지켜요. - 다크 모드
brand.bold가 쓰는 400 단계도#ff6600이에요. 콘마켓 오렌지와 같고, 연어색이 아니라서 danger(빨강)와 헷갈리지 않아요.
나란히 보기
Steel 과 Forge 의 핵심 토큰 값이에요. 브랜드 줄만 다르고, 선택·포커스 링·링크·경고는 같아요.
| 토큰 | Steel · Light | Forge · Light | Steel · Dark | Forge · Dark |
|---|---|---|---|---|
background.brand.bold 주요 버튼 | #1868DB | #ff6600 | #669DF1 | #ff6600 |
background.brand.bold.hovered 주요 버튼 hover | #1558BC | #d25303 | #8FB8F6 | #f0a07e |
background.brand.bold.pressed 주요 버튼 pressed | #144794 | #7e2e00 | #ADCBFB | #f7b9a0 |
text.brand 브랜드 글자 | #1868DB | #9c3c02 | #669DF1 | #ff6600 |
background.selected 선택된 항목 배경 (중립) · 같음 | #0515240F | #0515240F | #CECED912 | #CECED912 |
text.selected 선택된 항목 글자 (중립) · 같음 | #292A2E | #292A2E | #CECFD2 | #CECFD2 |
border.focused 포커스 링 (그대로) · 같음 | #4688EC | #4688EC | #8FB8F6 | #8FB8F6 |
link 링크 (그대로) · 같음 | #1868DB | #1868DB | #669DF1 | #669DF1 |
background.warning.bold 경고 (그대로) · 같음 | #FBC828 | #FBC828 | #FBC828 | #FBC828 |
색 시맨틱 토큰 중 Forge에서 값이 바뀐 것은 14개예요. 나머지는 Steel 값 그대로예요.
대비 결과
Forge 의 brand.yaml 에 적어 둔 대비 쌍을 토큰 빌드 결과에서 바로 읽어 와요. 오른쪽 열은 같은 조합의 Steel 비율이에요.
| 조합 | 미리보기 | Light | Dark | Steel (L / D) |
|---|---|---|---|---|
color.text on elevation.surface | 작업 항목작업 항목 | 14.34:1AAA | 10.56:1AAA | 14.34 / 10.56 |
color.text.subtle on elevation.surface | 작업 항목작업 항목 | 7.81:1AAA | 7.15:1AAA | 7.81 / 7.15 |
color.text.subtlest on elevation.surface | 작업 항목작업 항목 | 5.10:1AA | 5.76:1AA | 5.10 / 5.76 |
color.link on elevation.surface | 작업 항목작업 항목 | 5.20:1AA | 6.00:1AA | 5.20 / 6.00 |
color.text.inverse on color.background.brand.bold | 작업 항목작업 항목 | 2.94:1fail | 5.60:1AA | 5.20 / 6.00 |
color.text.inverse on color.background.danger.bold | 작업 항목작업 항목 | 5.16:1AA | 5.92:1AA | 5.16 / 5.92 |
color.text.inverse on color.background.success.bold | 작업 항목작업 항목 | 4.66:1AA | 8.24:1AAA | 4.66 / 8.24 |
color.text.warning.inverse on color.background.warning.bold | 작업 항목작업 항목 | 9.14:1AAA | 10.50:1AAA | 9.14 / 10.50 |
color.text.inverse on color.background.information.bold | 작업 항목작업 항목 | 5.20:1AA | 6.00:1AA | 5.20 / 6.00 |
color.text.inverse on color.background.discovery.bold | 작업 항목작업 항목 | 5.20:1AA | 6.01:1AA | 5.20 / 6.01 |
color.text.danger on color.background.danger | 작업 항목작업 항목 | 5.74:1AA | 6.81:1AA | 5.74 / 6.81 |
color.text.success on color.background.success | 작업 항목작업 항목 | 5.81:1AA | 8.87:1AAA | 5.81 / 8.87 |
color.text.warning on color.background.warning | 작업 항목작업 항목 | 5.54:1AA | 8.59:1AAA | 5.54 / 8.59 |
color.text.information on color.background.information | 작업 항목작업 항목 | 5.90:1AA | 7.03:1AAA | 5.90 / 7.03 |
color.text.selected on color.background.selected | 작업 항목작업 항목 | 12.70:1AAA | 9.02:1AAA | 12.70 / 9.02 |
Forge: 검사한 조합 30개(라이트·다크) 중 AA 미만 1개. 색이 칠해진 줄이 브랜드 역할이 바뀐 조합이에요.
text.inverseonbackground.brand.bold는 라이트에서 4.5:1 을 겨우 넘겨요. 700 단계를 대비 한계까지 밝혔기 때문이에요. 이 색 위에는 흰 글자만 올리고, 작은 글자(12px 미만)는 피해요.text.selectedonbackground.selected는 이제 두 브랜드가 같은 중립 값을 써서 대비도 같아요.
다른 Atlassian 계열 브랜드 만들기
packages/tokens/scripts/derive-brand.ts 가 기존 브랜드를 복제해 브랜드 색만 바꾼 새 브랜드를 만들어요. Forge 는 아래 명령으로 만들었어요. (brands/forge/color.yaml 맨 위 주석에도 같은 명령이 있어요.)
node scripts/derive-brand.ts --force \
--from steel \
--to forge \
--name Forge \
--product '콘마켓 워크스페이스' \
--description '콘마켓 사내·업무 도구를 위한 디자인 시스템이에요. Steel 의 컴포넌트에 콘마켓 오렌지를 브랜드 색으로 입혔어요.' \
--color '#ff6600' \
--source blue \
--prefix brand-orange \
--roles brand \
--vivid-step 700 --dark-vivid-step 400 \
--font-sans '"Pretendard Variable", Pretendard, "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'| 옵션 | 뜻 | 기본값 |
|---|---|---|
--from / --to | 원본 브랜드 id / 새 브랜드 id (brands/<id>) | 필수 |
--color | 새 브랜드 색 (#rrggbb) | 필수 |
--name, --description | brand.yaml 의 이름·설명 | id |
--product | 이 브랜드를 쓰는 제품 이름 (brand.yaml 의 product, 브랜드 선택기에 함께 보여요) | 없음 |
--source | 밝기를 따라갈 원본 팔레트 | blue |
--prefix | 새 팔레트 이름 ($color.palette.<prefix>-100 …) | brand |
--roles | 바꿀 역할. 토큰 경로에 이 단어가 들어간 것만 바뀌어요. Forge 는 brand 만 줘요 | brand,selected |
--vivid-step | 이 단계를 흰 글자 4.5:1 을 지키는 가장 밝은 색으로 올려요. 그 단계를 쓰던 글자 토큰은 한 단계 진하게 바뀌어요 | 없음 |
--dark-vivid-step | 다크 모드 brand.bold 가 쓰는 단계를 같은 밝기에서 채도 최대로 만들어요. 연어색이 아니라 선명한 오렌지가 돼서 danger(빨강)와 구분돼요 | 없음 |
--font-sans | 본문 서체 스택 | 원본 그대로 |
--force | 이미 있는 폴더를 덮어써요 | false |
만든 뒤에는 저장소 루트에서 토큰을 다시 빌드해요. 빌드가 brand.yaml 의 대비 쌍을 검사하고, 새 브랜드가 브랜드 선택기와 /r/<id>-theme.json 에 자동으로 추가돼요.
pnpm tokens:build역할을 넓힐 때는 신중하게
--roles 에 link 나 focused 를 넣으면 링크와 포커스 링도 브랜드 색이 돼요. 위 표의 이유(관례, 포커스 구분, 경고 색과의 혼동) 때문에 Forge 는 넣지 않았어요. 기본값에 들어 있는 selected 도 같은 이유로 빼고 --roles brand 만 줬어요. 바꾼다면 대비 결과를 꼭 다시 확인해요.
설치
shadcn 프로젝트에 Forge 테마를 먼저 추가해요. --ds-* CSS 변수와 ds- Tailwind 유틸이 오렌지 브랜드 값으로 들어가요.
pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/forge-theme.json컴포넌트는 Steel 과 같은 것을 그대로 설치해요.
pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/button.json이미 steel-theme 을 쓰고 있다면 테마만 바꿔 설치하면 돼요. 컴포넌트 코드는 고치지 않아도 돼요. 자세한 설치 과정은 설치 를 봐요.