메뉴 관련 UI
GNB(Global Navigation Bar)
: 웹사이트 내의 모든 페이지에 동일하게 적용되는 메인 메뉴
: 최상단에 위치하며, 주요 메뉴로 이동할 수 있는 링크 포함
LNB(Local Navigation Bar)
: 메인 메뉴를 누르거나 마우스를 올려놨을 때 나타나는 서브 메뉴
SNB (Side Navigation Bar)
: 메인 메뉴와 서브 메뉴를 제외한 나머지 메뉴
벤토메뉴(Bento)
: 그리드 목록으로 나열되는 메뉴를 의미함
케밥메뉴(Kebab)
: 그룹화 된 옵션 세트를 나타냄
미트볼메뉴(Meatballs)
: 더 많은 옵션을 보여주고자 할 때 사용됨
햄버거 메뉴 (Hamburger Menu)
: 세 개의 가로선이 쌓인 모양으로, 기능들을 펼쳐서 볼 수 있게 함
: 일반적으로 상단 모서리에 위치해 있으며, 하나의 네비게이션을 안에 담을 수 있어 흔하게 사용됨
도너메뉴(Döner)
: 햄버거 메뉴의 변형으로, 필터그룹을 나타냄
아코디언(Accordion)
: 리스트를 펼쳤다가 접을 수 있는 요소
: 세부 항목들을 제한된 공간에 담아야할 때, 효과적임
브레드크럼(Breadcrumb)
: 사용자가 사이트 내에서 구조상 어디에 있는지 알려주는 UI 요소
콘텐츠 표시 관련 UI 요소
팝업(Pop-up)
: 기존 화면 위에 나타나는 브라우저 페이지, 사용자의 이목을 집중시키고 중요한 정보를 전달할 때 사용
모달 (Modal)
: 기존 화면 위에 띄워지는 추가적인 레이어
: 새로운 웹페이지가 아닌 같은 브라우저 페이지 내에서 상위 레이어를 띄우는 방식
카드 (Card)
: 직사각형 카드 형태의 요소 안에 내용을 담는 것
: 카드형 UI를 사용하면 다양한 종류의 콘텐츠를 깔끔하고 정돈된 방식으로 보여줄 수 있음
캐러셀(Carousel)
: 하나의 섹션에서 여러 콘텐츠가 순환되며 노출되는 요소
: 주로 슬라이드 형태로, 이미지 혹은 영상이 일정한 간격으로 나열되어 보임
페이지네이션(Pagenation)
: 콘텐츠를 여러 페이지에 나누어 전후 페이지로 이동하거나 특정 페이지로 이동할 수 있는 요소
: 주로 하단에 위치하며, 스크롤이 길어질 경우 사용함
툴팁(Tooltip)
: 사용자에게 어떤 요소에 대해 간단한 부연 설명이나 가이드 제공할 때 사용
: 요소를 클릭하거나 그 위에 마우스 커서를 올리면 말풍선 형태로 보여짐
스플래시 (Splash)
: 모바일 앱 실행 시 가장 처음 나오는 화면, 보통 1초~3초 유지됨
: 서비스를 대표하는 내용으로 구성
코치마크 (Coach Mark)
: 앱을 처음 실행할때, 도움말 또는 사용 방향을 지시해주는 화면
: 앱을 처음 사용하는 사용자를 위해 간단한 사용법을 안내해주는 서비스로 보통 최초 실행 시에만 볼 수 있도록 설계
선택 관련 UI 요소
드롭다운 리스트 (Drop Down List)
: 버튼을 클릭했을 때 여러 선택지가 펼쳐지고 그중 하나의 옵션을 선택하는 요소
콤보 박스(Combo Box)
: 드롭 다운 + 입력 필드의 기능을 결합한 형태
: 사용자는 값을 직접 입력하거나 목록에서 선택함
라디오 버튼 (Radio Button)
: 선택지 중 하나의 옵션만 선택하도록 할 때 사용하는 요소
: 값이 없는 상태가 존재하면 안될 때 사용
체크박스(Check Box)
: 다중 선택 가능한 요소, 주로 네모칸에 체크표시가 있는 형태
토글(Toggle)
: 서로 반대되는 두 가지 상태 중 하나를 선택할 때 사용하는 요소
: 켜기/끄기, 활성/비활성, 라이트 모드/다크 모드와 같은 항목에 적용
슬라이더(Slider)
: 사용자가 제한된 범위 내에서 값을 선택할 수 있게 하는 요소
: 가로 방향의 막대를 기준으로 사용자가 값을 조절하는 형태
예) 볼륨, 밝기 조절
스피너 (Spinner)
: 숫자 입력 컨트롤로 편집 필드와 위아래 화살표 버튼으로 구성
: 숫자를 직접 입력하거나 화살표 버튼으로 조절하여 원하는 숫자를 입력
스텝퍼 (Stepper)
: 주로 수량 변경과 같은 상황에서 자주 사용 하며 아이콘을 활용하여 입력필드 안에 있는 값을 변경
: 단, 너무 큰 범위를 보여주고자 할 때는 되도록 사용을 지양
기타 UI 요소
입력 필드(Input Field)
: 사용자가 키보드를 사용해 직접 텍스트를 입력하고 편집하는 섹션
: 검색창, 로그인창 등에 사용되며 필수 내용을 입력하지 않거나 정해진 양식에 어긋나게 입력한 경우 '유효성 검사'를 통해 오류 상태를 표시함
CTA(Call to Action)
: 목표를 달성하기 위해 고객의 특정 반응이나 행동을 유도하는 것
: 페이지에서 회원가입, 로그인, 결제 등 고객의 반응을 이끌어 내기 위해 배치하는 버튼 혹은 링크를 뜻함
Placeholder
: 사용자가 값을 입력하기 전에 도움을 줄 수 있는 힌트를 Input 박스 안에 표시함
: 사용자가 값을 입력하면 문자는 사라짐
Datepiker + Spinner
: 사용자가 직접 손(PC의 경우 마우스 휠,드래그)으로 위아래를 돌려 원하는 값을 맞추는 방식으로 작동
Progress Indicator
: 앱이 콘텐츠를 로드하거나 작업을 수행하는 동안 사용자들에게 앱이 멈추지 않았음을 알려줌
: 작업이 완료될 때까지 얼마나 기다려야 하는지 시각적으로 확인 가능
Loading + Spinner
: 화면 중앙에서 무한으로 돌아가는 컴포넌트
: 콘텐츠가 로딩되는 동안 사용자에게 진행 상황을 알리기 위함
새로고침(Pull to Refresh)
: 당겨서 새로고침
플로팅 버튼 (Floating Action Button)
: 화면 맨 앞에 고정되어 떠 있는 버튼
: 비즈니스 목적에 따라 사용자에게 특정 기능으로 액션을 유도함
예) 웹사이트 메인페이지 - 챗봇 버튼
스켈레톤 (Skeleton)
: 실제 데이터가 렌더링 되기 전 윤곽을 먼저 그려주는 로딩 애니메이션
디바이더 (Dividers)
: 그룹화 된 각 항목을 분리하거나 아코디언에서 탭할 수 있는 영역을 정의하는데 사용하며, 구분선이라고 칭함
: 요소를 구분할 수 없을 때, 최소한으로 사용하도록 권장
