표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
LINE Design System (LDS)
LINE 메신저 및 패밀리 서비스를 위한 디자인 시스템으로, 10억+ 사용자 규모의 글로벌 메시징 플랫폼에 최적화된 일관된 UX를 제공합니다. LINE Green 시그니처 컬러, 다국어 타이포그래피, 멀티 플랫폼 컴포넌트를 갖추고 있습니다.
- YEAR
- 2020
- BY
- LINE Corporation (LY Corporation)
- MOOD
- 친근·발랄 · 신뢰감
- PRIMARY#06C755
- SECONDARY#E6F9EE
- ACCENT#06C755
- BG#F7F8FA
- SURFACE#FFFFFF
취급 표시
- 둥근 모서리
- 가는 테두리
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 3단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 4단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 4단계
- 친근·발랄
- 신뢰감
함께 보면 좋은 스타일
SEED Design (당근)당근(Karrot)이 개발한 오픈소스 디자인 시스템으로, 하이퍼로컬 커뮤니티 서비스를 위한 따뜻하고 친근한 UX를 제공합니다. React·React Native·iOS·Android 멀티 플랫폼을 지원하며, Radix 기반 시맨틱 컬러 토큰, Stackflow 네비게이션, 접근성 내장 컴포넌트를 갖추고 있습니다.SEED Design (당근)와 비교하기
어디에 쓰나
실제로 쓰는 곳
- LINE 메신저
- LINE Pay
- LINE MINI App
- LINE Shopping
- LINE Manga / LINE Music
사용 사례
- 메시징 / 커뮤니케이션 앱
- LINE MINI App (슈퍼앱 미니 서비스)
- 핀테크 (LINE Pay, LINE Bank)
- 커머스 (LINE Shopping)
- 엔터테인먼트 (LINE Manga, LINE Music)
이런 프로젝트에 맞습니다
- 메시징 및 커뮤니케이션 중심 서비스
- 아시아 다국어 지원이 필요한 글로벌 앱
- LINE 생태계 내 MINI App 개발
- 대규모 사용자 기반의 슈퍼앱 플랫폼
이런 프로젝트에 권합니다
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
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 크로스 플랫폼
장점과 한계
장점
- 10억+ 사용자 규모에서 검증된 글로벌 디자인 시스템
- 한·일·태·인도네시아 등 아시아 다국어 환경에 최적화
- LINE MINI App SDK로 서드파티 개발자도 일관된 UX 구현 가능
- 메시징 특화 컴포넌트로 채팅 UI 빠른 구축
- LINE Green이 주는 높은 브랜드 인지도
한계
- 내부 전용 시스템으로 외부 접근이 제한적
- LINE 생태계 밖에서 Green 중심 컬러가 어색할 수 있음
- 일본 / 아시아 중심으로 서구권 UX 패턴과 다소 차이
컬러 시스템
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을 핵심 CTA에 일관되게 사용
- 채팅 UI의 발신/수신 버블 구분
- 최소 44px 터치 타겟 (모바일)
- 다국어 텍스트 오버플로 대응
- 스티커/이모지를 위한 전용 그리드 시스템
하지 말 것
- LINE Green을 배경색으로 광범위하게 사용 금지 — 눈의 피로 유발
- 채팅 버블 디자인 패턴을 임의로 변경 금지
- 스티커/이모지 영역의 그리드를 벗어나는 레이아웃 금지
- 다국어 텍스트 잘림을 유발하는 고정 너비 컨테이너 금지
모션 — ease-out 200ms 기본 — 메시지 전송/수신의 즉각적 피드백, 스티커 애니메이션은 300~500ms로 생동감 부여
접근성
글로벌 메시징 앱으로서 저시력 사용자를 위한 고대비 모드, 스크린 리더 지원, 큰 텍스트 모드를 제공하며, 다국어 환경에서의 텍스트 가독성과 RTL(Right-to-Left) 레이아웃도 지원합니다.
자주 묻는 질문
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 등이 있습니다.