디지털 전환기, 제조 산업에서 디자인 시스템 적용에 관하여

들어가며

오늘날 많은 새로운 기술들이 산업 전반에 적용되어 디지털 전환기를 맞이하며 많은 것들을 바꿔가고 있습니다. 이러한 흐름에 따라 제조산업에서도 많은 변화가 이루어지고 있습니다. 특히, 클라우드 시스템을 기반으로 데이터 레이크가 구성된 플랫폼 안에서의 서비스들은 시스템의 연결을 통해 데이터를 획득, 분석하여 통합 관리합니다. 이를 통해 정확하게 분석된 데이터들을 실시간으로 업무에 제공하고 활용하기 위한 시도가 이루어지고 있습니다.

그림 1. 아마존의 데이터 레이크 개념

 

이처럼 기존에 여러 개의 기능을 합쳐 하나의 서비스에서 여러 업무를 가능하게 하는 형태(Monolithic)가 아닌, 기능 단위로 서비스를 분화(Microservice)하여 업무에 필요한 서비스들을 엮는 형태로 제조업 시스템의 아키텍처가 변화하고 있습니다.

그림 2. 단일 서비스 기반의 시스템 스트럭쳐와 마이크로 서비스 기반의 시스템 스트럭쳐

 

따라서, 클라우드 시스템을 기반으로 마이크로 서비스화된 기능들을 엮어 실시간으로 데이터를 업무에 활용할 수 있는 업무 단위의 서비스 애플리케이션 개발이 요구됩니다.

이렇게 개발된 서비스 애플리케이션 간의 연결은 클라우드 플랫폼 안에서 더욱 복잡한 단위의 업무를 수행할 수 있게 됩니다. 이 글에서는 오늘날 클라우드 플랫폼이 적용된 제조산업의 변화를 맞이하여 디자이너가 고려해봐야 할 것에 대해서 이야기하고자 합니다.

 

클라우드 플랫폼 기반 제조산업에서의 디자인 시스템

클라우드 기반 플랫폼이 적용된 제조산업에서 업무 단위의 다양한 애플리케이션 서비스의 개발이 필요해 지고 있습니다. 이에 따라 시스템의 아키텍처를 기반으로 여러 기능을 담아 애플리케이션을 만들고 이를 위해 제공해오던 System-oriented UI에서 클라우드 플랫폼 내에서는 마이크로 된 서비스를 중심으로 하는 Task-driven UI로의 전환이 이루어질 것으로 예측됩니다. 따라서, 다양한 마이크로 서비스들의 통합을 용이하게 할 수 있는 디자인 시스템의 적용을 고려해 볼 필요가 있습니다.

디자인 시스템이란 애플리케이션에서 자주 사용되는 컴포넌트 디자인, 컴포넌트들의 구성인 모듈을 설정함으로써, 클라우드 기반 제조산업에서 애플리케이션 개발 시, 개발을 빠르게 할 뿐만 아니라 앱 간의 일관된 경험을 제공할 수 있게 합니다.
(디자인 시스템에 대한 자세한 설명은 <디자인 시스템 1편 - 디자인 가이드/디자인 시스템은 왜 필요한가>를 참고해주세요.)

디자인 시스템을 도입, 설계, 적용하는 데에는 여러 단계가 있지만, 특별히 업무 중심의 서비스 애플리케이션의 개발을 위해 중요하게 고려해야 할 두 단계를 소개합니다.

 

1. Functional Patterns

Functional Patterns는 서비스 애플리케이션들에서의 사용자의 목적을 이루기 위해 하는 빈번한 행동 패턴을 찾아 사용자가 이를 위한 컴포넌트, 모듈, 콘텐츠 구성, 기능 등에 적용이 가능하도록 하는 것을 의미합니다. Functional Pattern을 찾는 것은 업무 중심의 서비스 애플리케이션에서 사용자의 핵심 업무 패턴을 찾고 이를 기반으로 시스템을 구성한다는 점에서 중요한 단계로 고려될 필요가 있습니다.

컴퓨터를 사용하는 대부분의 업무는 [데이터의 입력 > 정보 확인 > 분석에 따른 액션]의 구성을 기반으로 되어있으며, 사용자는 이러한 패턴을 반복하고 있습니다. 컴퓨터를 주로 사용하는 제조산업에서도 같은 행동 패턴을 보입니다.

클라우드 플랫폼 안에서 서비스들은 데이터 레이크를 기반으로 입력된 데이터들이 실시간 분석을 통해 사용자에게 다양한 형태로 제공될 것입니다. 때문에 데이터를 입력받거나, 입력하는 방식, 이에 대한 결과를 보여주는 방식, 그리고 마지막으로 사용자가 어떤 식으로 업무를 진행하거나 액션을 취할 수 있는지에 대한 고민이 중요합니다.

따라서 디자인 시스템 설계 시, 데이터가 입력되는 방식과 그 결과에 대한 판단, 그리고 이에 따른 액션을 빠르고 효율적으로 할 수 있게 하는 과정이 필요합니다.

이 관점으로 관찰조사를 통해 실무자가 현재 입력, 정보의 분석, 조치를 위한 패턴에 구체적으로 어떤 컴포넌트들을 사용하는지를 면밀하게 확인하고, 어떤 컴포넌트들을 어떻게 효율적으로 배치할지에 대한 고민 할 수 있습니다. 이는 모듈, 콘텐츠 구조 등을 설정하여 사용자들이 여러 새로운 서비스를 사용 시에 서비스의 목적을 정확하고 빠르게 성취하는 데에 도움이 될 수 있습니다.

 

2. Perception Patterns

Perceptional Patterns는 색과 모양 등등의 시각적 요소의 인지를 통해 사용성을 돕습니다. 업무 시 행동 패턴을 획득하고 이를 위한 컴포넌트들이 정리(Functional Patterns)되었다면, 이 컴포넌트들을 어떻게 시각적으로 효율적으로 표현할 수 있는지에 대해 고민하여 정리하는 단계입니다. 먼저, 제조산업의 사용자들이 주로 활용하는 업무 패턴인 [데이터의 입력>정보 확인>분석에 따른 액션]을 바탕으로 주요하게 사용되는 컴포넌트표현에 대해 정리했습니다.

데이터를 입력할 시 주요 활용되는 ‘인풋 박스(텍스트 필드)’에서는 입력이 가능한 상태를 명확히 표현하는 것이 중요합니다. (이러한 룰은 Google Material Design 등 제너럴 한 컴포넌트를 다루고 있는 디자인 시스템에서도 주요하게 표현되어 있습니다.) 이러한 시각적 표현이 데이터 테이블이나 리스트 등과 함께 쓰였을 때 선 혹은 면의 요소가 과도하여 그 기능이 모호해 보이지 않도록 컴포넌트의 선/면의 표현 등을 테스트하여 결정해야 합니다.

또한 제조산업에선 많은 양의 정보를 효율적으로 정리 및 확인을 위해 데이터 테이블을 빈번하게 사용합니다. 그렇기에 정보를 효율적으로 보여주는 표현에 대한 고민이 필요합니다. 헤더와 하위 내용을 명확하게 구분 지어 정보 파악을 쉽게 하거나, 테이블의 행이 많은 경우 테이블 행에 지브라 패턴 즉, 첫 번째 행 이후 한 행씩 건너뛰어 배경에 미색 컬러를 반영하여 한눈에 행을 구분하도록 하면 쉽게 탐색하기 좋습니다.

마지막으로, 정보들을 통해 최종 기능을 실행하는 액션 버튼에서는 해당 화면에서 사용자가 어떤 액션이 제일 주요한 위계 인지를 한눈에 파악할 수 있어야 합니다. 버튼이 가지고 있는 속성을 그룹화하여 위계를 분류하고 시각적으로 이를 구분 지어 표현해야 합니다. 또한 액션이 반복되는 경우, 이러한 액션 버튼이 같은 위치에서 반복되면 사용자는 쉽게 학습할 수 있습니다.

그림 3. 액션 버튼의 다양한 위계

 

이러한 과정에서 기존의 컴포넌트에 대한 인지적 분석이 함께 이루어진다면 새로운 서비스 애플리케이션 내에서 기존 실무자들이 적응을 빠르게 하고 불편함을 최소화할 수 있습니다. 또한 최소한의 러닝 커브로 빠르게 업무에 적응할 수 있을 뿐만 아니라, 클라우드 플랫폼 내에 여러 서비스 애플리케이션 간의 통합된 컨텍스트를 제공하여 업무의 효율성을 높여줄 수 있습니다.

 

마치며

제조산업에서 데이터레이크 기반 클라우드플랫폼 안에서 많은 업무 중심의 애플리케이션 서비스들이 만들어질 것으로 예측됨에 따라 이를 효율적으로 하는 방법이 많이 시도될 것으로 예상됩니다.
디자인시스템은 브랜딩을 위해 비주얼적인 언어를 중심으로 만들어지고 있는 측면도 있지만, 제조산업에서는 실제 사용자 중심에서의 패턴과 그들에게 익숙한 컴포넌트들을 분석하여 고려할 필요가 있습니다.

사용자의 업무 분석을 기반으로 제작되는 디자인 시스템은 사용자에게 새로운 경험을 제공할 수 있도록 도울 수 있을 것입니다. 이러한 디자인 시스템이 적용된 UI의 장점은 아래와 같습니다.

• 빠르게 애플리케이션 설계가 가능하여 확장이 용이 (Agile, Lean, Scalability, Expandability)

• 다양한 앱 간의 일관된 업무 경험을 제공 (Consistency, Coherency)

• 기존 사용자들도 쉽게 적응할 수 있고 애플리케이션 간의 러닝 커브가 낮아 업무의 표준화 측면에서의 손실을 최소화 (Performance Gap)

궁극적으로는 제조산업에서 사용자의 향상된 경험을 제공함으로써, 업무 효율이 향상될 것으로 기대해 볼 수 있습니다.

감사합니다.

 

* 이 글은 박나영님과 함께 작성하였습니다. 또한 글 쓰는데 도움을 주신 분들께 감사합니다.

 

* 이 글은 Minwoo Kim의 브런치 에서도 보실 수 있습니다.

 

 

참고자료

BuildingDesignSystems,SarrahVesselovandTaurieDavis,2019
DesignSystems,AllaKholmatova,2017
그림1 : https://aws.amazon.com/ko/big-data/datalakes-and-analytics/what-is-a-data-lake/?nc1=f_cc
그림2 : https://www.redhat.com/ko/topics/microservices/what-are-microservices
그림3 : https://material.io/components/buttons/