Atlassian 시맨틱 토큰과 8픽셀 간격 척도, 실제 Button, Lozenge, Toggle API, 필수 Compiled 스타일링 설정을 사용해 이슈 계획 보드를 만드세요. 이슈를 살펴보고 보드를 필터링한 뒤, 선택 상태와 상태를 혼동하지 않으면서 로컬 작업 항목을 이동하세요.
검증된 간격 및 모양 값과 예시용 색상 팔레트, 시스템 글꼴 대체 설정을 적용한 HTML/CSS 해석입니다. Jira 또는 기본 Atlaskit 런타임이 아닙니다. · 구현 레퍼런스
02
Atlassian 디자인 시스템 디자인 참조
코드에서 정확한 의미 기반 토큰 이름을 사용하세요. 공식 참조에서는 라이트/다크 테마에 따라 달라지는 색상 팔레트 별칭을 제공하므로, 이 항목에서는 고정된 hex 값을 임의로 만들지 않고 별칭을 그대로 사용합니다. 숫자로 표시한 간격 및 반경 값은 문서화된 스케일을 따릅니다. 미리보기의 hex 색상은 예시이며 토큰 내보내기 값이 아닙니다.
Atlassian Design System 구성 요소는 @atlaskit에서 배포되지만, Atlaskit의 전체 카탈로그에는 특정 앱 전용 패키지도 포함되어 있습니다. 이 예제에서는 문서화된 기본 구성 요소 세 가지인 Button, Lozenge, Toggle과 토큰, CSS reset을 선택합니다. 데이터 모델은 의도적으로 로컬에 한정되어 있습니다. 이러한 가져오기만으로는 Jira 이슈 권한, 스프린트 로직 또는 백엔드가 제공되지 않습니다.
현재 설정 참고 자료에서는 플랫폼 패키지를 사용하는 애플리케이션이 Compiled 스타일을 직접 작성하지 않더라도 Compiled 통합이 필요하다고 명시합니다. 따라서 제공된 Parcel 구성도 예제의 일부입니다. 번들러 설정 없이 Button 가져오기 코드만 복사하면 스타일이 불완전하거나 잘못된 순서로 적용될 수 있습니다. 이는 사소한 시각적 문제가 아니라 기능적인 통합 문제입니다.
token("color.text")는 기본 전경색을, token("color.text.subtle")은 보조 정보를 나타냅니다. 선택된 텍스트에는 위험 텍스트와 다른 역할을 사용합니다. 보드의 주요 영역에는 elevation.surface를, 그룹 영역에는 elevation.surface.sunken을 사용합니다. 역할이 이름에 명시되어 있으므로 테마가 바뀌어도 각 선택의 의미를 쉽게 이해할 수 있습니다.
공식 카탈로그에는 각 역할에 대응하는 밝은 테마와 어두운 테마의 팔레트 별칭이 나와 있습니다. 참고 표는 이 정보를 그대로 유지하며, 특정 HEX 값이 영구적으로 사용된다고 약속하지 않습니다. 예제에 포함된 샘플은 설명을 위한 팔레트이며 그 점을 명시합니다. 이 색상은 로컬 예제를 읽기 쉽게 만들기 위한 것으로, 프로덕션 Atlaskit 테마의 대체 기준이 아닙니다.
space.100은 8px, space.200은 16px, space.025는 2px입니다. 작은 간격과 시각적 정렬에는 8픽셀 단위의 정수 간격보다 더 정밀한 값이 필요하므로 세분화된 단계가 포함되어 있습니다. 보드의 주요 콘텐츠 주변에는 space.300을, 각 항목 사이에는 space.150을 사용합니다. 토큰 호출은 임의의 JavaScript 산술 연산에 사용할 숫자가 아니라 테마에 따라 달라지는 CSS 값을 반환합니다.
같은 관계에는 같은 간격을 사용하세요. 이슈 키와 제목 사이의 거리는 이슈 목록과 검사기 사이의 간격보다 좁아야 합니다. 음수 간격 토큰도 있지만 일반적인 보드 레이아웃에는 필요하지 않습니다. 밀도 높은 작업 화면은 서로 관련 없는 요소를 겹쳐 배치하는 대신 구성으로 공간을 확보해야 합니다.
카탈로그에서는 CSS font 속성에 사용할 복합 글꼴 토큰을 명시적으로 정의합니다. 샘플에서는 페이지 제목에 font.heading.large를, 상세 제목에 font.heading.medium을 지정합니다. 이러한 토큰 중 하나를 fontSize로 사용하면 의도된 계약을 따르지 않게 됩니다. 본문 역할은 짧은 이슈 요약에 적합하고, 주변 레이아웃이 긴 글 읽기를 지원한다면 긴 설명에 font.body.large를 사용할 수 있습니다.
현재 애플리케이션 글꼴은 Atlassian Sans와 Atlassian Mono입니다. Sans는 Inter Variable을, Mono는 JetBrains Mono를 기반으로 합니다. 시스템을 설명할 때 이 정체성은 중요하지만, 이 독립 실행형 미리보기에는 해당 글꼴이 포함되어 있지 않습니다. 대신 시스템 대체 글꼴을 사용하고 있음을 명시합니다. 프로덕션에서 도입할 때는 임의의 글꼴 이름을 바꾸어 사용하는 대신 지원되는 글꼴 제공 및 라이선스 경로를 사용해야 합니다.
참고 자료에서는 움푹 들어간 그룹 표면, 높여 표시되는 카드, 오버레이 표면을 구분합니다. 이동할 수 있는 작업 항목은 높여 표시되는 레이어에 속하고, 보드 열은 이러한 항목을 그룹화합니다. 페이지의 일반적인 일부인 검사기에 오버레이 그림자가 반드시 필요한 것은 아닙니다. 높이감이 실제로 필요할 때 표면 역할과 그림자 역할을 함께 사용하세요.
현재 형태 이름에는 radius.xsmall(2px), radius.small(4px), radius.medium(6px)이 포함됩니다. 이는 개발자가 다른 시스템에서 기억할 수도 있는 이전 명칭 border.radius가 아닙니다. 표에는 정확한 이름을 그대로 유지합니다. 네이티브 컨트롤에는 기본 제공 스타일을 사용하고, 사용자 지정 외부 컨테이너에는 관련 역할을 적용하되 비공개로 생성된 클래스를 재정의하지 마세요.
검증된 Button 가져오기 경로는 @atlaskit/button/default/button입니다. appearance="primary"는 주요 작업을 강조하고, isSelected는 이 간결한 네이티브 예제에서 현재 이슈를 표시합니다. 이 버튼을 클릭하면 검사 대상 이슈만 바뀝니다. 워크플로 상태를 수정하는 별도의 컨트롤이 있습니다. 이렇게 분리하면 행을 선택하는 동작만으로 작업이 시작되거나 완료되는 일을 막을 수 있습니다.
API에는 isLoading, isDisabled, spacing="compact", shouldFitContainer도 포함됩니다. 로딩은 진행 중인 작업을 나타내며 영구적인 이슈 상태를 나타내지 않습니다. 키보드 탐색 중 건너뛸 수 있으므로 비활성화된 작업에는 이해하기 쉬운 이유를 제시해야 합니다. 따라서 독립 실행형 보드에서는 검사 컨트롤을 계속 사용할 수 있게 두고 사용자가 현재 로컬 상태를 직접 확인하도록 합니다.
Atlassian 디자인 시스템 Lozenge와 Toggle은 서로 다른 종류의 상태를 전달합니다
상태와 상호작용 모드는 다릅니다
Lozenge의 appearance에는 information, danger, success가 있으며, 샘플에서는 이를 각각 진행 중, 차단됨, 완료에 대응시킵니다. 의미는 텍스트가 전달하고 색상은 이를 보완합니다. 차단된 항목은 선택되어도 계속 차단 상태입니다. 담당자 필터에는 isChecked와 onChange를 사용하는 Toggle을 씁니다. 이 불리언 값은 이슈를 변경하는 대신 보드에 표시되는 내용을 바꾸기 때문입니다.
로컬 상태 선택기는 의도적으로 단순하게 만들었으며 실제 권한 모델을 의미하지 않습니다. 프로덕션 이슈 전환에는 사유, 역할 또는 서비스 응답이 필요할 수 있습니다. 권한 부여 로직은 Lozenge 외부에 두고 서비스에서 확인된 뒤에만 결과를 표시하세요.
setGlobalTheme은 문서의 테마 속성을 업데이트하고 선택한 테마 CSS을 로드합니다. 진입점은 보드를 렌더링하기 전에 해당 작업이 완료될 때까지 기다립니다. 처음에는 라이트 모드를 활성화하고, 라이트 테마와 다크 테마를 명시적으로 선택합니다. 실제 환경에서는 임의의 인라인 색상으로 대체하는 대신 동일한 API을 통해 colorMode를 업데이트하는 환경설정 컨트롤을 사용할 수 있습니다.
현재 사용자 지정 브랜드 옵션은 알파로 표시되어 있으며 UNSAFE API을 사용합니다. 이 가이드에서는 예제의 색상을 바꾸려고 불안정한 방식을 채택하지 않습니다. 먼저 안정적인 시맨틱 테마 계약을 유지한 다음, 실험적인 사용자 지정은 별도의 의존성 결정으로 검토하세요.
네이티브 예제에는 JSX 진입점, CSS 재설정 가져오기, Parcel 설정 파일 두 개가 필요합니다. 이 예제에는 이슈 모음, 선택, 담당자 필터, 상태 매핑, 실시간 결과 메시지가 포함되어 있습니다. 독립형 미리보기는 구성을 열과 검사 패널로 확장하지만, 명시적으로 HTML 해석임을 표시합니다. 어느 쪽도 Jira에 연결된다고 주장하지 않습니다.
필터로 선택한 이슈가 제외되더라도 네이티브 예제는 해당 이슈의 상세 정보를 그대로 유지합니다. 사용자는 다른 항목으로 조용히 이동되는 대신 계속해서 그 이슈를 확인할 수 있습니다. 프로덕션 디자인에서는 다른 정책을 선택할 수 있지만, 그 정책을 설명하고 의미 있는 포커스를 유지해야 합니다. 모든 열이 보이는 화면뿐 아니라 좁은 뷰포트에서도 동작을 확인하세요.
openIssueDetail은 애플리케이션 핸들러이며, 전체 설정에서는 선택 상태를 보여 줍니다.
상태 레이블이 실제로 상태 전환 기능을 제공하지 않는다면 메뉴처럼 보이게 하지 마세요.
04
Atlassian 디자인 시스템 AI 에이전트 설정
구현 시작점
React 보드 로직 전체와 아래 필수 설정 조각을 완성하세요. Compiled 통합과 함께 Parcel을 사용하세요. CSS 재설정만 가져오는 것으로는 현재 패키지에 충분하지 않습니다. 이 로컬 프로토타입에서는 네이티브 패키지 컴파일을 수행한다고 주장하지 않습니다.
jsx
// Existing React 18 project; use the Parcel configuration examples below.
// npm install @atlaskit/css-reset @atlaskit/tokens @atlaskit/button @atlaskit/lozenge @atlaskit/toggle
// npm install --save-dev parcel @compiled/parcel-config
// src/main.jsx; HTML entry contains <div id="root"></div> and a module script pointing here.
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import '@atlaskit/css-reset';
import {token, setGlobalTheme} from '@atlaskit/tokens';
import Button from '@atlaskit/button/default/button';
import Lozenge from '@atlaskit/lozenge/lozenge';
import Toggle from '@atlaskit/toggle';
const initial = [
{id:'WEB-18',title:'Clarify first-project copy',owner:'Maya',status:'To do'},
{id:'WEB-21',title:'Review keyboard path',owner:'Alex',status:'In progress'},
{id:'WEB-24',title:'Resolve missing illustrations',owner:'Maya',status:'Blocked'}
];
const appearance = {'To do':'default','In progress':'information','Blocked':'danger','Done':'success'};
function Board() {
const [issues,setIssues]=React.useState(initial);
const [selected,setSelected]=React.useState('WEB-18');
const [mine,setMine]=React.useState(false);
const [notice,setNotice]=React.useState('');
const issue=issues.find(i=>i.id===selected);
return <main style={{padding:token('space.300'),color:token('color.text'),background:token('elevation.surface')}}>
<h1 style={{font:token('font.heading.large')}}>Onboarding improvements</h1>
<label htmlFor="mine">Assigned to Maya</label>
<Toggle id="mine" isChecked={mine} onChange={e=>setMine(e.currentTarget.checked)}/>
<div style={{display:'flex',flexWrap:'wrap',gap:token('space.300'),marginTop:token('space.200')}}>
<ul style={{flex:'1 1 280px',listStyle:'none',padding:0}}>
{issues.filter(i=>!mine||i.owner==='Maya').map(i=><li key={i.id} style={{marginBottom:token('space.150')}}>
<Button isSelected={i.id===selected} onClick={()=>setSelected(i.id)}>{i.id}: {i.title}</Button>
{' '}<Lozenge appearance={appearance[i.status]}>{i.status}</Lozenge>
</li>)}
</ul>
<section aria-label="Issue details" style={{flex:'1 1 280px',padding:token('space.200'),background:token('elevation.surface.sunken')}}>
<h2 style={{font:token('font.heading.medium')}}>{issue.id}: {issue.title}</h2>
<p>Owner: {issue.owner}</p>
<label htmlFor="status">Workflow state</label>{' '}
<select id="status" value={issue.status} onChange={event=>{
const status=event.target.value;
setIssues(items=>items.map(i=>i.id===issue.id?{...i,status}:i));
setNotice(`${issue.id} moved to ${status} in this local example.`);
}}>{Object.keys(appearance).map(s=><option key={s}>{s}</option>)}</select>
<p>This local demonstration has no Jira connection or permission rules.</p>
</section>
</div><p role="status">{notice}</p>
</main>;
}
async function start(){
await setGlobalTheme({light:'light',dark:'dark',colorMode:'light'});
createRoot(document.getElementById('root')).render(<Board/>);
}
start();
프로젝트를 위한 프롬프트
에이전트 프롬프트
@atlaskit 토큰, CSS 재설정, 문서화된 Compiled Parcel 통합을 사용해 제공된 React Atlassian 이슈 18개 예제를 빌드하세요. 시맨틱 토큰 호출, 글꼴 약식 속성 역할, 검증된 Button/Lozenge/Toggle 가져오기를 사용하세요. 선택, 담당자 필터링, 워크플로 상태를 서로 독립적으로 유지하세요. 선택된 이슈의 맥락을 보존하고, 로컬 변경 사항을 알리며, Jira 연결이나 실제 권한이 있다고 주장하지 마세요.
05
Atlassian 디자인 시스템 출처 및 범위
OpenDesign 공개 Atlassian Design System React 패키지에 관한 연구로, 2026년 10월에 링크된 문서와 대조해 확인했습니다. 삽입된 보드는 설명용 색상 값과 가상의 이슈를 사용한 HTML/CSS 해석이며, Jira 또는 네이티브 Atlaskit 런타임이 아닙니다. 공개 패키지에 접근할 수 있다고 해서 Atlassian 브랜드를 제한 없이 사용할 권리나 내부와 동일한 지원이 제공되는 것은 아닙니다.
