Design Asset Library
라인 디자인 시스템 라이브러리
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
Design Asset Library
Foundation 규칙을 기반으로 Element, Element의 조합으로 이루어진 Component, Element와 Component의 조합으로 이루어진 Module로 이루어진 Design Asset Library를 구축 했습니다.
Patterns - LIFF Browser
LDSG Design Asset Library는 Element, Component, 그리고 Module로 구성되어 있으며, 이를 기반으로 실제 UX 플로우를 구성하는 Pattern을 설계합니다. 이렇게 구축된 Pattern은 실제 제품에 적용되어 디자인 자산이 일관된 사용자 경험으로 이어질 수 있도록 합니다. 그 대표적인 사례로, LINE App의 LIFF Browser는 LDSG Design Asset Library를 활용해 설계된 Pattern이 실제 서비스에 성공적으로 반영된 예입니다.
What is LIFF Browser in LINE Messenger?
LIFF Browser는 LINE App 내부에서 동작하는 웹 브라우저입니다.
콘텐츠 포털을 지향하는 라인 메신저는 다수의 페이지를 Web View로 구현하고 있으며, 이를 위해 IAB(인앱 브라우저)가 필요합니다. 사용자는 해당 페이지가 Web View로 제작되었다는 사실을 인지하지 못할 만큼 자연스럽게 메신저의 기능들과 융합되어야 합니다. 또한, 다양한 용도에 맞게 여러 형태의 뷰 타입을 제공해야 합니다.
LIFF Browser UX의 핵심은 Web View를 통해 구현된 페이지가 Native View와 이질감 없이 동일한 경험으로 이어지도록 하는 것입니다. 특히, Web View로 구현되더라도 페이지 닫기 기능은 iOS 정책에 따라 Native 방식으로 제공되어야 한다는 점이 중요한 설계 원칙입니다.
OS Version Support
OS마다 요구하는 UX 원칙이 조금씩 다릅니다. 이에 따라 LIFF Browser는 각 모바일 OS의 가이드라인을 반영하여, iOS 버전과 AOS 버전이 서로 다른 디자인으로 구성되어 있습니다.
Header UX Specs
LIFF Browser는 독립적으로 운영되는 패밀리 서비스뿐만 아니라 LINE App의 주요 페이지 구현에도 대응해야 합니다. 이를 고려하여 Header의 UX를 정의하고, 두 가지 환경 모두에 적용할 수 있도록 설계했습니다.
웹 브라우저의 기본 기능인 닫기 기능은 반드시 Native 환경에서 구현해야 한다는 제한이 있습니다. 이는 Apple이 규정한 강제 사항입니다. 하지만 방대한 규모의 LINE App 내에서는 서비스 맥락에 따라 브라우저 닫기 방식을 ‘X’ 아이콘으로 제공해야 할 때도 있고, ‘Close’ 텍스트로 표시해야 할 때도 있습니다. LIFF Browser는 이러한 다양한 상황에 대응할 수 있도록, 두 가지 방식을 모두 선택적으로 활용할 수 있게 설계되었습니다.
모바일 기기의 화면 크기에 따라 헤더의 사이즈는 유동적으로 조정됩니다. 이때 LDSG의 Spacing 규칙을 기반으로 간격이 일정한 비율로 유지되도록 설계되었습니다.
헤더에서 사용하는 아이콘은 LDSG의 Icon Library와 연동된 ‘LAICON(SVG 코드 라이브러리)’와 동기화되어 코드 베이스로 직접 제품에 적용됩니다. 즉, 아이콘 디자인을 LAICON에 등록하고 사용할 아이콘을 선택하기만 하면, 별도의 수작업 없이 제품에 자동으로 반영되는 구조를 갖추고 있습니다.
Sub Window
LIFF Browser는 Close 버튼을 Native에서 제어하는 구조의 웹 브라우저이기 때문에, 웹 페이지 내에서 Modal 기반의 UX를 구현하기 어려운 제약이 있습니다. 이를 해결하기 위해 ‘Sub Window’라는 개념을 도입했습니다. 즉, 기존 웹 브라우저 위에 Modal 형태의 또 다른 웹 브라우저를 오버레이하는 방식으로, 이러한 제약을 극복하고 Modal UX를 자연스럽게 구현할 수 있도록 했습니다.
