[FE] StoryBook 이란?

디자인 시스템이란?

디자인과 개발을 연결하는 다리인 디자인 시스템

• 애플리케이션을 구성하는 UI 요소와 규칙들을 재사용 가능한 형태로 컴포넌트화 하거나 패턴화 한 표준의 모음.
• 디자이너와 개발자 모두 UI 컴포넌트를 다루기 때문에, 디자인 시스템은 두 분야를 연결하는 다리이기도 합니다.
  또한 조직의 공용 컴포넌트에 대한 "단일한 진실의 원천(source of truth)"이다.

예시

Accessibility at GitHub | Primer

 

---

 

디자인 시스템이 없을 때 

• "이 페이지는 레이아웃 디자인이 조금 달라요"
• "파란색 텍스트들을 조금 덜 파란색으로 모두 바꿔주세요"
• "이 버튼에 마우스를 올리면 색이 진해지나요?"

디자인 시스템이 있을 때

• "이 페이지도 표준에 맞추어 레이아웃을 구성했습니다"
• " 재사용 가능한 컴포넌트에서 색을 바꾸면 모든 페이지의 파란 텍스트 색이 바뀌겠군요"
• "모든 버튼은 마우스를 올리면 색이 진해집니다"

 

---

 

디자인 시스템을 통해

• 일관된 사용자 경험 제공 가능
  • UI / UX 요소들의 표준화를 통해 일관된 사용자 경험을 제공할 수 있음.
• 효율적인 개발 가능
  • 표준화되고 재활용 가능한 요소들을 통해 효율적인 애플리케이션 개발 가능
• 제품에 대한 총체적 이해 가능
  • 제품 개발에 관여하는 다양한 이해 관계자들이 오해 없이 총체적으로 제품에 대해 이해 가능.

 

---

효과적인 디자인 시스템 구성을 위해서는

표준화된 패턴 및 사용 가능한 컴포넌트의 명세를 영확하게 확인할 수 있는 문서 필요.

애플리케이션과 구분된 샌드박스 개발 공간 필요

 

---

 

StoryBook 이란?

프론트엔드 UI 컴포넌트 테스트 도구

• 격리된 UI 컴포넌트 개발환경을 구성할 수 있게끔 도와주는 도구
• 프로젝트 내 디자인 시스템을 효율적으로 개발하고 테스트하기 위해 사용
• 문서화에 사용 가능하며, 독립된 환경에서 컴포넌트 개발 가능.

 

 

주석을 통해 props 타입, 컴포넌트에 대한 설명을 기술하고 stories 파일 meta 옵션에 tags: ['autodocs'] 을 추가하면 주석으로 작성된 설명이 문서화가 되는 것이다.

 

코드에서 주석을 작성한다는 일반적인 개발 과정을 거친것만으로도 문서화가 된다는 것은 매력적으로 느껴졌다.

 

프로젝트를 진행할 때 컴포넌트를 스토리북을 통해 관리하면 디자이너와의 협업 또한 굉장히 효율적일 것 같다.

 

앞으로 종종 사용!!

 

 

---

마무리

아래 사이트에서 Next.JS 에서 스토리북 설치하는 법이 나와있으며, 컴포넌트를 어떻게 관리해야할지에 대한 예제도 나와있으므로 한번 사용해보길 권장.

https://storybook.js.org/docs/get-started/nextjs

Storybook for Next.js • Storybook docs