brunch

라이킷 21 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 디디디 Jul 19. 2024

디자인 시스템의 육하원칙- 5. 그래서?

디자인 시스템을 활용하는 팀과 개인의 태도

시리즈 소개

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

1. 왜?

2. 언제, 누가?

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

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

4. 그래서?

0. 그래서?: 프롤로그

지난 글들에서 디자인 시스템을 육하원칙이라는 콘셉트하에 뜯어보았습니다. 이번 에피소드 ‘그래서?’에서는 이전 에피소드들의 요약과 디자인 시스템을 활용하는 팀에서 반드시 던져보면 좋을만한 질문의 문답으로 내용을 구성하려 합니다. 시리즈를 마무리하는 내용이기도 하지만 이 에피소드만으로 시리즈 전반적인 내용이 전달되었으면 하는 마음으로 글을 써봅니다.

1. 디자인 시스템 안에서 일한다는 것의 의미

이 글을 쓰는 시점인 2024년 7월, IT 제품팀에서 디자인 시스템을 운영한다는 것은 이제 선택이 아닌 필연적인 시대가 왔습니다. UX 방법론에 대한 이해가 상향 평준화된 요즘 결국 서비스를 개발하는 과정에서 필요한 다양한 의사결정의 기준들을 찾다 보면 결국 시스템 사고로 수렴할 수밖에 없으니깐요.

하지만 그동안 대학의 교육 과정, 업계의 관행 등으로 이를 거스르는 관성들이 여전히 존재합니다. 디자이너, 개발자가 순간적으로 느끼는 창작 욕구 혹은 개인적인 습관들 보다는 제품을 개발하는 과정에서 시스템의 어떤 구성 요소들을 합성하거나 조절할 것인지를 먼저 정하는 ‘선택’과 ‘조합’의 접근이 개발경험에서의 일관성을 지켜주고 불필요한 리소스 낭비를 예방해 줄 것입니다.

2. 요약 1: 왜?

첫 번째 에피소드 왜? 에서는 잠시 디자인이라는 단어를 잊어버리고 시스템 본연의 특성에 대해 다음과 같이 정리해 봤습니다.

각 구성원들은 서로 상호작용과 관계를 맺으면서 시스템의 항상성을 유지한다.

멘털 모델을 시스템과 동일시해서는 안된다. (국어사전과 한글은 다르다)

시스템은 선형적 사고보다 구성요소들의 관계를 파악하는 수평적 사고가 필요하다.

시스템 내에서 효율성과 효과성은 상충한다.

시스템 내에서 부분 최적화와 전체 최적화는 상충한다.

결론: 디자인 시스템을 논하기 전에 시스템의 구성요소들의 관계가 어떻게 시스템 목적에 기여하고 서로 발생할 수 있는 트레이드오프가 무엇인지

3. 요약 2: 누가? 언제?

두 번째 에피소드 누가? 언제? 에서는 디자인 시스템을 단계적으로 체계화하는 과정에서 각 포지션 간 협업해야 할 역할에 대해 다루어봤습니다.

디자인 시스템의 도입은 엄밀히 말하면 무에서 유를 창조하는 것보다는 이미 있는 요소들을 얼마나 체계화시키냐라는 개념에 더 가깝다.

이미 알려진 모범사례의 가이드를 한 번에 따라잡는 오류를 범하지 말고, 아토믹 디자인 관점에서 현재 우리 제품이 어느 단계까지 모듈화가 되었는지 점검하는 것이 선행돼야 한다.

디자인 시스템에서 요구되는 산출물들의 순서와 참여자의 부와 정을 미리 정하는 것이 좋다.

당연히 디자인 시스템을 처음부터 완성시킬 순 없지만 초반에 정립한 분류체계의 영향은 지속되기 때문에 서비스의 특성과 확장 가능성을 고려해야 향후 리팩토링 소요를 최소화할 수 있다.

이때 추상화와 포화상태의 개념을 제대로 이해하면 최적화된 분류 체계를 만드는데 도움이 된다.

4. 요약 3: 무엇을? 어떻게? - 01

세 번째 에피소드 무엇을? 어떻게? - 01에서는 디자인 시스템을 구성하는 세 가지 패턴 (인지적, 기능능적, 맥락적)들의 간략한 정의를 내려봤습니다.

특히 인지적 팬턴에 해당되는 디자인 토큰을 제품 개발 환경에 따라 어떻게 구성하면 좋은지를 예시를 통해 살펴봤습니다.

메터리얼 디자인의 MUI와 카본 디자인 시스템의 디자인 토큰이 다른 이유는 이들의 비즈니스 환경이 다르기 때문이다.

따라서 팀의 내. 외부 상황에 최적화된 디자인 시스템의 주요 원칙들을 세우고 앞으로 확장성에 가장 크게 영향을 미칠 토큰의 네이밍 컨세션과 계층구조를 초반에 정하는 것이 중요하다.

디자인 토큰을 개발환경에서 배포하는 방식은 변수화된 토큰을 스타일로 배포하는 방식(IBM carbon design system 방식)과 json으로 계층화된 토큰을 전역적인 context로 배포하는 방식(MUI 방식)이 있으며 각 장단점을 이해할 필요가 있다.

5. 요약 4: 무엇을? 어떻게? - 02

4번째 에피소드에서는 디자인 시스템의 ‘성장 시나리오’에 영향을 미치는 세 가지 요소 (제품의 성숙도, 가용 리소스, 확장 가능성)을 살펴보았다.

제품의 성숙도에 따라 디자인 시스템 도입이 기존 구성요소들을 리팩터링 하는 것에 가까운지 혹은 개발 과정에서 자연스럽게 시스템을 구축하는 것에 가까운지 결정됩니다.

제품에 특징과 팀의 상황에 따라 최적화된 시스템을 제로 베이스에서 구축할 것인지 기존 UI library를 활용할 것인지 가용 리소스를 명시할 필요가 있습니다.

제품의 확장 가능성에 따라 모듈화 혹은 빠른 스케일링 중 어떤 가치에 중점을 둔 디자인 시스템을 구축할지 방향을 정할 필요가 있습니다.

그리고 기능적 패턴을 이루는 두 가지 타입의 데이터 (속성과 변수)를 디자인 가이드에서부터 명시하여 개발단계까지 싱크 할 필요가 있습니다.

맥락적 패턴은 사용자 경험을 구성하는 기본 블록으로 여기에 매칭이 되는 복합 컴포넌트들을 모듈 화했을 때 다양한 시나리오에 대한 빠른 대응이 가능해진다. 비로서야 모든 것이 선택과 조합의 문제로 귀결된다.

6. 그래서? 던지는 질문들

생산성과 창의성은 상충하는가?

많은 사람들이 생산성과 창의성은 트레이드오프 요소라고 생각하는 경향이 있습니다. 생산성을 추구하는 과정이 지루하고 당장 번뜩이는 아이디어를 억누르게 되는 경우가 있기 때문이죠. 하지만 많은 역사적 사례는 생산성과 창의성은 땔 수 없는 관계라는 걸 증명했습니다. 잭슨 폴락은 본인의 단선적 사고로 선의 역동성을 '그린게'아니라 그리는 방식에 대한 시스템을 '고안'하고 이를 반복적으로 재활용, 응용함으로써 본인의 세계관을 대중들에게 각인시켰습니다.

Creativity is a habit, and the best creativity is the result of good work habits.

창의성은 습관이다. 그리고 최고의 창의성은 좋은 작업 습관에서 나온다.

by Twyla Tharp

Twyla Tharp는 발레와 현대 무용의 접점을 개척한 미국의 위대한 안무가입니다. 그녀는 자신의 저서 "The Creative Habit: Learn It and Use It for Life, "에서 창의력의 세 가지 포인트를 다음과 같이 요약했는데 저는 디자인 시스템에도 바로 적용할 수 있는 덕목이라 생각합니다.

Routine and Discipline (루틴과 원칙)

Hard Work and Persistence (성실함과 지속성)

Preparation and Practice (준비성과 연습)

‘우리’는 언제 희열을 느껴야 하는가?

위의 얘기가 이론적으로는 이해는 가지만 아직까지 크게 와닿지 않을 수 있습니다. 그 이유는 제품을 담당하는 디자이너와 개발자 혹은 마케터들은 각자의 wow moment에 너무 익숙해져 있기 때문이죠. 디자이너는 미적인 결과물에 대한 인정을 받았을 때, 개발자들은 어려운 기능을 구현했을 때, 마케터들은 캠페인의 좋은 성과 지표를 얻었을 때 wow moment를 느낍니다.

하지만 첫 번째 에피소드에서 언급했듯이 모든 시스템에서는 부분 최적화와 전체 최적화가 상충하기 마련입니다. 부분 최적화의 총합이 전체 최적화가 될 수 없죠. 디자인 시스템의 wow moment는 시스템이 비즈니스 목표 달성의 기여도를 인정받은 순간일 것입니다. 목표를 위해 향해가는 과정이 점점 월해 지고 반복되는 삽질 없이 '선택'과 '조합'만으로 해결이 가능하다고 느끼는 순간이 '우리'의 wow moment입니다.

Iteration(반복)의 진짜 가치는 무엇인가?

Iteration은 디자인 프로세스를 설명할 때 가장 많이 등장하는 단어입니다. 무엇을 반복하고, 반복하면서 어떤 것이 나이 지는 걸까요? 이는 Spiral Model을 알면 시각적으로 좀 더 쉬운 설명이 가능하다. Spiral Model은 말 그대로 유사한 사이클이 반복되면서 면적이 커지는 나선형 모델을 뜻하고 구체적으로 소프트 웨어 개발론 중 하나로 사용되어 왔다.

하지만 이러한 사고의 흐름은 모든 창의적인 사고에 적용이 된다. 디자인 시스템을 활용할 때 요구되는 iterative process는 2장에서 소개했던 atomic design과 관련 있습니다. 결국 디자인 시스템 안에서

필요한 구성요소들이 있는지

이들의 관계 정립

합성 후 다음 단계로

이 세 단계가 3, 4장에서 언급한 3가지 패턴(인지적, 기능적, 맥락적)에 걸쳐 반복됩니다. 즉 아래 다이어그램처럼 현재 우리 팀에서 접근해야 될 지점이 어딘지를 먼저 확인하고 단계별로 적용하는 접근은 결국 팀 전체가 동일한 리듬을 갖고 일에 집중하고 작업의 우선순위를 정하는데 도움이 될것입니다.

혁신의 공간을 어떻게 마련하는가?

혁신이라는 단어를 쓰기가 조심스럽습니다. (너무 많이 쓰이는 단어이기 때문에..) 위의 질문의 답변을 다시 읊어보자면

개인적인 창의성보다는 팀을 위한 창의성이 무엇인지를 상호 확인하고

이 창의성을 마땅히 발휘해야 할 비즈니스 목적이 무엇인지를 정의하고

이를 효율적으로 달성하기 위한 작업은 iterative 하게 적용하면

가장 마지막은 4장에서 얘기한 맥락적 패턴을 다양한 시나리오에 빠르게 적용할 수 있는 상황에 도달하게 됩니다.

이 단계에 도달하면 서비스를 크게 리뉴얼하거나 리브랜딩 하는 상황이 아니라면 하위 요소들을 불가피하게 수정할 필요 없이, 앞에서 지겹게 얘기한 '선택'과 '조합'으로 서비스를 운영해 나가는 환경,

저는 이게 바로 디자인 시스템에서 마련한 혁신의 공간이라고 생각합니다.

7. 정리하며

'Data Driven Design'의 첫번째 기획 콘텐츠, '디자인 시스템의 육하원칙'를 드디어 마무리했습니다. 바쁜 업무속에 계속 미루었던것이 놀랍게도 5개의 에피소드를 작성하는데 2년이 넘게 걸렸네요...그 동안 UI 디자인의 트렌드와 생성형 AI로 인한 작업방식에 큰 변화가 생기고 있습니다.

하지만 제가 이 시리즈에서 언급했던 내용들은 기술의 발전과 상관없이 시스템의 본질적인 특징을 어떻게 이해하고 활용해야하며, 현실적인 업무환경에서 디자인 시스템 운영에 필요한 접근과 태도, 그리고 구체적인 협업 시라니오에 대해 다뤘습니다. 기술적인 튜토리얼 보다 더 근본적인 내용이었죠.

다음 시리즈에는 구체적으로 figma툴과 모던 프레임워크에서 디자인 시스템을 효율적으로 관리할 수 있는 기술적인 내용, 더 나아가 생성형 AI를 활용하는 방법에 대해서도 다루려합니다.