본문으로 건너뛰기

Sirius

의료·공공 서비스에서 이해하기 쉬운 정보, 충분히 큰 조작 영역과 높은 명암 대비를 중시하는 접근성 중심 시스템.

액션

버튼

중요한 신청과 이동에 충분히 큰 조작 영역과 높은 명암 대비를 적용한다.

토글 버튼

관심 서비스나 보기 설정처럼 누른 상태가 유지되는 액션을 표시한다.

아이콘 버튼

인쇄, 공유와 음성 안내처럼 아이콘만 쓰는 액션에 접근성 이름을 연결한다.

다이얼로그

신청 확인이나 정보 수정 콘텐츠를 현재 화면 위에 표시한다.

확인 다이얼로그

신청 제출이나 취소 전에 결과와 확인 액션을 표시한다.

접근성 도구 모음

글자 크기, 대비와 읽기 지원 설정을 44px 이상 버튼으로 제공한다.

입력

입력

이름, 연락처와 신청 번호를 한 줄로 입력받는다.

텍스트 영역

상담 내용과 신청 사유처럼 여러 줄 내용을 입력받는다.

셀렉트

정해진 지역, 기관과 신청 유형 목록에서 값을 고른다.

검색 입력

서비스, 기관과 자주 묻는 질문을 검색하고 입력 내용을 지운다.

검색형 드롭다운

긴 기관과 지역 목록을 검색하고 키보드로 값을 고른다.

생성형 드롭다운

기존 상담 내용을 고르거나 새 요청 항목을 만든다.

선택

신분증과 같은 이름을 입력해 주세요

폼 필드

입력 라벨, 도움말과 오류 문구를 하나의 입력에 연결한다.

선택

체크박스

약관 동의와 여러 지원 조건의 선택 여부를 표시한다.

라디오

방문, 전화와 온라인 상담처럼 하나만 고르는 선택지를 표시한다.

상담 방법
라디오 그룹

서로 배타적인 상담 방법이나 수령 방법을 한 묶음으로 제공한다.

스위치

문자 알림이나 읽기 지원처럼 즉시 적용되는 설정을 켜고 끈다.

지역, 대상과 선택한 지원 조건을 짧은 라벨로 표시한다.

세그먼트 컨트롤

온라인, 방문처럼 같은 영역의 표시 방식을 전환한다.

신청 결과는 언제 나오나요?
접수 후 3일 이내에 결과를 안내합니다.
아코디언

자격 조건, 준비 서류와 신청 방법을 제목별로 접고 펼친다.

정보 이용 동의

신청 처리에 필요한 항목을 확인해 주세요.

동의 내용은 언제든 다시 확인할 수 있습니다.

동의 패널

필수 여부와 설명이 연결된 동의 항목을 하나의 fieldset으로 제공한다.

내비게이션

지원 대상과 신청 방법을 안내합니다.

서비스 안내, 신청 방법과 문의 패널을 키보드와 클릭으로 전환한다.

브레드크럼

현재 서비스나 신청서까지의 상위 경로를 링크로 표시한다.

페이지네이션

서비스와 신청 내역 목록의 이전, 다음 페이지를 이동한다.

건너뛰기 링크

키보드 사용자가 반복 내비게이션을 건너뛰고 본문으로 이동한다.

상태

알림

입력 오류, 처리 지연과 확인이 필요한 내용을 제목과 상태 문구로 알린다.

무료배송
뱃지

운영 중, 예약 가능과 처리 상태를 짧은 문구로 표시한다.

스켈레톤

서비스나 신청 정보를 불러오는 동안 콘텐츠 자리를 표시한다.

스피너

짧은 자격 확인과 신청 처리가 진행 중임을 알린다.

서류 확인60%
진행 막대

신청 작성과 서류 제출의 완료 비율을 트랙과 채움으로 표시한다.

미터

신청 한도나 지원 금액의 현재 값을 정해진 범위 안에 표시한다.

토스트

저장, 제출과 신청 처리 결과를 잠시 표시한다.

접수 완료

신청 내용이 정상적으로 접수되었습니다.
안내

안내의 중요도와 다음 단계를 제목, 아이콘, 본문으로 함께 전달한다.

신청 가능
자격 상태

서비스 신청 가능 여부를 아이콘과 명확한 상태 문구로 표시한다.

진행 단계

완료, 현재, 예정 단계를 번호, 아이콘과 설명으로 구분한다.

신청서가 저장되었습니다.
실시간 알림 영역

신청, 저장과 검증 결과를 화면 변경 없이 보조 기술에 알린다.

표시

아바타

상담사, 의료진과 신청 담당자를 이미지 또는 이니셜로 식별한다.

+1
아바타 그룹

진료나 심사에 참여한 여러 담당자를 겹친 이미지로 표시한다.

신청 안내

온라인 신청 가능

접수 후 처리 일정을 안내합니다.

카드

서비스 제목, 설명, 본문과 액션을 하나의 정보 블록으로 구성한다.

예상 대기 시간

12분

앞에 3명

스탯 카드

대기 인원, 처리 기간과 남은 예약 수 같은 단일 지표를 표시한다.

건강보험 가입 상태
툴팁

아이콘과 전문 용어에 짧고 쉬운 보조 설명을 제공한다.

K
키보드 키

서비스 검색과 화면 이동에 쓰는 단축키를 키 모양으로 표시한다.

시각적 숨김

화면에는 숨기고 보조 기술에 필요한 이름과 설명을 제공한다.

레이아웃

온라인으로 바로 신청할 수 있습니다
박스

관련 안내, 입력과 연락처를 배경, 테두리와 여백으로 묶는다.

신청 가능재고 있음
스택

라벨, 안내와 액션을 일정한 세로 또는 가로 간격으로 배치한다.

S
M
L
그리드

서비스 카드와 신청 항목을 같은 너비의 열에 배치한다.


담당 기관
구분선

신청 정보와 연락처 사이를 선과 선택적 라벨로 나눈다.

패턴

신청 내역이 없습니다

지원 서비스를 찾아 신청할 수 있습니다.

빈 상태

신청 내역이나 검색 결과가 없는 이유와 다음 액션을 안내한다.

서비스상태
건강검진 지원서류 확인
예방접종 안내심사 중
테이블

서비스, 신청일과 처리 상태를 시맨틱 표로 표시한다.

신청
서비스
상태
APP-2401
건강검진 지원
서류 확인
APP-2402
예방접종 안내
심사 중
데이터 그리드

폭이 큰 신청 데이터를 열 너비와 스크롤 영역에 배치한다.

날짜 구분선

상담 기록과 예약 일정을 날짜별로 나눈다.

신청 번호
APP-2402
결제 수단
온라인 본인 인증
설명 목록

신청 번호, 접수일과 담당 기관을 용어와 값의 쌍으로 정렬한다.

건강검진 지원

여름 의류

842

처리

+12%

4.8

평점

데이터 스탯 카드

기관 이름과 대기 시간, 처리 건수 같은 여러 지표를 한 카드에 담는다.

배송 추적

제공: Sirius

배송 위치를 자동으로 갱신합니다.

연동 카드

본인 인증과 공공 데이터 서비스의 연결 상태와 액션을 표시한다.

건강 교육

14:00
이벤트 카드

건강 교육과 상담 일정의 제목, 시간과 담당자를 표시한다.

서비스 카드

서비스 목적, 자격과 처리 정보를 읽기 쉬운 하나의 링크 카드에 담는다.

연락처 카드

담당자 정보와 충분히 큰 전화 연결 버튼을 함께 제공한다.

  1. 신분증 사본

    제출됨
  2. 신청서

    준비됨
  3. 자격 증빙

    필요
서류 체크리스트

필요 서류의 누락, 준비와 제출 상태를 문구와 아이콘으로 표시한다.

건강 상담

7월 30일 14:00

예약 확정

중앙 건강센터 2층

예약 카드

진료와 상담 예약의 시간, 장소, 상태와 변경 액션을 표시한다.

중앙 건강센터

서울시 중구 세종대로 12

현재 위치에서 800m

  • 건강 상담
  • 예방접종
  • 휠체어 출입
기관 카드

가까운 기관의 주소, 거리와 제공 서비스를 표시한다.

데이터 시각화

선 차트

일자별 신청과 처리 건수 변화를 선으로 비교한다.

막대 차트

지역별 서비스 이용과 처리 건수를 막대로 비교한다.

도넛 차트

접수, 처리 중과 완료 신청의 비율을 원형으로 표시한다.

스파크라인

작은 지표 카드 안에서 최근 대기 시간의 방향을 표시한다.

게이지

서비스 처리율이나 목표 달성률을 반원과 큰 숫자로 표시한다.

히트맵

요일과 시간대별 상담 요청량을 색 농도와 값으로 비교한다.

분포 막대

접수, 심사와 완료 신청의 비율을 한 줄에서 비교한다.

레이더 차트

기관의 접근성, 대기 시간, 안내와 만족도 점수를 비교한다.

방사형 막대

여러 서비스 목표의 달성률을 동심원에 배치한다.

워터폴 차트

접수, 보완과 승인 단계가 최종 처리 건수에 미치는 영향을 표시한다.

롤리팝 차트

지역이나 기관별 처리 점수를 가는 선과 점으로 비교한다.