TypeScript와 Storybook을 사용하여 디자인 시스템 구축하기

이 튜토리얼은 TypeScript와 Storybook을 사용하여 리액트 디자인 시스템을 구축하는 방법을 다룹니다. 이 문서를 통하여 여러분들은 다음과 같은 주제들을 배우게 됩니다.

• 디자인 시스템 이해하기

• Storybook의 주요 기능 살펴보기 및 컴포넌트 문서화하기

• 디자인 시스템 구축하기

• Rollup을 사용하여 컴포넌트 라이브러리를 NPM에 등록하기

• 기존 프로젝트에 Storybook 적용하기

디자인 시스템, 디자이너들에겐 굉장히 익숙한 주제일 것입니다. 프런트엔드 개발자에겐, 익숙할 수도 있고 그렇지 않을 수도 있습니다. 그 이유는 개발에 있어서 필수적인 요소는 아니기 때문이죠. 하지만 있으면 굉장히 도움이 많이 되고 생산성을 올려주는 것은 사실입니다. 하지만 솔직히 준비하는데 시간이 좀 많이 들어가죠. 그래서 도입하고 싶은데 여건이 안돼서 그러지 못한 분들도 많을 것이라고 생각이 됩니다.

저 또한 그런 사람입니다. 필요성은 예전부터 느껴왔지만 계속해서 미뤄왔고 조금 뒤늦게 도입을 시작했으며 현재 진행형입니다.

디자인 시스템이 얼마나 중요한지, 얼마나 도움이 되는지, 워크플로우를 얼마나 개선시키는지, 그러한 주제는 아직 저도 경험치가 풍부하지는 못해서 아쉽게도 이 강의에선 그 주제에 대해서 다루지 않았습니다. 그 대신에 이 강의에서는 프런트엔드 개발자로서 디자인 시스템을 어떻게 이해해야 하며 그리고 또 이를 도입하기 위하여 어떻게 준비를 해나가야 하는지에 대한 내용을 다뤄볼것입니다.

이 강의에서는 디자인 시스템을 준비하는 과정에서 매우 유용하게 사용될 수 있는 도구인 Storybook이라는 도구를 알아보고 직접 사용해보는 시간을 가져볼 것이고요, 여기서 덤으로 컴포넌트를 만들 때 TypeScript를 사용하는 방법도 다뤄볼 것입니다. 이 강의에서 우리는 디자인 시스템을 직접 구축해보고 NPM에 등록해서 사용하는 것도 알아볼 것입니다.