디자인 시스템과 스토리북

디자인 시스템과 스토리북

2022. 2. 3. 22:54ㆍ카테고리 없음

최근 회사에서 인사이트를 공유하고자 스토리북 사용 권장을 위한 팀 세미나를 진행했습니다.

사용하면서 느꼈던 장점과, 처음 접했을 때 헷갈릴 수 있는 요소들을 위주로 가볍게 정리해본 내용에 대해 공유합니다 :)

디자인 시스템

디자인 시스템이 처음이라면, 간단히 스타일 가이드와 컴포넌트의 복합체를 의미합니다.

컴포넌트들이 어떻게 사용되어야 하는지, 디자인을 할 때 어떤 규칙들을 지켜야 하는지에 대한 가이드를 제시하고, 통일성 있는 UI를 제공합니다.

스토리북

디자인 시스템과도 밀접한 관련을 가진 스토리북은, 개발 방식의 효율성 향상을 위해 다양한 방식으로 사용되는 UI 컴포넌트 개발 도구입니다. 리액트와 완전히 분리된 UI 컴포넌트 개발용 오픈소스 도구로, 디자인 시스템의 테스팅, 문서화 툴, 외부 공개용 디자인 시스템 개발 등에 다양히 활용될 수 있습니다. 이를 통해 사용하는 언어를 넘어 개발자와 기획 모두에게 Story별로 UI 컴포넌트가 어떻게 사용될 수 있는지 체험해보고, 공통된 화면으로 자유로운 컴포넌트 테스트를 가능하게 합니다.

스토리북이 가진 다양한 장점은 개발 환경에 도입했을 때의 비로소 다양한 강점을 제공합니다.

스토리북의 풍부한 기능만큼 다양한 개발 환경에 맞게 커스텀되어 사용되는 UI 컴포넌트 개발 도구이므로, 이를 잘 이해하고 프로젝트에 맞는 기능을 조합해 좋은 시너지를 내는 것이 필요합니다.

스토리북의 장점 중 하나는 협업 규모가 큰 프로젝트 환경에서 타인의 코드를 이해하는 비용을 줄이고,

개발시 자연스럽게 컴포넌트 단위로 사고할 수 있다는 점에 있습니다.

가장 중요한 커뮤니케이션에서는 높은 문서화 📑 로 기획-개발간의 이해도를 높여주고, 신규 개발진 투입되었을 때도 각 컴포넌트들의 디자인을 확인하기 쉬워 개발 효율성을 증대시킵니다.

개발단에서는 실제 환경에서 재현하기 복잡하고 어려운 상태의 컴포넌트를 손쉽게 렌더링 가능할 수 있으며,

UI 컴포넌트가 각각 독립적으로 어떻게 실제로 랜더링되는지 시각적으로 테스트하면서 개발을 진행할 수 있습니다.

클린한 리액트 앱의 핵심인 independency & Isolation는 코드와 라이브러리가 서로의 dependency를 최대한 적게 하고 디커플링을 이루는게 관건으로, 스토리북은 이를 지킬 수 있도록 리액트 단에서 state를 뺀 뷰 라이브러리인 만큼 뷰에 집중할 수 있게 앱 설계가 가능해집니다.

개발자는 코드를 보지 않고도 미리 각 UI 컴포넌트를 동작해보고 사용할 수 있어 개발 방식의 효율성을 제공하고,

기획자는 완성된 UI 컴포넌트를 확인하여 체험과 소통을 돕고 디자이너는 UI 컴포넌트의 디자인 가이드 부합 여부를 점검할 수 있습니다.

최종적으로 컴포넌트 단위의 사고를 통해 재사용성에 대한 고찰을 높여 컴포넌트 확장적 사고, 컴포넌트가 최대한 여러 페이지에서 사용할 수 있게 고려하면서 설계를 하게되어서 컴포넌트를 컴포넌트답게 개발을 가능하게 합니다.

스토리를 만들고, 각 스토리를 브라우저 상에서 확인 하는 것은 StoryBook의 가장 기본적인 기능인데,

다양한 에드온으로 프로젝트의 완성도를 높일 수 있다는 사실을 아시나요?

구성 요소를 자동으로 추출 하도록 설계된 docs 애드온과 인터페이스는 물론,

Storybook 버전 6과 함께 도입된 controls 기능,

모두를 위한 ally 애드온과 다양한 테스팅 라이브러리와 결합될 수 있는 에드온도 존재합니다.

테크니컬 라이팅을 중요시 하는 저로써, 스토리북은 컴포넌트를 넘어 페이지 단위로 문서화 할 수 있는 좋은 도구가 아닐까 생각됩니다.

문서화를 통해 좋은 코드 문화와 높은 이해도를 서로간의 공유할 수 있다는 것만으로 스토리북이 가지는 의미를 이해할 수 있게 됩니다.

Install

storybook 설치하면 .storybook 폴더 내부에 main.js(config 파일) 와 preview.js 파일이 자동 생성됩니다.

npx sb init 
yarn storybook

package.json

"scripts": {
   "storybook": "start-storybook -p 6006",
}

실행

아래 스크립트를 실행하면 새로운 웹 브라우저에서 스토리북이 실행을 확인할 수 있습니다.

localhost:6006 포트에서 실행되며, 6006번 포트가 사용중이면 자동으로 다른 포트에서 실행시켜 줍니다.

yarn storybook

.storybook 디렉토리 - 설정 폴더

main.js에서 스토리북을 구성할 파일을 포함될 수 있도록 설정
파일 내부에서 애드온 사용 설정

Component Story Format (CSF)

CSF란 스토리북에서 사용하는 포맷으로
SB5과 SB6을 비교했을 때 가장 크게 개선된 점은 '개발자' DX적 향상
스토리북 5.2버전 이후로 추천하는 스토리 작성 포맷
스토리들은 ES6 모듈 형태로 정의 ( export default { } )
export const storyName = ... 코드를 사용하여 새로운 스토리 생성 가능
모든 스토리북 파일(보통 .stories.js) default export와 named export를 섞어서 사용합니다.

Essential addons (필수)

프로젝트 성격에 맞는 애드온 설치는 스토리북을 더욱 활용하는 좋은 방법입니다.

yarn add --dev @storybook/addon-essentials @storybook/addon-interactions @storybook/addon-docs

ex. Docs

구성요소에 주석 추가 통해 설명 텍스트를 추가할 수 있습니다.
Component 샘플과 props에 대해 테이블 형식으로 정의된 화면을 확인 가능합니다.
control과 동일한 구성 갖으며, 코드를 표시할 수 있는 섹션도 존재)
개별 변형된 스토리가 어떻게 코드로 표시되는 지 등 한페이지에서 확인

package.json에 설치

"@storybook/addon-essentials": "^6.2.9",
"@storybook/addon-interactions": "^6.2.9",
"@storybook/addon-docs": "^6.2.9",

.storybook 에 추가해 사용

  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-storysource',
    '@storybook/addon-actions',
    '@storybook/addon-a11y',
  ]

스토리북 재시작하면 추가 설치한 addons 작업을 수행할 수 있는 텝이 신규로 생성됩니다.

구성요소

스토리북에서 사용 가능한 viewport 설정할수 있게 configuration을 구성할 수 있습니다.

export const VIEWPORTS: ViewportMap = {
  mobile: {
    name: "Small mobile",
    styles: {
      height: "568px",
      width: "320px",
    },
    type: "mobile",
  },
  {...},
  tablet: {
    name: "Tablet",
    styles: {
      height: "1112px",
      width: "834px",
    },
    type: "tablet",
  },
};

이외에도 Jest를 활용해 각 스토리의 자동 스탭샷 테스트 수행할 수 있는 다양한 추가 에드온이 존재하기 때문에

추가 기능을 살펴보고 서비스 워크플로에 맞는 것을 활용하는 것이 좋습니다.

MDX

문서 페이지

- .mdx 파일 : 마크다운 + jsx 문법이 합쳐진 파일 형태로

- docs 파일의 완전한 커스터마이징이 가능합니다.

- 전형적인 스토리을 개발자 및 공유자 입장에서 보기 편하도록 사용자 정의가 가능

- 개발팀 내부 및 외부인들에게 문서화된 코드 파일을 제공할 수 있는 도구

- 사용자가 직접 정의한 문서 레이아웃을 원한다면 stories 속성에 mdx 추가하여 사용이 가능합니다.

| 사용법

import 구문을 사용해 필요한 컴포넌트를 가져온다.
Meta 태그에 title, component 전달 = 기본 작성한 곳과 동일한 기능
원하는 곳에 레이아웃 추가, 글 작성이 자유로우며 스토리북에서 문서를 확인하는 뷰를 변경시킬 수 있다.

MDX정적 빌드 > github page

정적으로 빌드된 스토리북 폴더는 다양한 자바스크립트 파일와 번들 제공하는데,

이를 활용해 html과 함께 제공된 정적 js와 css 파일을 배포할 수 있습니다.

github page를 활용해 간편한 스토리북 배포를 진행할 수 있습니다.

스냅샷 테스트

Jest snapshot testing with Storybook

- Jest snapshot 와의 통합

- 의도하지 않은 시각적 변경이 없는지 확인

- 시각적 구성 요소 Jest의 스냅 샷을 사용

Storyshot Addon : 스토리를 가져와 각 스토리에 대한 스냅 샷을 자동으로 생성

Jest가 선택할 수있는 테스트 파일을 만들고 Storyshots 애드온을 실행하기 만하면 됩니다.
일단 구성되면 Storyshot 테스트는 다른 스냅 샷 테스트와 정확히 동일하게 작동, Jest는 Storyshot 스냅 샷을 저장된 스냅샷과 비교하고 불일치가있는 경우 오류를 발생시키며, jest --update-snapshot 하면 저장된 스냅 샷이 재생성되어 오류를 해결합니다.

// Storybook.test.js
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots({
  // configuration options
});

태그

최근글

댓글

공지사항

아카이브