사내 디자인 시스템 제작

디자인 시스템 제작 배경

현재 회사는 기존 서비스를 Saas 형태로 전환하려 한다. 기존에는 기술 인력이 고객사에 방문하여 서비스를 직접 설치해 주는 방식이었다고 한다. 하지만 Saas를 통해 고객들이 사이트에서 설치를 직접하는 방식으로 사업모델을 변경하려 한다. 그래서 리액트 기반의 서비스 사이트를 구축해야 했다. 이외에도 여러 프로젝트를 막 시작하고 있었다. 각 프로젝트에서 공통적으로 사용되는 컴포넌트들을 각 프로젝트에서 매번 만드는 것은 매우 번거롭고 귀찮은 일이다. 그래서 사내에서 사용할 디자인 시스템을 구축하고 있었다. 내가 회사에 합류했을 때 각자 1개의 컴포넌트를 맡아 진행하고 있었다. 나는 모달 컴포넌트를 맡아 제작하기 시작했다.

모달 컴포넌트 제작 과정

우선 디자인 시안을 보며 내가 어떤 변수들을 제어해야하는지 파악했다. 그리고 내가 자주 사용하던 antd에서 해당 변수들을 어떻게 받고 모달 컴포넌트를 어떻게 사용하는지 확인했다. antd가 많은 사람들이 사용하는 라이브러리니 유사하게 제작하면 대부분 편하게 이용할 수 있을 것이라 생각했다. 그리고 처음으로 브랜치를 만들고 컴포넌트를 만들기 시작했다.

모달 컴포넌트를 제작하는 것은 2일정도 소요되었다. 오랜만에 코드를 작성하다보니 헷갈려서 구글링하는 시간이 굉장히 오래걸렸다. 그리고 다른 팀원들이 어떤 방식으로 구현했는지 확인하고 맞추는 시간이 필요했던 것 같다. 예를들면 나는 이전까지 styled components를 사용했는데 회사에서 emotion을 사용하여 사용법을 찾아가며 구현했다. 그리고 코딩 컨벤션이 있어 매번 확인하며 진행하느라 시간이 더 걸렸던 것 같다.

모달은 다른 컴포넌트와 달리 포지션 잡는 것이 어려웠다. 회사의 모달은 드래그도 가능해야 했기 때문에 초기 포지션을 설정하는데 어려움이 많았다. 내가 포지션과 디스플레이에 관해 좀 더 잘 알았다면 금방 해결했을 문제였던 것이 아쉬웠다.

모달을 만들다 보니 디자인 시안에 기재되어 있는 기능 이외에도 필요할 것 같은 기능들이나 변수들이 있었다. 예를 들면 모달 외부를 클릭했을 때 모달이 닫히는 기능이었다. 보통 모달 외부를 클릭하면 닫혔던 것 같아 논의를 하여 외부 클릭 시 모달이 닫히게 했다.

이렇게 작성한 컴포넌트를 팀원들과 공유하며 리뷰를 하고 컴포넌트를 완성하게 되었다.

스토리북 제작 과정

사실 컴포넌트 만드는 것 보다 스토리북 코드를 작성하는 것이 더 어렵고 힘들었다. 일단 스토리북 코드는 처음 접해봐서 모든 것을 구글링하며 진행했다. 그리고 모달은 다른 버튼이나 텍스트 입력 컴포넌트와 달리 상태관리가 필요했다. 스토리북 상에서 버튼을 클릭하면 모달의 visible 상태를 갱신하여 모달창이 팝업되어야 하기 때문이다. 다른 블로그에는 간단한 컴포넌트 예시밖에 없어서 찾는것이 너무 힘들었다.

const Template: ComponentStory<typeof SModal> = args => {
  const [isModalVisible, setIsModalVisivle] = useState(false);

  const handleClick: React.MouseEventHandler = () => {
    setIsModalVisivle(true);
  };

  const handleOkBtn: React.MouseEventHandler = () => {
    setIsModalVisivle(false);
  };

  const handleCancelBtn: React.MouseEventHandler = () => {
    setIsModalVisivle(false);
  };

  const handleCancel: React.MouseEventHandler = () => {
    setIsModalVisivle(false);
  };
  return (
    <div>
      <Button onClick={handleClick}>Open Modal</Button>
      <SModal
        visible={isModalVisible}
        title={args.title}
        onCancel={handleCancel}
        actionType={args.actionType}
        actionLink={args.actionLink}
        actionLinkLabel={args.actionLinkLabel}
        secondaryBtnLabel={args.secondaryBtnLabel}
        primaryBtnLabel={args.primaryBtnLabel}
        secondaryBtnFunction={handleCancelBtn}
        primaryBtnFunction={handleOkBtn}
        draggable={args.draggable}
        center={args.center}
        top={args.top}
        size={args.size}
        width={args.width}
        left={args.left}
        isBackgroundActive={args.isBackgroundActive}
        isCloseIconVisible={args.isCloseIconVisible}
      >
        {args.children}
      </SModal>
    </div>
  );
};

위와 같이 템플릿 안에서 상태를 선언할 수 있다는 것을 3시간 구글링 끝에 알아냈다..😢 다른 팀원들도 해본적이 없어서 물어볼 곳이 없었다는 것이 너무 슬펐다. 그리고 모달에서 받는 변수는 위보다 더 많아졌다. 각 변수별로 설명과 예시를 작성하는 것이 보통일이 아니었다. 그래도 추후에 팀원들이 스토리북을 보며 사용법을 익혔다 해서 뿌듯했다.

끝없는 수정 지옥

이렇게 스토리북 작성까지 완료하고 npm에 배포(험난한 배포과정은 다른 글에서 다루도록 하겠다.)하여 사내에서 사용하기 시작했다. 나는 "이제 문제 없겠지~😁" 라고 생각했지만 큰 오산이었다. 일단 사내 프로젝트에는 내가 받았던 디자인 시안보다 더 다양한 디자인의 모달들이 존재했다. 예를들면 모달의 제목이 없거나 X 버튼이 없거나 배경색이 없거나 외부 클릭이 되거나... 끝도없이 수정사항이 나왔다. 현재도 수정해야 하는 부분들이 쌓여있다.

계속 수정하면서 다들 빠르게 만들고 계속 개선해나가야 한다고 하는구나 라고 느꼈다. 그리고 너무 완벽하게 만들려 하면 나에게 스트레스만 쌓이고 시간만 잡아먹는 것 같다. 빠르게 구현하고 빠르게 피드백 받고 반영하며 완성도를 높이는 방식으로 접근해야 할 것 같다.

마치며

사내 디자인 시스템은 Surf-Desing-System에서 확인할 수 있습니다. 오픈소스이니 많이 사용해 보시고 개선할 부분이 있다면 댓글이나 연락주시면 감사하겠습니다.