구름톤 디자인 시스템 강의를 듣고나서 후기

☁️ 개요

구름톤 12기에 참가하며 구름의 디자인 시스템 체계를 구축하는데 기여하신 제로님께 디자인 시스템 강의를 들을 기회가 있었습니다.

이 세션을 통해 구름 서비스의 디자인 시스템 설계 원칙과 개선 방향에 대한 귀중한 통찰을 얻을 수 있었습니다. 그동안 제가 개발하면서 놓쳤던 부분들을 되돌아보며, 단순히 복잡함 속에 빠져 있었던 설계 방식을 반성하게 되었습니다.

이번 글에서는 강의에서 다룬 주요 내용을 정리하고, 이를 통해 느낀 점들을 공유하려고 합니다.

🎨 디자인 시스템이란?

디자인 시스템은 디자이너와 개발자가 협업하여 일관된 사용자 경험을 제공하기 위해 구성된 일련의 원칙, 컴포넌트, 도구를 의미합니다. 이를 통해 디자인과 개발 과정에서의 비효율성을 줄이고, 제품의 일관성과 품질을 높일 수 있습니다.

디자인 시스템은 다음과 같은 요소들로 구성됩니다.

• 스타일 가이드: 색상, 타이포그래피, 여백 등 디자인의 시각적 요소를 정의한 문서.
• 컴포넌트 라이브러리: 반복적으로 사용하는 UI 요소를 코드화한 재사용 가능한 컴포넌트.
• 원칙과 철학: 시스템 전반의 방향성을 결정하는 핵심 가치와 규칙.

이러한 시스템을 통해 팀은 더 빠르고 효율적으로 작업할 수 있으며, 사용자 경험의 일관성을 유지할 수 있습니다.

 

🤷‍♀️ 문제 정의

강의에서는 구름의 디자인 시스템 개선 과정에서 발견된 문제들을 다루었습니다. 그중 가장 큰 문제는 컴포넌트에 너무 많은 기능과 형태를 담으려는 접근 방식이었습니다. 이러한 방식은 디자이너와 개발자 모두에게 불편함을 주고, 유지보수성을 저해하는 주요 원인으로 지적되었습니다.  

이런 접근은 디자이너와 개발자 모두에게 스트레스를 준다고 했는데, 공감됐어요. 이게 쌓이면 유지보수도 어려워지고, 결국엔"이 컴포넌트는 누가 설계했지? 라며 서로 핑퐁이 시작되는 거죠.🥲

 

🤗 DX 문제 해결을 위한 3가지 원칙

이러한 문제를 해결하기 위해 세 가지 핵심 원칙을 제시했습니다.

1️⃣ 최소한의 기능과 형태 정의

컴포넌트의 기능과 형태를 명확히 구분하여, 핵심 기능만 제공하는. 동시에 사용자가 필요에 따라 커스터마이징 할 수 있도록 설계합니다.

2️⃣ 속성(property) 통일

디자이너와 개발자가 컴포넌트의 동일한 속성을 사용하여, 컴포넌트. 간 불일치를 제거합니다.

3️⃣ 조합형 설계

다양한 요구사항에 맞춰 자유롭게 설계할 수 있도록 완성형보다는. 조합형 컴포넌트를 제공합니다.  

 

그렇다면 실제로 이러한 원칙들을 적용하여 디자인 시스템을 해결하였을때 발생하는 모든 문제를 해결했다고 볼 수 있을까?

 

🥵 원칙 적용과 한계

하지만 위 원칙들이 모든 문제를 해결하지는 못한다는 점도 명확히 했습니다. "No Silver Bullet"이라는 말처럼, 디자인 시스템에도 완벽한 해결책은 존재하지 않으며, 실제 적용 과정에서 몇 가지 한계점이 발견된다고 했습니다.

1️⃣ 개발 속도 지연

최소한의 기능과 형태를 정의하다보니 공용 시스템에서 정의하는것 이외에는 매번 직접 정의를 해야해서 개발 속도가 지연되는 문제점이 발생했습니다.

2️⃣ 조합형 설계의 부작용

사용처에서 각자 조합할 컴포넌트를 생성하다보니 기존의 완성형 컴포넌트보다는 UI 일관성이 깨지는 문제가 발생할 가능성이 있습니다.

3️⃣ 크리에이터 인식 변화

디자인 시스템이 "하고 싶은 것만 만든다"는 인식을 줄 수 있어, 디자이너와 개발자 모두에게 동기 부여를 저하시킬 수 있습니다.

 

🤗 해결 방안

이를 해결하기 위해 강의에서는 다음과 같은 보완 방안을 제안했습니다.

☝️ 필수 + 자주 사용되는 기능 제공

필수 기능만 제공하는 것이 아닌 자주 사용되는 기능들을 추가한 대한 컴포넌트들을 제공해 사용자 경험을 향상시킬 수 있습니다. 

✌️조합형 설계의 부작용

Core, Form, Date 등 특정 관심사를 기준으로 기능을 분리하여 유지보수성을 높이는 방법이 제시되었습니다.

 

🤩 느낀점

이번 강의는 디자인 시스템을 단순히 UI 구성 요소를 모아놓은 도구가 아니라, 팀의 생산성과 협업을 극대화하는 내부 제품으로 바라봐야 한다는 새로운 관점을 제시했습니다.

이전에 Storybook을 활용해 React와 Yarn Berry 환경에서 디자인 시스템을 구축한 경험이 있었습니다. 당시에는 컴포넌트를 시각하고 재사용성을 높이는 데 초점을 맞췄지만, 이번 강의를 통해 그 시스템을 어떻게 업그레이드해야 할지 명확해졌습니다. 특히, 단순히 컴포넌트의 집합으로 끝나는 것이 아니라, 디자인 시스템을 성공적으로 구축하려면 명확한 타겟 설정이 필요하다는 점이 인상 깊었습니다. 시스템이 누구를 위해 만들어지는지 명확히 정의하고, 그들의 페인 포인트를 해결하기 위한 원칙을 세우는 것이 얼마나 중요한지 깨달았습니다. 강의에서 강조된 “디자인 시스템은 사용자 문제를 해결하는 도구”라는 메시지는 앞으로도 계속 되새길 부분입니다.

또한, 초기 원칙에 얽매이지 않고, 시스템을 지속적으로 개선하는 유연성이 필요하다는 점도 큰 교훈이 되었습니다. 사용자 피드백을 꾸준히 반영하며 발전시키는 과정은 단순히 시스템을 유지하는 것이 아니라, 실제로 팀과 사용자에게 더 나은 가치를 제공하는 핵심이라고 느꼈습니다.

무엇보다 “내가 그동안 얼마나 복잡하게만 생각했지?”라는 반성을 하게 되었습니다. 강의에서 소개된 단일 컴포넌트 설계의 문제점과 이를 해결하는 방법론은 저에게 새로운 접근 방식을 제시해주었습니다. 이러한 방법들을 실무에서 적용해 보고 싶다는 의욕이 강하게 들었습니다.

이번 강의를 통해 디자인 시스템은 단순한 기술적 도구가 아닌, 팀의 목표와 협업 문화를 반영하는 중요한 자산임을 깨달았습니다. 앞으로도 이러한 원칙을 바탕으로 더 나은 시스템을 설계하기 위해 지속적으로 노력해야겠습니다. 아자아자!