내비게이션·화면 이동
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
상단 앱 바 Top App Bar
제목·뒤로가기·주요 명령이 놓이는 상단 영역.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
내비게이션 바 Navigation Bar
앱이나 사이트의 주요 이동 경로를 제공하는 영역.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
하단 내비게이션 Bottom Navigation
모바일 화면 아래에 주요 목적지들을 표시.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
탭 바 Tab Bar
관련 목적지나 뷰를 탭으로 전환하는 UI.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
탭 Tabs
동일 맥락의 콘텐츠 패널들을 전환.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
내비게이션 레일 Navigation Rail
중간 폭 화면에 적합한 좁은 세로 이동 영역.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
내비게이션 드로어 Navigation Drawer
접히거나 펼쳐지는 측면 탐색 메뉴.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
사이드바 Sidebar
화면 옆에 유지되는 탐색·도구·정보 영역.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
브레드크럼 Breadcrumb
상위 페이지에서 현재 위치까지의 경로를 표시.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
페이지네이션 Pagination
여러 페이지의 목록을 번호로 나눠 탐색.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
무한 스크롤 Infinite Scroll
스크롤할수록 다음 콘텐츠를 자동 추가.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
더 보기 Load More
명시적 버튼을 누를 때 콘텐츠를 추가.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
앵커 내비게이션 Anchor Navigation
같은 페이지의 특정 제목이나 섹션으로 이동하는 탐색 방식.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
목차 Table of Contents (TOC)
긴 문서의 섹션 구조와 바로가기 제공.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
메가 메뉴 Mega Menu
여러 계층의 목적지를 넓은 패널에 정리.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
햄버거 메뉴 Hamburger Menu
세 줄 아이콘으로 주요 메뉴를 숨겨 제공.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
오버플로 메뉴 Overflow Menu
공간 부족으로 노출하지 않은 동작을 담은 메뉴.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
트리 뷰 Tree View
폴더·조직도 같은 계층 구조를 확장·축소.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
아코디언 내비게이션 Accordion Navigation
탐색 카테고리를 접고 펼치는 메뉴.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
페이지 헤더 Page Header
화면 제목과 주요 설명·액션을 담는 상단 영역.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
뒤로 이동 Back Navigation
이전 탐색 맥락이나 화면으로 돌아가는 동작.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
딥 링크 Deep Link
앱의 특정 화면·상태를 바로 여는 주소.
내비게이션·화면 이동에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
Navigation & Screen Changes
Open an entry for its visual reference, comparisons and source-language text.
Top App Bar 상단 앱 바
The top area containing a title, back navigation, and important commands.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Navigation Bar 내비게이션 바
An area providing the principal destinations of an app or website.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Bottom Navigation 하단 내비게이션
Primary navigation destinations displayed at the bottom of a mobile screen.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Tab Bar 탭 바
An interface for switching among related destinations or views using tabs.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Tabs 탭
A control for switching between content panels in the same context.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Navigation Rail 내비게이션 레일
A narrow vertical navigation area suited to medium-width screens.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Navigation Drawer 내비게이션 드로어
A collapsible or expandable side navigation menu.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Sidebar 사이드바
A persistent side area containing navigation, tools, or information.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Breadcrumb 브레드크럼
A path showing the hierarchy from a parent page to the current location.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Pagination 페이지네이션
Navigation that divides a list into numbered pages.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Infinite Scroll 무한 스크롤
A pattern that automatically appends more content as the user scrolls.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Load More 더 보기
A pattern that adds content only when the user activates an explicit button.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Anchor Navigation 앵커 내비게이션
Navigation to a specific heading or section on the same page.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Table of Contents (TOC) 목차
A list of a long document's sections with direct navigation links.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Mega Menu 메가 메뉴
A wide navigation panel organizing destinations across multiple levels.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Hamburger Menu 햄버거 메뉴
A primary menu concealed behind a three-line icon.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Overflow Menu 오버플로 메뉴
A menu containing actions omitted from the main interface because of limited space.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Tree View 트리 뷰
An expandable and collapsible hierarchy, such as folders or an organization chart.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Accordion Navigation 아코디언 내비게이션
A navigation menu with collapsible categories.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Page Header 페이지 헤더
An upper area containing the screen title, explanatory text, and primary actions.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Back Navigation 뒤로 이동
An action returning to the previous screen or navigation context.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Deep Link 딥 링크
An address that opens a specific application screen or state directly.
Specifying navigation and screen changes.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.