디자인시스템으로 업무 생산성을 향상시키자

스위치원의 디자인시스템 도입 이야기

최근 스위치원에서 디자인시스템을 도입했습니다. 이 프로젝트는 제가 입사 전부터 준비했던 내용으로, 팀의 생산성과 협업 방식을 개선하기 위한 중요한 과제 중 하나였습니다. 디자인시스템은 단순히 디자인의 일관성을 유지하는 데 그치지 않고, 업무 프로세스를 체계적으로 정립하고 효율성을 높이는 데 필수적인 도구입니다.

이번 글에서는 스위치원에서 디자인시스템을 도입하게 된 배경, 이를 구축하기 위한 과정, 그리고 도입 후 나타난 변화에 대해 자세히 이야기하겠습니다. 또한, 디자인시스템이 디자이너에게 요구하는 새로운 역할과 역량에 대해서도 다뤄볼 예정입니다.

‍

‍

디자인시스템 도입 전, 스위치원의 문제들

제가 스위치원에 합류했을 때, 회사에는 디자인시스템이 없었습니다. iOS와 안드로이드 앱은 각각 네이티브로 개발되고 있었고, 별도의 디자인 규칙이나 가이드라인이 존재하지 않아 아래와 같은 문제가 있었습니다.

1. 디자인의 일관성 부족

디자인의 기본적인 요소들—예를 들어 텍스트 필드, 버튼—의 일관성이 부족했습니다.

• 텍스트 필드는 화면에 따라 형태와 작동 방식이 달랐습니다.
• 버튼의 크기, 색상, 위치와 같은 요소도 화면마다 상이했습니다.

이로 인해 새로운 화면을 설계하거나 기존 화면을 수정할 때 참고할 수 있는 기준이 없었고, 매번 처음부터 설계해야 했습니다. 이는 디자인 작업의 속도와 효율성에 부정적인 영향을 미쳤습니다.

특히 팀에 디자이너가 한 명 더 합류하면서, 여러 사람이 동시에 작업할 경우 디자인의 일관성을 유지하기 어렵다는 점이 더욱 분명해졌습니다. 디자인시스템 없이 개별 디자이너의 판단에 의존하는 환경에서는 작업이 점점 더 비효율적으로 진행될 가능성이 컸습니다.

‍

2. 디자이너 의존성 증가

지금까지 스위치원팀 내에서 모든 UX/UI디자인 작업을 한 명의 디자이너에게 의존했습니다. 한 사람이 모든 디자인 요소를 처리하려면 시간이 오래 걸리고, 결과적으로 개발 속도가 느려질 수밖에 없습니다.

• 기획 작업은 디자인 작업이 마쳐야 개발이 가능한 상태로 완성됩니다.
• 기획과 디자인이 완료될 때까지 개발자는 기다려야합니다.
• 새로운 디자인이 나올 때마다 픽셀 단위의 디자인QA를 반복해서 진행해야합니다.
  • 제가 첫 기능을 준비할 당시 디자인QA가 2주 이상 지속되었죠.

가령, 제가 막 합류하던 시점에 스위치원에는 서비스기획자와 프로덕트디자이너가 각각 있었습니다. 프로덕트디자이너는 화면을 기획을 직접하는 일도 있었지만, 서비스기획자가 만든 기획물의 디자인 작업도 함께 해줘야했죠. 프로젝트 하나를 기획하는 데에 2명의 인력이 필요하게 되고, 필요한 일정 역시 더 길어집니다. 그렇다고 디자인 퀄리티가 높아지는 것도 아닙니다. 퀄리티는 디자이너의 역량에 달려있거든요.

이런 문제를 해결하려면 디자인의 표준화가 필요하다고 판단했습니다. 디자인시스템을 통해 팀원들이 디자이너의 도움 없이도 일관된 퀄리티를 유지하며 작업할 수 있는 환경을 만드는 것이 핵심 과제였습니다.

‍

디자인시스템 도입의 필요성

디자인시스템이란?

디자인시스템은 UI 디자인에 필요한 모든 요소를 정의하고 템플릿화한 일종의 규칙 세트입니다.

• 사용할 색상, 폰트, 크기를 명확히 정합니다.
• 버튼, 입력 필드, 카드 컴포넌트 등 재사용 가능한 컴포넌트를 표준화합니다.

디자인시스템이 잘 구축되면,

1. 디자인 결과물의 일관성이 유지되고,
2. 팀의 생산성이 크게 향상되죠.

잘 짜여진 디자인시스템은 기획자, 디자이너, 개발자 모두에게 효율적인 작업 환경을 제공합니다.

‍

디자인시스템을 도입하기 위해 필요했던 셋업

1. 디자인시스템 파일

디자인시스템 구축의 첫 단계는 모든 UI 요소를 체계적으로 정리하는 것이었습니다. 이를 위해 피그마(Figma)를 활용해 다음과 같은 작업을 진행했습니다.

• 텍스트 필드, 버튼, 카드 등 반복적으로 사용되는 요소를 컴포넌트로 지정했습니다.
• 새롭게 합류한 디자이너도 쉽게 활용할 수 있도록 명확한 네이밍 규칙과 구조를 설정했습니다.

기존 외주 프로젝트에서 정리한 디자인시스템을 바탕으로, 스위치원의 앱에 필요한 컴포넌트만 선별하여 맞춤형 디자인시스템을 구축했습니다.

만약, 디자인시스템을 처음부터 만드는 상황이라면, 제가 예전에 작성하였던 글을 참고해보시면 좋을 것 같습니다.

• MUI를 사용하여 디자인시스템을 설계해보자: https://www.backendforth.com/contents/build-design-system-with-mui

‍

2. 정기적인 리뷰와 협업 체계 구축

디자인시스템은 피그마 파일 하나만 잘 만든다고 해결되지 않습니다. 이에 맞춰 워크플로우를 수정하는 작업 역시 필요하게 됩니다.

• 주간 프로덕트디자인 회의: 각 디자이너가 작업한 내용을 리뷰하고, 디자인시스템의 활용 상태를 점검했습니다. 새로운 컴포넌트가 필요한 경우 팀원들과 논의한 후 이를 시스템에 반영했습니다.
• 디자인시스템 채널 운영: 팀 내 메신저에 #디자인시스템 채널을 만들어, 디자이너와 개발자 간의 실시간 소통과 변경 사항 공유를 지원했습니다.

‍

디자인시스템 도입 후, 달라진 점

1. 작업 효율성 향상

디자인시스템 도입 이후, 팀의 작업 효율성이 개선되었습니다.

• 기획자는 정의된 컴포넌트를 활용해 디자인 작업을 더 빠르게 완료할 수 있습니다.
• 디자이너는 새로운 화면을 설계할 때 처음부터 작업할 필요 없이, 기존 컴포넌트를 조합해 작업 시간을 줄일 수 있습니다.
• QA 과정에서 발생하는 디자인 관련 수정 요청이 줄어들었고, 검증 작업은 기능 테스트와 비즈니스 로직에 집중할 수 있습니다.

‍

2. 개발 과정 간소화

디자인시스템은 개발 프로세스를 간소화하는 데에도 기여했습니다.

• 개발자는 명확한 가이드라인에 따라 UI를 구현하며, 작업 시간을 줄일 수 있습니다.
• 기존 컴포넌트를 재사용함으로써 새로운 화면 구현에 드는 시간을 줄일 수 있습니다.
• 디자인 변경이 발생했을 때, 기존 컴포넌트를 수정하는 것만으로 문제를 해결할 수 있습니다.

‍

디자이너에게 요구되는 역량

디자인시스템을 도입하면서, 저는 디자이너가 갖춰야 할 역량에 대해 다시 한번 생각하게 되었습니다. 고도화된 템플릿이 많아질수록 비디자이너가 디자이너의 디자인과 유사한 수준의 디자인 결과물을 만들어낼 수 있습니다. 즉, 역량이 뛰어난 디자이너는 비디자이너가 만들어내는 결과물의 퀄리티 역시도 높일 수 있어야합니다. 이는 단순히 사용자 중심적인 설계를 하는 것이 아니라, 팀과 회사의 생산성 역시도 향상시킬 수 있는 능력이라 볼 수 있습니다.

‍

시스템적 사고와 생산성 지원 역량

디자인시스템은 단순히 "디자인을 잘한다"는 것을 넘어, 팀 전체의 생산성을 높이는 도구로 작동합니다. 디자인시스템의 사용자는 팀원이라는 점에서 사용자 중심적인 사고와도 크게 다르지 않을 수 있습니다.

• 디자이너는 개발자와 QA 팀이 효율적으로 협업할 수 있도록 시스템적 사고를 갖춰야 합니다.
• "팀의 생산성을 높이는 구조를 설계하는 것"도 현대 디자이너의 중요한 역할 중 하나입니다.

‍

마치며…

디자인시스템은 초기 구축 단계에서 많은 시간과 노력이 필요하지만, 이를 통해 팀의 작업 효율성과 결과물의 일관성을 유지할 수 있는 환경을 마련할 수 있습니다. 저는 초기 서비스를 제작할 때에 늘 최소한의 디자인시스템을 갖추고 시작합니다. 실력 있는 디자이너라면 팀의 생산적인 업무 환경을 만들기 위해 무엇을 디자인해야하는지에 대해서도 함께 고민해보면 좋을 것 같습니다.

이번 글에서는 스위치원에서 왜 디자인시스템이 필요했는지, 그리고 이를 도입한 후 어떤 변화가 일어났는지에 대해 이야기했습니다. 다음에는 디자인시스템을 구체적으로 어떻게 구축했는지에 대해서 이야기해보도록 하겠습니다.

‍