
Badges
새로운 콘텐츠 알림에 대한 정보를 제공할 때 사용합니다.

Block
두 개 이상의 내용을 특정 테마로 묶어 제공하는 편성 단위입니다.

Buttons
주요 화면을 컨트롤하거나 액션을 가능하게 할 때 사용합니다.

Controls
사용자가 정보의 선택이나 상태를 직접 컨트롤할 때 사용합니다.

GNB
가장 기본적인 정보 구조이며, 사용자의 동선을 안내하는 중요한 구성요소입니다.

Inputs
사용자가 문자, 숫자, 기호 등을 입력하고 확인할 때 사용합니다.

IME
텍스트 입력이 필요한 경우 제공되는 키보드입니다.

Loading
작업에 대한 대기가 필요할 때 사용하며, 요청이 처리되고 있다는 시각적 신호를 제공합니다.

Pagination
동선 내 사용자의 위치를 안내하기 위해 사용합니다.

Player
VOD 내 사용자의 위치를 안내하고 컨트롤할 때 사용합니다.

Pop up
중요한 정보를 제공하거나 사용자의 결정을 위하여 콘텐츠 앞에 생성되는 컴포넌트입니다

Splash
앱을 실행할 때 데이터가 로드되는 동안 브랜드를 표현하며, 사용자 경험에 즐거움을 더합니다.

Tabs
페이지 내 유사한 정보를 그룹화하여 섹션 간의 이동과 정리를 위해 사용합니다.

Tooltip
구조나 기능에 대해 도움을 줄 때 주로 사용되며, 정보의 정확한 조작을 유도할 때도 사용합니다.