[ Storybook 스터디 4주차 ]

[디자인 시스템 소개]

- 거대 기술기업부터 신생 스타트업까지 회사들은 시간과 비용을 아끼기 위해 UI패턴을 재사용하는 방식 도입

 

# 다지인 시스템을 왜 사용하는가?

재사용이 가능한 사용자 인터페이스는 새로운 개념이 아니다. 스타일가이드, UI키트 및 공유가능한 위젯은 예전부터 존재했다.

UI컴포넌트 : 사용자인터페이스를 이루고 있는 조각들의 시각적이고 기능적인 속성을 캡슐화 (like 레고)

 

디자이너, 개발자 모두 UI 컴포넌트를 다루고 있다.

디자인 시스템은 두 분야를 연결하는 다리.

조직의 공용 컴포넌트에 대한 '단일한 진실의 원천(source of truth)'이 된다.

 

프러덕션 디자인 시스템은 UI 컴포넌트와 프런트엔드 인프라구조를 포함해야한다.

3가지 기술적 파트

- 재사용이 가능한 공용 UI 컴포넌트

- 디자인 토큰 : 브랜드 색상, 간격과 같은 스타일 변수

- 문서 : 사용방법, 설명, 좋은 예와 나쁜 예

 

 

작업 흐름 workflow 이해하기

디자인시스템 : 프런트엔드 인프라에 대한 투자

1. UI 컴포넌트는 분리하여 작업

모든 디자인시스템은 UI 컴포넌트로 구성된다.

소비자앱 밖에서 UI 컴포넌트 구축 => 컴포넌트의 내구성을 향상시키는 애드온(Actions, Source, Knobs) 통합

 

2. 리뷰를 통해 합의를 이끌어내고 피드백 수집

UI 개발은 개발자, 디자이너 및 다른 분야 간의 조정이 필요한 팀스포츠.

스토리북에 작업 중인 UI컴포넌트를 게시하여 이해관계자들을 개발 과정에 포함시킨다.

=> 서비스 출시 시기를 앞당길 수 있다.

 

3. UI에서 발생하는 버그를 방지하기위해 테스트 하는 법

스토리북은 테스트를 자동화하여 불가피하게 발생하는 버그를 방지.

접근성과 내구성이 뛰어난 UI 컴포넌트를 안심하고 사용할 수 있도록 한다.

 

[ 시스템 설계 ]

# 디자인 시스템 만들기

디자인시스템 : 패키지 매니저를 통해 배포되는 중앙저장소에서 공통으로 사용되는 UI 컴포넌트를 통합시킨다. => 개발자는 여러 프로젝트에 동일한 UI 코드를 붙여넣지 않고 표준화된 UI 컴포넌트를 불럳르여 사용할 수 있다.

 

필요한 것과 그렇지 않은 것

디자인시스템은 순수해아하고, 프레젠테이션 컴포넌트많은 포함해야한다.

- props에만 반응

- 특정 비즈니스 로직 포함x

- 데이터 로드 방식에 구애받지 않는다.

 

# 개발자에게 유용한 휴리스틱

- 하나의 UI 패턴이 3회 이상 사용되는 경우, 재사용 가능한 UI 컴포넌트로 간주

- 하나의 UI 컴포넌트가 3개 이상 프로젝트/팀에서 사용되는 경우, 디자인 시스템에 포함시킴

 

[ UI 컴포넌트 구축하기 ]

스토리북에서 디자인 시스템 컴포넌트를 구축하고 구조화하기

 

# 애드온으로 스토리북을 더욱 강력하게

button, link같은 interactive한 element를 실행했을 때, 스토리북의 Action addon은 UI 피드백을 제공한다.

Action addon :  스토리북 설치 시, 기본으로 같이 설치됨.

Action을 callback prop으로 컴포넌트에 전달하여 사용할 수 있다.

 

 

# 애드온 interaction을 통한 interactive한 스토리들

play 함수를 사용하여 스토리에 변화를 적용해보자.

- play 함수는 작은 코드조각이다. addon-interaction의 도움으로 스토리가 랜더링 되고 나면, play함수 덕분에 사람의 개입 없이 시나리오 테스트 가능.

 

 

[ 팀과 함께 리뷰하기 ]

# UI 컴포넌트 비주얼 리뷰

UI 컴포넌트는 코드를 시각적으로 표현하기 때문에 UI/UX 관련 피드백을 주고받을 때 비주얼리뷰는 필수

 

# 스토리북 퍼블리싱 하기

Chromatic (무료 퍼블리싱 서비스)을 통해 스토리북을 정적 사이트로 만들고, 다른 호스팅 서비스에 배포하기도 상당히 수월하게 해준다.

=> Chromatic을 통해 만든 스토리북 : https://680373df370d1edec8742faa-llkbagjkpn.chromatic.com/

@storybook/core - Storybook

 

 

# 지속적 통합(CI)

GitHub Actions 사용

.github > workflows > chromatic.yml 파일 : CI 프로세스가 작동되로고 지시하게 만들어준다.

# Name of our action
name: 'Chromatic'
# The event that will trigger the action
on: push

# What the action will do
jobs:
  test:
    # The operating system it will run on
    runs-on: ubuntu-latest
    # The list of steps that the action will go through
    steps:
      - uses: actions/checkout@v1
      - run: yarn
        #👇 Adds Chromatic as a step in the workflow
      - uses: chromaui/action@v1
        # Options required for Chromatic's GitHub Action
        with:
          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/design-systems-for-developers/react/ko/review/ to obtain it
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

 

# 비주얼리뷰 요청하기

UI를 변경하여 깃허브 저장소에 push => pull request를 하는 동시에 CI 작업이 시작된다. => 새로운 변동사항이 반영하여 publish된 스토리북 확인할 수 있다.