디자인 시스템 세팅하기 | 디자인 시스템 구축하기 - 1

 

디자인 시스템은 왜 필요할까?

---

구글에 디자인 시스템이 필요한 이유를 검색하면 매우 많은 내용들이 검색됩니다. 제가 생각하는 디자인 시스템이 필요한 이유는 6가지입니다

1. 편리한 컴포넌트 재사용
2. 서비스의 브랜드성 확보
3. 일관된 디자인
4. 독립적인 관리
5. 명확한 UI 로직, 컴포넌트 분리
6. 개발자와 디자이너의 효율적인 커뮤니케이션 상승

물론 그 외에 다양한 이유가 더 있습니다. 근데 저는 이 6가지가 디자인 시스템을 구축해야 하는 이유에 엄청난 근거가 된다고 생각합니다. 

물론 이제 막 시작한 스타트업에서 디자인 시스템을 갖추기란 시기상조일 수 있다고 생각합니다. 그래서 많은 스타트업 개발팀은 UI 컴포넌트를 한땀한땀 만들기보다는 유명한 UI 라이브러리를 사용하고 이걸 조금씩 커스텀해가며 씁니다. 하지만, 좀 더 우리 서비스의 브랜드를 확고하게 구축하고 싶고, 사용자들에게 각인시키고 싶고, 점점 서비스 규모가 커져서 일관성 있는 디자인의 필요성과 UI 컴포넌트가 많아지고 있는 시점이라면 무조건 디자인 시스템을 구축하는 게 좋다고 생각합니다.

디자인 시스템을 구축할땐 무조건 디자이너가 있어야 한다고 생각합니다. 디자이너는 디자인 방법론에 대해 매우 빠삭하게 잘 알거든요. 그리고 UX를 고려해서 디자인을 구축하기에 같이 협업하면 배워가는 부분이 정말로 많습니다. 또한 우리 브랜드의 가치를 디자인에 녹아내려고 하기 때문에 web에 적합한 컬러들을 잘 활용해서 브랜드 컬러를 매우 잘 구축해 냅니다. 

 

 

내가 디자인 시스템을 구축하려는 이유

---

저는 전회사에서 디자인 시스템을 설계한 경험이 있습니다. 다만, 라이브러리화 해본 적이 없습니다. 어드민 프로젝트에서 점차 적용해 나가면서 사용성을 검증하고 유저 서비스에도 적용하는 방향으로 목표를 잡았으나 아쉽게도 거기까진 가지 못하고 제가 퇴사하게 되었습니다. 그래서 만약 내가 그 지점까지 갔을 때 라이브러리화는 어떻게 할 수 있지? 싶어서 제가 만들고 있는 프로젝트에 있는 UI 컴포넌트들을 한번 배포해 보려는 게 처음 목적이었습니다

근데! 제가 구독자 중 한 분이신 해리스 님과 커피챗을 하며 다양한 이야기를 나눴습니다. 현재 미국에서 매우 핫한 shadcn-ui가 있는데, 1인 개발자가 만들어서 vercel에 호스팅 되었다고 합니다. 해당 UI 컬렉션 (라이브러리가 아니라고 말함ㅋㅋ)은 이미 2023년부터 유명해졌는데, 제가 너무 늦게 알았더군요...? 아무튼 저의 마지막 UI 라이브러리는 mantine이었기에... 소식을 너무 늦게 알았습니다. 마침 디자인 시스템의 래퍼런스가 될 프로젝트를 찾고 있었는데 평소에 쓰던 mantine 라이브러리 코드를 보니 저에겐 크게.. 도움이 안 되는 코드였습니다. 단순하게 Button이라고 한다면, Button에 대한 컴포넌트가 대체 어디 있는지 모르겠더군요? 저만 못 찾는 건지... 컴포펀트 구조를 어떤 식으로 작성했는지 궁금했던 거였는데 그다지 도움이 될만한 코드를 발견하진 못했습니다. 근데 shadcn-ui는 번들되지 않은 소스 코드라서 컴포넌트 구조 그 자체를 볼 수 있었습니다.

특이한 건 Radix UI를 기반으로 했다는 것입니다. 처음 들어보는 라이브러리인데요... (모르는 게 참 많고요..) headless UI라고 하는데 디자인 없이 기능만 제공해 주는 것이라고 생각하면 됩니다. shadcn-ui는 그렇게 기본이 되는 Radix UI를 바탕으로 tailwind css를 써서 디자인을 입힌 것 같습니다. 또한 Radix UI는 웹 접근성이 갖춰져 있습니다. 우리가 예쁜 UI를 만들기 위해 작업하다 보면 기존의 HTML tag를 그대로 못 쓰고 우회해야 하는 경우들이 생깁니다. (특히 radio, checkbox) 그럴 때 웹 접근성이 깨지죠. 근데 이 라이브러리를 쓰면 그럴 걱정이 없다는 것입니다.

여기서 제가 웹 접근성에 아차 싶었습니다. 그동안 제가 프로그래밍 기술적인 것에 너무 집중해서 잊고 지냈습니다. 신입 시절에는 어떻게 하면 더 좋은 CSS를 작성할 수 있을까? 어떻게 하면 순수 HTML, CSS만으로 독립적인 UI를 만들 수 있을까? 웹표준, 웹접근성에 맞는 HTML 태그를 사용하고 있는 걸까? 에 대해 고민했었는데, 지금은 어떻게 하면 프론트엔드 기술을 더 깊게 사용할 수 있을까? Next.js 최신화 공부? 더 효율적인 state 관리는? 효율적인 프론트엔드 아키텍처는? 등등... 이런 것들을 고민하느라 어느 순간 좋은 HTML 구조는 잊고 살았고, 저 또한 이젠 별생각 없이 웬만해선 div 태그로 해결했던 것 같습니다

저는 본인이 프론트엔드 개발자로서 강력한 장점이 무엇이라고 생각하시나요?라는 질문을 받으면 대답하는 몇 가지 중에 하나가 "저는 CSS를 자유자재로 쓸 수 있고, 늘 의미 있는 HTML 구조를 생각합니다." 였었습니다. 근데... 장점인데 등한시한 것 같습니다. 그리고 어느 순간 이건 그다지 중요하지 않다고 생각했던 것 같아요. 사실 요즘 채용공고만 봐도 CSS 잘 다루냐에 대한 내용은 사라진 지 오래입니다. 왜냐면 너무 편리한 라이브러리들이 잘 나와서요. 이젠 면접에서도 HTML, CSS에 대한 질문을 받은 지... 엄청 오래된 것 같습니다. 더 이상 안 물어보는 것 같아요. 더 프로그래밍적인 기술 질문들을 하시지...

아무튼 장점이었으면서 장점이 아니게 되어버렸습니다. 제가 제 스스로 장점을 버린 거죠. 근데 우리 프론트엔드 개발자는 잊어서는 안 됩니다. 우리의 시작점과 존재 이유는 HTML, CSS에 있다고 생각합니다. 다시 한번 나의 존재를 상기시키며(?) 단순 라이브러리 배포를 경험하기 위해 디자인 시스템을 구축하는 게 아닌, 의미 있는 구조로 웹표준, 웹 접근성을 고려한 예쁜 디자인 시스템을 만들자고 결심하게 되었습니다. 물론 제가 평소에 부족했던 부분을 채워나가는 것도 중요하지만, 이미 잘하던걸 더 잘하는 공부도 꾸준히 해야겠다는 생각이 들었습니다. 코딩은 안하면 금방 잊혀지거든요.

 

 

프로젝트 세팅

---

https://bundlers.tooling.report/

Overview | Tooling.Report

디자인 시스템 프로젝트를 시작하기 위해 프로젝트 세팅을 해보겠습니다.
앞서 말한 shadcn-ui은 라이브러리 같은 개념이 아니라서 번들화가 되어있지 않습니다. 매우 신박한 방식인데, 저는 그냥 라이브러리화 하려고 합니다. 이유는 일단 개인 공부의 개념이 더 크니까... 라이브러리 배포는 어떻게 이루어지는지 궁금하거든요.

개인적으로 당연하다듯 vite를 쓰려고 하려다가, 늘 당연한 것은 없다며(?) 내 상황에 더 알맞고 좋은 번들러가 없을까 싶어서 알아봤습니다. 소규모 프로젝트에 parcel가 간편하다고 해서(제로 구성) 관심이 갔는데, 생태계가 작은 것 같더라고요. 갈수록 사용자가 떨어지고 있기도 하고... 그리고 치명적인 단점으로 트리쉐이킹 기능이 webpack 또는 vite에 비해 덜 효율적이다란 말도 있고... 고민고민 하다가 parcel은 포기하고, webpack을 다시 써볼까? 싶었습니다. vite가 react를 지원하기 전에는 webpack을 썼었습니다. 그 당시 webpack을 써봤을 때랑 vite를 비교해 보자면 webpack은 느립니다. 그리고 가장 큰 차이점으로는 vite도 제로 구성을 목표로 하고 있기에 설정이 간단한데 webpack은 설정이 진~짜 복잡합니다. 그래서 그만큼 자율성, 유연성이 높은 거긴 한데... 흐음... 고민고민하다가 결국 vite를 쓰기로 했습니다^^ 제 상황과 프로젝트 규모에는 vite가 맞는 것 같습니다ㅋㅋㅋㅋㅋㅋ

React + typescript(+swc) + tailwindcss + storybook + vite 조합으로 세팅하려고 합니다

$ npm create vite@latest [프로젝트 명] --template react-ts

storybook 설치

$ npx storybook@latest init --builder vite

tailwind css 설치 (공식문서)

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

storybook preview.ts에 tailwind css가 반영되게 import 해주기

import type { Preview } from "@storybook/react";
import "../src/styles.css";

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

이렇게 프로젝트를 세팅하면 끝납니다.

 

 

 

마무리

---

이번 게시물은 여기까지만 쓰고, 다음 글은 컴포넌트들을 만들면서 겪은 것들을 기록해나가려고 합니다.