2022 디자인 시스템 라이브러리 11개 찍먹 후기

안녕하시렵니까?

서론

회사에서 대시보드를 만들 일이 생겼는데, 최대한 디자인에 노력을 들이지 않고 스타일을 입힐 수 있으면 좋겠다는 요구사항이 있었다. 그래서 유명한 디자인 시스템과 유명한 회사들의 디자인 시스템을 사용해 직접 간단한 대시보드를 꾸며보고, 후기를 적어보았다.

React 18을 지원하지 않거나, install 과정부터 험난한 라이브러리들은 공식문서만 읽고 사용해보지 않았다. 스크린샷이 없는 라이브러리는 모두 직접 사용해보지 않은 라이브러리라고 생각하면 된다.

 

1. Material-UI

MUI: The React component library you always wanted

사용 후기

테마에 맞춘 통일성 있는 디자인이 쉽게 가능하다.

• mui에서 제공하는 디자인 컴포넌트들은 sx prop을 갖는데, sx prop을 사용하면 테마에서 지정한 값들로 CSS를 채울 수 있다. 공식문서 - sx prop
• 아래와 같이 테마를 만들어두면,

  import { Box, ThemeProvider, createTheme } from '@mui/system';
  
  const theme = createTheme({
    palette: {
      background: {
        paper: '#fff',
      },
      text: {
        primary: '#173A5E',
        secondary: '#46505A',
      },
      action: {
        active: '#001E3C',
      },
      success: {
        dark: '#009688',
      },
    },
  });
  

  Box 컴포넌트의 sx 프롭을 아래와 같이 지정할 수 있다. 단위 없이 숫자만 입력한 경우 기본 단위가 테마 내부에 정해져 있고(ex. 4px) 이 값에 입력한 값을 곱해서 사용하는 식이다. borderRadius의 경우 theme.shape.borderRadius에 지정된 값(default - 4px)에 2를 곱한 8px이 적용되겠다. 기본 단위값과 지정할 수 있는 방법에 관한 더 자세한 정보는 공식문서 참고. 

<Box sx={{ bgcolor: 'background.paper', boxShadow: 1, borderRadius: 2, p: 2, minWidth: 300, }} >

CSS module, CSS-in-JS 코드 작성이 용이하다.

• 다양한 스타일 라이브러리와의 호환성이 높다. 공식문서 참고
• mui는 기본적으로 emotion을 기본 스타일 엔진으로 채택하고 있으나, styled component를 기본 스타일 엔진으로 채택할 수도 있다. 덕분에 재사용 가능하며 테마를 갖는 커스텀 MUI 컴포넌트를 만들 수 있다.

const PlotItem = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(2),
  backgroundColor: theme.palette.mode === "dark" ? "#303030" : "#f7f7f9",
  color: theme.palette.mode === "dark" ? "#f7f7f7" : "#303030",
}));

• 다만 기본 엔진을 styled component로 설정한 경우 styled-component + mui + SSR은 동작하지 않는다. SSR 프로젝트의 경우 styled-component 대신 emotion을 사용해야 한다. 참고

요약

• 정말 무난하다. 요즘 보이는 디자인 시스템 라이브러리의 정석같다.
• 쓸만하긴 하나 예쁘진 않다. 안드로이드 아이스크림 샌드위치 감성의 디자인이다.
• 컴포넌트 양이 정말 많은데 쓸데없이 많은 느낌이라 손에 잘 붙지 않는다.
• 컴포넌트에 기본적으로 적용되어 있는 CSS도 많지 않아서 예쁘게 만들기 위해서는 꽤 손을 써야 한다.
• sx와 테마를 통해 규칙성 있는 디자인이 가능한 건 확실한 장점이..긴 하나 이건 요즘 나오는 UI 라이브러리는 다 지원한다.
• 같은 대시보드를 만든다고 해도 다른 디자인 시스템보다 좀 더 오랜 시간이 걸리는 느낌이다.
• 개인적으로 나랑 잘 안 맞는다.

 

2. Ant-Design

Ant Design - The world's second most popular React UI framework

중국 팀이 만든 디자인 시스템이다.

2-1. Ant Design Charts

Ant Design에서 자체적으로 제작한 차트 라이브러리가 있다. 덕분에 Ant Design + Ant Design Charts로 통일감있는 디자인의 대시보드를 만들 수 있다. 일부분 영어 번역을 제공하고 있으나 대부분의 문서와 예제 코드는 중국어로 작성, 설명되어 있다. 다만 사용에 문제가 될 정도의 불편함은 아니다.

Ant Design Charts를 Next.js에서 사용하려는 경우, Next.js에서는 모듈별 CSS를 사용할 수 없어 충돌이 생긴다고 한다. @ant-design/charts 대신 하위 항목인(charts보다 저수준 라이브러리라는 걸 말하는 듯) @ant-design/plots 를 사용하면 에러 없이 설치 가능하다고 한다. 참고 - [react] Next.js 에서 antd(ant-design) 차트(chart/그래프) 사용할 때 css 관련 오류

charts와 plots는 공식 문서도 분리되어 있고, 리액트 내에서 사용하는 방법도 조금씩 다르니 참고하자.

사용 후기

코드 작성이 빠르다.

• 제공하는 컴포넌트 수가 정말 많다.
• Charts는 데이터와 config만 갈아끼우면 바로 완성된다.
• 공식 문서에서 코드를 복사, 붙여넣기하고 조금만 수정하면 바로 그럴듯한 UI가 완성된다. CSS를 아예 모르는 사람도 쉽게 예쁜 UI를 만들 수 있겠다 싶었다.

공식문서가 잘 작성되어 있다.

• Design Patterns와 Template Document와 관련된 내용도 있다.
• Charts의 경우 예제 코드가 리액트 기준으로 작성되어 있어 어떻게 사용해야 할 지 쉽게 알 수 있었다.
• Principles 부분도 예제 이미지와 함께 잘 정리되어 있다. 급한 일이 있어 한동안 회사에서 자리를 비워야 하는 책임감 강한 디자이너가 ‘회색화면만 아니면 다 예쁘다'고 생각하는 개발자들에 의해 본인의 작품이 오염되는 것을 피하기 위해 본인의 디자인 철학을 모두 글과 이미지로 정리하여 개발자들에게 남기고 간 마지막 유산같은 느낌이 들 정도

인터랙션이 좋았다. (Antd Charts)

• 그래프 애니메이션이 매끄럽다.
• 그래프나 분할된 파이 위에 마우스를 올리면 자세한 정보를 확인할 수 있다.
• 파이의 경우 우측 라벨을 클릭하면 클릭한 라벨을 제외한 타입들의 비율을 볼 수 있다.

요약

• 공식 문서에서 중국어를 볼 때마다 당황스럽긴 하지만 그걸 감수할 수 있을 만큼 사용성이 좋다.
• 차트 라이브러리와 레이아웃 템플릿 등 덕분에 어드민 페이지 만들기에 최적화된 디자인 시스템같다.
• less라는 스타일시트를 사용하는 것 같은데, 관련해서 자꾸 Warning이 뜬다.
• Made In China라서 뭔가 괜히 코드 털릴 것 같고(?) 삐그덕댈 것 같아 걱정되지만 퀄리티는 Made In China 수준이 아님.

 

3. Chakra UI

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a

사용 후기

props로 CSS를 빠르게 적용할 수 있다.

• CSS 속성을 하나하나 props로 전달할 수 있다.
• 속성에 미리 정의가 된 키워드(xs, m, inner, outline 등)를 입력하여 빠르게 원하는 효과를 줄 수 있다. 일반적으로 xs, s, m 등의 사이즈 관련 텍스트를 값으로 받지 않는 boxShadow, rounded등의 속성에도 사이즈 값을 줄 수 있다.
• Chakra UI의 특징이라면 as 라는 prop이 있다는건데, as에 해당 컴포넌트의 동작 의도에 맞는 html 태그를 넣으면 ‘기존의 태그를 as로 받은 새로운 태그로 감싸는 형태’로 동작하여 두 태그의 속성을 모두 props로 전달할 수 있게 된다. 예를 들어 어떤 버튼을 눌렀을 때 특정 사이트로 이동하게 만들고 싶다면 다음과 같이 코드를 작성할 수 있다. 이것 덕분에 이중, 삼중 태그로 컴포넌트를 감싸지 않아도 된다.as='a' 값을 받은 Button 컴포넌트는 button에서 사용할 수 있는 props와 a에서 사용할 수 있는 props를 모두 사용할 수 있다.

<Button as='a' target='_blank' variant='outline' href='https://chakra-ui.com'>
  Hello
</Button>

• Sementic token으로 상황에 따른(ex. 정상/에러, 라이트/다크모드) CSS 속성을 줄 수 있다.

반응형 대응이 쉽다.

• CSS 관련 props에 object 형태로 화면 크기 별 스타일을 적용할 수 있다.
• <Text fontSize={{ base: '24px', md: '40px', lg: '56px' }}>

생각한 대로 스타일이 입혀진다.

• ‘왠지 이렇게 하면 될 것 같은데?’ 하면 정말 그렇게 하는 것이 맞다. 덕분에 공식문서를 읽다 보면 금방 감을 잡을 수 있다.
• 컴포넌트명도 직관적이다.

총평

• 나온지 얼마 되지 않은 라이브러리라 커뮤니티는 작지만 공식문서가 워낙 잘 작성돼있어 개발에 불편함은 없었다.
• 스타일 입히는 작업이 굉장히 빨라진다. styled components로 하나하나 직접 만들던 시절을 생각하면 그저 눈물만 흐를 뿐이다. 테마에는 아예 손대지 않았는데도 이정도 속도면 테마 세팅만 잘 해놓으면 더 빨리 개발할 수 있을 듯하다.
• 너.. 너.. 괜찮은 놈이구나

 

4. Tailwind CSS

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

• css를 shorthand로 완전 빠르게 적용 가능하게 해주는 프레임워크다.
• headless-ui와 주로 같이 사용한다고 한다. (액션은 headless가, 외형은 tailwind가 담당)

간략한 사용 후기

• css를 string 형식으로 입력하다 보니 자동완성이 안된다. vscode 확장 프로그램 중 Tailwind CSS IntelliSense를 사용하면 자동완성이 가능하긴 하지만 가끔가다 자동완성이 안될 때도 있다.
• 클래스명을 어느 세월에 다 외우나 싶지만 속성-수치 식의 구조다보니 외울 필요까지야 없고, 쓰다보면 감이 금방 잡힌다.
• 개발하다 보면 태그별로 클래스가 주렁주렁 달린다. 어느 정도 규칙성이 있어 보기 흉할 정도는 아니긴 하다. 중복되는 속성을 묶어서 재사용할 수 있는 방법이 있긴 하나(@apply) 속성을 shorthand로 작성할 수 있는 것 외에는 CSS에서 클래스를 선언해서 사용하는 것과 다를 점이 없어 보인다.
• 그래도 CSS 속성을 1) shorthand로 2) space와 letter size, color 등에 대해 통일성 있는 디자인 규칙을 적용해 사용할 수 있다는 건 엄청난 장점으로 느껴진다. 쉬운 CSS 작성 툴이라는 성격에다가 추가로 3) 공식 문서에서 다양하고 예쁜 예제와 컴포넌트를 가져와 사용할 수 있다는 것도 장점이라 볼 수 있겠다. 한 번 결제하면 다양한 컨텍스트에서 사용할 수 있는 UI를 제공하기도 한다.
• 하지만 기본적으로 tailwind CSS 자체는 CSS를 간편하게 사용할 수 있다는 것에 큰 장점이 있고 따로 디자인이 되어있는 컴포넌트를 제공하는 것이 아니어서 '노력을 적게 들여 예쁜 UI를 만들고 싶다'는 목적은 충족하지 못할 것 같다.
• 왠지 모르게 첫인상은 별로였는데 써보니 마음에 쏙 든다. 아니 솔직하게 말해서 .. 최고임(찌잉-). 이 글을 작성하면서 tailwind에 크게 반해 약 3개월간 tailwind를 쓰고 있는데, 역시 정말 빠르고 편하나 background 관련 설정을 할 때나 잘 사용하지 않는 마이너한 특성을 넣고 싶을 때 약간 불편함을 느낀다. 그래도 최고

 

5. theme-ui

Theme UI

• <ThemeProvider> 로 컴포넌트들을 감싸 각 컴포넌트에 테마를 공유하고, 컴포넌트 내에서 테마를 가져와 sx prop 등에서 사용할 수 있다.
• theme-ui에서 제공하는 컴포넌트가 아닌 컴포넌트(div, button 등 일반 html 태그나 styled()로 만든 커스텀 컴포넌트)에서 sx prop을 사용할 수도 있다. 에러가 난다면 모듈 최상단에 /** @jsxImportSource theme-ui */ 프래그마를 추가한다.
• /** @jsxImportSource theme-ui */ export default StyledBox(props) => ( <div {...props} sx={{ color: 'primary', bg: 'lightgray', fontFamily: 'body', // raw CSS value boxShadow: '0 0 1px 3px rgba(0, 0, 0, .125)', }} /> )
• 공식 문서의 Costomize 탭에서 쉽게 테마를 생성할 수 있다.

 

6. vechaiUI

Vechai UI - Tailwind CSS Components

• tailwind CSS를 사용한 디자인 컴포넌트다. 기본적으로 깔끔한 디자인에 tailwind css로 추가 스타일을 적용할 수 있다.
• 공식문서에는 나와있지 않지만 내 css 파일에 아래와 같이 tailwind 관련 설정을 추가해줘야 정상적으로 스타일을 적용할 수 있다. 관련 이슈

@tailwind base;
@tailwind components;
@tailwind utilities;

• 공식문서가 불친절하다. 예제를 실행하려면 어떤 모듈을 어디서 임포트해야 하는지도 안알려준다.
• tailwind CSS가 컴포넌트에 잘 적용되지 않을 때가 있다. 공식문서에 있는 className 그대로 가져왔는데도 적용이 되지 않기도 한다. 어떤 컴포넌트의 CSS 속성은 특정 값을 가질 때만 적용되기도 한다. (p-2, p-8은 적용되지 않고 p-4만 정상적으로 패딩이 적용된다던가)

 

7. blueprintjs

사용방법

yarn add @blueprintjs/core react react-dom

// (필수) using node-style package resolution in a CSS file: 
@import "~normalize.css";
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";

import { Button } from "@blueprintjs/core";
 
<Button intent="success" text="button content" onClick={incrementCounter} />

사용 후기

• 외형이 깔끔하나 예쁜 편은 아니다. 공식문서를 제외하고는 참고할만한 자료가 많이 없다.
• indent로 문맥에 따른 스타일 변화를 주기 쉽다(error, success, warning, danger, primary 등).
• 컴포넌트를 임포트하지 않고 blueprint.css만 임포트해도 기본적으로 태그에 적용되어 있는 스타일 덕분에 어느 정도 그럴듯한 UI를 만들어낼 수 있다. (import ‘@blueprintjs/core/dist/blueprint.css)

 

8. elastic-ui

Elastic UI

사용 방법

yarn으로만 설치 가능하다. npm으로는 설치가 안된다. npm으로 설치하는 것을 권장하지 않는 것이 아니라 그냥 설치가 안된다.

yarn add @elastic/eui @elastic/datemath @emotion/react @emotion/cache moment prop-types

사용 후기

• 테마를 전역으로 제공하는 EuiProvider로 컴포넌트를 감싸면 내부 컴포넌트에서 useEuiTheme hook으로 테마에 접근할 수 있다. 컴포넌트의 css prop에서 테마를 사용해 통일성있는 스타일 설정이 가능하다.
• 공식 문서에서 Writing 가이드도 제공한다. 문제는 영어 기준으로 작성되어 있다는 것.
• 기본적으로 원활한 반응형을 지원한다. 위의 이미지는 EUI에서 제공한 컴포넌트로만 반응형 관련 설정 하나도 없이 만든 페이지다.
• 깔끔하고 세련된 UI다.

 

9. Semantic UI

Introduction - Semantic UI React

사용 방법

$  yarn add semantic-ui-react semantic-ui-css
## Or NPM
$  npm install semantic-ui-react semantic-ui-css

import 'semantic-ui-css/semantic.min.css'

공식 문서의 Get Started를 따라가다 보면 css 파일을 임포트하는 부분에서 엄청난 길이의 웹팩 에러와 함께 실행이 되지 않을 것이다. sementic.min.css 파일 내의 더블 세미콜론으로 인해 발생하는 웹팩 에러라고 한다. 이 이슈를 참고하면 웹팩 관련 오류를 해결할 수 있다. 아니 그냥 좀 지워주지

아래 패키지를 설치한 다음, package.json에 다음 스크립트를 추가한다.

yarn add --dev @semantic-ui-react/css-patch
# or
npm install --dev @semantic-ui-react/css-patch

다음으로, 캐시를 지우고 새로 설치한 모듈을 실행한다.

$ rm -rf node_modules
$ npm cache clean --force
$ npm install
$ sementic-ui-css-patch
$ npm start

사용 후기

• 코드가 생각보다 짧다. 구조도 정말 깔끔하다.
• 아이콘을 하나하나씩 개별 임포트할 필요 없이 <Icon name='calendar'/>와 같이 props로 사용할 아이콘을 지정할 수 있다.
• **padding이나 margin같은 자주 쓰이는 속성들이 기본 props로 없다는 점이 정말 아쉽다**. Container 등에는 기본적으로 padding이 적용되어 있고 특정 컴포넌트는 padded 속성으로 좌우 패딩을 줄 수 있으나 기본적으로 주어지는 props만으로 수치를 조정할 방법이 없다.
• 공식 문서에 한 컴포넌트의 다양한 예제가 소개돼있어 빠르게 참고가 가능하다.
• 깔끔한 반응형을 위해서는 추가적으로 손 좀 봐줘야 할 부분이 있다. Grid에서는 stackable이나 doubling 속성을 맥인다던가

 

10. Carbon Design System

Carbon Design System

• IBM에서 만든 디자인 시스템이다.
• 아직까지 React 18을 지원하지 않는다. 예뻐보였는데 아쉽

 

11. FluentUI

Home - Fluent UI

• Microsoft에서 만든 디자인 시스템 프레임워크다.
• 아직까지 공식적으로 React 18을 지원하지 않는다. 이슈 보면 곧 지원할 것 같긴 하다.

 

마무리 겸 사담

글을 슬슬 마무리하려던 중에 국내 스타트업들의 디자인 시스템은? 그리고 디자인 시스템에 대한 사례 확인과 공부를 할 수 있는 곳은? 이라는 글을 발견했다. 글을 읽으면서 참 여러가지 생각을 했는데.. 적어보자면

• (아마 당연하게도) 큰 기업에서는 보통 자체적으로 사내 디자인 시스템을 만드는구나.
• 외형과 재사용성뿐만 아니라 접근성, 효율성도 디자인 시스템을 선택, 개발하는 데 중요한 요소구나. 이런 관점에서 디자인 시스템 없이 장인정신으로 모든 컴포넌트에 하나하나 직접 디자인을 입히는 것은 멋진 일이지만 효율성이 떨어지고 개발자의 지식이나 경험이 부족한 경우 접근성도 고려하기 힘든 방법인 것 같다.

💡 누구나 미리 만들어진 블럭을 활용하여 대략적인 컨셉을 만들어낼 수 있기를 기대하는 것. 디자이너가 많지 않은 상황에서, 위와 같은 컨셉으로 만들어진 디자인 시스템이 존재한다면 기획단계에서부터 위와 같은 고민을 시작할 수 있지 않을까요? 출발선이 앞당겨지는 형태로 말이죠. 다시 한 번 ‘디자인 시스템’의 효율성에 대해 생각해 볼 수 있는 내용이기도 합니다.

• 기획자들은 글도 참 맛있게 잘 쓰는구나~

왜 디자인 시스템이 필요한가? 라는 고민거리에 대해서 다양한 시중의 디자인 시스템을 찾아보며 ‘생각보다 디자인 시스템 라이브러리는 훨씬 더 고도화된 기능들을 제공하고 있었고, 이런이런 기능도 있다면 퍼블리셔나 프론트엔드 개발자가 직접 깎는 것보다 훨씬 더 개발이 빨라지겠다, 통일성은 확실히 보장되겠네’ 정도의 생각이 들었고, 위 글을 읽으면서 드디어 왜 디자인 시스템이 중요하고, 기업이 커지면 자체적인 디자인 시스템을 고민하는지를 알았다. 디자이너와 개발자의 불필요한 커뮤니케이션과 충돌을 줄이는 역할을 할 뿐만 아니라, 사용자의 접근성과 기업의 브랜딩을 위해서도 디자인 시스템이 중요한 역할을 하고 있었다. 디자인 시스템 라이브러리를 쓰면 내 디자인 개성을 빼앗기는 것 같아 흐린눈을 하며 꿋꿋이 하나부터 열까지 모든 CSS를 다 깎아왔었는데, 디자인 시스템을 사용함으로써 이런 장점을 누릴 수 있다면 앞으로는 충분히 사용을 고려해볼 것 같다. 게다가 앵간한 디자인 시스템 라이브러리들은 테마 커스터마이징도 가능하고, CSS 커스터마이징도 가능하니 이젠 사용하지 않을 이유가 없는 듯하다. 디자인 시스템 라이브러리들은 단순 예쁜 UI를 빠르게 입힐 수 있다는 것 이상으로 통일성과 접근성까지 보장하는 디자인을 제공하고 있으며 개발자와 디자이너 사이의 연결다리 역할을 할 수 있다.

 

마무리.. 라고 적어놨지만 하나만 더 소개해 드리자면

Adele – Design Systems and Pattern Libraries Repository

이 곳의 가장 큰 매력은 Pinterest, Mozilla, Microsoft, Github, Atlassian 등의 디자인 시스템을 리스트 형태로 한 눈에 확인할 수 있다는 점입니다. 디자인 시스템 이름은 무엇이고, 만든 곳은 어디이며, 코드는 어떻게 구성되어 있는지, 컴포넌트가 존재하는지 등을 확인하고 해당 디자인 시스템 페이지로 바로 이동할 수 있죠. 여기에 있는 디자인 시스템들을 하나씩 차례대로 확인하는 그 자체가 많은 도움이 될 수 있습니다. 저 역시 이 곳에서 생각지도 못한 사례와 구성들을 만날 수 있었습니다.

위 글에서 소개한 Adele이라는 사이트가 있다. 해외 유명 기업과 스타트업들의 디자인 시스템들을 표로 정리해 둔 사이트다. 이걸 진작에 알았어야 했는데 ㅎ.. 나에게 필요한 기능들을 모두 갖고 있는 시스템을 찾기에 딱 좋으며, 디자인 시스템을 선택하는 데 어떤 것들을 생각해야 하는지도 눈치껏 알 수 있다.