Storybook이란? | 사용하는 이유

우선 storybook을 알고 쓰려면 디자인 시스템에 대한 이해가 필요하다. 

---

 

디자인 시스템

• 디자인 원칙과 규격, 재사용 가능한 UI 패턴과 컴포넌트, 코드를 포괄하는 시스템
• 디자이너와 개발자를 연결하는 다리 역할
• 서비스 인터페이스의 일관성 유지에 도움
• 코드의 재사용성을 통해 더 빠르고 효율적인 개발이 가능

 

프로젝트 시 일반적으로 생성하는 공통 컴포넌트가 이 디자인 시스템의 가장 대표적인 예시이다.

그렇다면 스토리북은 어떤 도구이며, 왜 사용하는 것일까?

 

---

스토리북

 

프론트엔드 개발에서 UI 컴포넌트를 개발, 테스트 및 문서화하는 데 사용되는 강력한 도구

스토리북을 "워크벤치"로 사용하여 앱 밖에서 UI 컴포넌트를 구축

 

 

사용 이유

1. 컴포넌트 단위 개발

• 스토리북을 사용하면 UI 컴포넌트를 개별적으로 개발할 수 있다. 각각의 컴포넌트가 스토리로 나눠져 있기 때문에 모듈화된 개발이 가능하며 효율적으로 프로젝트를 관리할 수 있다.

 

2. 시각적 테스트

• 스토리북을 사용하면 각각의 컴포넌트를 시각적으로 테스트할 수 있다. 컴포넌트의 다양한 상태(variant)를 스토리로 나타내어, 실제 화면에서 컴포넌트의 모습을 확인할 수 있으며, 이를 통해 UI의 디자인과 레이아웃을 검증할 수 있다. 

 

3. 재사용성과 일관성

• 스토리북을 사용하여 컴포넌트를 개발하면, 컴포넌트의 재사용성과 일관성을 유지할 수 있다. 각각의 컴포넌트는 독립적으로 테스트되기 때문에 이를 통해 코드의 신뢰성을 높일 수 있다.

 

4. 문서화

• 스토리북은 각각의 컴포넌트에 대한 문서화를 제공한다. (심지어 자동으로) 각 스토리는 해당 컴포넌트의 사용법, 속성 및 예제 코드를 제공하여 개발자들이 컴포넌트를 쉽게 이해하고 사용할 수 있도록 돕는다. 

 

 

5. 협업과 공유

• 스토리북은 팀 내에서 UI 컴포넌트를 공유하고 협업하는 데 유용하다. 각각의 스토리는 개발자들이 컴포넌트를 쉽게 검토하고 피드백을 주고받을 수 있도록 돕는다. 
• 또한 스토리북은 프로젝트와 분리하여 개발이 가능하며, 여러 프로젝트에 공통적으로 사용할 수 있다. 그렇기 때문에 보다 효율적인 협업과 공유가 가능하다.

 

 

 

스토리북은 스타일을 위한 것?

→ NO

 

 storybook은 ESLint나 Prettier과 같은 코드 관리와는 다른 개념이다.

오히려 테스트 도구에 가깝다. (테스트 도구는 아니지만 테스트 환경을 구축하는 데 도움을 주며, 디버깅에도 탁월하다.)

 

 

 

 

스토리북은 반드시 프로젝트 생성 후 추가?

→ NO

 

스토리북은 프로젝트의 일부가 아닌 별도의 독립적인 도구로 사용될 수 있다.

• 이미 생성된 프로젝트에 스토리북 추가 → O
• 개별적으로 스토리북 프로젝트 생성 → O

 

스토리북 프로젝트를 개별로 생성하면 해당 프로젝트에서 UI 컴포넌트를 개발하고 테스트할 수 있다. 이때 스토리북은 다른 프로젝트에 종속되지 않으므로 프로젝트 간의 독립성을 유지할 수 있다.

 

물론 이미 프로젝트를 생성했고, 다른 프로젝트와 UI 컴포넌트를 공유할 필요가 없는 경우에는 생성된 프로젝트에 스토리북을 추가하는 것이 편하겠지만, 필요한 경우에는 개별적으로 스토리북 프로젝트를 생성하여 사용할 수 있다. 

 

 

 

 

개별로 생성한 스토리북을 프로젝트에서 사용하는 방법

1. 컴포넌트 패키지로 배포

• 프로젝트에서 해당 패키지를 종속성으로 추가하여 사용
• 일반적으로 가장 효율적 (재사용성 ↑, 유지보수성 ↑)
• https://storybook.js.org/tutorials/design-systems-for-developers/react/ko/distribute/

 

2. 코드 복사 및 붙여넣기

 

3. Git 서브모듈

 

4. npm 또는 yarn link

• 스토리북 프로젝트를 npm 또는 yarn을 사용하여 로컬에서 링크하고, 프로젝트에서 해당 패키지를 사용한다. 이를 통해 실제 배포 전까지 개발 중인 컴포넌트를 테스트하고 사용할 수 있다. 
• 개발 단계(로컬 환경)에서만 사용 가능한 방법이다. 

 

 

 

 

---

[ 참고 자료 ] 

https://storybook.js.org/tutorials/design-systems-for-developers/react/ko/introduction/

https://yozm.wishket.com/magazine/detail/1830/