디자인 시스템 구축, 그리고 제거까지

디자인 시스템 구축 이후

디자인 시스템을 만들고 배포 자동화까지 많은 노력을 기울였다. 그리고 이렇게 만들어진 디자인 시스템은 팀원들과 디자인 팀의 업무에 많은 도움이 될거라 생각했다. 하지만 세상은 그렇게 호락호락 하지 않았다. 디자인 시스템은 어떻게 보면 규칙을 만들고 새로운 것을 규칙에 맞게 만드는 것이다. 사용 설명서랄까?

하지만 새로운 브랜드를 만들고 있는 회사 특성상 만드는 것이 정말 변화 무쌍했다. 기획이 중간에 바뀌는 것도 많고 이전에 보지 못했던 모양이나 기능의 컴포넌트들도 빠르게 만들어야 했다. 이런 상황에서 규칙은 작업 효율성을 저하시켰다. 기존에 만들었던 규칙에서 벗어나는 컴포넌트가 정말 빠르게 생기기 때문이다. 그리고 이에 맞추려면 규칙을 바꿔야 하고 이는 시간과 비용을 써서 디자인 시스템을 수정해야 함을 의미했다.

나는 이런 과정이 디자인 시스템을 사용하면 당연하게 필요한 투자라 생각했다. 하지만 다른 관점으로는 의미없는 시간을 디자인 시스템에 투자해야한다는 것이었다. 그래서 디자인 시스템의 필요성에 대해서 지속적으로 불만이 나왔고, 회사 제품이 리브랜딩 되면서 각 프로젝트에서 디자인 시스템을 걷어 내기로 했다.

디자인 시스템을 사용하지 않기로 결정이 될때 마음이 매우 아팠다. 나는 디자인 시스템을 수정하고 보완하는 것이 팀원들의 비용을 단축하는 것이라 생각했기 때문이다. 다시말해 내가 수정함으로서 다른 팀원이 또다시 해당 이슈에 시간과 비용을 쓰지 않아도 된다고 생각했다. 하지만 주어진 환경에서는 수정을 너무 많이 해야 하는 것은 분명했기에 나는 이를 받아들이기로 했다. 디자인 시스템을 걷어내고 프로젝트별로 버튼이나 체크박스 등 공용으로 사용하는 컴포넌트를 새로 만들었다. 이를 통해 기존 디자인 시스템의 컴포넌트를 개선해 나가고 있다. 이를 바탕으로 어떤 환경에서 디자인 시스템을 사용하는 것이 좋은지, 그리고 디자인 시스템에 적용하면 좋을 리액트의 기능들을 간단하게 작성해 보려고 한다.

디자인 시스템을 사용하기위한 조건

1. 사용자들의 의지
   아무리 생각해도 제일 중요한 조건이 아닐까 싶다. 디자인 시스템을 사용하는 것은 생각보다 많은 작업을 필요로 했다. 디자인 토큰 정의, 컴포넌트별 디자인과 정의, 구현, 각 프로젝트에서 사용할 수 있도록 배포환경 구축, 배포 자동화 등등.. 개발자 뿐만 아니라 디자이너도 디자인 시스템을 사용하고자 하는 의지가 강력해야한다. 페이지 디자인을 디자인 시스템의 조합으로 구현해야한다. 디자인 시스템에서 이거만 살짝 바꿔서 넣으면 되겠지..? 라고 생각하는 순간 개발자는 샷건을 치게된다. 그래서 개발자, 디자이너, 팀원간 대화가 많이 필요하다. 디자인 시스템이 다룰 범위와 어느정도의 자유도를 줄 것인지, 그리고 작업시간은 얼마나 할애할 수 있을지 등등 해야할 이야기가 많다. 그리고 프론트 엔드 개발자가 아니라면 디자인 시스템에 왜 시간을 투자해야하는지 이해를 못하는 경우가 많다. 프론트 엔드 개발자 안에서도 의견이 분분하다. 디자인 시스템을 구축하고 사용하려면 팀의 시간과 비용을 투자해야하니 팀 전체를 설득해야한다. 내가 하고 싶은 말은 생각보다 많은 시간과 비용이 필요하므로 팀원들과 나 자신을 잘 설득해야한다.

2. 어느정도 정착된 프로젝트
   앞에서 언급했듯이 디자인 시스템은 하나의 규칙이라고 생각한다. 규칙에 맞추어 퍼즐 조각하듯이 새로운 페이지를 만들어 나가는 것이다. 하지만 새로운 페이지가 기존 퍼즐로 만들 수 없다면? 퍼즐을 새로 만들거나 기존 퍼즐을 변형시켜야한다. 한달에 한번정도라면 그러려니 하고 작업하겠지만 일주일에 두세번 이런다면 정말 답이 없다. 그리고 규칙이 늘어나면 컴포넌트는 그만큼 복잡해지고 유지 보수가 매우 어려워진다. 그래서 프로젝트가 어느정도 정착이 되어서 디자인과 기능에 큰 변화가 없을때 적용하는 것이 좋은 것 같다. 프로젝트 처음부터 디자인 시스템을 만드는 것은 불가능에 가까운 것 같다.

3. 사용 프레임워크에 대한 충분한 학습
   현재 회사의 모든 프로젝트가 react 아니면 nextjs로 구현되어있다. 이러한 환경에서 사용할 디자인 시스템은 React를 기반으로 제작되었다. 하지만 당시 React에서 제공하는 기능들에 대해서 정확히 알지 못한 채 컴포넌트를 구현하여 재사용성이 매우 떨어졌다. 아는 만큼 재사용성을 극대화 시킬 수 있는것 같다.

디자인 시스템에 대한 여러 반응들

1. 완벽하게 만들 수 없다.
   디자인 시스템을 만들고 적용한 이후에 많은 부정적인 반응들이 있었다. 디자인 시스템에서 버그가 있는 경우가 있으면 "아 또 디자인 시스템이야..?" 라는 말도 많이 들었다. 사실 이런 반응을 들었을때 그렇게 기분이 나쁘지 않았다. 해당 버그를 수정해서 배포하고 다른 프로젝트에서 새로운 버전을 적용하면 한 팀원의 버그 수정이 모든 프로젝트에 적용되니 오히려 이득이 아닌가? 라고 생각했다.

   비슷한 반응으로 다른 팀원이 본인의 선배 회사에서는 여러 퍼블리셔와 개발자들이 시간과 비용을 투자해서 만든다고 했다. 그리고 그렇게 만든 디자인 시스템이 완벽하지 않아서 사용에 어려움이 많았고 결국 사용하지 않았다라는 이야기를 해주었다. 하지만 나는 이는 동의할 수 없었다. 세상에 완벽한 시스템은 없고 사용자가 계속 발전시켜야 한다고 생각한다. 완벽하게 만들어야 한다고 생각하는 순간 디자인 시스템은 엄청난 스트레스로 남게 될 것이다.
   

2. 프로젝트 규모를 생각하면 과유불급이다.
   디자인 시스템을 적용했던 프로젝트들의 페이지 수는 그렇게 많지 않았다. 그래서 이만한 프로젝트에 디자인 시스템을 적용하는 것은 자원 낭비라는 말을 여러번 들었다. 격한 말로 돼지목에 진주 목걸이라는 말도 들어봤다. 프로젝트 규모가 작으면 디자인 시스템을 만드는 것보다 다른 영역에 시간과 비용을 투자하는 것이 더 좋을 수 있다.

   하지만 프로젝트 규모로 디자인 시스템의 적용 여부를 결정하는 것은 무리가 있다고 생각한다. 아무리 페이지 수가 적더라도 디자인 시스템에서 사용하는 컴포넌트나 토큰이 굉장히 많다면 디자인 시스템을 만드는 것이 유리할 수 있다. 그리고 한 프로젝트만 보지 말고 회사 전체의 프로젝트를 대상으로 비용을 따져봐야 한다고 생각한다.
   

3. 디자인 시스템 때문에..
   제일 마음의 상처로 남은 반응이었다. 한 프로젝트에서 디자인 시스템을 사용하는데 해당 컴포넌트의 디자인을 수정해야하는 이슈가 있었다. 그런데 한 팀원이 디자인 시스템에서 그렇게 구현되어서 수정이 안된다고 말했다 들었다. 나는 팀원 모두가 수정하기 쉽게 배포를 자동화 하고 이를 문서로 작성하여 여러번 공유하고 설명했다. 내가 구현하지 않은 컴포넌트도 직접 수정하고 배포한 경우도 많았다. 나는 이런 과정이 다른 팀원을 돕는거라 생각했는데 이런 반응은 정말 충격적이었다.

리액트 기반 디자인 시스템에서 알면 좋은 것들

1. Dot notation
   https://legacy.reactjs.org/docs/jsx-in-depth.html

2. HTMLAttributes
   기존 디자인 시스템에서는 Button 컴포넌트의 readonly나 type등 여러 속성들을 직접 선언해서 사용했다. 그래서 한 속성을 추가할때 마다 다시 배포했는데 HTMLAttributes를 사용하면 속성들을 따로 interface에 추가하지 않아도된다. 그런데 추가 구글링해보니 HTMLAttributes보다 다른 interface를 제안하고 있어서 더 찾아봐야 할 것 같다.

   https://velog.io/@centraldogma99/HTMLAttributes-HTMLProp-%EC%9D%84-%EC%93%B0%EC%A7%80-%EB%A7%88%EC%84%B8%EC%9A%94

결론

디자인 시스템을 사용하기 위해서는 현재 구현중인 프로젝트에 대한 이해와 디자인 시스템의 비용에 대한 계산이 먼저 이루어져야한다. 그리고 모든 팀원이 디자인 시스템에 대한 공감을 해야한다. 얕은 공감이 아닌 깊은 공감.. 구현은 그 다음인 것 같다.