Foundation
라인 디자인 시스템 파운데이션
Project Briefs
라인 태국∙대만∙인도네시아 법인에서 제작하는 패밀리 서비스를 위해 LDSG(LINE Design System for Global)를 구축하는 프로젝트입니다. 이는 라인 메신저 앱을 위한 디자인 시스템인 LDSM(LINE Design System for Messenger)와는 별도로, 웹뷰 기반의 스탠드얼론 패밀리 서비스를 보다 효율적으로 개발하고 일관된 디자인을 확보할 수 있도록 지원하기 위한 디자인 시스템입니다.
My Role
LDSG 프로젝트 TF의 PM 역할을 수행 했습니다. 한국･일본･태국･대만 법인의 디자이너로 구성된 TF디자이너를 리딩하고, 일본 FE조직의 컴포넌트 개발 과정을 매니징 했습니다.
Participants
Design Managing: Jay
UX/UI Design: LDSG Design Members
Library Development : LDSG UIT Members
Foundation
Foundation은 디자인 시스템의 근간을 이루는 정의입니다. 모든 디자인 요소를 규격화하여 규칙을 수립하고, 이를 바탕으로 Element, Component, Module, 나아가 Pattern까지 구성해 라이브러리화합니다. 이렇게 마련된 Foundation은 디자인과 개발 간 제작 프로토콜을 일원화하는 기준점이자, 디자인 시스템 전반에서 일관성을 보장하는 토대가 됩니다. 결국 이는 각 제품 기능의 결과물에 직접적인 영향을 미치는 핵심 축으로 작용합니다.
디자인 에셋 플랫폼과의 연동
LDSG Foundation은 라인의 다양한 디자인 에셋 플랫폼의 디자인 규칙들과 연동되어 있습니다. 예를 들어, 아이콘 디자인 규칙은 아이콘 SVG 코드 저장소인 LAICON의 기반을 이루며, 라인 메신저 웹브라우저인 LIFF에 탑재되는 기본 컴포넌트 LUI와도 동기화되어 있습니다. 즉, 각 디자인 에셋 플랫폼이 개별적으로 에셋을 생산하더라도, 모두가 하나의 디자인 시스템 생태계 안에서 운영되므로 상호 호환이 가능하다는 의미입니다.
LDSG Foundation 범위
LDSG Foundation은 4가지 카테고리의 8개의 시각적 요소로 구성되어 있습니다.
LDSG 디자인 토큰
LDSG의 모든 요소는 디자인 토큰을 기반으로 정의됩니다. 시각적 속성의 이름과 값을 매핑한 디자인 토큰은 디자이너와 개발자가 동일한 언어로 소통할 수 있도록 하며, 디자인 사양이 정확하게 구현되도록 보장합니다. 아래 예시는 LDSG 색상 시스템이 버튼에 적용되는 방식을 보여주며, 디자인 토큰이 버튼의 색상 값과 어떻게 연결되는지를 설명합니다.
LDSG 디자인 토큰 컨벤션
디자인 토큰의 명명은 명확한 규칙에 따라 정의되며, 이름만으로도 해당 토큰이 어떤 속성과 연관되는지 쉽게 파악할 수 있습니다. 이를 통해 디자이너와 개발자는 동일한 기준으로 소통할 수 있어 업무 효율이 향상됩니다. 또한 같은 대상을 서로 다르게 부르는 과정에서 발생할 수 있는 미스커뮤니케이션과 비효율을 제거하고, 방대한 라이브러리를 체계적이고 효율적으로 관리할 수 있는 기반을 제공합니다.
Foundation: Typography
Foundation 중 Typography에 대한 정의입니다. LDSG는 라인의 글로벌 오피스를 대상으로 제작된 디자인 시스템이므로, 다국어를 지원할 수 있는 구조가 필수적입니다. 이에 따라 일본어, 한국어, 영어, 중국어(번체), 태국어를 지원하며, 언어마다 다른 사이즈 밸런싱 문제를 해결하기 위해 별도의 Language Pack을 제작했습니다.
LDSG 랭귀지팩
웹 환경에서는 기본 시스템 타이포그래피가 여러 언어에서 시각적 일관성을 유지하지 못하는 경우가 많습니다. 동일한 크기 값을 다른 타이포그래피에 적용하더라도, 시각적으로 인지되는 크기는 달라질 수 있습니다. 이는 다국어를 지원할 때 컴포넌트 디자인의 왜곡으로 이어질 수 있으며, 전통적으로 디자이너들은 이를 해결하기 위해 언어별로 별도의 UI 디자인을 제작해야 했습니다.
LDSG 랭귀지 팩은 이러한 문제를 해결하기 위해 언어 간 크기 변환 규칙을 제공합니다. 디지털 제품이 주로 영어로 디자인되더라도, LDSG 언어 팩은 변환 규칙을 기반으로 다른 언어의 텍스트가 원래 디자인과 시각적으로 일치하도록 스케일을 조정합니다. 그 결과, 다양한 언어에 대해 별도의 UI 디자인을 준비할 필요 없이 컴포넌트 디자인이 일관되게 디자인 의도를 반영할 수 있습니다.
태국어 타이포그래피
태국어에는 두 가지 타이포그래피 스타일이 있습니다: 루프(Loop)와 루프리스(Loopless)입니다. 루프리스 스타일은 깔끔하고 현대적인 외관으로 현대 디자인에서 주로 사용되지만, iOS나 Android 시스템에서는 기본적으로 지원되지 않습니다. 전통적인 태국 폰트인 루프 스타일은 현대 디지털 제품의 디자인을 충분히 반영하지 못합니다. 이를 해결하기 위해, 우리는 루프리스 폰트인 “Sukhumvit Tadmai”를 확보하여 LDSG 언어 팩에 적용함으로써, 플랫폼 전반에서 일관되고 현대적인 타이포그래피를 구현하였습니다.
LDSG 언어 팩에 루프리스 태국어 폰트를 적용하는 과정에서, 태국어 타이포그래피의 고유한 특성을 반영하여 행간 규칙을 세심하게 조정했습니다. 태국어 독자는 좁은 행간을 읽기 어렵게 느끼는 반면, 과도한 행간은 여러 언어 간 시각적 일관성을 해칠 수 있습니다. LDSG 팀은 태국어 가독성을 확보하면서도 지원되는 모든 언어에서 시각적 조화를 유지할 수 있는 최적의 행간 비율을 결정하였습니다.
일본어 타이포그래피
일본 시장에서는 Hiragino Sans가 가장 일반적으로 사용되는 시스템 폰트입니다. 그러나 일본어 문자와 라틴 문자, 숫자를 함께 사용할 경우 시각적 일관성이 깨지는 문제가 발생합니다. 일본어 문자와 라틴/숫자 문자의 인지되는 크기 차이가 불균형하게 나타나기 때문입니다.
LDSG 언어 팩은 크기 변환 규칙을 적용하여 이 문제를 해결합니다. 동일 문장 내에서 일본어 문자에는 Hiragino Sans를, 라틴 문자에는 SF Pro를 적용함으로써 시각적 균형을 유지합니다. 이러한 접근 방식은 “Advanced”라고 하며, LDSG 언어 팩에서 선택적으로 활성화할 수 있습니다.
타이포그래피 토큰의 네이밍 Convention
LDSG 타이포그래피는 LDSG 컴포넌트와 동일한 목적을 위해 디자인 토큰을 사용합니다. 각 토큰의 이름은 연관된 속성을 나타내므로 이해하고 적용하기가 쉽습니다.
Typography 결과물
LDSG Typography는 iOS와 Android 버전을 구분하여 제공합니다. 또한 태국어 네이티브 폰트 사용 시 별도의 랭귀지 팩을 함께 제공합니다.
Foundation: Color, Object Style, and Layout
Object Style(Radius, Shadow, Border Width), Layout(Grid System, Spacing), 그리고 모든 요소에 적용되는 Color Rule에 대한 정의입니다. 이러한 요소들은 체계적으로 규정되며, 각 항목은 일관된 디자인 구현과 효율적인 작업 프로세스를 지원하기 위한 기준으로 활용됩니다.
