BP_LG ES Design System

Project Overview

고객사명

LG Energy Solution

프로젝트 수행년도

2023 ~ 2024

수행역할

UX Consulting / UX design / UI Design

LG Energy Solution (이하 LG엔솔)의 직원경험 향상을 위해 각 시스템들의 일관성과 사용성을 제공할 수 있도록  전사 공통의 UX 거버넌스와 Design Guideline, 재사용 가능한 Figma 기반의 Design Asset 그리고 Design이 반영된 Front-end Code Asset을 제공하는 Design System 구축

Key Insights

2023년 LG엔솔은 임직원들이 사용하는 사내 업무시스템들이 가진 문제점들을 개선하고자 하는 니즈가 강하였습니다. 특히, 거의 대부분의 업무시스템들이 서로 다른 사용방식, 같은기능임에도 불구하고 다른 방식으로 처리되는 UI, GUI 디자인등으로 시스템들의 일관성이 많이 부족한 상태였습니다. 그래서 이를 해결하기 위해 전사 공통의 Design System을 구축하는 것이 가장 우선적인 과제였습니다.

Design System을 위해 먼저, 자주 사용하는 제조 시스템들의 UI를 분석하고 개선점을 도출후 시안 프로토타이핑을 거쳐 전사적인 UX 정책을 마련하였습니다.

도출된 UX 정책에 따라 CRUD를 처리하는 Flow Pattern도 설계하고 그에 필요한 Page UI Pattern과 UI Component의 세부적인 가이드와 Asset을 제작하였습니다.

그리고, 이런 Design Guideline은 개발에서도 동일한 시각적언어로 활용 될 수 있도록 Front-end Code Asset 제작되었고Design Guideline과 함께 Code Live Preview가 가능한 Site 형태로 완성되었습니다.

Design System의 구성

전사공통의 UX 원칙이 시각 요소들의 공통 규칙인 Foundation (Style)으로 정의되고
그것이 시스템을 구성하는 최소단위 Unit인 Atomic Component 들에 일관된 Style 원칙의 언어로 반영되었습니다.
그리고 UI Component들이 용도에 맞게 조합된 화면 UI Pattern 도 제공됩니다.

5가지 디자인원칙

심미성 Aesthetic

시각적으로 아름답고 정돈된 디자인을 통해
사용자들의 심리적인 사용성과 신뢰도를 높입니다.

명확성 Clarity

형태, 컬러 등의 대비를 통해 모호한 시각적 표현을 최소화하고, 사용자가 올바르게 이해하고 행동할 수 있는 명확한 디자인을 제공합니다.

일관성 Consistency

시스템 전반에 걸쳐 일관된 디자인 스타일을 적용하여 통일된 아이덴티티 및 사용자 경험을 제공합니다.

효율성 Efficiency

군더더기 없는 간결한 디자인을 통해 필수 정보를 시각적으로 차별화하고 강조합니다.

가독성 Readability

사람의 시지각적 특성을 반영하여 적절한 크기의 폰트·컬러·자간·여백 등을 사용합니다.

Component

시스템 전번에 재사용될 Component들을 최소단위의 Atomic Component 에서 부터, 다양한 Atomic Component 들이 조합되어진 Combination Component로 분류하여 용도에 맞게 활용 가능하도록 Asset화 하고, Guideline을 제시 합니다.

Design Token

Light / Dark 2가지의 Design Theme 제작 요건을 해결하기 위해
가장 효율적으로 적용/수정가능하도록 Color들을 2단계로 변수화하여 Design Token으로 정의하였습니다.

정의된 Color들은 목적과 용도에 맞게 Naming 되어 각각의 Asset에 반영되었습니다.

① Main Color를 Global Token으로 정의

LG 에너지솔루션의 Identity 컬러를 기준으로 Design System에 사용될 강조색, 보조색, 회색조의 명도별 Color Palette를 구성합니다.
Palette의 Color에 명칭을 부여한 Global Token Color를 정의 합니다.

② Role Token 정의 후 값을 Global Token Color 로 매칭

Color를 적용할 배경(BG), 컨텐츠(Text, Icon), 외곽선(Border) 들을 속성/중요도/상태등에 따라 분류한뒤 각각의 역할에 명칭(Role Token Name)을 정의합니다.
그리고 정의된 Role Token들에 앞서 정의된 Global Token Color들을 값으로 매칭합니다. 이때, Theme 모드별로 각각 매칭을 할 수 있도록 합니다.

③ Apply Role Token value to each Light / Dark Theme mode

Role Token을 Component 및 Page Template에 적용합니다.
Light / Dark 모드별 구분된 Role Token을 각 테마모드에 맞게 UI 요소들에 적용하여 테마전환시 각각 정의된 Role Token에 맞게 Global Color들이 매칭 될 수 있도록 합니다.