사이드프로젝트 | 디자인 시스템으로 업무 효율성 높이기

일단 회사에 재직할 때는 만들어놓은 디자인 시스템이 존재했다. 그래서 일부분 수정하고 새로운 컴포넌트를 만들기만 했지, 새로운 디자인시스템을 0에서 1로 만든 경험은 없었다. 그것이 나의 가장 큰 갈증이었다. 물론 회사에서 UXW 시스템을 만들어보긴 했지만 부족해!!!

그래서 사이드 프로젝트를 두번 진행해보면서 내가 필수적으로 넣은 것은 디자인 시스템 구축하기 였다. 

 

내가 생각했을 때 디자인 시스템의 필요성은?

1️⃣ 협업 : 첫번째 사이드 프로젝트에서는 협업 경험이 적은 디자이너와 함께 프로젝트를 진행해야 했다. 그래서 필수적으로 디자인시스템이 필요한 상황이었다. 하지만 다른 디자이너는 디자인 시스템을 만들줄 몰라서 내가 다 만들고, 수정되었으면 하는 부분들은 코멘트를 달아서 수정하는 방향으로 진행했다. 그런데 오히려 이렇게 하는게 나에게는 더 힘들지 몰라도 효율적인 것 같다고 느끼게 되었다. 기본 시스템을 구축할 때 불필요한 회의가 많이 줄어 들었기 때문이다. 

2️⃣ 맥락 : 첫번째 사이드 프로젝트에서 디자인 시스템을 도입할 때, 막상 공부해보니 내가 생각하지 못했던 엄청 디테일한 UI들을 고려해야 한다는 것을 알게 되었다. 와 짜릿해! 이전 프로젝트에서는 이렇게 체계적으로 디자인 시스템을 구축한 적 없기도 했는데 오 이런 식으로 고려해서 서비스의 통일성과 다크모드, 라이트 모드 등을 고려할 수 있겠구나 알게 되었다. 

3️⃣ 통일 : 두번째 사이드 프로젝트에서는 단독으로 디자인과 기획을 맡아서 하게 되었지만 그래도 디자인 시스템을 한번 더 고도화 해서 활용해보고자 했다. 그런데 디자이너끼리 필요하다고 생각한 시스템이 개발자들에게도 얼마나 중요한지 알게 되었다. 내가 세팅한 것을 기반으로 그들도 기본적인 세팅을 해서 업무의 효율을 증진시켰다.

 

---

일단 나는 3단계로 구성을 나눴다. UI적으로 사용될 모든 색상들을 깔고, 그 다음 브랜드로 사용 할 색상들을 세팅하고, 다양한 경우에서 사용 될 색상들을 정리했다. 그렇게 1차적으로 색상이 정리되고 나니 Spacing이나 radius값들이 순차적으로 정리가 가능했다. 

3단계에서 사용 된 색상 ❘ 이런 식으로 정리해서 개발자에게 전달했다.

 

 

가장 작은 라벨에서부터 가장 큰 플레이스 홀더나 네비게이션 바까지 점진적으로 시스템을 구축해나갔다.

그리고 해당 부분들을 기반으로 컴포넌트들을 만들고, 서비스를 제작하게 되었다. 귀엽고 소중해...
그런데 이런 시스템들을 만들 때, 개발자가 고려해야 하는 부분, 그리고 전반적인 서비스의 컨셉을 고려하면서 진행해야 해서 내가 온전히 이 서비스에 대한 계획이 온전히 세워진 상태에서 진행을 해야 했다.

 

그래서 일주일만에 모든 화면을 구현할 수 있게 되었다. (하루 4시간 이내 투자 대비) 매우 효율적이라고 볼 수 있지.

그렇게 디자인 시스템을 설계하면서 서비스를 구축하는 경험을 하게 되었다! 

 

아래는 내가 시스템을 만들면서 참고했던 아티클이다. 이 시리즈 매우 괜찮으니 한번 읽어보는 걸 추천한다 :)

https://www.pxd.co.kr/ko/insights/design-system-scaffold

1. 디자인 시스템을 위한 디자인 시스템 만들기 | Insights | pxd