UI 용어 정리 (요소 별 명칭)

UI 요소 이름, 명칭 정리

웹 관련 업무를 하다보면 UI 요소 관련해서 명칭을 정확히 알아야 커뮤니케이션이 원활하다. 관련 UI 용어를 살펴보자.

  1. Input Controls
  2. Navigational Components
  3. Information Components
  4. Containers

Input Controls

ElementExamples
CheckboxesExample of checkboxes
Radio buttonsExample of radio buttons
Dropdown listsExample of a dropdown
List boxesExample of a list box
ButtonsExample of buttons
Dropdown ButtonExample of dropdown button
TogglesExample of toggles
Text fieldsExample of text field
Date and time pickersExamples of date and time pickers
정보 입력

Navigational Components

ElementExamples
CaratWhat are the little arrows called that hide additional details? - User  Experience Stack Exchange
화살표 모양의 클릭 가능한 아이콘 (펼칠 때 사용)
Search FieldExample of search boxes with various functions
BreadcrumbExample of breadcrumb
전체 체계에서 사용자의 현 위치를 알려줌
PaginationExamples of pagination
TagsExample of tags
SlidersExample of sliders
IconsExamples of icons
Image CarouselExample of an image carousel
네비게이션

Information Components

ElementExamples
NotificationsExample of a notification
Progress BarsExamples of progress bars
Tool TipsExamples of tool tips
Message BoxesExample of message boxes
Modal Window (pop-up)Example of a modal window
정보 전달

Containers

ElementExamples
AccordionExample of an accordion
항목 별 펼처보기, 숨기기 기능
컨테이너

Source : https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중