디자인 시스템 구축 - 1

gak·2023년 5월 16일

DesignSystem designToken style-dictionary

디자인 시스템 구축 - 1

개요

회사에서 디자인 시스템을 개발하게 되었다. 디자인 시스템을 도입하게된 배경에는 개발자마다 UI 작업의 결과물이 다른 현상을 막기 위해서이다. UI 를 만들때 정해진 규칙이 없다보니, 사람마다 구현이 다 다르고 몇몇 개발자들은 종종 유지보수하기 어려운 css 구조를 만들기도 했다. 또 다른 문제점은, 똑같은 컴포넌트가 여러개 생긴다는 것이다. 회사의 규모가 커지고 그에 따라 프로젝트의 규모도 커지면서, 굉장히 많은 리액트 파일이 존재하게 되었다. 특정 UI 를 재사용 할 수 있음에도 해당 UI 가 존재하는지 존재하지 않는지 확인하는 것도 공수가 많이들어 많은 개발자들이 UI 를 다시 만드는 경우가 빈번했었다.

요약하면.. 디자인 시스템 도입을 결정하게 된 이유는

프디와 개발자의 체계적인 의사소통
개발자는 UI 작업할때, 피그마만 보고 수동적으로 작업할 수 있도록
구축한 디자인 시스템 컴포넌트를 참고하여, 중복되는 컴포넌트가 없게끔.

어떻게 구축할 것인가?

디자인 시스템을 구축하기 위해 필수적인 3가지는 아래와 같다.

디자인 토큰
디자인 토큰 파싱
범용성이 높은 리액트 컴포넌트

1.디자인 토큰

디자인 토큰이란, 디자인의 최소 단위를 의미한다.
예를들어, color_danger 이라는 토큰에 #ff0000 을 할당한다면, color_danger = #ff0000 는 1개의 디자인 토큰이 되는 것이다.

색깔뿐만아니라, padding 이나 opacity 등 모든 디자인 요소에 토큰을 도입했다.

// example
padding-m = {value: '12px'};
padding-l = {value: '16px'};
opacity-0 = {value: '0.1'};

이 작업은 디자이너들이 피그마를 통해서 진행했다. token studio 라는 피그마 플러그인을 사용했다고 한다.
디자인 토큰은 일반적으로 객체 형태로 구성되며, value 속성이 필수적으로 필요하다.

2. 디자인 토큰 파싱

디자인 토큰 파싱은, 피그마에 입력된 값들을 개발에 사용할 수 있는 값으로 변환하는 작업을 일컫는다.
디자인 토큰 파싱 라이브러리 중 제일 유명한게 style dictionary 라서 이걸 사용하기로 했다.
(생태계가 가장 넓고 문서가 제일 잘 되어있었음.)
이 라이브러리를 사용하면 피그마에 나와있는 토큰값을 브라우저에서 사용할 수 있는 형태로 변환할 수 있다.

아래 코드는 style dictionary 를 이용해 피그마에서 가져온 토큰을 개발에서 사용할 수 있는 형태로 파싱하는 코드이다. 구체적인 파싱 로직은 보안상 생략했다.

styleDictionary
    .extend({
        include: ['tokens/base-dark.json', 'rawTokens/2. semantic/*.json', 'rawTokens/2. semantic/*.json'],

        source: ['rawTokens/3. component/*.json'],
        platforms: {
            js: {
                transformGroup: 'custom/base',
                files: [
                    {
                        format: 'javascript/flat',
                        destination: `styles/componentDark.ts`,
                        name: 'componentDark',
                        filter: token => token.filePath.includes('3. component'),
                    },
                ],
            },
        },
    })
    .buildAllPlatforms();

3. 리액트 컴포넌트 생성

토큰을 파싱한 다음, 리액트 컴포넌트에 사용하기 전에 먼저 파싱한 토큰을 등록해야한다.
토큰을 등록하는 방법은 크게 2가지가 있다.

1. 토큰을 css 파일 내부에 variable 로 정의하기.
1. 토큰을 styled-components 테마 프로바이더에 제공하여 사용하기.

우리는 두번째 방법을 사용하기로 했다.

아래와 같이 버튼을 선언했다.
버튼의 스타일링은 styled-components 와 컴포넌트 토큰을 사용해서 만들었다.

function CommonButton(props: CommonButtonProps) {
    const figmaProps = CommonButton.propsToFigmaProps(props);
    return (
        <Container
            className={props.className}
            figmaProps={figmaProps}
        >
            <BorderContainer
                figmaProps={figmaProps}
                onClick={props.onClick}
            >
                <Text figmaProps={figmaProps}>{props.children}</Text>
            </BorderContainer>
        </Container>
    );
}