디자인 시스템

minhyeong·2024년 10월 5일

philosophy

디자인 시스템

사내 디자인 시스템에 대한 제 생각을 얘기해볼까 합니다.

저는 팀 내부에서 나름대로 주도적으로 이끌어가는 역할을 하고 있기에 여러가지 일을 많이 벌릴 수 있는 기회가 있었습니다.

개중에서도 제가 가장 자랑스럽게 생각하는건 사내 디자인 시스템 구축입니다.

토스를 예로 들어보겠습니다.

토스는 사업확장을 공격적으로 하는 회사입니다. 사업부 내부에는 사일로라는 작은 스타트업 개념의 팀들이 개발을 맡는다고 합니다. 따라서 각각의 사업부는 독자적인 프론트엔드, 디자인 팀을 갖고 있다고 보여집니다.

그럼에도 토스의 계열사들은 모두 일관된 디자인 양식을 보여주면서, 어떤 사이트를 보더라도 토스네...! 라는 생각이 들게끔 합니다.

이것이 바로 디자인 시스템이 가진 힘입니다.

한계점

그러나 대부분의 스타트업/중소기업들은 현실적인 이유로 디자인 시스템을 구축하지 않는 것으로 보여집니다.

디자인 리소스 일반화의 어려움
시간 없음 (ㅠㅠ)
낮은 유지보수 기대치

일단 그냥 쓰다 버릴 UI 컴포넌트는 만들어서 쓰고 생명이 다하면 버리면 그만입니다. 하지만 이를 재사용한다면 인터페이스부터 일반화가 가능하도록 신중하게 설계하고, 디자이너와의 약속을 통한 사이즈 규격, 색깔 규격, 애니메이션 규칙을 세세하게 다 정해야합니다. 저 역시도 해당 설계만 꼬박 2개월 넘게 걸린 것 같습니다. 대부분의 스타트업/중소기업들은 휴먼 리소스가 그렇게 풍족하지 않습니다. 쳐내야할 일이 산더미인데 당연히 이런 작업은 사치로 느껴질 수 밖에 없습니다. 자연스럽게 디자인 시스템은 후순위로 밀려나곤 합니다.

다른 문제로는 유지보수 기대치가 낮을 수밖에 없습니다. 사내 라이브러리는 대부분 private하게 관리되기 때문에 기여자가 적을 수밖에 없고 민감하게 변화에 대응하기 어렵습니다. 오픈소스로 기획되어 제작되었더라도 문서화가 아주 잘되어있지 않다면 섣불리 기여하기 어려운 것은 매한가지입니다.

그럼에도 불구하고

그럼에도 저는 회사의 미래를 위해서 디자인 라이브러리는 필수적인 작업이라고 생각합니다. 이유는 다음과 같습니다.

재사용성
말해 뭐해.. 입니다.
브랜딩
요즘은 브랜딩의 시대입니다. 기업, 개인 할 것 없이 PR이 중요합니다. 소비자에게 가장 빠르게 각인시킬 수 있는 것 중 하나는 특색있는 고유의 디자인입니다. 토스의 예만 봐도 디자인만 봐도 토스라는 것을 느낄 정도로 유니크함을 지녔고 이를 통해서 마케팅에 있어 유리한 고지를 점했습니다. 브랜딩은 이제 선택이 아닌 필수입니다.
디자이너의 개발 참여
Figma가 업데이트를 거듭하며 거의 준개발도구의 지위까지 올라온 것 같습니다. 이제는 디자이너도 충분히 GPT와 Figma를 이용하면 JSX 문법을 이용한 UI 컴포넌트도 거뜬히 만들 수 있는 시대가 왔다고 생각합니다. 혹자는 이를 UI Engineer의 출현이라고 하더군요.
Data-Fetch를 제외한 작업을 디자이너에게 맡길 수 있는 좋은 방법이 디자인 라이브러리의 테스트 환경을 제공하는 것입니다. 디자인은 디자이너의 의도대로 나올 수 있고 Client 개발자도 데이터 관리에 좀 더 몰입할 수 있게합니다. 나름대로 저희 회사에선 성공적으로 자리잡은 전략이기도 합니다.
중앙통제
저희 회사는 node 회사다 보니 가벼운 프로젝트를 많이 양산하는데 똑같은 기능의 각기다른 버그는 인력 상 대응 자체가 불가능한 경우가 많습니다. 라이브러리에서 버그 리포트를 마치고 버전 업데이트로 중앙에서 통제할 수 있다면 리소스를 최대한 아낄 수 있습니다.