Get started

Steel 이란?Copy Anchor Link

Steel 은 Rebar 의 두 번째 디자인 시스템이에요. Rebar(철근)의 시스템은 건축 자재 이름을 따요. SEED 계열은 Clay, Atlassian 계열은 Steel 이에요. 이슈 트래커·위키·프로젝트 보드처럼 정보가 빽빽하고 여러 사람이 함께 쓰는 협업 도구를 만들기 위해, Atlassian Design System(ADS)의 토큰·컴포넌트·가이드라인을 최대한 그대로 옮겼어요.

• ADS 클론: 색·간격·타이포그래피·높이(elevation) 토큰은 @atlaskit/tokens 에서 자동으로 가져오고, 컴포넌트는 @atlaskit/* 패키지의 실제 스타일 값(높이, 패딩, hover·pressed·selected 상태, 그림자)을 기준으로 다시 만들었어요.
• 같은 API: props 이름은 Atlaskit 과 같아요. appearance, spacing, isDisabled, isSelected, isLoading, testId 처럼 ADS 문서에서 보던 이름 그대로 써요.
• shadcn 호환: 컴포넌트는 radix-ui, cva, Tailwind v4 로 만들고 shadcn registry 로 배포해요. shadcn add 한 줄이면 코드가 내 프로젝트에 복사돼요.
• SEED 계열과 별개: 첫 번째 시스템(Clay, SEED Design 기반)과 토큰 체계도, 컴포넌트도, 문서도 공유하지 않아요. Steel 컴포넌트는 bg-ds-*, text-ds-*, p-ds-* 같은 Atlassian 토큰 유틸만 써요.

최신 Atlassian 모습 (FY27 Finesse)Copy Anchor Link

Steel 은 지금 Jira·Confluence 에 적용되고 있는 최신 ADS 모습(FY27 "Finesse") 을 따라요. @atlaskit/tokens 에 기본 테마와 함께 들어 있는 *-finesse 오버라이드 테마를 덮어써서 토큰을 만들어요.

• 선택 상태가 중립이에요. 선택한 탭·내비게이션 항목은 파랑 대신 진한 중립 글자와 반투명 중립 배경으로 보여요. 브랜드 색은 주요 액션과 정체성에만 써요.
• 작은 제목이 가벼워졌어요. font.heading.medium · small · xsmall · xxsmall 의 굵기가 653 에서 500 으로 바뀌었어요.
• hover 가 옅어졌어요. background.neutral.subtle.hovered 처럼 subtle 계열의 hover 배경이 더 부드러워요.

컴포넌트도 Atlaskit 소스의 기능 플래그가 켜진 쪽(최신 visual refresh) 스타일을 기준으로 만들어요. 다시 만드는 방법은 토큰 동기화 에서 볼 수 있어요.

두 브랜드Copy Anchor Link

Atlassian 계열에는 브랜드가 둘 있어요. 컴포넌트·토큰 이름·문서는 같고, 브랜드 색과 서체만 달라요. 상단 브랜드 선택기로 바꿔 볼 수 있어요.

• Steel (steel): Atlassian 파랑 그대로인 ADS 클론 원본이에요.
• Forge (forge): 콘마켓 워크스페이스(사내·업무 도구)용 브랜드예요. 브랜드 색만 콘마켓 오렌지로 바꾸고, 선택·링크·포커스 링·정보·경고 색은 Steel 값을 그대로 둬요.

왜 이렇게 나눴는지, 어떤 토큰이 바뀌었는지는 브랜드 에서 볼 수 있어요.

두 시스템 비교Copy Anchor Link

구성Copy Anchor Link

brands/steel/                    Steel 토큰 원천 (Rootage 형식 YAML)
  brand.yaml                     system: atlas · 서체 · shadcn 별칭 · 대비 쌍 (직접 관리)
  color.yaml, space.yaml …       scripts/import-atlassian.ts 가 @atlaskit/tokens 에서 생성
packages/tokens/
  scripts/import-atlassian.ts    @atlaskit/tokens → brands/steel 재생성
  dist/css/steel.css             --ds-* CSS 변수 (light / .dark)
  dist/theme-atlas.css           Tailwind v4 테마 (ds- 유틸) + ds-font-* 타이포 유틸
apps/docs/
  registry/steel/ui/             Steel 컴포넌트 (파일 추가 = 자동 등록, /r/steel/<name>.json)
  registry/steel/examples/       문서 예제
  content/docs/steel/            이 문서

토큰은 Atlassian 원본 → YAML → CSS 변수·Tailwind 테마 순서로 흘러가요. 원본 토큰이 바뀌면 토큰 동기화 한 번으로 모든 컴포넌트에 반영돼요.

시작하기Copy Anchor Link

시스템 둘러보기Copy Anchor Link

라이선스 고지Copy Anchor Link

Steel 의 토큰 값과 컴포넌트 스펙은 Atlassian 이 Apache License 2.0 으로 공개한 @atlaskit/* 패키지(@atlaskit/tokens, @atlaskit/button 등)를 바탕으로 해요. 저장소 루트의 NOTICE 파일에 출처를 적어 두었어요.

• Atlassian 로고, 제품 이름, 브랜드 서체(Atlassian Sans, Charlie 등)는 포함하지 않아요. 서체는 Inter 와 JetBrains Mono 로 바꿔 쓰고, 아이콘은 lucide-react 를 써요.
• atlassian.design 웹사이트의 글은 Apache 라이선스 범위가 아니라서, 사용 가이드는 내용을 참고해 한국어로 새로 썼어요.
• Steel 은 Atlassian 과 관계없는 독립 프로젝트예요.