# Atlassian 디자인 시스템 ## Atlassian 디자인 시스템 인터페이스 미리보기 이슈를 확인하고, 담당자별로 필터링하고, 로컬 워크플로 상태를 변경하세요. 상태와 선택은 서로 독립적으로 유지됩니다. ## Atlassian 디자인 시스템 디자인 참조 코드에서 정확한 의미 기반 토큰 이름을 사용하세요. 공식 참조에서는 라이트/다크 테마에 따라 달라지는 색상 팔레트 별칭을 제공하므로, 이 항목에서는 고정된 hex 값을 임의로 만들지 않고 별칭을 그대로 사용합니다. 숫자로 표시한 간격 및 반경 값은 문서화된 스케일을 따릅니다. 미리보기의 hex 색상은 예시이며 토큰 내보내기 값이 아닙니다. ### 8px 기준 간격 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | space.0 | 0px / 0rem | 간격 토큰입니다. 접미사는 8px 기준값에 대한 백분율입니다. | | space.025 | 2px / 0.125rem | 간격 토큰입니다. 접미사는 8px 기준값에 대한 백분율입니다. | | space.050 | 4px / 0.25rem | 간격 토큰입니다. 접미사는 8px 기준값에 대한 백분율입니다. | | space.075 | 6px / 0.375rem | 간격 토큰입니다. 접미사는 8px 기준값에 대한 백분율입니다. | | space.100 | 8px / 0.5rem | 간격 토큰입니다. 접미사는 8px 기준값에 대한 백분율입니다. | | space.150 | 12px / 0.75rem | 간격 토큰입니다. 접미사는 8px 기준값에 대한 백분율입니다. | | space.200 | 16px / 1rem | 간격 토큰입니다. 접미사는 8px 기준값에 대한 백분율입니다. | | space.250 | 20px / 1.25rem | 간격 토큰입니다. 접미사는 8px 기준값에 대한 백분율입니다. | | space.300 | 24px / 1.5rem | 간격 토큰입니다. 접미사는 8px 기준값에 대한 백분율입니다. | | space.400 | 32px / 2rem | 간격 토큰입니다. 접미사는 8px 기준값에 대한 백분율입니다. | | space.500 | 40px / 2.5rem | 간격 토큰입니다. 접미사는 8px 기준값에 대한 백분율입니다. | | space.600 | 48px / 3rem | 간격 토큰입니다. 접미사는 8px 기준값에 대한 백분율입니다. | | space.800 | 64px / 4rem | 간격 토큰입니다. 접미사는 8px 기준값에 대한 백분율입니다. | | space.1000 | 80px / 5rem | 간격 토큰입니다. 접미사는 8px 기준값에 대한 백분율입니다. | ### 의미 기반 텍스트 및 표면 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | color.text | Neutral1000 / DarkNeutral1000 | 기본 텍스트입니다. 라이트/다크 팔레트 별칭을 값으로 표시합니다. | | color.text.subtle | Neutral800 / DarkNeutral800 | 보조 레이블. | | color.text.subtlest | Neutral700 / DarkNeutral700 | 메타데이터. | | color.text.selected | Blue700 / Blue400 | 이슈 업무 상태가 아닌 선택 상태입니다. | | color.text.danger | Red800 / Red300 | 중요한 설명 텍스트. | | color.text.inverse | Neutral0 / DarkNeutral100 | 지원되는 진한 배경 위에 표시하는 텍스트. | | elevation.surface | Neutral0 / DarkNeutral100 | 주요 애플리케이션 표면. | | elevation.surface.sunken | Neutral100 / DarkNeutral0 | 보드 열 그룹. | | elevation.surface.raised | Neutral0 / DarkNeutral200 | 이동할 수 있는 작업 항목 카드. | | elevation.surface.overlay | Neutral0 / DarkNeutral250 | 팝오버 또는 오버레이 표면으로, 오버레이 그림자와 함께 사용합니다. | ### 타이포그래피에는 CSS 글꼴 단축 속성을 사용합니다 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | font.heading.large | heading role | 페이지 제목. | | font.heading.medium | heading role | 큰 컴포넌트 또는 세부 정보 제목. | | font.heading.small | heading role | 작은 컴포넌트 제목. | | font.body | body role | 짧은 설명 및 컴포넌트 텍스트의 기본 스타일. | | font.body.large | reading role | 긴 설명. | | font.body.small | secondary role | 메타데이터에 제한적으로 사용합니다. | | font.code | code role | 기술 식별자에 사용하며, 일반적인 논의 문구에는 사용하지 않습니다. | | font.weight.regular / medium / bold | weight roles | 글꼴 단축 속성에 의도적인 재정의로 굵기를 적용하세요. | ### 모양과 깊이 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | radius.xsmall | 2px | 체크박스나 배지 같은 작은 세부 요소. | | radius.small | 4px | 보조 레이블 및 소형 컨트롤. | | radius.medium | 6px | 인터랙티브 컨트롤. | | elevation.shadow.raised | theme-resolved multi-layer shadow | elevation.surface.raised와 함께 사용합니다. | | elevation.shadow.overlay | theme-resolved multi-layer shadow | 오버레이 표면과 함께 사용하며, 모든 카드의 테두리를 더 진하게 만드는 용도는 아닙니다. | ### 보드에서 사용하는 컴포넌트 매개변수 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | Button appearance | primary / default / subtle / danger / warning | 동작의 의미에 따라 선택하세요. | | Button isSelected | boolean | 시각적 선택이며 이슈 상태는 변경하지 않습니다. | | Button isLoading | boolean | 진행 상태를 표시하는 동안 반복 상호작용을 차단합니다. | | Button spacing | default / compact | Compact는 표와 같이 더 조밀한 설정에 사용하도록 문서화되어 있습니다. | | Button shouldFitContainer | boolean | 동작이 컨테이너의 전체 너비를 사용하도록 합니다. | ### 상태 및 필터 구성 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | Lozenge appearance="information" | In progress | 상태 표시자이며 클릭 가능한 전환 컨트롤이 아닙니다. | | Lozenge appearance="danger" | Blocked | 텍스트로 상태를 설명하세요. | | Lozenge appearance="success" | Completed | 이 예제에서 확인된 로컬 상태입니다. | | Toggle isChecked + onChange | controlled boolean | 이 예제에서는 워크플로 전환이 아니라 담당자 필터로 사용합니다. | ## Atlassian 디자인 시스템 전체 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Atlassian 디자인 시스템 공개 ADS 패키지와 실제 스타일링 요구 사항 ### 컴포넌트를 가져오는 것만으로 통합이 완료되지는 않습니다 > Atlassian Design System 구성 요소는 @atlaskit에서 배포되지만, Atlaskit의 전체 카탈로그에는 특정 앱 전용 패키지도 포함되어 있습니다. 이 예제에서는 문서화된 기본 구성 요소 세 가지인 Button, Lozenge, Toggle과 토큰, CSS reset을 선택합니다. 데이터 모델은 의도적으로 로컬에 한정되어 있습니다. 이러한 가져오기만으로는 Jira 이슈 권한, 스프린트 로직 또는 백엔드가 제공되지 않습니다. 현재 설정 참고 자료에서는 플랫폼 패키지를 사용하는 애플리케이션이 Compiled 스타일을 직접 작성하지 않더라도 Compiled 통합이 필요하다고 명시합니다. 따라서 제공된 Parcel 구성도 예제의 일부입니다. 번들러 설정 없이 Button 가져오기 코드만 복사하면 스타일이 불완전하거나 잘못된 순서로 적용될 수 있습니다. 이는 사소한 시각적 문제가 아니라 기능적인 통합 문제입니다. 지원 사양 읽기 ## Atlassian 디자인 시스템 팔레트를 추측하는 대신 시맨틱 토큰을 사용하세요 ### 토큰은 역할을 나타냅니다 token("color.text")는 기본 전경색을, token("color.text.subtle")은 보조 정보를 나타냅니다. 선택된 텍스트에는 위험 텍스트와 다른 역할을 사용합니다. 보드의 주요 영역에는 elevation.surface를, 그룹 영역에는 elevation.surface.sunken을 사용합니다. 역할이 이름에 명시되어 있으므로 테마가 바뀌어도 각 선택의 의미를 쉽게 이해할 수 있습니다. 공식 카탈로그에는 각 역할에 대응하는 밝은 테마와 어두운 테마의 팔레트 별칭이 나와 있습니다. 참고 표는 이 정보를 그대로 유지하며, 특정 HEX 값이 영구적으로 사용된다고 약속하지 않습니다. 예제에 포함된 샘플은 설명을 위한 팔레트이며 그 점을 명시합니다. 이 색상은 로컬 예제를 읽기 쉽게 만들기 위한 것으로, 프로덕션 Atlaskit 테마의 대체 기준이 아닙니다. 지원 사양 읽기 ## Atlassian 디자인 시스템 8픽셀을 기본으로 세분화된 간격을 의도적으로 사용합니다 ### 접미사는 백분율로 읽으세요 space.100은 8px, space.200은 16px, space.025는 2px입니다. 작은 간격과 시각적 정렬에는 8픽셀 단위의 정수 간격보다 더 정밀한 값이 필요하므로 세분화된 단계가 포함되어 있습니다. 보드의 주요 콘텐츠 주변에는 space.300을, 각 항목 사이에는 space.150을 사용합니다. 토큰 호출은 임의의 JavaScript 산술 연산에 사용할 숫자가 아니라 테마에 따라 달라지는 CSS 값을 반환합니다. 같은 관계에는 같은 간격을 사용하세요. 이슈 키와 제목 사이의 거리는 이슈 목록과 검사기 사이의 간격보다 좁아야 합니다. 음수 간격 토큰도 있지만 일반적인 보드 레이아웃에는 필요하지 않습니다. 밀도 높은 작업 화면은 서로 관련 없는 요소를 겹쳐 배치하는 대신 구성으로 공간을 확보해야 합니다. 지원 사양 읽기 ## Atlassian 디자인 시스템 타이포그래피 토큰은 완전한 글꼴 선언입니다 ### font.body를 font-size에 넣지 마세요 카탈로그에서는 CSS font 속성에 사용할 복합 글꼴 토큰을 명시적으로 정의합니다. 샘플에서는 페이지 제목에 font.heading.large를, 상세 제목에 font.heading.medium을 지정합니다. 이러한 토큰 중 하나를 fontSize로 사용하면 의도된 계약을 따르지 않게 됩니다. 본문 역할은 짧은 이슈 요약에 적합하고, 주변 레이아웃이 긴 글 읽기를 지원한다면 긴 설명에 font.body.large를 사용할 수 있습니다. 현재 애플리케이션 글꼴은 Atlassian Sans와 Atlassian Mono입니다. Sans는 Inter Variable을, Mono는 JetBrains Mono를 기반으로 합니다. 시스템을 설명할 때 이 정체성은 중요하지만, 이 독립 실행형 미리보기에는 해당 글꼴이 포함되어 있지 않습니다. 대신 시스템 대체 글꼴을 사용하고 있음을 명시합니다. 프로덕션에서 도입할 때는 임의의 글꼴 이름을 바꾸어 사용하는 대신 지원되는 글꼴 제공 및 라이선스 경로를 사용해야 합니다. 지원 사양 읽기 ## Atlassian 디자인 시스템 형태와 높이감으로 작업 화면의 역할을 설명하세요 ### 카드는 객체이므로 높여 표시합니다 참고 자료에서는 움푹 들어간 그룹 표면, 높여 표시되는 카드, 오버레이 표면을 구분합니다. 이동할 수 있는 작업 항목은 높여 표시되는 레이어에 속하고, 보드 열은 이러한 항목을 그룹화합니다. 페이지의 일반적인 일부인 검사기에 오버레이 그림자가 반드시 필요한 것은 아닙니다. 높이감이 실제로 필요할 때 표면 역할과 그림자 역할을 함께 사용하세요. 현재 형태 이름에는 radius.xsmall(2px), radius.small(4px), radius.medium(6px)이 포함됩니다. 이는 개발자가 다른 시스템에서 기억할 수도 있는 이전 명칭 border.radius가 아닙니다. 표에는 정확한 이름을 그대로 유지합니다. 네이티브 컨트롤에는 기본 제공 스타일을 사용하고, 사용자 지정 외부 컨테이너에는 관련 역할을 적용하되 비공개로 생성된 클래스를 재정의하지 마세요. 지원 사양 읽기 ## Atlassian 디자인 시스템 버튼 선택과 이슈 전환은 서로 다릅니다 ### 모양과 상태를 신중하게 선택하세요 검증된 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 외부에 두고 서비스에서 확인된 뒤에만 결과를 표시하세요. - 선택은 현재 확인 중인 이슈를 식별합니다. - 워크플로 상태는 작업 항목 자체의 상태를 나타냅니다. - 담당자 필터링은 담당자를 변경하지 않고 표시 항목을 바꿉니다. 지원 사양 읽기 ## Atlassian 디자인 시스템 사용자 지정 토큰 표면을 렌더링하기 전에 테마 초기화 ### 전역 테마 로딩은 비동기 방식입니다 setGlobalTheme은 문서의 테마 속성을 업데이트하고 선택한 테마 CSS을 로드합니다. 진입점은 보드를 렌더링하기 전에 해당 작업이 완료될 때까지 기다립니다. 처음에는 라이트 모드를 활성화하고, 라이트 테마와 다크 테마를 명시적으로 선택합니다. 실제 환경에서는 임의의 인라인 색상으로 대체하는 대신 동일한 API을 통해 colorMode를 업데이트하는 환경설정 컨트롤을 사용할 수 있습니다. 현재 사용자 지정 브랜드 옵션은 알파로 표시되어 있으며 UNSAFE API을 사용합니다. 이 가이드에서는 예제의 색상을 바꾸려고 불안정한 방식을 채택하지 않습니다. 먼저 안정적인 시맨틱 테마 계약을 유지한 다음, 실험적인 사용자 지정은 별도의 의존성 결정으로 검토하세요. 지원 사양 읽기 ## Atlassian 디자인 시스템 실제 이슈 확인 흐름 검증 ### 제공된 파일을 함께 사용하세요 네이티브 예제에는 JSX 진입점, CSS 재설정 가져오기, Parcel 설정 파일 두 개가 필요합니다. 이 예제에는 이슈 모음, 선택, 담당자 필터, 상태 매핑, 실시간 결과 메시지가 포함되어 있습니다. 독립형 미리보기는 구성을 열과 검사 패널로 확장하지만, 명시적으로 HTML 해석임을 표시합니다. 어느 쪽도 Jira에 연결된다고 주장하지 않습니다. 필터로 선택한 이슈가 제외되더라도 네이티브 예제는 해당 이슈의 상세 정보를 그대로 유지합니다. 사용자는 다른 항목으로 조용히 이동되는 대신 계속해서 그 이슈를 확인할 수 있습니다. 프로덕션 디자인에서는 다른 정책을 선택할 수 있지만, 그 정책을 설명하고 의미 있는 포커스를 유지해야 합니다. 모든 열이 보이는 화면뿐 아니라 좁은 뷰포트에서도 동작을 확인하세요. 1. WEB-18을 확인한 다음, 워크플로 상태를 바꾸지 않고 다른 이슈를 선택하세요. 2. 담당자 필터를 켜고 어떤 이슈가 계속 표시되는지 확인하세요. 3. 선택한 로컬 이슈의 상태를 변경하고 상태 텍스트와 열이 일치하는지 확인하세요. 4. 필터를 해제하고 동일한 이슈가 선택되어 있으며 상태가 업데이트된 것을 확인하세요. 지원 사양 읽기 ## Atlassian 디자인 시스템 컴포넌트 예제 ### 완전한 독립형 인터랙티브 예제 전체 문서를 index.html로 저장하고 브라우저에서 여세요. HTML/CSS 해석으로, 검증된 간격 및 형태 값과 설명용 색상 팔레트, 시스템 글꼴 대체를 사용합니다. Jira 또는 네이티브 Atlaskit 런타임이 아닙니다. ``` Issue board — Atlassian interpretation
Product deliveryLOCAL DEMO
Projects / Website / Board

Website release

``` 코드 참조 - 이슈 전환은 예제 보드에만 적용됩니다. 이 HTML 진입점은 별도의 Atlaskit 구현에 필요한 Compiled 빌드 설정을 실행하지 않습니다. ### 전체 네이티브 구현 엔트리 셋업의 전체 구현을 집중적인 API 설명과 함께 여기에 모았습니다. 셋업에 문서화된 패키지 및 빌드 전제 조건을 따르세요. ``` // 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
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

Onboarding improvements

setMine(e.currentTarget.checked)}/>
    {issues.filter(i=>!mine||i.owner==='Maya').map(i=>
  • {' '}{i.status}
    • )}

{issue.id}: {issue.title}

Owner: {issue.owner}

{' '}

This local demonstration has no Jira connection or permission rules.

{notice}

; } async function start(){ await setGlobalTheme({light:'light',dark:'dark',colorMode:'light'}); createRoot(document.getElementById('root')).render(); } start(); ``` 코드 참조 - React 보드 로직 전체와 아래 필수 설정 조각을 완성하세요. Compiled 통합과 함께 Parcel을 사용하세요. CSS 재설정만 가져오는 것으로는 현재 패키지에 충분하지 않습니다. 이 로컬 프로토타입에서는 네이티브 패키지 컴파일을 수행한다고 주장하지 않습니다. ### Parcel에서 배포된 Compiled 스타일을 처리해야 합니다 프로젝트 루트에 .parcelrc를 만드세요. 설정에 나열된 의존성을 설치한 다음 HTML 진입점을 사용해 Parcel을 시작하세요. ``` { "extends": ["@parcel/config-default", "@compiled/parcel-config"] } ``` 코드 참조 - 실험적인 Vite 경로를 권장 설정인 것처럼 조용히 취급하지 않고, 문서화된 Parcel 통합을 선택합니다. ### 토큰 변환을 위한 Compiled 설정 .parcelrc와 같은 위치에 .compiledcssrc를 만드세요. 이는 패키지 배포 스크립트가 아니라 소비 애플리케이션 설정의 일부입니다. ``` { "transformerBabelPlugins": [["@atlaskit/tokens/babel-plugin"]], "extract": true, "inlineCss": true, "sortShorthand": true } ``` 코드 참조 - 선택 사항인 strip-runtime 플러그인은 추출한 CSS을 배포하는 패키지용이며, 이 소비 애플리케이션에는 필요하지 않습니다. ### 로젠지는 상태를 나타내고, 컨트롤은 상태를 변경합니다 이슈 상세 정보에서 표시 영역과 전환 컨트롤은 서로 다른 역할을 합니다. ``` Blocked ``` 코드 참조 - openIssueDetail은 애플리케이션 핸들러이며, 전체 설정에서는 선택 상태를 보여 줍니다. - 상태 레이블이 실제로 상태 전환 기능을 제공하지 않는다면 메뉴처럼 보이게 하지 마세요. ## Atlassian 디자인 시스템 AI 에이전트 설정 ### 구현 시작점 React 보드 로직 전체와 아래 필수 설정 조각을 완성하세요. Compiled 통합과 함께 Parcel을 사용하세요. CSS 재설정만 가져오는 것으로는 현재 패키지에 충분하지 않습니다. 이 로컬 프로토타입에서는 네이티브 패키지 컴파일을 수행한다고 주장하지 않습니다. ``` // 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
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

Onboarding improvements

setMine(e.currentTarget.checked)}/>
    {issues.filter(i=>!mine||i.owner==='Maya').map(i=>
  • {' '}{i.status}
    • )}

{issue.id}: {issue.title}

Owner: {issue.owner}

{' '}

This local demonstration has no Jira connection or permission rules.

{notice}

; } async function start(){ await setGlobalTheme({light:'light',dark:'dark',colorMode:'light'}); createRoot(document.getElementById('root')).render(); } start(); ``` ### 프로젝트를 위한 프롬프트 ``` @atlaskit 토큰, CSS 재설정, 문서화된 Compiled Parcel 통합을 사용해 제공된 React Atlassian 이슈 18개 예제를 빌드하세요. 시맨틱 토큰 호출, 글꼴 약식 속성 역할, 검증된 Button/Lozenge/Toggle 가져오기를 사용하세요. 선택, 담당자 필터링, 워크플로 상태를 서로 독립적으로 유지하세요. 선택된 이슈의 맥락을 보존하고, 로컬 변경 사항을 알리며, Jira 연결이나 실제 권한이 있다고 주장하지 마세요. ``` ## Atlassian 디자인 시스템 출처 및 범위 OpenDesign 공개 Atlassian Design System React 패키지에 관한 연구로, 2026년 10월에 링크된 문서와 대조해 확인했습니다. 삽입된 보드는 설명용 색상 값과 가상의 이슈를 사용한 HTML/CSS 해석이며, Jira 또는 네이티브 Atlaskit 런타임이 아닙니다. 공개 패키지에 접근할 수 있다고 해서 Atlassian 브랜드를 제한 없이 사용할 권리나 내부와 동일한 지원이 제공되는 것은 아닙니다. - 토큰 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다. - 테마 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다. - 설정 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다. - 간격 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다. - 타이포그래피 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다. - 글꼴 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다. - 버튼 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다. - 로젠지 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다. - 토글 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다. ## Atlassian 디자인 시스템 관련 자료 ### AWS Cloudscape 실제 시각적 새로 고침 토큰, 밀도에 따른 간격, 제어형 폼 API, 작동하는 2단계 리소스 마법사를 다루는 Cloudscape 구성 가이드입니다. ### Backbase 디자인 시스템 Backbase의 Angular 모듈과 시맨틱 테마 내보내기, 명시적인 검토 상태를 활용해 브랜드에 맞는 뱅킹 검토 흐름을 구축하세요. 웹 API와 별도로 문서화된 네이티브 크기를 비교하세요. ### Dell 디자인 시스템 DDS v3로 범위가 지정된 기기 검색을 구현하세요. 시맨틱 색상, 반응형 타이포그래피 단계, 토큰 간격을 사용하고, 필터링 동작은 애플리케이션이 담당하는 InputGroup 구성을 적용합니다. - [구현 레퍼런스](https://atlassian.design/components/button/examples) - [출처](https://atlassian.design/foundations/spacing/) - [출처](https://atlassian.design/components/tokens/all-tokens) - [출처](https://atlassian.design/foundations/typography/applying-typography) - [출처](https://atlassian.design/components/button/examples) - [출처](https://atlassian.design/components/lozenge/examples) - [지원 사양 읽기](https://atlassian.design/get-started/develop/atlassians) - [지원 사양 읽기](https://atlassian.design/components/tokens/all-tokens) - [지원 사양 읽기](https://atlassian.design/foundations/spacing/) - [지원 사양 읽기](https://atlassian.design/foundations/typography/product-typefaces-and-scale) - [지원 사양 읽기](https://atlassian.design/components/button/examples) - [지원 사양 읽기](https://atlassian.design/components/lozenge/examples) - [지원 사양 읽기](https://atlassian.design/components/tokens/code) - [지원 사양 읽기](https://atlassian.design/components/toggle/examples) - [코드 참조](https://atlassian.design/components/button/examples) - [코드 참조](https://atlassian.design/get-started/develop/atlassians) - [코드 참조](https://atlassian.design/components/lozenge/examples) - [토큰 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다.](https://atlassian.design/components/tokens/all-tokens) - [테마 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다.](https://atlassian.design/components/tokens/code) - [설정 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다.](https://atlassian.design/get-started/develop/atlassians) - [간격 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다.](https://atlassian.design/foundations/spacing/) - [타이포그래피 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다.](https://atlassian.design/foundations/typography/applying-typography) - [글꼴 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다.](https://atlassian.design/foundations/typography/product-typefaces-and-scale) - [버튼 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다.](https://atlassian.design/components/button/examples) - [로젠지 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다.](https://atlassian.design/components/lozenge/examples) - [토글 이 가이드에서 다루는 구체적인 API, 스케일 또는 통합 요건의 공식 출처입니다.](https://atlassian.design/components/toggle/examples)