# Atlassian Design System — 디자인 스타일 가이드
## 기본 정보
- **ID**: atlassian-design
- **카테고리**: design-language
- **연도**: 2017
- **제작자**: Atlassian
## 설명
아틀라시안의 제품군에 사용되는 디자인 시스템입니다.
## 역사·배경
Atlassian 제품군의 폭발적 성장 이후 디자인 일관성 확보를 위해 2017년 공식화. Atlaskit 컴포넌트 라이브러리로 구현.
## 핵심 원칙
- 명확성
- 효율성
- 표현력
- 포용성
## 주요 특징
- 협업 중심 컴포넌트
- 유연한 레이아웃
- 강력한 접근성
- 일관된 브랜딩
- 확장 가능한 아키텍처
## 컬러 시스템 가이드
Atlassian Blue 기반 + 기능별 semantic color. 협업 UI에 최적화된 안전하고 명확한 팔레트
### 색상 역할
- brand (Atlassian Blue): 핵심 브랜드 요소, active 탭, 링크
- neutral: 텍스트, 배경, 구분선 — 가장 많이 쓰이는 계층
- green (Success): 완료·확인 상태
- red (Danger): 삭제·오류 상태
- yellow (Warning): 주의 상태
- teal (Discovery): 새 기능·온보딩 하이라이트
- purple (Selected): 선택 상태 강조
### 색상 제약 조건
- semantic 색상 외 추가 커스텀 색상 사용 최소화
- Jira status color(todo/in-progress/done)와 다른 의미로 색상 재사용 금지
- 배경은 거의 흰색~연한 회색 — 컬러풀한 배경 금지
### 다크모드 전략
dark theme는 Atlassian Design Token에서 자동 처리. 직접 color 하드코딩 금지
### 대비 요구사항
WCAG AA (4.5:1) 전면 준수
## 타이포그래피 가이드
- **폰트 성격**: 중립적이고 효율적인 산세리프. 복잡한 정보 구조를 명확하게 전달
- **권장 폰트 수**: 최대 1개
- **타입 스케일**: Atlassian Type Scale (11/12/14/16/20/24/28/35px)
### 타이포그래피 제약
- Atlassian 공식 type scale 준수 — 임의 크기 추가 금지
- heading은 h900~h100 7단계 시스템 사용
- 코드 블록에는 monospace 폰트 필수
## 하면 안 되는 것 (안티패턴)
- Jira/Confluence 고유 UI 패턴 임의 변형 금지 — 사용자 인지 모델 보호
- 색상만으로 상태 구분 금지 — 아이콘·텍스트 레이블 병행 필수
## 반드시 포함해야 하는 것
- Atlaskit 컴포넌트 우선 사용
- 모든 상태(loading/empty/error) 처리
- 키보드 단축키 지원 — 파워 유저 워크플로우 필수
## 모션 가이드
기능 우선 — 모션은 상태 변화를 명확히 할 때만 사용. 200ms ease-in-out 기본. 과도한 트랜지션은 업무 도구에 방해.
## 사용 사례
- 프로젝트 관리 툴
- 팀 협업 플랫폼
- 개발자 도구
- 이슈 트래킹 시스템
## 추천 프로젝트 유형
- B2B 협업 툴
- 프로젝트 관리 앱
- 개발자 플랫폼
- 기업 내부 툴
## 장점
- Jira·Confluence에서 검증된 복잡한 워크플로우 지원
- 접근성 최우선 설계
- 오픈소스 컴포넌트 라이브러리 (Atlaskit)
## 단점·한계
- Atlassian 제품 외에서는 낯선 느낌
- 비교적 보수적인 시각 디자인
- 커스터마이징 범위 제한
## 실제 사용 제품·서비스
- Jira
- Confluence
- Trello
- Bitbucket
## 접근성
WCAG 2.1 AA 준수. 키보드 내비게이션·스크린 리더 철저 검증.
## 관련 스타일
- [carbon-design](https://ui.buildersgate.com/styles/carbon-design)
- [ant-design](https://ui.buildersgate.com/styles/ant-design)
- [material-design](https://ui.buildersgate.com/styles/material-design)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #0052CC
- secondary: #00875A
- accent: #FFAB00
- background: #FFFFFF
- surface: #F4F5F7
- text: #172B4D
- textSecondary: #5E6C84
- border: #DFE1E6
### 헤더
- background: linear-gradient(135deg, #0052CC 0%, #0747A6 100%)
- textColor: #FFFFFF
- accentColor: #FFAB00
### 타이포그래피
- fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: -0.003em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 1px 1px rgba(9, 30, 66, 0.25)
- md: 0 4px 8px -2px rgba(9, 30, 66, 0.25)
- lg: 0 8px 16px -4px rgba(9, 30, 66, 0.31)
- xl: 0 20px 32px -8px rgba(9, 30, 66, 0.31)
### Border Radius
- none: 0
- sm: 3px
- md: 6px
- lg: 12px
- full: 9999px
### 테두리 (Borders)
- width: 2px
- style: solid
- color: #DFE1E6
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease-in-out
### 애니메이션
- duration: 200ms
- easing: ease-in-out
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=darken / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=ring
- 배지: shape=pill / style=solid
- 아이콘: package=lucide / strokeWidth=2 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Atlassian Design System이란 무엇인가요?
A: 아틀라시안의 제품군에 사용되는 디자인 시스템입니다. Atlassian 제품군의 폭발적 성장 이후 디자인 일관성 확보를 위해 2017년 공식화. Atlaskit 컴포넌트 라이브러리로 구현.
### Q: Atlassian Design System의 핵심 디자인 원칙은 무엇인가요?
A: Atlassian Design System의 핵심 원칙은 명확성, 효율성, 표현력, 포용성입니다.
### Q: Atlassian Design System은 어떤 프로젝트에 적합한가요?
A: Atlassian Design System은 프로젝트 관리 툴, 팀 협업 플랫폼, 개발자 도구, 이슈 트래킹 시스템, B2B 협업 툴, 프로젝트 관리 앱, 개발자 플랫폼, 기업 내부 툴 등의 프로젝트에 적합합니다.
### Q: Atlassian Design System의 장단점은 무엇인가요?
A: 장점으로는 Jira·Confluence에서 검증된 복잡한 워크플로우 지원, 접근성 최우선 설계, 오픈소스 컴포넌트 라이브러리 (Atlaskit)이 있습니다. 단점으로는 Atlassian 제품 외에서는 낯선 느낌, 비교적 보수적인 시각 디자인, 커스터마이징 범위 제한이 있습니다.
### Q: Atlassian Design System에서 색상은 어떻게 사용하나요?
A: Atlassian Blue 기반 + 기능별 semantic color. 협업 UI에 최적화된 안전하고 명확한 팔레트 색상 역할은 brand (Atlassian Blue): 핵심 브랜드 요소, active 탭, 링크, neutral: 텍스트, 배경, 구분선 — 가장 많이 쓰이는 계층, green (Success): 완료·확인 상태입니다. 주의사항: semantic 색상 외 추가 커스텀 색상 사용 최소화, Jira status color(todo/in-progress/done)와 다른 의미로 색상 재사용 금지.
### Q: Atlassian Design System에 어울리는 폰트 스타일은 무엇인가요?
A: Atlassian Design System에는 중립적이고 효율적인 산세리프. 복잡한 정보 구조를 명확하게 전달 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: Atlassian 공식 type scale 준수 — 임의 크기 추가 금지, heading은 h900~h100 7단계 시스템 사용.
### Q: Atlassian Design System 디자인에서 하면 안 되는 것은 무엇인가요?
A: Atlassian Design System에서 피해야 할 것: Jira/Confluence 고유 UI 패턴 임의 변형 금지 — 사용자 인지 모델 보호, 색상만으로 상태 구분 금지 — 아이콘·텍스트 레이블 병행 필수.
### Q: Atlassian Design System을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Atlassian Design System을 적용한 대표적인 제품·서비스로는 Jira, Confluence, Trello, Bitbucket 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=atlassian-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=atlassian-design&merged=true
아틀라시안의 제품군에 사용되는 디자인 시스템입니다. Atlassian 제품군의 폭발적 성장 이후 디자인 일관성 확보를 위해 2017년 공식화. Atlaskit 컴포넌트 라이브러리로 구현.
Atlassian Design System의 핵심 디자인 원칙은 무엇인가요?
Atlassian Design System의 핵심 원칙은 명확성, 효율성, 표현력, 포용성입니다.
Atlassian Design System은 어떤 프로젝트에 적합한가요?
Atlassian Design System은 프로젝트 관리 툴, 팀 협업 플랫폼, 개발자 도구, 이슈 트래킹 시스템, B2B 협업 툴, 프로젝트 관리 앱, 개발자 플랫폼, 기업 내부 툴 등의 프로젝트에 적합합니다.
Atlassian Design System의 장단점은 무엇인가요?
장점으로는 Jira·Confluence에서 검증된 복잡한 워크플로우 지원, 접근성 최우선 설계, 오픈소스 컴포넌트 라이브러리 (Atlaskit)이 있습니다. 단점으로는 Atlassian 제품 외에서는 낯선 느낌, 비교적 보수적인 시각 디자인, 커스터마이징 범위 제한이 있습니다.
Atlassian Design System에서 색상은 어떻게 사용하나요?
Atlassian Blue 기반 + 기능별 semantic color. 협업 UI에 최적화된 안전하고 명확한 팔레트 색상 역할은 brand (Atlassian Blue): 핵심 브랜드 요소, active 탭, 링크, neutral: 텍스트, 배경, 구분선 — 가장 많이 쓰이는 계층, green (Success): 완료·확인 상태입니다. 주의사항: semantic 색상 외 추가 커스텀 색상 사용 최소화, Jira status color(todo/in-progress/done)와 다른 의미로 색상 재사용 금지.
Atlassian Design System에 어울리는 폰트 스타일은 무엇인가요?
Atlassian Design System에는 중립적이고 효율적인 산세리프. 복잡한 정보 구조를 명확하게 전달 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: Atlassian 공식 type scale 준수 — 임의 크기 추가 금지, heading은 h900~h100 7단계 시스템 사용.
Atlassian Design System 디자인에서 하면 안 되는 것은 무엇인가요?
Atlassian Design System에서 피해야 할 것: Jira/Confluence 고유 UI 패턴 임의 변형 금지 — 사용자 인지 모델 보호, 색상만으로 상태 구분 금지 — 아이콘·텍스트 레이블 병행 필수.
Atlassian Design System을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Atlassian Design System을 적용한 대표적인 제품·서비스로는 Jira, Confluence, Trello, Bitbucket 등이 있습니다.