StoryBook의 개념과 Figma와의 공존

얼마전 있었던 LG CNS 웨비나에서 언급되었던 스토리북에 대해 정리할겸 작성한 포스트

 

우선 StoryBook이란 Frontend 개발자가 UI 컴포넌트를 개발하고 테스트할 때 도움이 되는 도구로서 개별 컴포넌트를 격리하여 다양한 상황에서 시각적으로 테스트 및 문서화 할 수 있다. 주요 개념은 아래와 같다.

 

• Component: UI 컴포넌트, 예를 들어 버튼, 폼 필드, 헤더 등과 같은 것들.
• Story: 특정 컴포넌트의 특정 상태나 사용 사례를 설명하는 코드 조각. 예를 들어 버튼 컴포넌트의 "일반", "활성화", "비활성화" 상태를 보여주는 스토리를 만들 수 있다.
• Addon: Storybook에 추가 기능을 제공하는 확장 프로그램, 예를 들어 시각적 스냅샷 생성, 스타일 가이드 자동 생성 등.
• Storybook Server: 로컬 또는 원격 서버에서 Storybook을 실행하여 컴포넌트를 미리 볼 수 있게 해준다.

StoryBook을 사용함으로써 컴포넌트의 다양한 상태를 시각적으로 확인할 수 있어 디자인 미스매치나 버그를 빠르게 식별할 수 있으며, 사용 사례에 대한 문서화가 자동으로 생성되어 팀 구성원이 이를 컴포넌트를 이해하는데 도움이 된다. 또한 각각 격리된 환경에서 테스트되기 때문에 외부 의존성으로 인한 문제를 줄일 수 있다.

 

StoryBook 사용을 위한 개략적인 단계는 아래와 같다.

1. 설치: 프로젝트에 Storybook을 설치하고 구성.
2. 스토리 작성: 컴포넌트에 대한 스토리를 작성하고 컴포넌트의 다양한 상태 및 사용 사례를 정의.
3. 시각적 테스트: Storybook을 실행하고 컴포넌트를 시각적으로 검토.
4. 문서화: 자동으로 생성된 문서를 통해 컴포넌트에 대한 정보를 확인하고 공유.

Storybook은 주로 React, Vue, Angular, 등의 프레임워크와 함께 사용되며, 컴포넌트 기반 프로젝트에서 특히 유용하다. 프로젝트의 디자인 및 개발 단계에서 UI 컴포넌트를 관리하고 테스트할 때 Storybook은 큰 도움이 될 것으로 보인다.

 

예전 프로젝트에서는 Figma로 각각의 요소를 디자인하고 이 디자인을 export하여 코드를 구현하는데 사용했었다. 즉, Figma를 사용한 구현은 여러 번 사용해봤지만 StoryBook은 아직 개념이 생소해서 어떤 차이가 있는지 정리해보았다.

1. Figma:
   - 디자인 도구: Figma는 디자인 툴로, UI/UX 디자인을 작성하고 디자인 시스템을 구축하는 데 사용된다.
   - 협업: 여러 사용자가 동시에 디자인을 편집하고 협업할 수 있는 플랫폼이다.
   - 프로토타이핑: 웹 및 모바일 프로토타입을 만들 수 있으며, 디자인 검토와 사용자 피드백 수집에 적합하다.
2. StoryBook:
   - 개발 도구: Storybook은 개발 도구로, 프론트엔드 컴포넌트를 개발, 테스트 및 문서화하는 데 사용된다.
   - 시각적 테스트: 컴포넌트의 시각적 테스트 및 문서 생성을 위한 목적으로 사용된다.
   - 격리된 환경: 컴포넌트를 격리된 환경에서 테스트하고 문서화하여 개발자 간 협업과 디자인 시스템 구축에 도움이 된다.

간략하게 말하면 디자인 툴과 개발 툴의 차이로 보인다. 따라서 이 두 종류의 툴을 함께 사용하면 더욱 튼튼한 설계 및 구현이 가능할 것 같다.

• 디자인 프로세스와 개발 프로세스 분리: 디자인 프로세스에서 Figma를 사용하여 디자인 시스템과 컴포넌트 디자인을 작성하면 이러한 디자인 자산을 개발자에게 전달하고 개발 단계에서 Storybook을 사용하여 컴포넌트를 개발하고 테스트할 수 있다.
• 재사용 가능한 디자인 시스템: Figma에서 개발된 디자인 컴포넌트를 Storybook과 통합하여 개발 단계에서 그 디자인 컴포넌트를 재사용한다. 이것은 디자인 시스템과 프론트엔드 코드 사이의 일관성을 유지할 수 있게 도와준다.
• 시각적 일치 검사: Figma 디자인과 Storybook에서 구현된 컴포넌트 간의 시각적 일치를 확인하는 도구를 사용하여 둘 간의 일관성을 유지할 수 있다.
• 협업: 개발자와 디자이너가 협업하여 디자인 시스템과 컴포넌트를 개발하고 유지 보수하는 데 필요한 효율적인 커뮤니케이션을 주고받을 수 있다.

Figma와 StoryBook은 프로젝트 생명주기의 서로 다른 단계에서 각각 유용하며, 상호 보완적으로 사용될 수 있다. Figma는 디자인 단계에서, Storybook은 개발 및 문서화 단계에서 사용될 것이다. 이러한 접근 방식은 디자인 시스템의 일관성을 유지하고 프로젝트의 품질을 향상시키는 데 도움이 될 것으로 보인다.