용어 정의
용어 정의
본 가이드에 사용된 용어는 다음과 같습니다. 용어는 ABC순으로 나열되어 있습니다.
| 용어 | 설명 |
|---|---|
| Accordion | Click하거나 Tap하면 펼쳐지거나 접히는 형태의 요소입니다. |
| Badge | 다른 요소의 옆이나 아이콘 위에 배치하여 사용자가 새로운 것이 있음을 알려주는 요소입니다. |
| Brand Identity | 기업에서 파생된 브랜드에 대한 아이덴티티를 의미하며, 통일된 이미지나 디자인, 알기 쉬운 메시지로 나타내어 사회와 공유함으로써 자사 브랜드의 존재 가치를 높이는 기업 전략의 하나입니다. |
| Bread-crumb | 사용자가 진입한 화면과 관련된 상위 Navigation을 단계 순서대로 표현하여 정보구조 상의 위치 및 이동경로를 제공하는 요소입니다. |
| Browser | Web Server에서 쌍방향 통신하는 HTML 문서나 파일과 연동하고 출력하는 응용 소프트웨어입니다. |
| Browser Tab | 많은 콘텐츠의 내용을 한 화면에서 항목별로 구분하여 표현할 때 사용하는 요소입니다. |
| Button | 주요 기능을 수행하는 요소입니다. (쓰기, 완료 등) |
| Button: Floating | 화면에 떠있는 버튼으로 화면의 핵심이 되는 태스크(Task)를 수행할 수 있도록 제공하는 요소입니다. |
| Calendar | 일, 월, 년을 탐색하여 특정 날짜나 기간을 선택할 수 있도록 제공하는 요소입니다. |
| Cards | 이미지와 텍스트, 일부 기능 버튼을 포함한 사각 형태의 컨테이너로 콘텐츠를 표현하는 요소입니다. |
| Carousel | 하나의 확대된 이미지를 열람하고, 현재 이미지의 앞/뒤 이미지들을 미리 보기 할 수 있는 갤러리 형태의 화면 구성 유형입니다. |
| Checkbox | 여러 개의 항목을 동시에 선택(다중 선택) 할 수 있는 요소입니다. |
| Clue | Badge 또는 확인한 Contents 와 미확인 Contents의 차별화 표현과 같이 사용자가 다음 정보에 대하여 미리 인지할 수 있는 표시입니다. |
| Control | HTML 표준에 기반해 기본 제공되는 HTML 기능 요소입니다. |
| Contents Area | Website의 각 Page 중앙 부분에서 Website의 정보와 다양한 내용 등을 제공하는 영역입니다. |
| Content switcher | 화면의 동일한 공간에 둘 이상의 콘텐츠 섹션을 전환하는데 사용되는 요소입니다. |
| Copyright | Internet 등 컴퓨터 통신망을 이용하여 송신되는 저작물의 저작권을 보호하고 규정하는 조약입니다. |
| Data Table | 데이터 테이블은 다양한 데이터를 나열하여 표시하며, 사용자 개인에 맞게 한 화면에서 여러 테이블을 열람해 사용합니다. |
| Dashboard | 한 화면에서 다양한 정보를 중앙 집중적으로 관리하고 찾을 수 있도록 하는 화면의 형태입니다. |
| Depth | 메뉴의 단계별 레벨에 따른 계층적 구조를 나타냅니다. |
| Device | 컴퓨터에 어떠한 입력을 제공하거나, 컴퓨터로부터 출력을 제공받거나 또는 둘 다를 수행할 수 있는 하드웨어입니다. |
| Dimmed | 화면을 흐릿하게 하거나 어둡게 처리하여 비활성화시키는 것입니다. |
| Dividers | 그룹화된 각 항목을 구분하는 가는 선입니다. |
| Drag & Drop | 화면의 개체를 선택한 후 마우스 클릭(터치 Device인 경우 손가락으로 선택한 상태) 상태를 유지한 채로 원하는 위치로 개체를 이동하는 동작입니다. |
| Drop-down | 허용된 선택 옵션 만 제공하여 사용자가 데이터를 잘못 입력하는 것을 방지해 주는 요소입니다. |
| Empty states | 사용자에게 표시할 데이터가 없는 경우에 제공합니다. |
| Family Site | PC, Mobile Web에서 제공하는 서비스 화면과 직접/간접적인 연관이 있는 사이트들을 묶어서 한 영역에 제공하는 것입니다. |
| File uploader | 데이터 테이블은 다양한 데이터를 나열하여 표시하며, 사용자 개인에 맞게 한 화면에서 여러 테이블을 열람해 사용합니다. |
| Filter | 검색이나 조회 시 찾고자 하는 정보를 빠르게 찾을 수 있도록 제공하는 조건입니다. |
| Folding | 화면을 숨기거나 나타내는 기능입니다. |
| Footer | Website 등에서 각 Page 제일 아랫부분에서 Website의 소유자, 제작자, 연혁, 이용약관, 저작권 관련 정보 등을 포함하는 영역입니다. |
| Forms | 데이터를 제공하거나 옵션을 구성할 수 있는 입력 컴포넌트들을 그룹화하여 제공합니다. |
| Handler | 콘텐츠를 감싸고 있는 컨테이너의 크기를 조절할 수 있는 경우 사용되는 구성 요소입니다. |
| Header | 화면 상단에서 Logo, Utility, Navigation 요소 등의 링크를 제공하는 영역입니다. |
| Icon | 각종 프로그램, 명령어, 또는 데이터 파일들을 쉽게 지정할 수 있도록 하기 위해 각각에 해당되는 조그만 그림 또는 기호를 만들어 화면에 표시한 것을 의미합니다. |
| IA | Information Architecture의 줄임말, 시스템을 효과적으로 이용하기 위한 정보구조 설계를 의미합니다. |
| Inputbox | 한 줄의 텍스트를 입력하고 편집할 수 있는 요소입니다. |
| Interaction | 서비스 화면 내의 Contents나 오브젝트들 간의 상호작용을 의미합니다. |
| Layer | 별도의 Browser 창이나 탭을 생성하지 않고 화면을 Dimmed 시키며 나타나는 형태를 의미합니다. |
| Layout | 화면 안에서 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 것입니다. |
| legend | 범례는 사용자가 내용을 인지하기 쉽도록 본보기로 표시하는데 사용하는 요소입니다. |
| Link | 링크는 웹사이트 또는 문서들 사이를 서로 이어 주는 요소입니다. |
| List: Table | 한 화면에서 많은 항목의 정보를 동일한 형태로 나열하여 제공합니다. |
| List : Gallery | 이미지를 한 장씩 순서대로 볼 때 사용하는 형태로 화면 전환 없이 여러 이미지를 자세히 볼 필요가 있을 때 사용합니다. |
| Loading | 데이터를 검색하거나 불러오는 등 사용자의 요청사항이 처리 중임을 알려주는 요소입니다. |
| Loading Indicator | 정보를 표출하기 위한 시스템 대기 시간을 시각적으로 표현하는 구성 요소입니다. |
| Login | 사용자가 컴퓨터 시스템을 사용하기 위해 시스템에 자신을 알리고 등록하는 작업을 의미합니다. |
| Logo | 기업이나 시스템을 대표하는 심볼마크(기호 형태) 또는 Logo(문자 형태)를 의미합니다. |
| Media | 비디오, 오디오 형태의 파일을 재생할 수 있는 컨트롤입니다. |
| Mega Menu | GNB에 위치한 메뉴에 Mouseover시 나타나는 Sub Menu를 포함한 형태의 대형 Menu를 의미합니다. |
| Mouse over | 마우스 이벤트 중 하나로 Control이나 Menu에 마우스가 올라갔을 때를 의미합니다. |
| Menu | 시스템의 세부 영역으로 이동할 수 있도록 경로를 제공하는 역할을 합니다. |
| Navigation | 시스템의 정보를 분류하고 체계화시킨 후 이를 연결시켜 시스템을 이용할 수 있도록 제공하는 경로입니다. |
| Notification | 알림을 사용하여 사용자에게 시스템 상태의 업데이트 또는 변경 사항을 알려주는 구성 요소입니다. |
| Number | 숫자를 입력할 때 사용하는 요소입니다. |
| Overflow | 오버플로우 메뉴는 사용자가 추가 옵션을 사용할 수 있고 공간 제약이 있을 때 사용됩니다. |
| Pagination | 페이지네이션은 콘텐츠를 여러 페이지로 나누어 다음 또는 이전 페이지로 이동하거나 특정 페이지로 이동할 수 있는 요소입니다. |
| Popup | 팝업은 내용을 표시하기 위해 갑자기 생성되는 요소입니다. |
| Quick Menu | 퀵 메뉴는 사용빈도가 매우 높은 기능을 배치하여 주요 업무를 빠르게 접근할 수 있도록 링크를 제공하는 요소입니다. |
| Radio button | 여러 항목 중 하나의 항목을 선택할 때 사용됩니다. |
| Search | 검색은 키워드를 사용하여 사용자에게 탐색한 결과를 제공하는 요소입니다. |
| Select | 셀렉트는 여러 항목 중 하나의 항목을 선택할 수 있도록 제공하는 요소입니다. |
| Sheets: Bottom | 보텀 시트는 화면의 하단에 배치되고, 스크롤 시 위치를 유지하며 보충 내용을 제공하는 요소입니다. |
| Sheets: Side | 사이드 시트는 화면의 왼쪽 또는 오른쪽 가장자리에 배치되고, 스크롤 시 위치를 유지하며 보충 내용을 제공하는 요소입니다. |
| Sign up | 사용자가 처음 서비스를 사용하는 경우 회원가입을 할 수 있도록 제공합니다. |
| Skeleton | 스켈레톤은 빈 페이지에 프레임을 제공하여 사용자에게 ‘대기 중’이라는 느낌을 전달합니다. |
| Slider | 슬라이더는 조절 가능한 콘텐츠를 시각적으로 표현하는 요소입니다. |
| Stepper | 스테퍼는 아이콘 선택으로 입력값을 조절하는 요소입니다. |
| Step | 스텝은 지정된 프로세스의 완료를 안내하며, 사용자에게 단계별 진행 상황을 시각적으로 표현합니다. |
| Tab | 많은 콘텐츠의 내용을 한 화면에서 항목 별로 구분하여 보여주거나, 해당 화면의 하위 메뉴가 있는 경우 사용하는 요소입니다. |
| Table | 정보를 효과적으로 나타내기 위한 표 형태의 화면을 의미합니다. |
| Tag | 태그는 키워드를 통해 항목을 분류하여 사용할 수 있는 요소입니다. |
| Text area | 텍스트를 여러 줄로 입력할 때 사용하는 요소입니다. |
| Thumbnail | 그래픽 파일의 이미지를 소형화한 것으로 작은 크기의 견본 이미지를 의미합니다. |
| Title | Contents를 대표하는 제목과 같은 정보를 간략하게 표현하는 것입니다. |
| Toggle | 토글은 두 가지의 상태를 전환하는 데 사용되는 요소입니다. |
| Tooltip | 툴팁은 클릭 또는 마우스를 특정 구성 요소에 가져갔을 때(hover) 상황에 맞는 도움말이나 정보를 표시합니다. |
| Tree | 정보나 메뉴를 레벨에 따라 순차적으로 표현하기 위해 사용하는 구성 요소입니다. |
| UI | User Interface의 줄임말, 사람과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등의 사이에서 의사소통 및 접근을 할 수 있도록 만들어진 물리적, 가상적 매개체를 의미합니다. |
| Utility | 사용자가 시스템을 이용할 때 쉽고 편리하게 이용할 수 있는 기능이나 Menu (Login, 설정 등)를 의미합니다. |
| Utility Area | 시스템과 관련된 부가 기능을 적용하는 영역을 의미합니다. |
| UX | User eXperience의 줄임말, 사용자의 경험을 뜻하며 서비스를 사용하면서 느끼는 사용자의 총체적 경험을 뜻합니다. |
| Web Accessibility | 신체적·기술적 여건과 관계 없이 PC, Mobile 화면을 통하여 원하는 서비스를 이용할 수 있도록 접근성을 보장하는 웹 접근성을 의미합니다. |