표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Atlassian Design System
아틀라시안의 제품군에 사용되는 디자인 시스템입니다.
- YEAR
- 2017
- BY
- Atlassian
- MOOD
- 신뢰감 · 친근·발랄
- PRIMARY#0052CC
- SECONDARY#00875A
- ACCENT#FFAB00
- BG#FFFFFF
- SURFACE#F4F5F7
취급 표시
- 살짝 둥근 모서리
- 굵은 테두리
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 3단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 4단계
- 신뢰감
- 친근·발랄
어디에 쓰나
실제로 쓰는 곳
- Jira
- Confluence
- Trello
- Bitbucket
사용 사례
- 프로젝트 관리 툴
- 팀 협업 플랫폼
- 개발자 도구
- 이슈 트래킹 시스템
이런 프로젝트에 맞습니다
- B2B 협업 툴
- 프로젝트 관리 앱
- 개발자 플랫폼
- 기업 내부 툴
이런 프로젝트에 권합니다
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
Atlassian 제품군의 폭발적 성장 이후 디자인 일관성 확보를 위해 2017년 공식화. Atlaskit 컴포넌트 라이브러리로 구현.
핵심 원칙
- 명확성
- 효율성
- 표현력
- 포용성
주요 특징
- 협업 중심 컴포넌트
- 유연한 레이아웃
- 강력한 접근성
- 일관된 브랜딩
- 확장 가능한 아키텍처
장점과 한계
장점
- Jira·Confluence에서 검증된 복잡한 워크플로우 지원
- 접근성 최우선 설계
- 오픈소스 컴포넌트 라이브러리 (Atlaskit)
한계
- Atlassian 제품 외에서는 낯선 느낌
- 비교적 보수적인 시각 디자인
- 커스터마이징 범위 제한
컬러 시스템
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 폰트 필수
설계 제약
반드시 포함
- Atlaskit 컴포넌트 우선 사용
- 모든 상태(loading/empty/error) 처리
- 키보드 단축키 지원 — 파워 유저 워크플로우 필수
하지 말 것
- Jira/Confluence 고유 UI 패턴 임의 변형 금지 — 사용자 인지 모델 보호
- 색상만으로 상태 구분 금지 — 아이콘·텍스트 레이블 병행 필수
모션 — 기능 우선 — 모션은 상태 변화를 명확히 할 때만 사용. 200ms ease-in-out 기본. 과도한 트랜지션은 업무 도구에 방해.
접근성
WCAG 2.1 AA 준수. 키보드 내비게이션·스크린 리더 철저 검증.
자주 묻는 질문
Atlassian Design System이란 무엇인가요?
아틀라시안의 제품군에 사용되는 디자인 시스템입니다. 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 등이 있습니다.