개발자 입장에서의 디자인 시스템 - 스토리북

스토리북은 무엇이고 디자인 시스템과 어떻게 적용되나요?

한윤석 (두블링 DOBLING, UI/UX 디자이너)

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

디자인 시스템 구축을 진행하면서 아토믹 디자인 방법론에 대해 알아보았습니다. 그럼 디자인 시스템을 정립했을때 개발자는 각 컴포넌트들을 어떻게 관리할까요? 디자인 시스템 관리 방법에 대하여 알아보겠습니다.

개발자 입장에서의 디자인시스템

스토리북과 디자인시스템

개발에 대한 이해와 스토리북 탄생

디자인 시스템은 컴포넌트 단위로 진행하지만 실제 개발환경은 항상 페이지 단위로 만들어진다는 점이 있습니다. 이는 개발자들이 컴포넌트 단위로 개발하는데 있어서 문제점이 되었습니다. 서비스에서 사용하는 수 많은 버튼의 상태를 의존성과 환경 변수가 걸려있는 페이지에서 일일이 테스트를 해야 했기 때문에 더욱 문제점이 될 수 밖에 없었습니다.

이에 컴포넌트를 완전히 고립시키기 위하여 컴포넌트 단위의 개발 환경을 지원해주는 StoryBook이라는 개발 도구가 생기게 되었습니다.

컴포넌트 갤러리, 스토리북

디자이너가 디자인 시스템을 피그마에 정립하는 것처럼 개발자들은 스토리북으로 디자이너가 정립한 시스템기반 컴포넌트를 정리합니다. 일종의 컴포넌트 갤러리 개념으로 이해할 수 있는데  애플리케이션에서 사용되는 모든 컴포넌트의 조합을 페이지별로 등록해 놓고 편리하게 눈으로 확인할 수 있도록 네비게이션을 제공합니다.

스토리북

스토리북 - Controls

스토리북은 단순한 갤러리 형태가 아닙니다. 위의 그림을 보게 되면 'Actions', 'Controls'를 볼 수있는데, 이 기능들은 더욱 컴포넌트의 분리가 가능하도록 도와줍니다.

먼저 'Actions'의 경우, 컴포넌트를 통하여 특정 함수가 호출 되었을 때 어떤 함수가 호출 되었는지 그리고 함수에 어떤 파라미터를 넣어서 호출 했는지에 대한 정보를 확인 할 수 있게 해줍니다.

'Controls'의 경우, 아래의 그림과 같이 Props로 전달받은 것들을 변화시켜 Canvas 에서 시각적 테스트를 진행할 수 있도록 도와줍니다.

디자인 시스템작업과 함께 개발

컴포넌트 단위의 개발에서 Storybook 은 디자인 시스템과 같이 도입하는 것이 효율성이 높습니다. 이를 증명하듯, Storybook은 문서화와 같은 기능을 추가하며 디자인 시스템을 구축하기 위한 발전을 진행하고 있습니다.

결론

이처럼 디자인 시스템은 스토리북과 UI 컴포넌트를 공유합니다. 이때, 컴포넌트의 재사용성을 위해 아토믹 방법론을 기반으로 시스템을 잡아갑니다. 

디자인 시스템의 재사용성을 위해 컴포넌트 단위 개발의 필요성이 대두되었고 스토리북은 개발한 컴포넌트를 다양한 기능을 통하여 기획자, 디자이너가 손 쉽게 보고 테스트 할 수 있게 도와줍니다.

이러한 공부를 통해 디자이너도 개발자와의 대화를 통해 개발환경에 대해 이해하고 더 효율적인 커뮤니케이션을 이어가야 할 것입니다.