라인은 다양한 국가에서 19개의 언어로 제공되는 서비스입니다. 더 많은 국가에서 다채로운 서비스를 제공하게 되면서 프로덕트 디자이너들은 비슷한 컴포넌트들을 여러 번 디자인하게 되고, 반복적인 커뮤니케이션 리소스가 발생하며 점차 불필요한 레거시가 쌓여가는 경험을 하게 되었습니다.
"각국의 라인 디자이너들이 사용자에게 동일한 라인 디자인의 가치와 원칙을 전달하는 시스템을 만들자"라는 취지에서 LINE Design System 프로젝트가 시작되었습니다.
Efficiency, Good Design, High Standard라는 세 가지 목표를 가지고 프로젝트를 시작했습니다. 효율성, 좋은 디자인, 높은 완성도라는 어쩌면 평범하지만 어려운 목표를 향해 LINE Design System 팀과 각국의 프로덕트 디자이너 모두 함께 고민하고 노력했습니다. 라인 디자인의 기본이 되는 LINE Design Principle을 선언하고, 디자이너가 실무에 바로 사용할 수 있는 Foundation Guideline, Components Library, 그리고 UX Guideline으로 이루어진 LINE Design System이 탄생하게 되었습니다.
그리고 드디어 2021년 11월, LINE Design System을 세상에 소개합니다.
LINE Design Principle
라인 서비스를 통일된 디자인 언어로 일치시키기 위해 라인 디자인의 기본이 되는 공통의 가치와 원칙 6가지를 정했습니다.
첫 번째 원칙 'WE ≠ USERS : 우리는 사용자가 아니다.'를 통해 프로덕트 디자이너들이 스스로 사용자를 대표한다 가정하는 것을 경계합니다. LINE의 프로덕트 디자이너는 매번 다른 과제를 해결하고, 본인이 잘 알고 있는 분야라 해도 명확한 데이터 근거를 바탕으로 프로젝트를 진행합니다.
또한, 라인의 핵심 가치는 사람들의 친밀한 커뮤니케이션인 만큼 'CHAT FIRST : 라인은 대화를 최우선으로 고려합니다.'라는 메시지를 바탕으로 사용자의 대화 경험을 가장 중요하게 다루도록 했습니다. 진행하는 모든 프로젝트에서 사용자의 커뮤니케이션이 더욱 강화되는지, 그렇지 않은지를 고민하며 진행합니다.
일관된 사용자 경험을 제공하는 34개의 라인 서비스
라인은 LINE POINTS, LINE TAXI, LINE Bank등 전 세계에 34개의 서비스를 제공하고 있습니다. 라인 글로벌 패밀리 서비스는 각각 서비스에 따라 비즈니스 방향이 다르고 독립적이기에 좀 더 유연한 시스템을 제공할 필요가 있었습니다.
LINE Design System은 라인 메신저를 위한 LINE Design System for Messenger(이하 LDSM)와 글로벌 패밀리 서비스를 위한 LINE Design System for Global family service(이하 LDSG)로 나누어 시스템을 구축했습니다.
라인 메신저의 디자인 시스템은 라인 디자인의 중심이 되는 Foundation과 UI Component로 통일된 디자인 언어를 만드는 것에 중점을 둡니다. 라인 글로벌 패밀리 서비스의 디자인 시스템은 패밀리 서비스에 대한 일관된 사용자 경험을 위한 가이드라인을 제공하는 것을 목표로 하고 있습니다. 웹 기술 기반의 성격을 가진 LDSG는 각 국가별 담당 디자이너와 디자인 시스템 팀이 협업하여 유연하게 대응하며 라인 디자인 기본 원칙을 지킬 수 있도록 합니다.
LINE Design Foundation
표준화된 컬러, 아이콘, 그래픽 등 Design Foudation을 제공하여 일관성 있는 브랜드 경험을 만들어 나가고 있습니다.
디자인 시스템 구축 전에는 명확하지 않은 컬러 가이드로 인해 담당 디자이너마다 미묘하게 다른 컬러를 사용하는 일이 발생했습니다. 라인의 아이덴티티 컬러인 포레스트 그린을 지정하고 가장 잘 매칭되는 프라이머리 컬러 30종과 자유도 높게 사용 가능한 레인보우 컬러 가이드를 제작했습니다.
프라이머리 컬러는 라인 디자인의 기본이 되는 컬러이기에 코드로 만들어 규제하고 있습니다. 만약 디자이너가 프라이머리 컬러를 적용해야 할 부분에 다른 컬러를 사용할 경우 개발 과정에서 경고가 발생할 정도로 강력하게 적용하고 있습니다.
일관성 있는 디자인 언어를 위해 아이콘 라이브러리를 구축해 200개 이상의 아이콘을 SVG와 AI 형식으로 제공하고, 서비스 설명이나 기능 설명을 위한 픽토그램 화에 대한 가이드도 제공합니다.
라인 내 그래픽 일러스트에 있어서도 각 국가별 디자이너들이 일관된 톤 앤 매너로 제작할 수 있도록 얼굴의 표정이나 비율에 대한 가이드와 각 성별, 인물별 비율 등을 포함한 그래픽 라이브러리를 제공합니다. 다양한 문화권을 아우르며 모든 연령대가 공감할 수 있도록 밝고 친근한 분위기로 제작하고 있습니다.
싱글 컴포넌트에서 개발 가이드까지 한 번에
LINE Design System은 프로덕트 디자이너가 컴포넌트를 빠르게 찾고 가이드를 활용하며 디자인에 적용하여 개발 가이드를 전달하는 과정을 최소한의 동선으로 제공하고자 합니다.
각 컴포넌트 페이지 상단에서 바로 Figma 리소스 페이지로 이동할 수 있으며 컴포넌트의 구조, 유형, 사용 예시를 통해 컴포넌트 사용법을 숙지할 수 있습니다. (보안 이슈로 인해 Design Library와 다운 가능한 리소스, 개발 컴포넌트 등은 외부 공개하지 않습니다.)
각 컴포넌트는 코드를 포함한 개발 가이드가 함께 제공되어 개발과 디자인 사이의 반복적인 커뮤니케이션 리소스를 발생시키지 않습니다.
사용된 컴포넌트가 가이드라인에 따라 적절하게 사용되었는지 프로덕트 디자이너가 확인하고 싶은 경우, LINE Design System 팀에 문의하여 검토를 의뢰할 수 있으며, 새로운 스펙 및 디자인 타입의 컴포넌트가 추가되어 한다고 생각하는 경우에도 LINE Design System 팀에 요청할 수 있습니다.
컴포넌트는 초기에 디자인 시스템의 기본 원칙에 근거해 디자인되어 제공되지만, 각 서비스 담당 디자이너가 활용하며 다시 디자인 시스템과 함께 논의하여 발전시키는 구조이기에 지속적인 커뮤니케이션 과정을 매우 중요하게 다루고 있습니다.
적용된 디자인 시스템 둘러보기
Case studies를 통해 라인 서비스의 최신 디자인과 함께 컴포넌트가 적용된 영역을 확인할 수 있습니다. 이런 과정을 통해 프로덕트 디자이너는 본인의 서비스뿐만 아니라 라인 디자인의 전체적인 방향을 둘러볼 수 있으며, 각 서비스에서 컴포넌트를 응용한 결과물을 확인하고 유연하게 본인의 프로덕트에 적용할 수 있습니다.
각 서비스에서 디자인 시스템을 적용하며 겪은 이벤트와 프로덕트 디자이너의 생각을 담은 글들 또한 앞으로 업로드될 예정입니다.
앞으로 LINE Design System은?
인터랙션 디자인 가이드라인 제작, 웹 컴포넌트 제공, Design System Application 업데이트 등 LINE Design System은 기획 개발을 아우르는 모두를 위한 시스템으로 나아갈 예정입니다.
앞으로도 글로벌 메신저 플랫폼의 디자인 언어를 만들고 이끌어나가는 LINE Design System이 될 수 있도록 최선을 다하겠습니다. 많은 관심 부탁드립니다!
