# LINE Design System (LDS) — 디자인 스타일 가이드

## 기본 정보
- **ID**: line-lds
- **카테고리**: design-language
- **연도**: 2020
- **제작자**: LINE Corporation (LY Corporation)

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

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

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

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

## 컬러 시스템 가이드
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로 생동감 부여

## 사용 사례
- 메시징 / 커뮤니케이션 앱
- 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) 레이아웃도 지원합니다.

## 관련 스타일
- [material-design](https://ui.buildersgate.com/styles/material-design)
- [seed-design](https://ui.buildersgate.com/styles/seed-design)
- [toss-design-system](https://ui.buildersgate.com/styles/toss-design-system)
- [human-interface-guidelines](https://ui.buildersgate.com/styles/human-interface-guidelines)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

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

### 헤더
- background: #FFFFFF
- textColor: #111111
- accentColor: #06C755

### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 0 1px 2px rgba(0,0,0,0.06)
- md: 0 2px 8px rgba(0,0,0,0.08)
- lg: 0 4px 16px rgba(0,0,0,0.10)
- xl: 0 8px 24px rgba(0,0,0,0.14)

### Border Radius
- none: 0
- sm: 6px
- md: 12px
- lg: 20px
- full: 9999px

### 테두리 (Borders)
- width: 1px
- style: solid
- color: #E0E0E0

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease-out

### 애니메이션
- duration: 200ms
- easing: ease-out

### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=darken / textTransform=none
- 카드: style=outlined / hoverEffect=lift
- 인풋: style=outlined / focusEffect=border
- 배지: shape=rounded / style=solid
- 아이콘: package=lucide / strokeWidth=2 / defaultSize=24

### 레이아웃
- containerStyle: fluid
- sectionSpacing: normal

### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false

## 자주 묻는 질문 (FAQ)

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

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

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

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

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

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

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

### Q: LINE Design System (LDS)을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: LINE Design System (LDS)을 적용한 대표적인 제품·서비스로는 LINE 메신저, LINE Pay, LINE MINI App, LINE Shopping, LINE Manga / LINE Music 등이 있습니다.

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=line-lds
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=line-lds&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

LINE Design System (LDS)

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

연도

2020

제작자

LINE Corporation (LY Corporation)

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

#06C755

핵심 원칙

1

Closing the Distance — 사람과 사람, 정보, 서비스 사이의 거리를 줄이는 디자인

2

Clarity — 10억 사용자가 즉시 이해할 수 있는 직관적 UI

3

Delight — 스티커와 이모지로 감정을 풍부하게 표현

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

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

실제 사용 예시

LINE 메신저LINE PayLINE MINI AppLINE ShoppingLINE Manga / LINE Music

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

LDS Buttons

LINE 스타일 버튼 — Forest Green CTA와 그레이 보조 버튼

LDS Chat Bubbles

Chat First — LINE 메신저의 핵심 채팅 버블 UI

KR

김민수

안녕하세요! 오늘 회의 시간 확인했어요 😊

오후 2:30

네! 3시에 회의실에서 만나요 👍

오후 2:31 ✓

KR

좋아요! 자료 미리 공유해드릴게요

LDS Tab & Navigation

LINE 앱의 하단 내비게이션과 탭 인터페이스

채팅

LDS Card & List

LINE 서비스의 카드 UI와 리스트 패턴

LINE 오픈채팅

관심사 기반 커뮤니티

같은 관심사를 가진 사람들과 자유롭게 대화해보세요

💰

LINE Pay

간편결제

NEW
🎵

LINE MUSIC

음악 스트리밍

📰

LINE NEWS

뉴스

LDS Input Fields

LINE 스타일의 라운드 입력 필드와 검색바

LDS Typography

LINE의 타이포그래피 시스템 — 친근하고 가독성 높은 텍스트 체계

Display (28px / Bold)

LINE으로 가까워지는 세상

Headline (22px / Bold)

Closing the Distance

Title (17px / Semibold)

채팅, 통화, 뉴스까지 한 곳에서

Body (15px / Regular)

LINE Design System은 LDSM(메신저)과 LDSG(글로벌 패밀리 서비스)로 구성된 통합 디자인 프레임워크로, 34개 서비스에 일관된 사용자 경험을 제공합니다.

Caption (13px / Regular)

LINE Corporation · 2021 · Forest Green Identity

LDS Color System

Forest Green 아이덴티티 컬러와 30개 코어 컬러 팔레트

Green
Grey
Red
Blue

Forest Green(#06C755)을 중심으로 한 30개 코어 컬러 시스템

자주 묻는 질문

LINE Design System (LDS)이란 무엇인가요?
LINE 메신저 및 패밀리 서비스를 위한 디자인 시스템으로, 10억+ 사용자 규모의 글로벌 메시징 플랫폼에 최적화된 일관된 UX를 제공합니다. LINE Green 시그니처 컬러, 다국어 타이포그래피, 멀티 플랫폼 컴포넌트를 갖추고 있습니다. 2011년 출시된 LINE 메신저가 일본·대만·태국 등 아시아 시장을 중심으로 성장하며 2020년 공식 LINE Design System을 체계화했습니다. 2023년 Z Holdings와 합병하여 LY Corporation으로 재편되며 Yahoo! JAPAN과의 디자인 통합도 진행 중입니다.
LINE Design System (LDS)의 핵심 디자인 원칙은 무엇인가요?
LINE Design System (LDS)의 핵심 원칙은 Closing the Distance — 사람과 사람, 정보, 서비스 사이의 거리를 줄이는 디자인, Clarity — 10억 사용자가 즉시 이해할 수 있는 직관적 UI, Delight — 스티커와 이모지로 감정을 풍부하게 표현입니다.
LINE Design System (LDS)은 어떤 프로젝트에 적합한가요?
LINE Design System (LDS)은 메시징 / 커뮤니케이션 앱, LINE MINI App (슈퍼앱 미니 서비스), 핀테크 (LINE Pay, LINE Bank), 커머스 (LINE Shopping), 엔터테인먼트 (LINE Manga, LINE Music), 메시징 및 커뮤니케이션 중심 서비스, 아시아 다국어 지원이 필요한 글로벌 앱, LINE 생태계 내 MINI App 개발, 대규모 사용자 기반의 슈퍼앱 플랫폼 등의 프로젝트에 적합합니다.
LINE Design System (LDS)의 장단점은 무엇인가요?
장점으로는 10억+ 사용자 규모에서 검증된 글로벌 디자인 시스템, 한·일·태·인도네시아 등 아시아 다국어 환경에 최적화, LINE MINI App SDK로 서드파티 개발자도 일관된 UX 구현 가능, 메시징 특화 컴포넌트로 채팅 UI 빠른 구축, LINE Green이 주는 높은 브랜드 인지도이 있습니다. 단점으로는 내부 전용 시스템으로 외부 접근이 제한적, LINE 생태계 밖에서 Green 중심 컬러가 어색할 수 있음, 일본 / 아시아 중심으로 서구권 UX 패턴과 다소 차이이 있습니다.
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와 강조 요소에만 사용, 채팅 버블 색상은 발신/수신 구분을 위해 고정.
LINE Design System (LDS)에 어울리는 폰트 스타일은 무엇인가요?
LINE Design System (LDS)에는 LINE Seed Sans — LINE 자체 개발 다국어 산세리프 (한·영·일·태국어 지원) 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 메시징 UI 특성상 본문 14~16px 중심의 컴팩트한 스케일, 채팅 버블 내 텍스트는 15px 고정 — 가독성과 밀도 균형.
LINE Design System (LDS) 디자인에서 하면 안 되는 것은 무엇인가요?
LINE Design System (LDS)에서 피해야 할 것: LINE Green을 배경색으로 광범위하게 사용 금지 — 눈의 피로 유발, 채팅 버블 디자인 패턴을 임의로 변경 금지, 스티커/이모지 영역의 그리드를 벗어나는 레이아웃 금지, 다국어 텍스트 잘림을 유발하는 고정 너비 컨테이너 금지.
LINE Design System (LDS)을 사용하는 실제 서비스나 제품은 무엇이 있나요?
LINE Design System (LDS)을 적용한 대표적인 제품·서비스로는 LINE 메신저, LINE Pay, LINE MINI App, LINE Shopping, LINE Manga / LINE Music 등이 있습니다.

관련 스타일 탐색

Material Design

구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.

SEED Design (당근)

당근(Karrot)이 개발한 오픈소스 디자인 시스템으로, 하이퍼로컬 커뮤니티 서비스를 위한 따뜻하고 친근한 UX를 제공합니다. React·React Native·iOS·Android 멀티 플랫폼을 지원하며, Radix 기반 시맨틱 컬러 토큰, Stackflow 네비게이션, 접근성 내장 컴포넌트를 갖추고 있습니다.

Toss Design System (TDS)

OKLCH 색공간 기반의 정교한 컬러 시스템, 파생 가능한 테마 시스템, 11개 핵심 컴포넌트를 갖춘 토스의 디자인 시스템으로 금융 앱부터 슈퍼앱, POS, 글로벌까지 확장 가능한 System of System 구조입니다.

Human Interface Guidelines (HIG)

애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다.