# Atlassian Design System — 디자인 스타일 가이드
## 기본 정보
- **ID**: atlassian-design
- **카테고리**: design-language
- **연도**: 2017
- **제작자**: Atlassian
## 설명
아틀라시안의 제품군에 사용되는 디자인 시스템입니다.
## 역사·배경
Atlassian 제품군의 폭발적 성장 이후 디자인 일관성 확보를 위해 2017년 공식화. Atlaskit 컴포넌트 라이브러리로 구현.
## 핵심 원칙
- 명확성
- 효율성
- 표현력
- 포용성
## 주요 특징
- 협업 중심 컴포넌트
- 유연한 레이아웃
- 강력한 접근성
- 일관된 브랜딩
- 확장 가능한 아키텍처
## 색상 팔레트
- Blue 700 (#0052CC): Brand — 주요 브랜드 색상
- Blue 400 (#2684FF): Link·Interactive
- Green 400 (#36B37E): 성공 상태
- Red 400 (#FF5630): 오류·위험 상태
- Yellow 300 (#FFAB00): 경고 상태
- Neutral 0 (#FFFFFF): Background
- Neutral 800 (#172B4D): 텍스트 Primary
## 사용 사례
- 프로젝트 관리 툴
- 팀 협업 플랫폼
- 개발자 도구
- 이슈 트래킹 시스템
## 추천 프로젝트 유형
- 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
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=atlassian-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=atlassian-design&merged=true
Atlassian Design System
아틀라시안의 제품군에 사용되는 디자인 시스템입니다.
Atlassian 제품군의 폭발적 성장 이후 디자인 일관성 확보를 위해 2017년 공식화. Atlaskit 컴포넌트 라이브러리로 구현.
색상 팔레트
Blue 700
#0052CC
Brand — 주요 브랜드 색상
Blue 400
#2684FF
Link·Interactive
Neutral 0
#FFFFFF
Background
Neutral 800
#172B4D
텍스트 Primary
주요 특징
- 협업 중심 컴포넌트
- 유연한 레이아웃
- 강력한 접근성
- 일관된 브랜딩
- 확장 가능한 아키텍처
장단점
장점
- +Jira·Confluence에서 검증된 복잡한 워크플로우 지원
- +접근성 최우선 설계
- +오픈소스 컴포넌트 라이브러리 (Atlaskit)
단점 / 한계
- −Atlassian 제품 외에서는 낯선 느낌
- −비교적 보수적인 시각 디자인
- −커스터마이징 범위 제한
적합한 사용처
사용 사례
- 프로젝트 관리 툴
- 팀 협업 플랫폼
- 개발자 도구
- 이슈 트래킹 시스템
이런 프로젝트에 추천
B2B 협업 툴프로젝트 관리 앱개발자 플랫폼기업 내부 툴
접근성WCAG 2.1 AA 준수. 키보드 내비게이션·스크린 리더 철저 검증.
실제 사용 예시
JiraConfluenceTrelloBitbucket
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Atlassian Buttons
협업 도구에 최적화된 버튼 디자인
Issue Card
Jira 스타일의 이슈 카드
PROJ-123
Add user authentication feature
Implement OAuth2 login with Google and GitHub
PROJ-124
Fix responsive layout on mobile
Navigation menu breaks on small screens
Side Navigation
Confluence/Jira 스타일 사이드바
Information
This is an informational banner message.
Warning
Please review this important information.
Atlassian Typography
협업 도구에 최적화된 명확하고 포용적인 타이포그래피
Heading xxxl (29px)
Atlassian Design
Heading xl (24px)
명확성, 효율성, 포용성
Heading lg (20px)
팀 협업을 위한 UI 언어
Body (14px)
Atlassian Design System은 Jira, Confluence, Trello를 비롯한 아틀라시안 제품군 전반에서 일관된 사용자 경험을 제공하기 위해 설계되었습니다.