# LINE Design System (LDS)

> LINE 메신저 및 패밀리 서비스를 위한 디자인 시스템으로, 10억+ 사용자 규모의 글로벌 메시징 플랫폼에 최적화된 일관된 UX를 제공합니다. LINE Green 시그니처 컬러, 다국어 타이포그래피, 멀티 플랫폼 컴포넌트를 갖추고 있습니다.

- 층: 레퍼런스 (디자인 언어)
- ID: line-lds
- 연도: 2020
- 제작자: LINE Corporation (LY Corporation)
- 무드 태그: 친근·발랄, 신뢰감
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/line-lds

## 정의

LINE 메신저 및 패밀리 서비스를 위한 디자인 시스템으로, 10억+ 사용자 규모의 글로벌 메시징 플랫폼에 최적화된 일관된 UX를 제공합니다. LINE Green 시그니처 컬러, 다국어 타이포그래피, 멀티 플랫폼 컴포넌트를 갖추고 있습니다.

## 역사·배경

2011년 출시된 LINE 메신저가 일본·대만·태국 등 아시아 시장을 중심으로 성장하며 2020년 공식 LINE Design System을 체계화했습니다. 2023년 Z Holdings와 합병하여 LY Corporation으로 재편되며 Yahoo! JAPAN과의 디자인 통합도 진행 중입니다.

## 주요 특징

- LINE Green(#06C755) 시그니처 컬러 시스템
- 한·영·일·태국어 등 다국어 타이포그래피
- 메시징 UX 특화 컴포넌트 (채팅, 스티커, 리치메뉴)
- LINE MINI App 확장 프레임워크
- iOS·Android·Web 크로스 플랫폼

## 핵심 원칙

- Closing the Distance — 사람과 사람, 정보, 서비스 사이의 거리를 줄이는 디자인
- Clarity — 10억 사용자가 즉시 이해할 수 있는 직관적 UI
- Delight — 스티커와 이모지로 감정을 풍부하게 표현

## 컬러 시스템

LINE Green(#06C755)을 중심으로 한 시맨틱 컬러 토큰 시스템으로, 메시징 UI에 최적화된 밝고 친근한 팔레트

### 색상 역할

- primary: LINE Green (#06C755) — 브랜드 및 핵심 CTA
- background: White(#FFFFFF) / Light Gray(#F7F8FA) 배경
- text: #111111(본문), #666666(보조), #AAAAAA(비활성)
- semantic: Success(Green), Warning(#FFB800), Error(#FF334B), Info(#4A90D9)
- chat: 발신(Green Bubble), 수신(Gray Bubble) 채팅 전용 색상

### 색상 제약

- LINE Green은 배경에 사용 금지 — CTA와 강조 요소에만 사용
- 채팅 버블 색상은 발신/수신 구분을 위해 고정
- 다크 모드에서 Green의 채도를 낮추어 눈의 피로 방지
- 텍스트 위에 Green 사용 시 White 텍스트만 허용

### 다크모드 전략

배경을 #1A1A1A로 전환하고, LINE Green은 밝기를 약간 올려 어두운 배경에서도 식별 가능하게 조정

### 대비 요구사항

WCAG 2.1 AA — LINE Green(#06C755)은 White 텍스트와 4.5:1 이상 대비 확보, 다크 모드에서도 동일 기준 적용

## 타이포그래피

- 폰트 성격: LINE Seed Sans — LINE 자체 개발 다국어 산세리프 (한·영·일·태국어 지원)
- 권장 폰트 수: 최대 1개
- 타입 스케일: 1.2 (Minor Third)

### 타이포그래피 제약

- 메시징 UI 특성상 본문 14~16px 중심의 컴팩트한 스케일
- 채팅 버블 내 텍스트는 15px 고정 — 가독성과 밀도 균형
- 일본어/태국어 문자 높이 차이를 고려한 라인 하이트 보정

## 설계 제약

### 하면 안 되는 것

- LINE Green을 배경색으로 광범위하게 사용 금지 — 눈의 피로 유발
- 채팅 버블 디자인 패턴을 임의로 변경 금지
- 스티커/이모지 영역의 그리드를 벗어나는 레이아웃 금지
- 다국어 텍스트 잘림을 유발하는 고정 너비 컨테이너 금지

### 반드시 포함할 것

- LINE Green을 핵심 CTA에 일관되게 사용
- 채팅 UI의 발신/수신 버블 구분
- 최소 44px 터치 타겟 (모바일)
- 다국어 텍스트 오버플로 대응
- 스티커/이모지를 위한 전용 그리드 시스템

### 모션 가이드

ease-out 200ms 기본 — 메시지 전송/수신의 즉각적 피드백, 스티커 애니메이션은 300~500ms로 생동감 부여

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: 0 (여백 −2 ↔ +2 빽빽)
- 온도감: +1 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: +1 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 메시징 / 커뮤니케이션 앱
- LINE MINI App (슈퍼앱 미니 서비스)
- 핀테크 (LINE Pay, LINE Bank)
- 커머스 (LINE Shopping)
- 엔터테인먼트 (LINE Manga, LINE Music)

## 추천 프로젝트 유형

- 메시징 및 커뮤니케이션 중심 서비스
- 아시아 다국어 지원이 필요한 글로벌 앱
- LINE 생태계 내 MINI App 개발
- 대규모 사용자 기반의 슈퍼앱 플랫폼

## 장단점

### 장점

- 10억+ 사용자 규모에서 검증된 글로벌 디자인 시스템
- 한·일·태·인도네시아 등 아시아 다국어 환경에 최적화
- LINE MINI App SDK로 서드파티 개발자도 일관된 UX 구현 가능
- 메시징 특화 컴포넌트로 채팅 UI 빠른 구축
- LINE Green이 주는 높은 브랜드 인지도

### 단점·한계

- 내부 전용 시스템으로 외부 접근이 제한적
- LINE 생태계 밖에서 Green 중심 컬러가 어색할 수 있음
- 일본 / 아시아 중심으로 서구권 UX 패턴과 다소 차이

## 실제 사용 제품·서비스

- LINE 메신저
- LINE Pay
- LINE MINI App
- LINE Shopping
- LINE Manga / LINE Music

## 접근성

글로벌 메시징 앱으로서 저시력 사용자를 위한 고대비 모드, 스크린 리더 지원, 큰 텍스트 모드를 제공하며, 다국어 환경에서의 텍스트 가독성과 RTL(Right-to-Left) 레이아웃도 지원합니다.

## 자주 묻는 질문

### Q1. LINE Design System (LDS)이란 무엇인가요?

LINE 메신저 및 패밀리 서비스를 위한 디자인 시스템으로, 10억+ 사용자 규모의 글로벌 메시징 플랫폼에 최적화된 일관된 UX를 제공합니다. LINE Green 시그니처 컬러, 다국어 타이포그래피, 멀티 플랫폼 컴포넌트를 갖추고 있습니다. 2011년 출시된 LINE 메신저가 일본·대만·태국 등 아시아 시장을 중심으로 성장하며 2020년 공식 LINE Design System을 체계화했습니다. 2023년 Z Holdings와 합병하여 LY Corporation으로 재편되며 Yahoo! JAPAN과의 디자인 통합도 진행 중입니다.

### Q2. LINE Design System (LDS)의 핵심 디자인 원칙은 무엇인가요?

LINE Design System (LDS)의 핵심 원칙은 Closing the Distance — 사람과 사람, 정보, 서비스 사이의 거리를 줄이는 디자인, Clarity — 10억 사용자가 즉시 이해할 수 있는 직관적 UI, Delight — 스티커와 이모지로 감정을 풍부하게 표현입니다.

### Q3. LINE Design System (LDS)은 어떤 프로젝트에 적합한가요?

LINE Design System (LDS)은 메시징 / 커뮤니케이션 앱, LINE MINI App (슈퍼앱 미니 서비스), 핀테크 (LINE Pay, LINE Bank), 커머스 (LINE Shopping), 엔터테인먼트 (LINE Manga, LINE Music), 메시징 및 커뮤니케이션 중심 서비스, 아시아 다국어 지원이 필요한 글로벌 앱, LINE 생태계 내 MINI App 개발, 대규모 사용자 기반의 슈퍼앱 플랫폼 등의 프로젝트에 적합합니다.

### Q4. LINE Design System (LDS)의 장단점은 무엇인가요?

장점으로는 10억+ 사용자 규모에서 검증된 글로벌 디자인 시스템, 한·일·태·인도네시아 등 아시아 다국어 환경에 최적화, LINE MINI App SDK로 서드파티 개발자도 일관된 UX 구현 가능, 메시징 특화 컴포넌트로 채팅 UI 빠른 구축, LINE Green이 주는 높은 브랜드 인지도이 있습니다. 단점으로는 내부 전용 시스템으로 외부 접근이 제한적, LINE 생태계 밖에서 Green 중심 컬러가 어색할 수 있음, 일본 / 아시아 중심으로 서구권 UX 패턴과 다소 차이이 있습니다.

### Q5. LINE Design System (LDS)에서 색상은 어떻게 사용하나요?

LINE Green(#06C755)을 중심으로 한 시맨틱 컬러 토큰 시스템으로, 메시징 UI에 최적화된 밝고 친근한 팔레트 색상 역할은 primary: LINE Green (#06C755) — 브랜드 및 핵심 CTA, background: White(#FFFFFF) / Light Gray(#F7F8FA) 배경, text: #111111(본문), #666666(보조), #AAAAAA(비활성)입니다. 주의사항: LINE Green은 배경에 사용 금지 — CTA와 강조 요소에만 사용, 채팅 버블 색상은 발신/수신 구분을 위해 고정.

### Q6. LINE Design System (LDS)에 어울리는 폰트 스타일은 무엇인가요?

LINE Design System (LDS)에는 LINE Seed Sans — LINE 자체 개발 다국어 산세리프 (한·영·일·태국어 지원) 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 메시징 UI 특성상 본문 14~16px 중심의 컴팩트한 스케일, 채팅 버블 내 텍스트는 15px 고정 — 가독성과 밀도 균형.

### Q7. LINE Design System (LDS) 디자인에서 하면 안 되는 것은 무엇인가요?

LINE Design System (LDS)에서 피해야 할 것: LINE Green을 배경색으로 광범위하게 사용 금지 — 눈의 피로 유발, 채팅 버블 디자인 패턴을 임의로 변경 금지, 스티커/이모지 영역의 그리드를 벗어나는 레이아웃 금지, 다국어 텍스트 잘림을 유발하는 고정 너비 컨테이너 금지.

### Q8. LINE Design System (LDS)을 사용하는 실제 서비스나 제품은 무엇이 있나요?

LINE Design System (LDS)을 적용한 대표적인 제품·서비스로는 LINE 메신저, LINE Pay, LINE MINI App, LINE Shopping, LINE Manga / LINE Music 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #06C755
- secondary: #E6F9EE
- accent: #06C755
- background: #F7F8FA
- surface: #FFFFFF
- text: #111111
- textSecondary: #666666
- border: #E0E0E0

### 타이포그래피

- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 6px / md 12px / lg 20px / full 9999px
- shadow sm: 0 1px 2px rgba(0,0,0,0.06)
- shadow md: 0 2px 8px rgba(0,0,0,0.08)
- shadow lg: 0 4px 16px rgba(0,0,0,0.10)
- border: 1px solid #E0E0E0

### 컴포넌트 형태

- button: rounded / hover darken / text none
- card: outlined / hover lift
- input: outlined / focus border
- badge: rounded / solid
- icon: lucide / stroke 2 / size 24px
- layout: fluid / section normal
- animation: 200ms ease-out

## 관련 링크

### 관련 스타일

- [Material Design](https://ui.buildersgate.com/styles/material-design)
- [SEED Design (당근)](https://ui.buildersgate.com/styles/seed-design)
- [Toss Design System (TDS)](https://ui.buildersgate.com/styles/toss-design-system)
- [Human Interface Guidelines (HIG)](https://ui.buildersgate.com/styles/human-interface-guidelines)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/line-lds)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/line-lds)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/line-lds)

### 비교

- [LINE Design System (LDS) vs Human Interface Guidelines (HIG)](https://ui.buildersgate.com/compare/human-interface-guidelines-vs-line-lds)
- [LINE Design System (LDS) vs Material Design](https://ui.buildersgate.com/compare/line-lds-vs-material-design)
- [LINE Design System (LDS) vs SEED Design (당근)](https://ui.buildersgate.com/compare/line-lds-vs-seed-design)
- [LINE Design System (LDS) vs Toss Design System (TDS)](https://ui.buildersgate.com/compare/line-lds-vs-toss-design-system)

### 쓰임새별 추천

- [핀테크·금융 서비스](https://ui.buildersgate.com/for/fintech)
- [커뮤니티·소셜](https://ui.buildersgate.com/for/community)
- [게임·엔터테인먼트](https://ui.buildersgate.com/for/game-entertainment)

---

HTML 버전: https://ui.buildersgate.com/styles/line-lds

이 문서는 https://ui.buildersgate.com/styles/line-lds.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.