본문으로 건너뛰기

Atlas

금융, 공공과 엔터프라이즈 화면을 위한 시스템이다. navy 주요색, 작은 곡률, 명확한 경계와 제한된 상태색으로 입력, 승인, 감사와 데이터 검토를 연결한다.

액션

기본 버튼

주요 동작과 보조 동작을 색상, 테두리와 라벨로 구분하는 컨트롤.

토글 버튼

사용자가 유지하는 액션 상태를 한 자리에서 전환하는 컨트롤.

아이콘 버튼

라벨 대신 아이콘을 쓰는 액션에 필수 접근성 이름을 연결한다.

다이얼로그

현재 화면을 유지하며 집중적인 검토와 결정을 담는 대화 상자.

확인 다이얼로그

승인, 반려와 삭제 전에 결과와 확인 액션을 표시한다.

입력

텍스트 입력

정형화된 한 줄 값을 안정적으로 수집하는 필드.

텍스트 영역

검토 근거와 맥락을 충분한 길이로 기록하는 필드.

셀렉트

제한된 선택지를 익숙한 네이티브 방식으로 제공하는 필드.

검색 입력

큰 업무 집합에서 필요한 대상을 빠르게 좁히는 필드.

검색형 드롭다운

긴 기관과 담당자 목록을 검색하고 키보드로 값을 고른다.

생성형 드롭다운

기존 분류를 고르거나 같은 영역에서 새 분류를 만든다.

선택
폼 필드

입력의 이름과 도움말, 오류를 하나의 의미 단위로 묶는 구조.

선택

체크박스

서로 독립적인 여러 선택을 명시적으로 표시하는 컨트롤.

라디오

한 선택지의 배타적 선택 상태를 나타내는 네이티브 컨트롤.

라디오 그룹

서로 배타적인 선택지를 하나의 접근 가능한 질문으로 묶는 구조.

스위치

즉시 적용되는 이진 설정의 현재 상태를 드러내는 컨트롤.

필터와 분류의 선택 상태를 간결하게 드러내는 라벨.

세그먼트 컨트롤

동등한 보기 모드를 한 줄에서 빠르게 전환하는 컨트롤.

승인 기준은 무엇인가요?
금액과 계약 유형에 따라 승인 단계를 적용합니다.
반려 후 수정할 수 있나요?
요청자가 보완한 뒤 다시 제출할 수 있습니다.
아코디언

긴 정책 설명과 업무 도움말을 제목별로 접고 펼친다.

내비게이션

관련 정보 영역을 같은 화면의 명확한 패널로 나누는 구조.

브레드크럼

현재 레코드까지의 상위 업무 경로를 링크 목록으로 표시한다.

페이지네이션

긴 업무 목록에서 현재 범위와 앞뒤 이동 가능성을 명확히 하는 탐색.

상태

알림 배너

정책 위반, 처리 지연과 확인이 필요한 메시지를 화면 상단에 표시한다.

승인
뱃지

승인 상태와 업무 분류를 작은 상태 라벨로 표시한다.

스켈레톤

업무 데이터를 불러오는 동안 표와 카드의 자리를 표시한다.

스피너

짧은 조회와 승인 처리 상태를 회전 표시로 알린다.

승인 진행60%
진행 막대

승인 절차나 제출 작업의 완료 비율을 트랙과 채움으로 표시한다.

미터

정해진 범위 안의 위험도와 집행률을 라벨과 함께 표시한다.

토스트

저장, 제출과 승인 결과를 화면 오른쪽 위에 일정 시간 표시한다.

표시

아바타

담당자와 승인 주체를 이니셜 또는 이미지로 식별한다.

+1
아바타 그룹

검토와 승인에 참여한 여러 담당자를 겹친 식별자로 압축한다.

계약 변경

REQ-2048

계약 기간과 집행 금액을 변경합니다.

카드

업무 제목, 상태와 세부 정보를 하나의 패널로 구성한다.

승인 대기

24

-3

스탯 카드

승인 대기 건수처럼 중요한 단일 지표와 변화량을 함께 표시한다.

REQ-2048

계약 변경 요청

검토 중

계약 기간과 집행 금액 변경을 검토합니다.

요청자 김민지 · 2026. 7. 29.
레코드 헤더

업무 레코드의 제목, 상태, 설명, 메타데이터와 액션을 묶는다.

도움말
툴팁

주 인터페이스를 복잡하게 하지 않고 짧은 보조 맥락을 제공하는 레이어.

K
키보드 키

검색과 일괄 작업에 쓰는 단축키를 물리 키 모양으로 표시한다.

레이아웃

계약 정보
박스

관련 입력과 정보를 흰색 패널과 명확한 경계 안에 묶는다.

FinanceAudit
스택

상태 라벨과 컨트롤을 한 축에 일관된 간격으로 배치한다.

그리드

업무 카드와 지표 패널을 일정한 열과 간격에 배치한다.


검토 정보
구분선

정보와 액션 묶음 사이를 얇은 선과 선택적 라벨로 나눈다.

패턴

등록된 계약이 없습니다

첫 계약을 추가하면 표시된다.

빈 상태

콘텐츠가 없는 이유와 가능한 다음 흐름을 차분하게 설명하는 상태.

데이터 도구 모음

목록의 제목과 건수, 검색, 필터와 일괄 액션을 한 줄에 배치한다.

업무상태
계약 변경검토 중
예산 이관승인
테이블

읽기 중심의 업무 데이터를 시맨틱 표와 명확한 셀 경계로 구성한다.

ID
업무
상태
REQ-2048
계약 변경
검토 중
REQ-2049
예산 이관
승인
데이터 그리드

폭이 큰 업무 데이터를 고정 열과 스크롤 영역에 배치한다.

날짜 구분선

감사 기록과 업무 활동을 날짜별로 나누고 건수를 표시한다.

기관
듀오랩스
상태
검토 중
설명 목록

계약, 기관과 상태 정보를 용어와 값의 쌍으로 정렬한다.

재무팀

2026 운영 예산

₩8.4B

예산

+4%

72%

집행률

데이터 스탯 카드

한 기관의 이름과 예산, 집행률 같은 여러 지표를 한 카드에 담는다.

전자결재

제공: Atlas

승인 결과를 자동으로 동기화합니다.

연동 카드

외부 업무 시스템의 설명과 연결 상태 액션을 함께 표시한다.

계약 변경 검토

14:00
이벤트 카드

회의와 검토 일정의 제목, 시간과 참여자를 한 카드로 묶는다.

  1. 요청 제출김민지
  2. 부서 검토이준호
  3. 최종 승인박서연
승인 타임라인

승인 단계, 담당자, 현재 진행 상태와 반려 여부를 순서대로 표시한다.

김민지 상태를 변경했습니다검토 중

IP 10.24.8.12 · 계약 변경 요청
감사 로그 항목

행위자, 변경 내용, 대상과 기록 시각을 한 줄에 표시한다.

데이터 시각화

선 차트

시간에 따른 예산, 집행과 처리량의 변화를 선으로 비교한다.

막대 차트

부서별 예산과 처리 건수를 막대로 비교한다.

도넛 차트

전체 예산이나 업무에서 각 분류가 차지하는 비율을 표시한다.

스파크라인

작은 지표 카드 안에서 최근 처리량의 방향을 표시한다.

게이지

단일 집행률이나 목표 달성률을 반원과 큰 숫자로 표시한다.

히트맵

요일과 시간대별 민원 또는 처리량을 색의 농도로 표시한다.

분포 막대

승인, 대기와 반려 비율을 한 줄 누적 막대로 비교한다.

레이더 차트

부서의 속도, 정확도와 준수 수준을 다각형으로 비교한다.

방사형 막대

여러 목표 달성률을 크기가 다른 동심원에 배치한다.

워터폴 차트

예산 증감이 최종 잔액에 미치는 영향을 단계별로 표시한다.

롤리팝 차트

부서별 처리 점수를 가는 선과 점으로 비교한다.