디자인 시스템 ? 알아야 하나 ? feat. 프론트엔드 개발자

결론부터 말씀드리자면 '알아두면 좋다'입니다.

 

디자인 시스템이란

팀이 제품을 개발할 수 있도록 디자인 패턴 및 원칙들을 모아둔 시스템을 뜻하며 UI/UX 가이드라인 또한 포함됩니다.

서비스를 만드는 데 사용한 공통 컬러, 서체, 인터랙션, 각종 정책 및 규정에 관한 모든 컴포넌트를 정리해놓은 것이며 불필요한 커뮤니케이션을 없애기 위해 체계적으로 정리한 시스템입니다.

비효율적인 디자인 비용을 줄이기 위해 체계적으로 정리한 시스템 - 딜리셔스 멋쟁이 디자이너님

 

왜 알아두면 좋은가??

예전 우아한형제들의 김민태 님께서 디자인 시스템에 대해 발표하신 것 중

배달의 민족 앱에는 많은 화면이 있는데, 그중 사용자가 잘 안 보는 화면이나, 수정이 없는 화면에는 옛날 옛적 UI가 남아있다.

디자인 시스템을 적용하면서 디자인이 된 컴포넌트를 npm에 등록하고 여러 앱에서 사용한다고 하셨습니다.

 

npm은 그저 라이브러리를 모아둔 곳이라고 생각했는데, 디자인된 컴포넌트들도 모아서 관리한다고 하니 너무 새로웠고 도전하고 싶었습니다.

 

 

마침 저희 회사 디자인 팀에서도 디자인 시스템을 만들고 있었고, 디자이너 분들께서 먼저 생각하고 계셔서 놀랐습니다.

(제가 딜리셔스 입사 전부터 이미 진행)

 

자극을 받은 저는 프로젝트 진행하면서 도전해볼 만한 것을 찾았고, 만들어봤습니다.

https://www.npmjs.com/package/deali-month-picker

정식으로 만든 것이 아니라 도전해보는 것이라 공개로 만들었는데, npm으로 관리해서 장점이 많다면 같은 팀에게 npm으로 관리하자고 공유하려 했습니다.

하지만 이때 당시에는 진행 중인 프로젝트에서 만든 컴포넌트를 다른 서비스에서 사용하지 않았기 때문에 관리의 장점이 사라졌습니다. 오히려 테스트가 더 힘들어지고, 오류나 수정사항이 생기면 아래와 같은 상황이 자주 일어났습니다.

 

개발 - 테스트 - 빌드 - npm 배포 - (기도 한번 드리고) - 모듈 update - 테스트

 

이러한 이유 때문에 저만 도전해본 것으로 끝난 경험이 있습니다.

 

 

그래도 저희 회사가 운영하는 신상마켓은 소매 웹, 도매 웹, 앱 등 많은 서비스가 있어서 디자인 팀에서는 꾸준히 디자인 시스템을 만들어 주고 계시며, 공통으로 사용하는 컴포넌트를 정의해주고 계십니다. (웹은 빠져있었던 거 안비밀... 웹을 챙겨 달라)

 

버튼, 알림 메시지, 토스트 메시지, 확인 창 등 공통으로 자주 사용할만한 컴포넌트는 npm으로 관리하면 좋을 것 같습니다.

달력은... 언제 쓰이려나...

 

 

마치며

웹 프론트엔드 개발자라면 npm은 무조건 들어보셨을 것입니다.

그리고 재사용하는 걸 좋아하잖아요?? (재사용하려고 컴포넌트로 나누니깐)

디자인도 재사용할 수 있습니다. 이미 재사용하고 있는 중일 수도 있습니다.

한번 수정하면 모든 프로젝트에 적용되는 것이 편하신가요? 아니면 모든 프로젝트의 css 하나하나 수정하러 다니실 건가요!!

프로젝트가 작거나, 다른 서비스에서는 사용하지 않는다면 npm으로 관리할 필요가 없겠지만 알아두면 유용한 정보임은 틀림없습니다.

 

 

 

[참고 자료]

원티드 - 요즘 프론트엔드 개발 어떻게 하지 참관 후기

디자인, 시스템, 그리고 숫자: 마이리얼트릭 배재민 디자이너 인터뷰

RIDI Design System

국내 스타트업들의 디자인 시스템은? 그리고 디자인 시스템에 대한 사례 확인과 공부를 할 수 있는 곳은?