레이아웃·콘텐츠 구조
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
카드 Card
하나의 주제·항목·행동을 묶어 표시하는 컨테이너.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
타일 Tile
그리드 안에서 콘텐츠·지표를 담는 독립 영역.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
패널 Panel
관련 정보나 컨트롤을 묶는 영역.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
섹션 Section
하나의 주제 아래 정보와 UI를 조직한 구획.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
컨테이너 Container
콘텐츠 너비와 배치를 제한하는 구조 단위.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
그리드 레이아웃 Grid Layout
행·열을 기준으로 요소를 정렬하는 방식.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
열 레이아웃 Column Layout
콘텐츠를 세로 열 단위로 배치.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
메이슨리 레이아웃 Masonry Layout
높이가 서로 다른 항목을 벽돌처럼 촘촘히 배치.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
스택 레이아웃 Stack Layout
요소를 수직이나 수평으로 일정 간격 쌓아 배치.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
분할 보기 Split View
화면을 둘 이상 영역으로 나눠 동시에 표시.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
마스터·상세 보기 Master-detail View
목록과 선택 항목의 상세 정보를 함께 표시.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
크기 조절 패널 Resizable Panel
경계선을 움직여 패널 너비·높이를 조정.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
구분선 Divider / Separator
콘텐츠·컨트롤 그룹을 시각적으로 분리.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
간격 요소 Spacer
컴포넌트 사이의 빈 공간을 유지.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
아코디언 Accordion
제목을 선택해 관련 내용을 접거나 펼침.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
디스클로저 Disclosure
추가 정보·하위 내용을 필요할 때 확장.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
캐러셀 Carousel
여러 항목을 좌우 또는 자동 전환하여 표시.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
가로 스크롤 목록 Horizontal Scroller
가로 방향으로 여러 카드·미디어를 탐색.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
고정 헤더 Sticky Header
스크롤해도 화면 상단에 남는 헤더.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
고정 섹션 Sticky Section
특정 위치에서 스크롤 중 영역이 고정되는 패턴.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
푸터 Footer
페이지 맨 아래의 보조 탐색·정책·정보 영역.
레이아웃·콘텐츠 구조에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
Layout & Content Structure
Open an entry for its visual reference, comparisons and source-language text.
Card 카드
A container grouping content and actions around a single subject or item.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Tile 타일
A self-contained grid area displaying content or a metric.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Panel 패널
An area grouping related information or controls.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Section 섹션
A subdivision organizing information and interface elements under one topic.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Container 컨테이너
A structural unit that constrains content width and layout.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Grid Layout 그리드 레이아웃
A layout that aligns elements using rows and columns.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Column Layout 열 레이아웃
A layout that arranges content in vertical columns.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Masonry Layout 메이슨리 레이아웃
A tightly packed, brick-like layout for items of different heights.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Stack Layout 스택 레이아웃
A layout that stacks elements vertically or horizontally with consistent spacing.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Split View 분할 보기
A view dividing the screen into two or more simultaneously visible areas.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Master-detail View 마스터·상세 보기
A view displaying a list alongside details of the selected item.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Resizable Panel 크기 조절 패널
A panel whose width or height can be changed by moving its boundary.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Divider / Separator 구분선
A visual boundary separating content or groups of controls.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Spacer 간격 요소
An element maintaining empty space between components.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Accordion 아코디언
A component that expands or collapses content when its heading is activated.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Disclosure 디스클로저
A control revealing additional information or nested content when needed.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Carousel 캐러셀
A display that cycles through items horizontally or automatically.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Horizontal Scroller 가로 스크롤 목록
An interface for browsing cards or media along a horizontal axis.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Sticky Header 고정 헤더
A header that remains at the top of the screen during scrolling.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Sticky Section 고정 섹션
A pattern in which a section becomes fixed at a particular scroll position.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Footer 푸터
The bottom area containing supplementary navigation, policies, or information.
Specifying layout and content structure.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.