brunch

You can make anything
by writing

C.S.Lewis

by 디디디 May 28. 2021

디자인 시스템의 육하원칙- 1. 왜?

'시스템 사고'의 관점에서 바라본 디자인 시스템의 궁극적인 목적

시리즈 소개


이 글은 디지털 디자인 브랜드 'Data Driven Design'의 기획 콘텐츠, '디자인 시스템의 육하원칙', 첫 번째 에피소드입니다. 디자인 시스템 도입에 장벽을 느끼는 실무자들에게 도움을 주고자 하며 총 4개의 에피소드로 구성되었습니다.



1. 왜?

2. 누가, 언제?

3. 무엇을, 어떻게?- 01

4. 무엇을, 어떻게?- 02

4. 그래서?



EP1 왜?: 목차

0. 왜?: 프롤로그

1. 디자인 시스템의 정의와 실체.

2. 잠깐, 시스템은 무엇인가?

3. 시스템의 딜레마

4. 디자인 시스템을 위한 환경







0. 프롤로그


'?'라는 질문은 항상 중요합니다. 디자인 시스템의 사용자프로덕트 팀 전체라는 사실을 잊어서는 안 됩니다. UI를 디자인하는 규칙 또한 디자인의 대상이 되어야 마땅하다는 게 시스템적 관점입니다.


디자인 시스템의 궁극적인 기대효과를 경제적 관점에서 생각해볼 필요가 있습니다. 막연하게 개인과 조직이 얼마나 효율. 창의적으로 사고하는지 추적하는 것은 어렵습니다. 하지만 우리는 이미 역사 속에 훌륭한 과학자, 예술가 심지어 운동선수들이 그들만의 시스템을 통해 올바른 결정과 루틴을 형성하여 목적을 달성하는 과정을 간접적으로 지켜보았습니다.

이미지 출처 Disrupt Design, 디자인 시스템이 잘 정착되기 위해서는 개인. 조직의 시스템 사고가 요구됩니다.


다양한 산출물들이 디자인 시스템 내에 있지만 결국 시행착오 비용최소화하고  좋은 결정을 내리기 위한 피드백 루프(feedback-loop)를 형성하는 것이 궁극적 목표입니다. 따라서 ""라는 질문은 IT 조직이 제품을 빌딩하기 위한 효율적.창의적 사고방식은 무엇인가? 그리고 이를 달성하기 위한 산출물은 무엇인가?라는 방향으로 귀결돼야 합니다.



1. 디자인 시스템의 정의와 실체


디자인 시스템은 딱히 이거라고 정해진 정의는 없습니다. 제가 10초 안에 설명해야 한다면 "사용자 경험을 효율.일관성 있게 발전시키기 위한 구성요소들의 집합과 그 관계를 정의하는 시스템"정도라고 얘기합니다. 다른 전문가들은 어떻게 정의했을까요?


런던 출신의 UX 디자이너 Alla Kholmatova는 본인의 저서 'Design Systems'에서 다음과 같은 정의를 제시했습니다.

디지털 프로덕트의 목적을 전달하기 위해 상호 연결된 패턴들과 실행 방식(practices)들이 일관성 있게 조직된 집합이다.


"Design Systems" by Alla Kholmatova(좌), "Building Design Systms" by Sarrah Vesselov, Taurie Davis



Sarrah VesselovTaurie Davis의 공동저서 'Building Design Systems'에서는 디자인 시스템의 목적에 대해서 다음과 같이 명시했습니다.

명료하게 정의된 시스템을 통해 디자이너와 엔지니어들은 요소들을 재생산하고 해결책을 재발명하는 과정 대신 유저들의 니즈를 해결하기 위한 노력에 온전히 집중할 수 있다.


위의 설명 모두 훌륭한 정의라고 생각합니다. Alla Kholmatova의 정의가 포괄적이고 시스템적인 접근이라면 Sarrah VesselovTaurie Davis는 디자인 시스템의 산출물과 시스템 사용자들의 업무환경을 고려한 직접적인 설명이었습니다.


그럼 여러분이 생각하는 디자인 시스템과 그 산출물들은 무엇인가요? (댓글로 달아주셔도 좋습니다!)



디자인 시스템의 산출물들은 무엇인가?


제가 먼저 답해보자면 다음 4가지가 있습니다.

보이는 것의 디자인 가이드. (시각 패턴, 타이포그래피, 색, 컴포넌트, 템플릿)

보이지 않는 룰의 가이드. (네이밍 룰, 계층구조, 데이터 모델)

가이드에 의거한 코드 모듈 (각 시스템 구성요소들과 매칭 되는 코드들)

시스템의 업데이트 프로세스 (서비스 업데이트, 리팩터링에 필요한 협업 프로세스)


위의 자세한 내용은 다음 에피소드들에서 다룰 예정이며, 지금은 만약 여러분이 위 질문에 답하는데 모호함이 있었거나 제 답변과 차이가 있었다면 그 이유에 대해 얘기해보려 합니다.



2. 잠깐, 시스템은 무엇인가?


우리 주변에는 언어, 법, 국가 등 수많은 시스템이 있습니다. 왜 시스템이 존재하는가 하는 질문에 가장 단순한 답변은 불필요하게 반복되는 행동을 줄이기 위해 약속된(사회성) 무언가가 필요하기 때문이죠.


모든 언어는 문법, 어휘, 말하기 등 다양한 구성요소들이 상호작용하는 하나의 시스템이다


시스템의 실체는 몇 가지 문서로 설명이 불가능합니다. 사전이 언어의 구성요소들을 설명하고 있지만, 언어의 전부는 아닙니다. 법전은 법을 나타내는 멘탈 모델 중 하나이지만 입법, 사법, 행정부가 각자의 역할대로 이를 관리며, 국민들이 법 조항에 대한 피드백을 행사하여 법이 바뀌기도 합니다. 이 모든 구성요소와 그들 간의 상호작용 집합이 법이라는 시스템의 실체이죠.



그렇다면 시스템은 정말 무엇인가?


환경학자, 멘탈 모델, 경영 전문가들이 시스템의 속성들을 어떻게 설명하는지 살펴보겠습니다.


환경학자

미국의 환경학자 donella h. meadowsThinking In Systems에서 내린 정의는 다음과 같습니다.


시스템은 목적을 성취하기 위해 일괄되게 조직된 구성 요소들의 상호 연결된 집합이다. 시스템은 단순히 부분들의 합 그 이상이며 적응성, 역동성, 목표 지향적, 자가 보존적인 행동들을 내포한다.


이미지 출처:https://laptrinhx.com/, 생태계의 각 구성요소들은 항상성을 유지하기 위해 상호작용한다.


얼핏 보면 위의 디자인 시스템 정의와 비슷해 보이는데 저자가 환경 학자답게 '생태계(ecosystem)'를 떠올리는 듯한 자가 보존적인 특징들을 설명하였습니다. 추가 설명으로..


시스템 내의 많은 상호 연결성은 정보의 흐름을 통해 작동한다. 그 정보들은 시스템을 하나로 엮고 어떻게 작동하는지를 결정하는 데 중요한 역할을 한다.


위의 설명은 건물의 냉. 난방 시스템처럼 아주 간단한 시스템부터 항상성을 보존하는 생태계의 기능들을 떠올리기도 합니다. Donella h. meadows의 관점은 시스템의 요소들이 목적을 달성하기 위한 상호작용과 그 관계어떻게 정립하는가에 중점을 두었습니다.




멘탈 모델 연구자

반면 Marcus P. Dawson은 멘탈 모델 관점에서 시스템 사고를 바라보았으며, 그 창의성에 대한 논의를 끌어냈습니다. 보통 UX 디자이너가 사람들에게 이미 친숙한 인지 방식을 차용할 때 멘탈 모델을 설계한다고 얘기합니다.

멘탈 모델은 우리가 환경을 인지하고 반응하는 데 영향을 주는 무수한 아이디어, 일반화 혹은 사진, 이미지까지 될 수 있다.

Marcus는 인간이 전체를 한 번에 인지하는 능력이 부족하기 때문에 멘탈 모델이 매우 유용하면서도 한편으로는 우리의 즉각적 인지능력이 대상을 깊게 이해하는 능력을 제한시킨다는 한계점을 얘기합니다. 이러한 한계점은 두 가지 사고방식이 상충될 때 더욱 극명하게 드러납니다.


선형적(Linear) 사고 vs 수평적(Lateral) 사고

선형적 사고는 원인-결과, 문제-해결책을 1차원적 관계에서만 찾으려는 사고방식을 얘기합니다. 예를 들어 하루에 6시간을 일하는 농부가 수확량을 2배로 늘리기 위해 12시간을 일하기로 결정했다면(체력, 기술이라는 2,3차 변수가 있음에도 불구하고) 그것은 선형적 사고의 결과입니다. 반대로 수확량에 영향을 주는 요소들을 모두 도출하고 그 관계를 파악하면서 문제를 해결하려는 접근이 수평적 사고입니다.


선형적 사고가 문제-해결책의 관계를 단계적으로만 살피는 반면 시스템 사고는 선택지의 모든 루트 간에 관계를 파악한다.


이러한 사고의 충돌은 디자이너 혹은 개발자들도 흔히 겪는 문제입니다. 특정 화면의 시안을 보고 "이 부분이 좀 더 강조되었으면 좋겠는데.." 혹은 "이 기능의 행동 유도를 더 적극적으로 하면 어떨까"라는 피드백을 바로 수용해서 해결되는 경우도 있지만, 어떤 경우는 복잡도만 높아지는 역효과가 생길 수 있습니다. 선형적 사고가 지나치게 반영된 디자인은 서비스 레거시의 가장 큰 원인 중 하나이기도 합니다.



이미지 출처 invision, 선형적 사고에 의한 피드백과 수평적 사고에 의한 피드백



Marcus는 이러한 현상이 인간이 멘탈 모델에 지나치게 의존할 때 발생한다고 보고 있으며 이를 극복하기 위한 시스템 사고의 특징을 다음과 같이 설명합니다.


상호 연결성 (interconnectedness): 구성 요소들의 관계 파악

합성 (synthesis): 구성 요소들의 결합

발현 (emergence): 합성에 의해 발생한 긍정적 결과

피드백 루프 (feedback loop): 이전 사고의 결과가 다음 사고에 반영


즉, 위에 언급했던 농부의 사례를 예로 다시 들자면 수확량에 영향을 주는 모든 요소들상호 연결성을 파악하고 합성반복하는 과정에서 새로운 수확 방법이 발현되는 것이 시스템 사고의 접근방식입니다.




경영인의 관점

경영 컨설팅 업체 시스템웍스의 임영채 대표는 본인의 저서 시스템 사고로 경영하라! 에서 시스템은 "일이 되게 하는 메커니즘이며 목적, 상호작용, 구성요소로 이루어져 있다"라고 설명합니다. 여기까지 보면 위의 정의들과 거의 비슷하지만 경영인답게 경제적 관점에서 시스템 내에 서로 상충할 수 있는 관계들을 설명합니다.


효율성 vs 효과성

먼저 효율성효과성의 충돌입니다. 고객을 만족시키기 위한 대부분의 액션들은 비용을 증대시키며 그중에는 당장 효과를 증명하기 힘든 것도 있습니다. 하지만 모든 의사결정을 효율로만 결정한다면 그 기업은 앞으로 전진하기 힘듭니다.

효과성은 결과의 임팩트, 효율성은 가성비에 중점을 둔다


부분 최적화 vs 전체 최적화

두 번째로 부분 최적화전체 최적화의 충돌입니다. 기업 내에서 각 부서 간에 충돌되는 KPI로 비생산적인 논의가 장기화하는 근본적인 이유 중 하나인데 결국 최종 의사결정자가 이문제를 조율하는데 실패한다면 자기만 생각하고 계속 증식하는 암적인 부서가 생길 수 있습니다.

전체 프로세스의 최적화는 세부 과업들의 상호작용으로 정해지며, 각자의 목적에만 최적화된 기능의 합과 다르다.


경제적 관점에서 이러한 상충이 생기는 이유는 아주 명확합니다. 가용할 리소스(시간, 돈)가 유한하기 때문이죠. 디자인 시스템의 경우에는 어떤 리소스가 있을까요. 물론 시스템을 만드는 팀의 리소스도 있지만, 이를 마지막에 사용하는 사용자의 인지 비용도 제한되어있습니다. 따라서 단선적 사고에 지나치게 의존해 필요할 것 같은 모든 요소들이 추가되고, 강조해야 할 모든 것에 힘이 들어가는 순간 효율-효과, 전체-부분의 균형은 깨지기 마련입니다. 그리고 그 결과들을 번복하는 비용은 '아님 말고~'라고 치부할 정도로 간단치 않을 것입니다.



3. 시스템의 딜레마

우리는 일생 대부분의 시간을 단선적 사고에 의존하면서 살았기 때문에 어떤 실무자들에게는 시스템적 사고를 요구하는 것이 기존의 타성을 크게 거스르는 일일 겁니다. 또 어떤 이들은 불필요한 리소스를 줄이고자 디자인 시스템 도입을 주장하지만 동시에 리소스가 부족하다는 이유로 반대하기도 합니다. 그리고 시스템의 규율성지나치게 높은 경우 오히려 족쇄처럼 느껴질 가능성도 있습니다.


시스템의 속성(엄격-유연, 모듈화-통합화, 중앙적-분산적)들에 trade-off가 발생할 수밖에 없습니다.



그럼에도 불구하고 저는 디자인 시스템을 최대한 빨리 도입해야 한다고 주장합니다. 더 극단적으로 얘기하자면 여러분이 인지하지 못했을지라도 이미 시스템은 시작되었다고 볼 수 있습니다. 다만 팀 내에서 공론화, 체계화를 어떻게 시작해야 할지 불명확한 불안감과 이미 널리 알려진 모범사례들의 수준을 한 번에 이루려는 조바심이 디자인 시스템의 궁극적 도입을 방해한다고 생각합니다.




4. 디자인 시스템을 위한 환경


그렇다면 디자인 시스템을 도입한다 건 정확히 어떤 의미일까요? 한 달 동안 모든 일정을 멈추고, 디자인 레거시를 다 뜯어고치며, 에어비앤비, 토스와 같은 모범사례 수준의 가이드를 딱! 하고 내놓아야 하는 걸까요? 만약 우여곡절 끝에 가이드가 준비되었다면 이미 진행 중인 개발 태스크에 바로 새로운 가이드를 적용해달라고 요구해야 할까요? 이에 대한 자세한 답변은 다음 에피소드에서 다룰 예정이며, 첫 번째 에피소드는 디자인 시스템이 잘 작동하는 환경과 그렇지 않은 환경에 대한 제 생각을 공유하는 것으로 마치려 합니다..


디자인 시스템이 잘 동작하는 환경

경영 의사결정자부터 수평적 사고가 가능한 경우

적어도 1분기 목표와 세부 과업 또는 kpi가 명시된 환경

실무자들 간의 작업물 서로 어떻게 연결되는지 노력하는 환경

의사결정의 피드백 루프가 가시적으로 드러나는 환경


디자인 시스템이 잘 동작할 수 없는 환경

경영 의사결정자의 단선적 사고에 의한 연속된 업무지시

희망 사항과 목표의 구분이 명확하지 않은 환경

실무자들 간의 각 작업물들이 부분 최적화에만 집중되어있는 환경

의사결정의 피드백에 연속성이 결여되는 환경






다음 에피소드: 언제, 누가? 에서 계속됩니다>>




Creat Your Business Value With Data Driven Design


https://dddesign.io/

k@dddesign.io


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari