콘텐츠·미디어 표시
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
아바타 Avatar
사람·팀·에이전트의 프로필을 이미지나 이니셜로 표현.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
아바타 그룹 Avatar Group
여러 사용자 프로필을 겹치거나 나란히 표시.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
썸네일 Thumbnail
원본 미디어를 대표하는 작은 미리보기 이미지.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
이미지 갤러리 Image Gallery
여러 이미지를 하나의 탐색 묶음으로 표시.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
이미지 뷰어 Image Viewer
확대·이동·회전 등의 이미지 보기 기능.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
동영상 플레이어 Video Player
재생·일시정지·탐색 등을 제공하는 미디어 UI.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
오디오 플레이어 Audio Player
재생 위치·음량 등을 조절하는 오디오 UI.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
미디어 컨트롤 Media Controls
재생·탐색·소리 등을 제어하는 공통 조작 모음.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
자막 Caption / Subtitle
미디어의 음성·설명을 화면에 텍스트로 제공.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
대본·전사문 Transcript
오디오·영상 내용을 시간 순서의 텍스트로 제공.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
콘텐츠 미리보기 Content Preview
파일·문서·미디어를 열기 전 주요 내용을 보여줌.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
더 읽기·축약 Read More / Truncation
긴 콘텐츠를 일부만 노출하고 확장하도록 함.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
말줄임 Ellipsis
폭을 넘는 텍스트를 …으로 잘라 표시.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
리치 콘텐츠 카드 Rich Content Card
제목·이미지·설명·액션을 함께 담은 카드.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
미디어 오브젝트 Media Object
이미지 옆에 텍스트를 배치하는 반복 패턴.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
히어로 섹션 Hero Section
페이지 초반에서 핵심 가치·이미지·주요 행동을 강조하는 큰 영역.
랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.
시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.
타임라인 Timeline
시간 순서의 이벤트·이력을 선 또는 목록으로 표시.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
활동 피드 Activity Feed
사용자·시스템의 최신 활동을 연속 목록으로 표시.
콘텐츠·미디어 표시에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
Content & Media Display
Open an entry for its visual reference, comparisons and source-language text.
Avatar 아바타
An image or initials representing a person, team, or agent.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Avatar Group 아바타 그룹
Multiple profile representations displayed side by side or overlapping.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Thumbnail 썸네일
A small preview image representing the original media.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Image Gallery 이미지 갤러리
A collection of images presented as one browsable group.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Image Viewer 이미지 뷰어
An interface for viewing images with zoom, pan, or rotation controls.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Video Player 동영상 플레이어
A media interface offering playback, pause, and seeking controls.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Audio Player 오디오 플레이어
An audio interface for controlling playback position and volume.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Media Controls 미디어 컨트롤
A shared set of controls for playback, seeking, and audio.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Caption / Subtitle 자막
On-screen text presenting speech or descriptive information from media.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Transcript 대본·전사문
A chronological text representation of audio or video content.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Content Preview 콘텐츠 미리보기
A view of the essential content of a file, document, or media item before opening it.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Read More / Truncation 더 읽기·축약
A pattern showing part of long content with an option to expand it.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Ellipsis 말줄임
Truncating overflowing text with an ellipsis character.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Rich Content Card 리치 콘텐츠 카드
A card combining a title, image, description, and actions.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Media Object 미디어 오브젝트
A repeated layout pattern placing text next to an image.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Hero Section 히어로 섹션
A large introductory page area emphasizing the key value, imagery, and primary action.
Designing information and action flows for landing pages, stores, SaaS, and content sites.
Prioritize content length, accessibility, findability, and purpose over fashionable layouts.
Timeline 타임라인
Events or history displayed chronologically along a line or in a list.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Activity Feed 활동 피드
A continuous list of recent user or system activity.
Specifying content and media presentation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.