가이드 검색

• 컴포넌트 아이덴티티

  공식 배너 (Masthead)

  공식 배너는 사용자가 대한민국 정부 조직 및 관련 기관에서 운영 및 관리하는 디지털 정부서비스임을 식별할 수 있도록 제공하는 정보 배너이다.

• 컴포넌트 아이덴티티

  운영기관 식별자 (Identifier)

  운영기관 식별자는 디지털 정부서비스에 대한 신뢰성을 위해 서비스 운영 주체의 상위 기관을 안내하는 요소로 공식 배너, 푸터와 함께 서비스의 일관성, 브랜드를 확인할 수 있는 핵심 요소이다.

• 컴포넌트 아이덴티티

  푸터 (Footer)

  푸터는 화면을 구성하는 가장 마지막 요소로 헤더와 본문에서 원하는 정보를 찾지 못하였거나 사이트 구조 탐색 중에 길을 잃은 사용자들이 대면하게 되는 정보이다. 따라서 푸터에는 사용자가 서비스를 탐색할 수 있는 추가적인 수단, 문제를 해결하는 데 참고할 수 있는 유용한 링크가 제공되어야 한다.

• 컴포넌트 아이덴티티

  헤더 (Header)

  헤더는 사용자가 웹사이트에 접속하자마자 마주하게 되는 화면의 최상단 영역으로 디지털 정부 서비스의 브랜드 이미지를 전달하는 핵심 영역이다. 모든 페이지에 일관성 있게 배치되며 통합검색, 메인 메뉴 등 서비스 정보를 탐색하고 이동할 수 있는 핵심 탐색 수단을 제공한다.

• 컴포넌트 탐색

  건너뛰기 링크 (Skip link)

  건너뛰기 링크는 웹사이트에서 웹 페이지의 주요 콘텐츠 섹션의 탐색을 도와주는 페이지 내부 링크이다. 키보드나 가상 초점을 이용하여 콘텐츠를 탐색하는 사용자는 건너뛰기 링크를 이용하여 대부분의 페이지에서 반복되는 콘텐츠 영역을 건너뛰고 주요 콘텐츠로 빠르게 이동할 수 있다.

• 컴포넌트 탐색

  메인 메뉴 (Main menu)

  메인 메뉴는 사용자가 페이지를 탐색할 때, 가장 많이 사용하는 유형의 메뉴이다. 일반적으로 헤더와 함께 거의 모든 페이지에 제공되며, 사용자가 자주 방문하거나 중요도가 높은 페이지로 이동할 수 있는 링크가 포함되어 있다. 빈번하게 활용되는 사용자의 일차적인 이동 수단이기 때문에 사용하기 쉽게 설계해야 한다.

• 컴포넌트 탐색

  브레드크럼 (Breadcrumb)

  브레드크럼은 탐색 계층 구조를 표시하여 사용자가 현재 위치를 파악하고 계층 구조의 수준을 이동할 수 있게 해준다. 브레드크럼을 통해 사용자는 탐색 중인 화면의 상위 수준 화면으로 이동할 수 있다.

• 컴포넌트 탐색

  사이드 메뉴 (Side navigation)

  사이드 메뉴는 서브 화면 내에서의 이동을 위해 사용하는 메뉴이다. 일반적으로 본문 영역의 좌측에 사이드바 형태로 제공된다. 메인 메뉴보다 훨씬 좁고 깊은 페이지 구조 탐색에 사용되기 때문에 링크의 개수가 많고 복잡하게 표현되기 쉽다. 사이트 규모가 클수록 사이드 메뉴를 단순하고 직관적으로 설계하여 사용자가 탐색 중에 길을 잃지 않도록 해야 한다.

• 컴포넌트 탐색

  콘텐츠 내 탐색 (In-page navigation)

  콘텐츠 내 탐색은 사용자가 본문의 구조를 훑어보고 원하는 콘텐츠로 빠르게 이동할 수 있도록 하는 탐색 수단이다. 화면을 스크롤 할 때 특정 위치에 고정되어 콘텐츠의 목차 역할을 하는 동시에 사용자가 페이지 내 탐색에서 특정 항목을 클릭하면 연결된 섹션으로 스크롤 된다.

• 컴포넌트 탐색

  페이지네이션 (Pagination)

  페이지네이션은 많은 양의 콘텐츠를 탐색하기 쉽도록 여러 화면에 나누고, 분할된 화면을 탐색하는 데 사용되는 요소이다.

• 컴포넌트 레이아웃 및 표현

  구조화 목록 (Structured list)

  구조화 목록은 유사하거나 관련된 콘텐츠 집합을 표현하기 위한 형식으로 목록에 제공된 데이터에 대한 상세 정보 탐색 수단 또는 관련 기능 실행 수단으로 활용된다. 사용자가 콘텐츠를 효율적으로 탐색하고 다음 행동을 빠르게 결정할 수 있도록 목록 내 정보는 상세 페이지에서 제공되는 복잡한 콘텐츠 중 핵심적이거나 흥미를 끌 수 있는 정보를 논리적 흐름에 따라 조직화하여 명확한 위계 구조를 반영해 제공해야 한다.

• 컴포넌트 레이아웃 및 표현

  긴급 공지 (Critical alerts)

  긴급 공지는 본문 상단에 강조되어 표시되는 배너로 사용자에게 긴급하거나 중요한 정보를 전달하는 데 사용된다. 모든 공공 디지털 서비스에서 동일한 긴급 공지 컴포넌트를 사용함으로써 사용자는 긴급한 정보를 일관되고 예측 가능한 방식으로 찾고 이해할 수 있다.

• 컴포넌트 레이아웃 및 표현

  달력 (Calendar)

  달력은 날짜와 관련된 정보와 기능을 제공하는 데 사용한다.

• 컴포넌트 레이아웃 및 표현

  디스클로저 (Disclosure)

  디스클로저는 특정한 정보, 컨트롤, 섹션에 관련된 부가적인 정보를 표시하거나 숨기는 데 사용되는 요소이다. 디스클로저 하위 콘텐츠 섹션은 기본으로 축소된 상태로 제공되며 사용자가 요청하는 경우에 확장되어 자세한 정보가 표시된다. 이는 사용자의 인지적 부담을 감소시키고 정보를 빠르게 훑어보는 데 도움이 된다.

• 컴포넌트 레이아웃 및 표현

  모달 (Modal)

  모달은 대화창의 한 종류로 기본 창에 종속된 요소이다. 기본 창과 겹쳐져 가장 상단에 표시되며, 이때 기본 창은 비활성 상태로 전환되어 상호 작용이 불가능하므로 사용자는 모달에서의 단일한 과업 또는 메시지에 집중할 수 있다.

• 컴포넌트 레이아웃 및 표현

  배지 (Badge)

  컴포넌트에 대한 빠른 인지와 탐색을 돕기 위해 컴포넌트 근처에 표시되는 작은 문자 또는 숫자 데이터이다. 컴포넌트의 분류 체계, 구조화된 정보, 상태 정보, 기타 메타 데이터를 표시할 수 있으며 사용자의 주의를 끌기 위해 색상을 활용할 수 있다.

• 컴포넌트 레이아웃 및 표현

  아코디언 (Accordion)

  아코디언은 한 페이지에서 관련 있는 여러 콘텐츠 섹션을 확인할 수 있도록 하는 컴포넌트로 콘텐츠 섹션의 헤더 목록이 수직으로 쌓여 있는 형태로 표현된다. 일반적으로 헤더 목록은 컨트롤 요소로 활용되며 사용자는 필요에 따라 헤더를 선택하여 하위 콘텐츠 섹션을 표시하거나 숨길 수 있다.

• 컴포넌트 레이아웃 및 표현

  이미지 (Image)

  이미지는 콘텐츠 양식 중 하나로 단일 이미지 또는 이미지 시퀀스로 표현될 수 있다. 이미지를 적절하게 사용하게 되면 사용자는 텍스트보다 효과적으로 정보를 인지할 수 있으며, 텍스트로 표현하기 어려운 정보를 전달할 수 있다.

• 컴포넌트 레이아웃 및 표현

  캐러셀 (Carousel)

  캐러셀은 하나의 콘텐츠 영역 내에 여러 개의 서로 다른 콘텐츠를 표시할 수 있는 컴포넌트이다. 캐러셀에 포함된 콘텐츠는 가로로 배치되어 있으며, 사용자가 좌/우로 콘텐츠를 회전시켜 콘텐츠를 탐색하도록 하거나 자동으로 회전하도록 설정할 수 있다.

• 컴포넌트 레이아웃 및 표현

  탭 (Tab)

  탭은 버튼을 눌러 상호배타적인 여러 개의 콘텐츠 섹션을 전환할 수 있는 컴포넌트이다. 콘텐츠 섹션은 동일한 영역 내에서 전환되기 때문에 정보를 탐색하는 맥락을 유지할 수 있고 작은 공간에 많은 양의 콘텐츠를 효과적으로 표현할 수 있다.

• 컴포넌트 레이아웃 및 표현

  표 (Table)

  표는 데이터를 하나 이상의 행과 열로 조직화하여 표현하는 형식으로 사용자가 빠르게 많은 양의 정보를 확인하고 비교할 수 있도록 도와준다. 대화형 요소가 아니기 때문에 데이터를 정렬하는 것 외에 행 전체나 데이터 셀은 대화형 요소가 아니다.

• 컴포넌트 액션

  링크 (Link)

  링크는 다른 서비스/애플리케이션, 한 서비스 내의 다른 화면, 한 화면 내의 다른 섹션 등으로 이동하는 데 사용되는 탐색 요소이다.

• 컴포넌트 액션

  버튼 (Button)

  버튼은 어떤 기능이나 동작을 실행하거나 기능을 사용하기 위한 상태로 변경하는 요소이다. 사용자가 서비스를 이용하는 과정에서 어떤 행동이 중요한지에 따라 관련된 버튼이 다양한 스타일로 표현된다.

• 컴포넌트 선택

  라디오 버튼 (Radio button)

  라디오 버튼은 사용자가 여러 개의 옵션 중 한 개의 값을 선택할 수 있도록 하는 경우에 사용한다. 사용자가 옵션 목록에서 새로운 옵션을 선택했을 때, 기존에 선택되었던 옵션은 자동으로 선택이 해제되어야 한다.

• 컴포넌트 선택

  체크박스 (Checkbox)

  체크박스는 사용자가 여러 개의 옵션 중 한 개 이상의 값을 선택할 수 있도록 하는 경우에 사용한다. 즉, 체크박스 옵션의 선택은 상호배타적이므로 한 개의 옵션을 선택하는 것은 다른 옵션의 선택에 영향을 미치지 않는다.

• 컴포넌트 선택

  셀렉트 (Select)

  셀렉트는 사용자에게 여러 개의 옵션 목록을 팝업으로 제공하여 그 중 한 개의 값을 선택할 수 있도록 하는 경우에 사용한다.

• 컴포넌트 선택

  태그 (Tag)

  태그는 키워드 또는 레이블을 사용하여 콘텐츠를 분류하는 수단이다. 콘텐츠 항목에 직접 관련 분류 체계, 데이터 속성을 표시하거나, 목록에서 특정 분류 체계, 데이터 속성을 가진 항목이 선택되었음을 보여주기 위한 태그 그룹으로 사용된다.

• 컴포넌트 피드백

  단계 표시기 (Step indicator)

  서비스 이용을 위해 사용자가 거쳐야 하는 일련의 단계를 시각화하여 표현한 것으로 진행 상태에 대한 피드백을 사용자에게 전달한다.

• 컴포넌트 피드백

  스피너 (Spinner)

  스피너는 페이지나 요소의 다양한 처리 상태를 시각적으로 표시한 것으로 화면 전체나 일부 요소에 접근하기 위해 일정 시간 동안 대기해야 함을 사용자에게 안내한다.

• 컴포넌트 도움

  도움 패널 (Help panel)

  도움 패널은 본문 콘텐츠의 섹션이나 일부 요소에 대한 개념/용어 설명, 옵션의 구성, 이용 방법 등과 관련된 정보나 도움말 콘텐츠를 제공하는 사이드 패널이다.

• 컴포넌트 도움

  따라하기 패널 (Tutorial panel)

  따라하기 패널은 본문 콘텐츠와 관련된 이용 방법을 실제 이용 절차에 따라 단계적으로 수행할 수 있도록 도와주며 코치마크를 실행하는 데 사용되는 사이드 패널이다.

• 컴포넌트 도움

  맥락적 도움말 (Contextual help)

  컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.

• 컴포넌트 도움

  코치마크 (Coach mark)

  코치마크는 사용자에게 새로 도입된 기능을 안내하거나, 여러 단계를 거쳐 수행해야 하는 복잡한 과업을 사용자가 보다 쉽게 완료할 수 있도록 세부 수행 단계별로 고맥락적 도움말을 제공하는 컴포넌트이다.

• 컴포넌트 입력

  날짜 입력 필드 (Date input)

  날짜 입력 필드는 사용자가 특정 날짜 또는 기간을 입력하거나 선택하는 데 사용되는 요소이다.

• 컴포넌트 입력

  텍스트 영역 (Textarea)

  텍스트 영역은 사용자가 키보드로 글자, 숫자, 기호 등이 조합된 여러 줄의 텍스트를 입력하는 경우에 사용하는 요소이다.

• 컴포넌트 입력

  텍스트 입력 필드 (Text input)

  탭은 버튼을 눌러 상호배타적인 여러 개의 콘텐츠 섹션을 전환할 수 있는 컴포넌트이다. 콘텐츠 섹션은 동일한 영역 내에서 전환되기 때문에 정보를 탐색하는 맥락을 유지할 수 있고 작은 공간에 많은 양의 콘텐츠를 효과적으로 표현할 수 있다.

• 컴포넌트 입력

  파일 업로드 (File upload)

  파일 업로드는 하나 이상의 디바이스의 로컬 파일을 선택하고 첨부하는 데 사용하는 입력 컴포넌트이다.

• 기본 패턴

  개인 식별 정보 입력

  개인 식별 정보는 사용자 본인을 포함하여 특정한 개인의 신원을 밝히거나 개인/단체에 대한 기본 정보 확인에 사용되는 모든 정보를 의미한다. 사용자에게 개인 식별 정보의 입력을 요청하기 전에 해당 정보를 반드시 수집해야 하는지 다시 한 번 점검하고 사용자에게 입력이 필요한 이유를 명확하게 설명하는 것이 좋다.

• 기본 패턴

  도움

  도움 패턴은 사용자에게 서비스를 이용하는 동안 사용자 인터페이스의 작동 방식과 사용 방법, 진행 중인 과업 플로(Flow) 등과 관련된 도움 정보를 제공하는 데 사용되는 다양한 유형의 컴포넌트 조합이다. 사용자의 능숙도와 이용 맥락에 적합한 도움 컴포넌트를 설계하여 제공함으로써 사용자는 보다 쉽고 빠르게 서비스를 이해하고 이용할 수 있게 된다.

• 기본 패턴

  동의

  동의는 웹사이트의 이용 조건 및 절차 등을 명시한 내용을 읽고 동의 여부나 안내 사항의 확인 여부를 확인하는 데 사용되는 패턴이다. 대개 동의가 필요한 약관은 일반적으로 잘 사용되지 않는 용어로 작성되며 양이 매우 방대하므로 사용자의 이해를 도울 수 있도록 요소들을 알기 쉽게 구조화해야 한다.

• 기본 패턴

  목록 탐색

  목록은 의미적으로 관련 있는 다수의 데이터를 연속적으로 배열한 색인이다. 사용자는 목록에서 특정한 항목을 찾고 항목과 관련된 기능을 수행한다. 사용자가 목록에서 원하는 정보를 효과적으로 탐색할 수 있도록 목록의 항목은 일관성 있는 형식과 배치를 유지하고 논리적 순서에 따라 배열되어야 한다.

• 기본 패턴

  사용자 피드백

  사용자 피드백은 사용자로부터 특정 페이지나 기능 이용 경험에 대한 평가 의견, 불편 사항, 제안 사항을 수집하는 데 사용되는 패턴이다. 서비스 이용 맥락에서 직접적으로 사용자의 의견을 수집할 수 있는 수단이므로 서비스 운영에 매우 중요한 요소이나, 사용자가 의견을 남기는 것이 의무 사항이 아니므로 사용자의 과업을 방해하지 않으면서 의견을 남기도록 유도하는 것이 중요하다.

• 기본 패턴

  상세 정보 확인

  상세 정보는 특정한 주제에 관한 정보를 제공하는 패턴으로, 효과적인 정보 전달을 위해 텍스트 이외에 다양한 시각적 요소들이 활용된다. 사용자들은 콘텐츠 목록에서 콘텐츠 제목이나 요약 정보를 포함한 링크를 통해 상세 정보에 접근하기 때문에, 사용자가 예상하는 정보를 명확하고 간결하게 전달할 수 있어야 한다.

• 기본 패턴

  오류

  오류는 사용자가 요청한 작업을 시스템이 완료하지 못하는 문제가 발생했을 때 제공된다. 발생 가능한 문제를 사전에 안내하는 경고와는 달리, 오류는 이미 발생한 문제에 관한 정보를 사용자에게 알려준다. 오류정보는 단순히 사용자에게 문제가 발생했음을 알려주는 데 그치지 않고 본래 수행하고자 했던 행동을 완수할 수 있게 유도해야 한다. 오류정보를 제공하기 위해 별도의 모달창을 사용하거나 오류가 발생한 지점에 직접 메시지를 전달할 수 있다.

• 기본 패턴

  입력폼

  입력폼은 사용자가 데이터를 입력하여 서버로 전송하는 데 사용하는 콘텐츠 섹션으로 하나 이상의 입력 컨트롤로 구성된다.

• 기본 패턴

  첨부파일

  첨부파일은 게시물, 본문 등에 제공되는 다운로드 가능한 콘텐츠를 의미한다.

• 기본 패턴

  필터링·정렬

  필터링·정렬은 데이터 집합에서 사용자가 원하는 속성과 범주에 속하는 데이터 항목을 선별적으로 표시하거나 특정 속성/범주를 기준으로 조직화하는 방법이다. 필터링·정렬을 이용하면 데이터 목록에서 탐색할 범위를 좁힐 수 있기 때문에 검색 결과 등 목록을 탐색하여 원하는 정보를 찾는 시간을 줄일 수 있다.

• 기본 패턴

  확인

  확인은 사용자가 요청한 행위가 쉽게 취소할 수 없는 결과로 이어지거나, 행동의 효과 또는 부작용을 사용자가 인지해야 하는 경우에 사용한다. 사용자가 작업 내용을 확인하거나 수행을 승인하도록 함으로써, 어떤 작업이 수행될 것인지에 관한 불확실성을 감소시키고 내용을 한 번 더 점검할 수 있어 오류를 예방할 수 있다.

• 서비스 패턴

  방문

  방문은 사용자가 디지털 서비스에 접속하여 원하는 상세 정보로 연결되는 과정으로 대개 정보 구조의 가장 상위 수준인 서비스의 메인 화면에서 시작된다. 사용자와 서비스가 만나게 되는 첫 지점이므로 서비스에 대한 첫인상을 결정하는 중요한 화면이다. 대부분의 사용자는 구체적인 맥락 없이 서비스를 방문하게 되므로 명확하고 간결하게 구성되어야 한다.

• 서비스 패턴

  검색

  검색은 사용자가 큰 데이터 집합에서 원하는 정보를 찾을 수 있도록 도와주는 기능이다. 사용자가 무엇을 찾고 싶은지 알고 있는 경우에는 일차적인 정보 탐색 수단으로 사용될 수 있으며, 탐색 수단을 통해 원하는 콘텐츠를 찾지 못하는 상황에는 특정 정보와 관련된 단서를 제공함으로써 사용자가 필요한 콘텐츠를 쉽게 찾을 수 있도록 해준다.

• 서비스 패턴

  로그인

  로그인은 사용자의 신원을 확인하는 과정으로 사용자가 서비스에 접근할 수 있도록 하는 수단이다. 사용자에게 개인화된 경험을 제공하거나 사용자의 신분/신원을 인증하고자 하는 경우에 사용하기 적합하다.

• 서비스 패턴

  신청

  신청은 사용자가 서비스 제공 기관에 요구 사항을 알리기 위해 서식을 작성하는 과업으로 관련 법률에 명시된 종류의 민원 외에 사용자가 특정한 내용을 요청하는 모든 행동을 포함한다.

• 서비스 패턴

  정책 정보 확인

  정책 정보 확인은 디지털 서비스에 개제된 정부/기관의 행동 방침, 계획, 법률에 관한 정보를 사용자가 확인하는 과업이다.