UI 라이브러리와 디자인 시스템

요즘 UI 디자이너 채용 관련해서 JD를 보면 항상 빠지지 않는 단어가 "디자인 시스템"입니다. 저는 커리어 초기에 개발자분으로부터 디자인 시스템의 개념을 알게 되었고, 생산성을 위해 필수라는 생각을 가지고 프로젝트를 진행하면서 항상 전체 혹은 부분적으로 적용하였습니다.

 

먼저 디자인 시스템의 목적을 디자인, 개발 영역에 맞춰서 정리하겠습니다. 디자인에 있어서 디자인 시스템은 생산성 및 브랜딩에 있다고 생각합니다. 오늘의 주제가 UI 라이브러리 관련이라 간략하게 설명하자면, 피그마라는 툴의 등장으로 디자인 자체의 생산성이 크게 향상되었습니다. 피그마의 기능들이 디자인 시스템에 딱 맞을 정도로 설계가 되어있고, 비교적 최근에는 local variables의 추가로 동적인 디자인 변경 및 프로토타이핑도 가능해졌습니다.

 

다음으로 브랜딩 관련해서는 제품 혹은 서비스에 있어서 브랜딩은 일관되고 지속적인 시각적 설계가 기본이 되어야합니다. 그렇기 때문에 디자인 시스템은 일관되고 지속적인 시각적 설계에 도움이 되고, 경우에 따라서는 UI뿐 아니라 마케팅 및 프로모션에도 디자인 시스템 혹은 디자인 랭귀지가 정리되어야 효율적이라고 생각합니다.

 

그럼 디자인 시스템 이야기는 이정도로 하고, UI 라이브러리를 주제로 넘어가면, 대표적으로 Material Design, Ant Design, PrimeVue 등이 생각나는데, 오늘은 제가 최근에 사용해 보고 제가 생각하는 디자인과 개발의 방향성과 많이 일치한다고 생각한 PrimeVue를 주제로 이야기해보겠습니다.

 

PrimeVue를 직접 사용하면서 느낀 키워드는 Tailwind, Preset 이 있습니다. 이 두 가지가 디자인과 크게 연관성이 있는데 먼저 Tailwind부터 설명하자면, 최근 PrimeVue의 모든 UI 컴포넌트가 Tailwind로 스타일링 되었습니다. Tailwind는 CSS를 하시는 분이라면 들어보셨을 겁니다. 간단히 설명하자면 style 태그에서 스타일링하는 게 아니라 미리 스타일이 적용된 class를 사용해서 인라인으로 스타일링하는 CSS 프레임워크입니다. 장점으로는 커스터마이즈, 일관성, 구현 속도 면에서 용이하고, 단점으로는 인라인이라 코드 가독성이 떨어집니다.

 

그럼 Tailwind랑 디자인이 어떤 면에서 밀접한 연관성이 있냐면, Tailwind의 기본 사이즈 및 간격의 단위가 8pt grid system을 충실히 따르고 있습니다. 예를 들어 "pt-1"이라는 class는 CSS의 padding-top:0.25rem과 동일합니다. "pt-1"에서 일반적으로 16px이 1rem이라는 가정에서 4px로 생각하면 됩니다. 그래서 퍼블리싱하는 입장에서는 화면이 8pt grid system을 충실히 따르는 디자인이라면 여기저기 마우스나 요소들을 뒤적이면서 찾아보는 시간이 많이 줄어들게 됩니다.

 

다음으로 Preset을 설명하자면, 다른 UI 라이브러리를 사용해 보았다면 커스터마이즈에 제한이 생각보다 많거나 과정이 귀찮거나 어려움을 느끼셨을지도 모르겠습니다. 보통 primary color 수정 및 props 제어가 가능한 정도가 대부분인데, PrimeVue에는 Preset 파일을 제공하며, 여기에는 Tailwind 기반으로 스타일 된 전체 코드와 props에 따른 스타일 제어가 모두 가능합니다. 쉽게 말해 PrimeVue의 모든 컴포넌트 커스터마이즈를 자유자재로 하는 게 가능합니다. 초기 제품 디자인 및 개발 속도에 굉장한 이점으로 작용합니다.

 

만약 프로젝트를 VueJS 기반으로 하고, 어느 정도 PrimeVue에 UI를 의존하는 형태라면, 디자이너의 요구에 따라 개발자분이 "이건 안 되는데요"라는 말은 비교적 줄어들 거라고 생각합니다. 물론 UI 라이브러리에 의존하는 건 제품 개발 초기 및 상황에 따라 다르며, 추후에는 의존성을 줄이는 게 맞다고 생각합니다. 그럼에도 PrimeVue는 디자인 관련해서 개발 초기에 빠르게 디자인 시스템의 장점을 가져가는 게 가능한 UI 라이브러리라고 생각합니다.