Steel Design System

여러 사람이 함께 쓰는 도구를 위한 디자인 시스템

Steel 은 Atlassian Design System 의 컴포넌트와 디자인 토큰을 FY27 Finesse 모습 그대로 React 로 옮긴 시스템이에요. shadcn registry 로 필요한 컴포넌트만 내 프로젝트에 복사해서 써요.

시작하기컴포넌트 보기

이 화면은 목업이 아니라 문서의 컴포넌트로 만든 예제를 그대로 녹화한 거예요. Navigation system, Side nav items, Lozenge, Avatar group, Modal dialog 을 썼어요.

컴포넌트
52
버튼부터 내비게이션 시스템까지. 하나씩 골라 설치해요.
디자인 토큰
785
색·간격·글자·그림자·모션. 라이트와 다크 값을 함께 가져요.
Finesse 기준
FY27
Atlassian 의 최신 visual refresh 를 기준으로 맞췄어요.
브랜드
2
Steel · Forge. 컴포넌트는 같고 브랜드 색만 달라요.
나무 탁자 위 종이에 노랑·분홍·하늘색 포스트잇이 세 줄로 붙어 있고, 그 옆에 노트북과 커피잔이 놓여 있다
일을 나누고 상태를 맞추는 방식은 종이 위에서도, 화면 위에서도 같아요.

포스트잇 보드가 하던 일을 화면으로

할 일, 진행 중, 완료. Steel 은 이슈 트래커와 문서 도구처럼 여러 사람이 같은 일을 보는 화면에서 쓰려고 만든 시스템이라, 컴포넌트도 그 흐름을 따라 나뉘어 있어요.

어디에 있는지
앱 전환, 프로젝트, 보드와 백로그 사이를 오가는 틀이에요.
Navigation system · Side nav items · Breadcrumbs
누가, 어떤 상태인지
할 일·진행 중·완료 같은 상태와 담당자를 짧게 보여줘요.
Lozenge · Avatar group · Dynamic table
무엇을 바꿀지
이슈를 만들고 고치고, 결과를 알려줘요.
Modal dialog · Form · Flag
패턴 문서에서 조합 보기

설치하면 이 코드가 내 프로젝트에 들어가요

오른쪽은 그림이 아니라 실제 컴포넌트예요. 컴포넌트마다 shadcn CLI 명령 한 줄로 소스가 복사되고, 복사된 코드는 자유롭게 고쳐도 돼요.

pnpm dlx shadcn@latest add \
  https://rebar.conmarket-landing.workers.dev/r/steel/button.json
설치 안내

Button

Lozenge

할 일진행 중검토 중완료막힘

Textfield · Checkbox

같은 컴포넌트, 다른 브랜드

토큰 이름이 같아서 테마만 바꾸면 버튼·링크·선택 표시의 브랜드 색이 함께 바뀌어요. 시스템 이름은 Rebar(철근)처럼 건축 자재에서 따왔어요.

  • 흐린 하늘 아래 볼트로 이어 붙인 낡은 강철 보

    SteelAtlassian 계열 기준 시스템

    협업 도구를 위한 디자인 시스템이에요. Atlassian Design System 의 최신 토큰·컴포넌트 체계를 따라요.

    지금 이 브랜드로 보고 있어요

  • 대장간 모루 위에서 달군 쇠를 망치로 두드려 불꽃이 튀는 모습

    Forge콘마켓 워크스페이스

    콘마켓 사내·업무 도구를 위한 디자인 시스템이에요. Steel 의 컴포넌트에 콘마켓 오렌지를 브랜드 색으로 입혔어요.

브랜드 문서