파랑은 계정, 분홍은 전환

button variant · shape · icon

공식 Button 속성축

text 라벨색과 아이콘 도상은 프리뷰가 고른 대체 표현이다.

textfield

입력 필드 — large

공식 state 9종 중 6종을 그렸고, positive 색은 error 규칙을 대칭 적용했다.

tab-line

밑줄 탭 — 상품 상세

top-tab-app

네이티브 앱 상단 탭

accordion

아코디언 — standard / compact

compact 행의 작은 글자는 프리뷰가 고른 표현이다.

product-card

상품 카드

아래 상품 카드의 상품명·판매가·원가·할인율·별점·리뷰수와 LIVE 방송 플래그, ‘내일도착’·‘무료배송’ 배송 배지는 전부 레이아웃 시연용 더미 데이터이며, 실제 판매·배송·편성 정보가 아닙니다.

tv·deal 변형의 형태는 이름에서 편 프리뷰의 렌더다.

안내 배지는 규정된 inverse 계열 대신 bg-tertiary로 그렸다.

card · banner

카드와 배너

아래 카드의 편성 문구(‘매일 저녁 편성 · 다시보기 제공’)와 배너의 쿠폰 장수·안내 문구는 레이아웃 시연용 더미 데이터이며, 실제 편성이나 혜택 정보가 아닙니다.

badge-notification · badge-informational · badge-ranking

배지 3종

아래 배지의 알림 개수·순위 숫자와 ‘품절 임박’·‘오늘 마감’·‘무이자 할부’ 안내 문구는 레이아웃 시연용 더미 데이터이며, 실제 알림·판매 순위·결제 조건이 아닙니다.

순위 배지는 규정된 inverse 계열 대신 반전 표면으로 그렸다.

tier-badge

멤버십 등급 배지

위 마크는 대체 글리프다.

dialog · snackbar

피드백 표면과 그림자

그림자를 얹을 표면과 스낵바의 어두운 컨테이너는 규정이 없어 프리뷰가 고른 배치다.

bottom-navigation-web

모바일 웹 홈

아래 화면의 상단 상태바 시각, 카테고리 이름, 방송 제목과 종료 예정 시각, ‘다시보기 제공’ 문구, LIVE 플래그, 상품명·판매가·할인율·별점·리뷰수, 순위 배지와 알림 개수는 전부 레이아웃 시연용 더미 데이터이며, 실제 편성·판매·알림 정보가 아닙니다.

9:41LTE

검색어를 입력하세요 3

라이브 패션 뷰티 리빙 식품 여행

지금 방송 중

편성표

LIVE

가을 니트 특집 · 오늘의 모바일 라이브

오후 9시 종료 예정 · 다시보기 제공

오늘의 딜

1

메리노 혼방 니트 집업

32%69,000원

★ 4.8 · 1,204

구스 다운 경량 패딩

21%159,000원

★ 4.7 · 862

위 하단 탭의 글리프는 원본 도상이 아니라 프리뷰가 그린 형태 스케치다.

livetalk-overlay

라이브톡 시청 화면

아래 화면의 상단 상태바 시각, 남은 시간(55:03)과 시청자수(85), 채팅 닉네임과 메시지는 전부 레이아웃 시연용 더미 데이터이며, 실제 방송이나 시청 지표가 아닙니다.

login-form

로그인 화면