LINE Design System · LDSG

라인 디자인 시스템 Global Family Service

Messenger LINE Pay LINE Music LINE Manga LINE Shopping

절제된 친근함.

컴포넌트 — Action Button

Contained · Outlined · Ghost · Full-Bleed

Contained

Outlined

Ghost

Sizes

Full-Bleed · iPhone X+

컴포넌트 — Inputs & Indicators

Chip · Switch · Stepper · Badge · Icon Button · FAB · Radio

Chip · Pill 라운드

2개 이상 선택지 전용

전체 카페 맛집 쇼핑 휴무

Medium 선택 Medium 일반

Switch · 즉시 반영

On / Off / Error

알림 받기

중요 메시지만

읽음 표시

상대에게 표시

자동 다운로드

Wi-Fi 환경에서만

Stepper · 수량 입력

최솟값 도달 시 자동 Disabled

M · 46px (기본)

S · 32px

Badge · 상태 / 카운트

Dot · Number · 2-digit+

99+

Icon Button · 3타입

Contained · Outlined · Slot

S 32px · L 52px

Floating Action Button

Circle · Pill 2형

Radio Button · 상호 배타

한 번 선택 후 미선택 불가

기본 알림음 시스템 기본값 진동만 소리 없이 진동 무음 알림 없음

Checkbox · 다중 선택

Selected · Unselected · Indeterminate

전체 약관 동의

이용약관 (필수)

마케팅 수신 (선택)

오류 상태

필수 항목입니다

Slider · 연속 값

Single · Double · Value Label

Single · value label

Double · range

0100

Side icons · disabled

컴포넌트 — Text Input & Pulldown

Contained · Outlined · Underlined · Error

Text Input · 3 컨테이너 타입

본문 system-native 16px / 1.4

이름 *

김라인

Contained · gray-150 배경

이메일

예: line@example.com

Outlined · gray-300 보더0/40

전화번호

010-1234-5678

Underlined · On Typing (erase)

인증 코드 *

코드는 6자리입니다.2/6

Pulldown (Select) + Pulldown Menu

Chevron-Down · 앵커 오버레이 리스트

카테고리

카페

지역

선택하세요

Pulldown Menu · min-width 112px · ≤6 항목

계정

김프로필 보기›

설정

관리자 (비활성)

컴포넌트 — Overlays

Popup · Bottom Sheet · Toast

Popup · Text Pattern

너비 288px · radius-400

Bottom Sheet · List Pattern

Modal dimmer · Handlebar

채팅으로 보내기

링크 저장

다른 앱으로

Toast Overlay · 약 4초 자동 소멸

Icon · Text · black-80 컨테이너

저장되었습니다

불러오는 중…

네트워크를 확인하세요

컴포넌트 — Navigation

Tab · Side Drawer · Bottom Navigation · Page Indicator

Tab · Flexible & Fixed

underline 2px · 하나만 Selected

Flexible · 초과 시 가로 스크롤

전체 받은 메시지 보낸 메시지 보관함 스팸

Fixed · 2–4개 · 100% width

채팅 통화 친구

Side Drawer · 좌측 슬라이드

너비 280px · Icon+Text 항목

홈

채팅

친구

설정

Bottom Navigation · 5-up

selected = solid · enabled = outline · badge

홈

검색

채팅

친구

설정

Page Indicator · Dot & Number

active gray-800 · inactive gray-300

3/ 8

컴포넌트 — Skeleton & Footer

Shimmer 로딩 · 애플리케이션 Footer

Skeleton · Shimmer

좌상→우하 흐름 · gray-150 (변경 불가)

Footer · 애플리케이션 (모바일)

Social · Items · Copyright

이용약관개인정보처리방침보안고객센터

화면 목업 — 1:1 채팅

9:41

●●●●

박

박서연

온라인

안녕하세요! 내일 미팅 시간 다시 확인 부탁드려요

네 오후 3시 맞습니다. 신주쿠 카페에서 뵙겠습니다

오후 2:14

감사해요! 그럼 내일 뵐게요

좋은 하루 보내세요!

메시지 입력

LDSG · LY Corporation

어디서든 라인다운 화면.
그것이 패밀리 서비스의 약속.

일본 1위 대만 보급률 높음

22 컴포넌트

EN·JP·TC·TH 언어 팩