LINE DEVELOPER DAY 2020에서 박제호 님이 발표하신 LDS enhances the work efficiency of Developers and Designers 세션 내용을 옮긴 글입니다.

안녕하세요. LINE Plus에서 LDS(LINE Design System)의 전체 PM을 맡고 있는 시니어 리드 박제호라고 합니다. 이번 글에서는 LINE의 업무 효율과 제품 완성도를 향상시키고 있는 LDS에 대해 말씀드리겠습니다. 먼저 LDS를 구축하게 된 계기와 LDS의 구조 및 요소에 대해 말씀드리고, 다음으로 LINE 메신저 앱을 위한 디자인 시스템과 LINE의 글로벌 패밀리 서비스를 위한 디자인 시스템에 대해 말씀드리겠습니다. 마지막으로 디자인 시스템을 구축할 때 고려해야 할 내용에 대해 공유하겠습니다.

개발자와 디자이너의 효율적인 협업을 위해

먼저 디자인 시스템을 구축하게 된 계기를 말씀드리겠습니다. 아래 숫자는 디자인 시스템을 구축하기 시작했을 때인 2019년 6월에 집계한 숫자입니다. 1,500개가 넘는 프로젝트가 있었고, 400여 명의 디자이너가 참여하고 있었습니다.

400여 명의 디자이너가 다수의 프로젝트를 동시다발적으로 진행할 때 어떤 문제점을 겪게 될까요? 또한 디자이너뿐 아니라 제품 제작에 가장 직접적으로 연결되어 있는 개발자에게는 어떤 이슈가 발생하게 될까요?

디자이너에게 발생한 이슈부터 살펴보겠습니다. 디자이너들은 어떤 버튼이 최종 버튼인지, 어떤 컬러를 써야 하는지, 어떤 폰트와 어떤 아이콘을 사용해야 하는지에 대해 반복적으로 커뮤니케이션한 뒤, 다시 반복적으로 디자인 작업을 진행하고 있었습니다.

그렇다면 개발자는 어땠을까요? 예시를 하나 들어보겠습니다. 아래 그림은 당시 LINE에 존재했던 탭 메뉴 UI의 일부입니다. 각 UI는 터치하면 페이지가 전환되는 동일한 기능을 수행하는데요. 이런 상황에서 개발자들은 왜 탭 디자인을 다시 디자인했는지에 대해서 디자이너들과 다소 소모적인 커뮤니케이션을 진행하게 되는 경우가 종종 있었습니다.

같은 기능의 UI를 서로 다르게 디자인하면서 개발 리소스가 낭비되고 있었고, 디자인 작업이 반복되면서 커뮤니케이션 비용이 증가했으며, 상황에 따라 다른 UX 흐름을 고민하고 있었습니다. 이에 LINE 제품 전체 디자인에 대한 기준을 세울 수 있는 디자인 관리가 필요하다는 것을 깨달았고 이를 해결하기 위해 디자인 시스템이 필요하다는 결론을 내렸습니다.

LDS 구축

프로덕트 디자이너를 위한 디자인 라이브러리와, 플래너 및 UX 디자이너를 위한 공통 UX 가이드라인, 개발 리소스 낭비를 줄일 수 있도록 개발자를 위한 코드를 포함한 UI 컴포넌트를 제작하면 업무 효율성을 올릴 수 있으며, 결과적으로 LINE 제품에 일관성 있는 UI와 UX를 적용할 수 있다고 판단했습니다. 이에 효율성과 좋은 디자인, 높은 기준의 완성도라는 세 가지 목표를 세우고 디자인 시스템 구축을 시작했습니다. 

저희는 프로젝트를 실행할 때 킥오프 후 스펙을 정의하고, 와이어 프레임을 그린 뒤, 디자인 작업과 개발을 진행하고, QA 단계를 거쳐 릴리스하는 순서로 진행합니다. 프로젝트의 구성원이 위 프로세스의 와이어 프레임 단계부터 QA 단계까지의 과정에서 디자인 시스템을 사용한다면 커뮤니케이션 비용과 반복적인 작업을 줄일 수 있고, 이를 통해 업무 프로세스의 구간별 작업 시간이 단축되면서 작업 효율이 높아질 것이라고 생각했습니다.

이어서 LDS의 필수 제작 요소를 소개하고, LDS 구조에 LINE 메신저를 위한 LDSM(LDS for Messenger)과 글로벌 패밀리 서비스를 위한 LDSG(LDS for Global family service)라는 두 가지 디자인 시스템이 존재하게 된 배경을 설명하겠습니다.

LDS의 필수 제작 요소

LDS에는 크게 세 가지 영역의 필수 제작 요소가 있습니다. 먼저 LINE만의 디자인 원칙에 근거한 타이포그래피와 컬러, 레이아웃, 인터랙션(interaction)을 포함하는 디자인 영역이 있고, UX 가이드라인과 컴포넌트의 스펙을 정의한 문서가 있으며, iOS와 Android 앱 개발 작업을 위한 코드가 있습니다. LDS에서는 이 세 가지 요소를 필수 요소로 정의하고 있습니다.

LDSM과 LDSG

구축 초기에는 메신저인 LINE 앱을 중심으로 LDS를 제작해 나갔습니다. 그런데 LINE에는 메신저뿐 아니라 다른 글로벌 패밀리 서비스도 많습니다. 커머스와 파이낸스, 라이프 스타일 서비스, 엔터테인먼트, 광고에 이르기까지 굉장히 많은 글로벌 패밀리 서비스가 LINE 앱과 함께 제작되고 있습니다. 이런 상황에서 LINE 앱과 다수의 제품으로 구성된 글로벌 패밀리 서비스를 하나의 디자인 시스템으로 운영하는 것은 쉽지 않다는 결론에 도달했습니다.

이에 LDS 산하에 아래와 같은 두 가지 디자인 시스템을 갖추게 되었습니다.

첫 번째는 메신저 LINE 앱을 위한 LDSM입니다. LDSM은 메신저 기능을 포함한 LINE 앱 하위의 피처(feature)형 서비스와 부가 기능을 위해 제작된 디자인 시스템입니다. 두 번째는 다수의 글로벌 패밀리 서비스를 위한 디자인 시스템, LDSG입니다. LDSG는 독립된 브랜드를 가진 패밀리 서비스를 위한 모듈 플랫폼과 웹 기술 기반의 성격을 지닌 디자인 시스템입니다.

LDSM 소개

먼저 메신저 LINE 앱을 위한 LDSM에 대해 설명하겠습니다. 아래 화면은 LINE 앱이 처음 세상에 나왔을 때의 모습입니다. 메신저 기능에 집중한 매우 심플한 UI라는 것을 알 수 있습니다.

아래는 현재 LINE의 모습입니다. 메신저 기능뿐 아니라 콘텐츠 추천과 SNS, 뉴스, 핀테크, 파이낸스 분야까지, 사용자에게 많은 기능을 제공하고 있습니다.

저희는 초창기 LINE 앱의 모습과 현재 LINE 앱의 모습을 살펴보며 LINE 앱이 꽤 오랜 기간 동안 공통적인 UI 가이드와 디자인 가이드 없이 꾸준히 변화하면서 생각보다 많은 레거시가 쌓여있다는 것을 알 수 있었고, 이 레거시부터 정리할 필요가 있다고 판단했습니다.

레거시를 정리하기 위해서는 먼저 디자인 시스템의 근간이 될 기본 원칙(foundation)을 세워야 했습니다. 이에 다음 6가지를 디자인 시스템의 기본 원칙으로 확립했습니다. 첫 번째는 LINE의 디자인을 개선할 때 근거가 되는 공통의 가치와 원칙인 '디자인 원칙'입니다. 두 번째는 LINE 사용자에게 보다 명확하고 사려 깊게 UX를 제공하는 'LINE 보이스'이고, 세 번째는 표준화된 '컬러', 네 번째는 각 국가별 '타이포그래피 가이드', 다섯 번째는 '아이콘 가이드', 마지막으로 '레이아웃 가이드'입니다. LINE DEV DAY 2019에서 LDS의 기본 원칙에 대해 자세히 설명드렸는데요.(참고) 이번에는 아이콘과 그래픽 가이드에서 업데이트한 부분과 컬러 가이드에 대해 간략히 설명하겠습니다.

아이콘 가이드

먼저 아이콘 가이드입니다. 디자인 시스템 팀에서 모든 아이콘을 제작하지 않고 각 국가별 담당 디자이너들이 신규로 아이콘을 제작할 수 있도록 아래와 같이 각 항목별로 상세하게 가이드를 만들어 놓았습니다. 

이렇게 제작한 200개 이상의 기본 아이콘을 라이브러리로 구축하고 SVG와 AI 및 스케치 파일 형식으로 제공하고 있습니다. 또한 단순한 기능 아이콘뿐 아니라 서비스 설명이나 기능 설명을 돕는 픽토그램 변형 작업도 함께 진행하고 있습니다.

그래픽 가이드

다음은 그래픽 가이드입니다. LINE은 글로벌 서비스이기 때문에 다양한 문화권을 아우르며 모든 연령대가 공감할 수 있도록 밝고 친근한 분위기로 제작하고 있습니다. 이에 각 국가별 디자이너들이 일관된 톤 앤 매너로 제작할 수 있도록 얼굴의 표정이나 비율에 대한 가이드와 각 성별, 인물별 비율 등을 포함해 가이드를 제작했습니다.

또한 디자이너들이 긴급하게 일러스트를 사용하게 될 때를 대비해 여러 가지 동작 변형을 제작해 놓았습니다.

디자인 시스템을 구축하기 전에는 컬러 가이드가 명확하지 않았기 때문에 컬러 값을 추출해서 사용하는 경우가 많았습니다. 이런 방식으로 작업하다 보면 정확한 컬러 값을 알기 어렵기 때문에 담당 디자이너마다 미묘하게 다른 컬러를 사용하게 됩니다. 이에 색상 사용을 최소화하기 위해 LINE의 아이덴티티 컬러인 포레스트 그린과 가장 잘 매칭되는 프라이머리 컬러 30종을 가이드로 만들었습니다.

또한 30개의 프라이머리 컬러만으로는 실제 LINE 앱에 필요한 컬러 니즈를 다 커버할 수 없기 때문에 프로모션 배너와 같이 특정한 영역에서 자유롭게 쓸 수 있는 '레인보우 컬러'라는 컬러 가이드를 별도로 정의해서 각 서비스에 맞게 사용할 수 있도록 했습니다. 아래는 레인보우 컬러가 적용된 프로모션 배너와 아이콘의 예시입니다.

프라이머리 컬러는 가장 기본이 되는 컬러이기 때문에 레이블화해서 코드로 만들고 규제하고 있습니다. 만약 디자이너가 프라이머리 컬러를 적용해야 할 부분에 다른 컬러를 사용해서 개발 가이드로 넘기면 아래 화면과 같이 개발 단계에서 경고가 발생하는 수준으로 제재하고 있습니다.

컴포넌트

컴포넌트는 디자인 시스템에서 가장 중요하다고 할 수 있습니다. 아래 그림은 LDSM에서 정의한 컴포넌트 제작 단계입니다.

먼저 컴포넌트로 제작해야 하는 UI의 히스토리를 파악하고, 스펙을 정의한 후 컴포넌트 디자인 작업을 진행합니다. 이후 컴포넌트가 어디에 어떤 식으로 사용될지 UX 가이드를 정의해서 최종적으로 디자인 라이브러리에 포함시키는 프로세스입니다.

LDSM의 컴포넌트는 기본 컴포넌트와 팀 컴포넌트로 구성됩니다. 기본 컴포넌트에서는 기본적인 UI의 요소를 정의하고, 팀 컴포넌트에서는 LINE Timeline이나 LINE Search처럼 특정 서비스에서 주로 사용될 컴포넌트를 정의합니다.

기본 컴포넌트

아래는 기본 컴포넌트의 일부 화면입니다. 탑 헤더, GMB, 빈 페이지, 버튼, 아이콘, 탭, 페이지네이션(pagination) 등 기본적인 UI 요소가 포함되어 있습니다.

아래는 툴팁 컴포넌트 가이드 내용 중 일부입니다.

먼저 툴팁의 기본 구조를 정의했고, 툴팁의 유형으로 텍스트 유형과 버튼 유형을 정의해 놓았습니다. 다음으로 레이아웃과 UI 공통 가이드라인을 기술했고, 툴팁은 컴포넌트 내부에서 커스터마이징을 허용하는 부분이 없기 때문에 분리해서 사용하지 말라는 스케치 디자인 라이브러리의 사용 방법 등에 대해 기술해 놓았습니다.

디자이너들은 이러한 기본 컴포넌트를 활용해 미디어와 콘텐츠, 버튼 영역 등과 같이 적용된 영역에서 보다 확장성 있는 조합형 컴포넌트로 제작할 수 있습니다. 아래는 조합형으로 제작한 대화방 메시지 유형의 예시입니다. LINE에서는 이러한 메시지 유형을 '플렉스 메시지'라고 부르는데요. 메시지에 다양한 콘텐츠가 포함되어 있는 메시지 유형입니다.

아래는 팝업 조합형 컴포넌트입니다. 기본 컴포넌트의 일부인 버튼 컴포넌트가 일관적으로 사용되고 있다는 것을 확인할 수 있습니다.

디자이너는 디자인 라이브러리를 활용해서 팝업 안에서도 기본 컴포넌트의 속성인 페이지네이션을 쉽게 변경할 수 있습니다. 또한 가장 일반적인 목록 형태의 페이지를 제작할 때도 각 니즈에 따라 기본 컴포넌트를 활용해 페이지를 완성할 수 있고 UI 속성도 쉽게 변경할 수 있어 하나의 페이지를 일관성 있게 제작할 수 있습니다.

팀 컴포넌트

팀 컴포넌트는 앞서 말씀드렸듯 특정한 서비스나 영역에서 주로 사용하는 컴포넌트입니다. 아래는 LINE Search와 LINE Timeline 예시 화면입니다. 

LINE Search의 팀 컴포넌트 예시 화면입니다. 검색 기능과 연관된 UI 요소들을 컴포넌트로 정의했고 검색 결과의 컬렉션과 검색 기능만을 위한 요소를 제작했습니다.

팀 컴포넌트는 각 서비스 담당 디자이너가 직접 제작해서 디자인 시스템에 기여하기 때문에 무엇보다 디자인 시스템의 기본 원칙에 근거해 제작하고 관리할 수 있도록 지속적으로 커뮤니케이션하며 논의하는 과정이 매우 중요합니다.

UX 가이드

위와 같은 방식으로 제작한 컴포넌트는 반드시 UX 가이드와 함께 제작해야 합니다. UX 가이드는 사용성과 바로 연결되는 아주 중요한 부분입니다. UX 가이드 없이 컴포넌트를 사용할 경우 사용자 경험을 크게 해칠 수 있기 때문입니다. LDSM에서는 아래와 같이 6가지의 UX 가이드를 정의해 놓았습니다.

아래는 공유 UX 가이드의 일부입니다. LINE 앱에서 어떤 식으로 공유가 진행되는지에 관한 UX 흐름과 OS별로 필요한 대표 아이콘, 공유의 진입점과 그에 따른 컴포넌트를 기술해 놓았습니다.

다음은 인터랙션 가이드입니다. 인터랙션과 모션은 사용자의 피드백을 보다 명확하게 반영하며 제품의 완성도를 올리는 주요한 요소입니다. Lottie.js와 JSON, SBG 애니메이션을 기반으로 제작하고 있으며 iOS와 Android에서 동일한 느낌을 받을 수 있도록 애니메이션 값을 정의해 놓았습니다. 또한 디자인과 실제 개발 결과물 사이의 간극을 최소화할 수 있도록 개발자를 위한 코드 스니펫도 제공하고 있습니다.

LDSG 소개

이제 LINE의 글로벌 패밀리 서비스를 위한 디자인 시스템, LDSG에 대해 말씀드리겠습니다. 글로벌 패밀리 서비스들은 각각 비즈니스 방향이 다르고 독립적이기 때문에 디자인 시스템 팀에서 관련된 모든 부분을 제어하는 게 현실적으로 쉽지 않습니다. LDSM 같은 경우에는 기본적으로 LINE 앱이라는 하나의 제품이 타깃이기 때문에 하나의 디자인 시스템 팀에서 제어하고 관리할 수 있는 반면, LDSG는 다수의 제품을 타깃으로 하기 때문에 각 국가별 담당 디자이너와 디자인 시스템 팀이 함께 만들어 나가는 분업에 가깝습니다.

꼭 지켜야 할 최소한의 디자인 약속

위와 같은 LDSG의 특성 때문에 LDSM보다는 유연하게 운영해야 하는데요. 이때 꼭 지켜야 할 부분이 있습니다. 바로 기본 원칙입니다. 기본 원칙은 협업할 때 반드시 준수해야 하는 최소한의 디자인 약속입니다. 모두가 동일한 기본 원칙을 바탕으로 디자인해야 서로 다른 컴포넌트를 공유하는 게 가능하기 때문입니다.

LDSG의 기본 원칙에서는 6가지 최소 단위의 UI 요소를 정의하고 있습니다. 컬러와 타이포그래피는 LDSM의 기본 원칙을 계승합니다.

6가지 요소를 조합해 컴포넌트를 자유롭게 커스터마이징할 수 있습니다. 기본 원칙을 통해 어떤 식으로 커스터마이징하는지 간단한 예시와 함께 설명하겠습니다. 왼쪽 버튼은 아직 기본 원칙을 적용하지 않은 기본 버튼 컴포넌트입니다.

여기에 각 요소의 값을 'negative red'와 '일본어', 'circle', 'non', '100'으로 적용하면 아래와 같은 버튼으로 변경됩니다.

위와 같은 방식으로 기본 원칙의 속성 값을 변경해 다양한 상황에 대응할 수 있습니다.

기본 컴포넌트와 유니버설 테마 세트

LDSG에서는 각 서비스 담당 디자이너의 니즈를 반영하고 확장성을 제공하는 기본 컴포넌트와, 각 패밀리 서비스의 타깃층과 목적성을 쉽게 반영할 수 있는 유니버설 테마 세트를 제공하고 있습니다.

기본 컴포넌트

기본 원칙의 속성 값을 변경해 유연하게 제작할 수 있도록 만들어 놓은 LDSG의 기본 컴포넌트입니다. 아주 기본적인 UI 요소를 정리해 놓았습니다. 기본적으로 LDSM 컴포넌트를 계승하고 있으며 다크 모드를 위한 변형도 함께 제작하고 있습니다.

아래는 버튼 컴포넌트 가이드입니다. 버튼의 기본 구성 요소와 버튼의 상태별 설명, 유형과 변형, UI의 일반적인 사용 방법에 대해 기술해 놓았습니다.

아래는 프런트엔드 개발 팀과 협업해서 제작하고 있는 웹 컴포넌트 코드입니다. 기본 버튼과 아웃라인 버튼, 비활성화, 크기 변경 등의 작업을 진행할 때 참고할 수 있는 기본 개발 코드를 제공하고 있습니다.

유니버설 테마 세트

유니버설 테마 세트는 LDSG의 또 하나의 제작 요소입니다. LINE 제품만의 일관성 있는 비주얼 아이덴티티를 확보하고 각 서비스의 콘셉트를 설정하는 데 도움이 될 수 있도록 만들었습니다. 제품을 빠르게 출시해야 할 때를 위해 특정 테마의 페이지 단위로도 제작해 놓았습니다.

유니버설 테마 세트는 각 서비스만의 고유한 디자인 아이덴티티를 표현하는 탑 헤더 영역과, 호환성 높은 컴포넌트를 조립해 만들 수 있는 뉴트럴 보디 영역으로 나뉘어 있습니다.

아래는 탑 헤더 영역 예시 화면입니다.

왼쪽의 헤더 영역을 보면, 패밀리 서비스의 BI나 서비스 명이 주요 액션 버튼과 함께 위치하고 있습니다. 각 서비스의 담당 디자이너가 각각의 니즈에 따라 변경할 수 있도록 서비스 명의 위치나 버튼의 위치에 자유도를 주었고, 레이아웃과 컬러도 서비스 특성에 맞게 선택할 수 있도록 제작하고 있습니다.

다음으로 콘텐츠를 표시하는 뉴트럴 보디 영역입니다. 패밀리 서비스는 웹 기술에 기반한 서비스가 많기 때문에 콘텐츠를 배치할 때 어느 디바이스에서든 콘텐츠를 미려하게 보여줄 수 있도록 뉴트럴 보디 영역을 위한 그리드 가이드를 정의해 놓고 있습니다.

뉴트럴 보디 영역은 이 그리드 가이드를 바탕으로 특정한 색깔이 도드라지지 않게 제작한 보디 영역 테마 세트입니다.

아직 시작한 지 얼마 되지 않았기 때문에 종류가 많지 않은데요. 앞으로 각 국가의 담당 디자이너들과 함께 지속적으로 확장시켜 나갈 예정입니다.

여기까지 현재 구축하고 있는 LDS의 대략적인 진행 내용을 말씀드렸습니다. 디자인 시스템의 1차 고객이라고 할 수 있는 디자이너들이 완성도 높은 UI 컴포넌트와 UX 가이드라인을 잘 숙지하고 사용한다면 LINE 제품의 완성도를 높일 수 있는 밑거름이 될 수 있다고 생각합니다.

디자인 시스템을 구축하며 깨달은 점

마지막으로 디자인 시스템을 구축해 나가면서 고민했던 부분과 깨닫게 된 점을 말씀드리겠습니다.

디자인 시스템은 단순히 디자인 스타일 가이드를 뜻하는 것이 아닙니다. 디자인 스타일 가이드뿐 아니라 앞서 설명드렸던 기본 원칙과 컴포넌트, UX 가이드는 물론 더 크게는 브랜드에 대한 디자인 철학까지 포함돼야 한다고 생각합니다. 

또한 디자인 시스템에 무엇을 담고 제공할지 보다는 누가 어떠한 방식으로 써야 하는지에 대한 고민이 선행돼야 합니다. 구성원들이 사용하지 않는 디자인 시스템은 무용지물입니다. 어떤 구성원이 어떻게 사용해야 하는지부터 고민해야 합니다. 

그리고 디자인 시스템은 항상 좋은 퀄리티를 유지해야 합니다. 시스템의 완성도가 좋지 못하면 구성원은 외면하게 됩니다. 만약 구성원 중 누군가가 제공한 디자인 가이드나 UX 가이드를 무시하거나 변경해서 사용한다면 한 번쯤 완성도에 대해 고민해 보시기 바랍니다. 디자인 시스템의 높은 완성도가 구성원 모두가 꼭 사용해야 하는 이유가 될 수 있습니다.

마지막으로 디자인 시스템을 운영할 때는 업데이트와 구성원에게 공유하는 것이 중요합니다. LDS는 일정한 주기로 업데이트하면서 공식 웹사이트와 LDS 앱을 활용해 배포하고 있습니다. 웹 사이트에서는 앞서 말씀드렸던 기본 원칙과 스케치 디자인 라이브러리, UX 가이드라인을 제공하고 앱에서는 실제 컴포넌트가 동작하는 화면과 코드를 제공합니다. 현재 LDS 웹 사이트는 사내로만 오픈됐는데요. 추후 외부로도 오픈하기 위해 준비하고 있습니다.

구성원들이 디자인 시스템에 보다 쉽게 접근할 수 있도록, Slack 채널이나 메일에서 자주 접수되는 구성원들의 질문을 모아 'LDS Story'라는 캐주얼한 카툰을 만들어 주기적으로 공유하고 있습니다.

마치며

디자인 시스템에서 약 1년간 레거시를 정리한 내용을 바탕으로 이전보다 일관성 있는 UI 컴포넌트와 UX 가이드를 반영해 사용자 여러분께 새로운 LINE 앱을 선보일 수 있었습니다. 

긴 글 읽어주셔서 감사합니다. 아래에서 발표 영상도 확인하실 수 있습니다.