컴포넌트 목록

KRDS 공식 컴포넌트 55종 중 52종을 Vue 3 컴포넌트로 제공합니다. 각 문서에서 예제, 코드, props·events·slots를 확인할 수 있습니다.

아이덴티티

• 공식 배너 Masthead - 공식 배너는 사용자가 대한민국 정부 조직 및 관련 기관에서 운영 및 관리하는 디지털 정부서비스임을 식별할 수 있도록 제공하는 정보 배너이다.
• 운영기관 식별자 Identifier - 운영기관 식별자는 디지털 정부서비스에 대한 신뢰성을 위해 서비스 운영 및 관리 주체를 안내하는 요소로 공식 배너, 푸터와 함께 서비스의 일관성, 브랜드를 확인할 수 있는 핵심 요소이다.
• 헤더 Header - 헤더는 웹사이트의 상단 헤더 영역을 구성하는 컴포넌트이다.
• 푸터 Footer - 푸터는 화면을 구성하는 가장 마지막 요소로 헤더와 본문에서 원하는 정보를 찾지 못하였거나 사이트 구조 탐색 중에 길을 잃은 사용자들이 대면하게 되는 정보이다.

탐색

• 건너뛰기 링크 Skip link - 건너뛰기 링크는 웹사이트에서 웹 페이지의 주요 콘텐츠 섹션의 탐색을 도와주는 페이지 내부 링크이다.
• 메인 메뉴 Main menu - 메인 메뉴는 서비스 전체의 구조를 보여주고 주요 화면으로 이동할 수 있게 하는 메뉴이다.
• 브레드크럼 Breadcrumb - 브레드크럼은 탐색 계층 구조를 표시하여 사용자가 현재 위치를 파악하고 계층 구조의 수준을 이동할 수 있게 해준다.
• 사이드 메뉴 Side navigation - 사이드 메뉴는 서브 화면 내에서의 이동을 위해 사용하는 메뉴이다.
• 콘텐츠 내 탐색 In-page navigation - 콘텐츠 내 탐색은 사용자가 본문의 구조를 훑어보고 원하는 콘텐츠로 빠르게 이동할 수 있도록 하는 탐색 수단이다.
• 페이지네이션 Pagination - 페이지네이션은 많은 양의 콘텐츠를 탐색하기 쉽도록 여러 화면에 나누고, 분할된 화면을 탐색하는 데 사용되는 요소이다.

레이아웃 및 표현

• 구조화 목록 Structured list - 구조화 목록은 유사하거나 관련된 콘텐츠 집합을 표현하기 위한 형식으로 목록에 제공된 데이터에 대한 상세 정보 탐색 수단 또는 관련 기능 실행 수단으로 활용된다.
• 긴급 공지 Critical alerts - 긴급 공지는 본문 상단에 강조되어 표시되는 배너로 사용자에게 긴급하거나 중요한 정보를 전달하는 데 사용된다.
• 디스클로저 Disclosure - 디스클로저는 특정한 정보/컨트롤/섹션에 관련된 부가적인 정보를 표시하거나 숨기는 데 사용되는 요소이다.
• 모달 Modal - 모달은 대화창의 한 종류로 기본 창에 종속된 요소이다.
• 배지 Badge - 컴포넌트에 대한 빠른 인지와 탐색을 돕기 위해 컴포넌트 근처에 표시되는 작은 문자 또는 숫자 데이터이다.
• 아코디언 Accordion - 아코디언은 한 페이지에서 관련 있는 여러 콘텐츠 섹션을 확인할 수 있도록 하는 컴포넌트로 콘텐츠 섹션의 헤더 목록이 수직으로 쌓여 있는 형태로 표현된다.
• 이미지 Image - 이미지는 콘텐츠 양식 중 하나로 단일 이미지 또는 이미지 시퀀스로 표현될 수 있다.
• 캐러셀 Carousel - 캐러셀은 하나의 영역에서 여러 개의 콘텐츠를 순차적으로 번갈아 보여주는 컴포넌트이다.
• 탭 Tab - 탭은 버튼을 눌러 상호배타적인 여러 개의 콘텐츠 섹션을 전환할 수 있는 컴포넌트이다.
• 표 Table - 표는 데이터를 하나 이상의 행과 열로 조직화하여 표현하는 형식으로 사용자가 빠르게 많은 양의 정보를 확인하고 비교할 수 있도록 도와준다.
• 텍스트 목록 Text list - 텍스트 목록은 계층 구조가 있는 텍스트 블록을 읽기 쉽게 구성한 것이다.

액션

• 링크 Link - 링크는 다른 서비스/애플리케이션, 한 서비스 내의 다른 화면, 한 화면 내의 다른 섹션 등으로 이동하는 데 사용되는 탐색 요소이다.
• 버튼 Button - 버튼은 어떤 기능이나 동작을 실행하거나 기능을 사용하기 위한 상태로 변경하는 요소이다.
• 플로팅 버튼 Floating action button - 플로팅 버튼은 사용자가 화면에서 가장 자주 사용하고 중요한 작업에 단일 또는 다중으로 사용한다.

선택

• 라디오 버튼 Radio button - 라디오 버튼은 사용자가 여러 개의 옵션 중 하나만 선택할 수 있도록 하는 경우에 사용한다.
• 체크박스 Checkbox - 체크박스는 사용자가 여러 개의 옵션 중 한 개 이상의 값을 선택할 수 있도록 하는 경우에 사용한다.
• 셀렉트 Select - 셀렉트는 사용자에게 여러 개의 옵션 목록을 팝업으로 제공하여 그 중 한 개의 값을 선택할 수 있도록 하는 경우에 사용한다.
• 태그 Tag - 태그는 키워드 또는 레이블을 사용하여 콘텐츠를 분류하는 수단이다.
• 토글 스위치 Toggle switch - 토글은 상호 배타적인 두 가지 상태를 전환하는 데 사용되는 요소이다.

피드백

• 단계 표시기 Step indicator - 단계 표시기는 서비스 이용을 위해 사용자가 거쳐야 하는 일련의 단계를 시각화하여 표현한 것으로 진행 상태에 대한 피드백을 사용자에게 전달한다.
• 스피너 Spinner - 스피너는 화면이나 요소의 다양한 처리 상태를 시각적으로 표시한 것으로 화면 전체나 일부 요소에 접근하기 위해 일정 시간 동안 대기해야 함을 사용자에게 안내한다.

도움

• 패널 Panel - 패널은 본문 콘텐츠의 섹션이나 일부 요소에 대한 개념/용어 설명, 옵션의 구성, 이용 방법 등과 관련된 정보나 도움말, 따라하기 콘텐츠를 제공하는 사이드 패널이다.
• 맥락적 도움말 Contextual help - 컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다.
• 코치마크 Coach mark - 코치마크는 사용자에게 새로 도입된 기능을 안내하거나, 여러 단계를 거쳐 수행해야 하는 복잡한 과업을 사용자가 보다 쉽게 완료할 수 있도록 세부 수행 단계별로 고맥락적 도움말을 제공하는 컴포넌트이다.
• 툴팁 Tooltip - 툴팁은 요소나 본문 텍스트에 제공되는 짧은 부가 설명이다.
• 음성 지원 TTS - TTS(Text-to-Speech)는 텍스트를 음성으로 변환하여 읽어주는 기능을 제공하는 버튼 컴포넌트이다.

입력

• 날짜 입력 필드 Date input - 날짜 입력 필드는 사용자가 특정 날짜 또는 기간을 입력하거나 선택하는 데 사용되는 요소이다.
• 텍스트 영역 Textarea - 텍스트 영역은 사용자가 키보드로 글자, 숫자, 기호 등이 조합된 여러 줄의 텍스트를 입력하는 경우에 사용하는 요소이다.
• 텍스트 입력 필드 Text input - 텍스트 입력 필드는 사용자가 키보드로 글자, 숫자, 기호 등이 조합된 한 줄의 짧은 텍스트를 입력하는 경우에 사용하는 요소이다.
• 파일 업로드 File upload - 파일 업로드는 하나 이상의 디바이스의 로컬 파일을 선택하고 첨부하는 데 사용하는 입력 컴포넌트이다.

설정

• 언어 변경 Language switcher - 언어 변경은 서비스의 콘텐츠를 표시할 언어를 변경하거나 별도의 외국어 서비스로 이동하는 데 사용되는 요소이다.
• 화면 크기 조정 Resize - 화면 크기 조정은 텍스트를 포함하여 화면에 표시되는 정보를 확대하거나 축소하는 데 사용되는 요소이다.

콘텐츠

• 접근 가능한 미디어 Accessible multimedia - 미디어 콘텐츠에 설명이 필요한 경우에 사용하는 컴포넌트이다.
• 숨긴 콘텐츠 v-sr-only - v-sr-only 디렉티브는 스크린 리더 전용 텍스트를 위한 최소 구현 디렉티브이다.

모바일

• 범위슬라이드 Range slider - 범위 슬라이더는 사용자가 연속된 옵션 범위에서 값을 선택할 수 있도록 하는 경우 사용한다.
• 수량 토글 Quantity toggle - 수량 토글은 사용자가 수량 옵션을 늘리거나 줄이는 데 사용되며, 한정된 범위 내에서 수량 선택을 위해 사용한다.
• 토스트 Toast - 토스트는 사용자 행동에 대한 결과를 일시적으로 표시했다 사라지는 알림 메시지를 표시하는데 사용한다.
• 스낵바 Snackbar - 스낵바는 사용자 행동에 대한 결과나 서비스 이용 중 발생한 중요도 낮은 메시지를 추가 행동과 함께 제공하는데 사용한다.
• 탭바 Tab bar - 탭바는 화면 하단에 고정하여 제공하는 탐색 수단으로 작은 디바이스나 좁은 화면에서 서비스의 핵심 화면으로 빠르게 접근할 수 있도록 도와준다.
• 스플래시 스크린 Splash screen - 스플래시 스크린은 응용 프로그램이 실행되기 전에 사용자에게 짧은 시간 동안 제공되는 화면으로 모바일 애플리케이션 전용 컴포넌트이다.

부가 컴포넌트

• 폼 그룹 Form group - KrdsFormGroup은 입력 컴포넌트 하나와 그 레이블·도움말을 묶는 .form-group 영역입니다.
• 아이콘 Icon - KRDS SVG 아이콘을 표시하는 컴포넌트이다.
• 레이아웃 Layout - 웹사이트의 전체 레이아웃 구조를 제공하는 컴포넌트이다.