KRDS React

컴포넌트 목록 ​

공식 krds-react 1.1.1의 컴포넌트를 KRDS 공식 컴포넌트 목록의 분류대로 정리했습니다. 각 문서에서 예제, 코드, props를 확인할 수 있습니다.

아이덴티티

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

탐색

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

레이아웃 및 표현

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

액션

  • 링크 Link - 링크는 다른 서비스/애플리케이션, 한 서비스 내의 다른 화면, 한 화면 내의 다른 섹션 등으로 이동하는 데 사용되는 탐색 요소이다.
  • 버튼 Button - 버튼은 어떤 기능이나 동작을 실행하거나 기능을 사용하기 위한 상태로 변경하는 요소이다.

선택

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

피드백

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

도움

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

입력

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

설정

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