1. 스토리북이란

1.1 프로젝트 결과물로 보는 강의 기대사항

• 강의대상

  • 디자인시스템을 구축하는데 스토리북을 사용하고싶은 개발자 또는 개발팀

• 디자인시스템이란?

  • 제품의 디자인과 개발을 안내하는 광범위한 지침, 표준, 그리고 실천사항을 모아놓은 것

  • 쉽게 설명하자면, 우리 제품의 디자인에 대한 규칙

    • 서비스 UI에 일관성을 부여하고
    • 코드 및 디자인의 유지보수가 유리해지고
    • 또한 기획 ↔ 디자이너 ↔ 개발자 간의 커뮤니케이션 비용을 개선할 수 있음

  • 대표적인 디자인 시스템 예시

    Material Design

    Human Interface Guidelines | Apple Developer Documentation

• 스토리북이란?

  Why Storybook?

  • UI 컴포넌트를 독립적으로 개발하고 문서화할 수 있는 환경을 제공하는 도구.

    • UI 컴포넌트에 story 를 부여해서 렌더링을 테스트하는 것
    • 여기서 story는 UI 컴포넌트의 상태 (state)

      • <button> 을 예로 들면.

        • disabled, enabled, primary, secondary 등등

        

  • 스토리북은 디자인 시스템을 구축하고 유지하는 데 있어 중요한 역할을 함.

    • 개발한 컴포넌트가 디자인 가이드에 맞는지
    • 컴포넌트의 레이아웃, 색상, 타이포그래피 등 다양한 디자인 요소를 일관성 있게 관리 가능.
    • 디자인 토큰, 컴포넌트, 패턴 등을 문서화하며, 팀 내에서 공유 및 재사용 용이.

  • 팀원들 간의 커뮤니케이션을 강화하며, 디자인과 코드를 일관성 있게 유지할 수 있게 도와줌.

    • 프론트엔드 개발자들 간 소통이 수월해짐
    • 디자이너와 협업이 수월해짐

1.2 강의 전 프로젝트 환경설정

• 스토리북 환경설정

  • vite를 설치하고 프로젝트 init

    Vite

  • 스토리북 설정

    • 주의사항

      • 만약 yarn 을 패키지 매니저로 사용하는 중이라면 yarn berry 로 업그레이드가 필요할 수 있음
      • 2023년 11월 기준) yarn1.x는 처음 설치하고 구동할 때는 잘 돌아가는데 나중에 에러남

    • 공식문서를 따라가도록 한다

      Install Storybook • Storybook docs

      npx storybook@latest init # 설치가 잘 되면 스토리북이 바로 구동되어 확인 가능
      

  • vite 관련 섹션이 별도로 존재

    Vite • Storybook docs

  • vite 를 사용하지 않는다면 진행하는 프로젝트에 맞게 설정 필요

    Integrate Next.js with Storybook | Storybook

  • Tailwind 환경설정

    • 공식문서를 잘 따라가면서 설정

      Install Tailwind CSS with Vite - Tailwind CSS

    • 디자인 시스템에 사용되는 컬러 설정

      export default {
      	...
        theme: {
          colors: {
            primary: " #1d2745",
            secondary: " #1de5d4",
            tertiary: " #f52c50",
            white: " #ffffff",
            mono100: " #f1f1f1",
            mono200: " #bebebe",
            mono300: " #d6d7d9",
            error: " #d01e1e",
          },
      	...
      };
      

  • font 설정

    • 예시처럼 @fontsource 를 사용한다면, main.tsx에서 한 것 처럼 preview.ts에서 import 필요

    • 로컬파일을 사용하거나 다른 CDN을 활용해서 preload한다면 아래 문서 참고

      Story rendering • Storybook docs

2. 컴포넌트 개발과 스토리 작성

2.1 Label 컴포넌트와 스토리의 metadata 소개

• 컴포넌트 별 스토리 작성

  How to write stories • Storybook docs

  • 아쉽지만 공식문서를 그대로 따라가면 타입스크립트 설정에 따라 에러가 나는 경우가 종종 있음
  • 가급적이면 default로 생성된 템플릿을 활용하는 것을 추천

• meta로 보는 스토리 정보

   const meta = {
    title: "Example/Button", // 경로를 지정함
    component: Button,       // 해당 스토리가 사용하는 컴포넌트
    parameters: {            // 스토리북 웹에서 스토리를 어떻게 보여줄지. 
      layout: "centered",    // 3가지 옵션이 있는데 `centered`가 가장 보기 좋음
    },
    tags: ["autodocs"],      // 설명을 보여주는 방법. 굳이 수정할 필요 없음
    argTypes: {              // 컴포넌트가 받는 prop들에 대한 설명 + 설정
      backgroundColor: { control: "color", description: "버튼의 배경 컬러" },
    },
  } satisfies Meta<typeof Button>;
  

  • title을 활용하면 스토리북에서 다양한 경로를 줄 수 있음
  • argTypes를 상세히 작성할수록 소통에 유리함

    • 개인적으로 description과 control 이 가장 중요하다고 생각

    • control은 아래 문서를 참고해서 작성하면 좋음

      ArgTypes • Storybook docs

      • 종류가 다양하니 미리 보지 말고, 스토리를 작성할 때마다 확인하면서 적합한 항목을 선택할 것

2.2 TextField의 atom, ErrorMessage component

• 가독성을 위해 <Label /> 과 유사하게 children 을 활용해서 prop 받음

2.3 TextField의 IconButton 컴포넌트와 .svg 관리방법

• IconButton은 <img/>를 default children으로 넣어두고 iconPath 를 prop으로 받음
• iconPath는 총 3가지 장소에 위치할 수 있음
  • public directory
  • src/assets directory
  • 서버 어딘가의 스토리지
• src/assets 에 넣으면 React 컴포넌트처럼 import해줘야해서 불편함
  • 용량이 작으면 public 에 넣던지
  • 아니면 스토리지 활용을 추천함

2.4 atomic 컴포넌트들을 쌓아올린 TextField 컴포넌트