인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST

실무에 바로 적용하는 스토리북과 UI 테스트

스토리북 활용법 A to Z. 스토리북의 모든것을 보여드립니다

초급자를 위해 준비한
[프론트엔드, Storybook] 강의입니다.

이런 걸 배울 수 있어요

  • 스토리북을 활용한 컴포넌트 주도 개발(CDD)

  • GitHub Action, CI를 활용한 UI 테스트 자동화

  • npm 패키지 배포를 통한 디자인시스템 활용

스토리북, 들어는 봤는데 어떻게 사용할 수 있을까요? 🤔

유저 스토리를 기반으로한 기획이 주목을 받기 시작하면서, 화면에 그려지는 UI 컴포넌트의 다양한 스토리도 점점 중요해지고 있습니다. 스토리북이 무엇인지, 어떤 기능들이 있는지 궁금한 분들을 위해 준비했어요!

이 강의에서는 스토리북의 설치부터 시작하여, React 프로젝트에 적용하는 방법, 주요 기능과 활용 방법 등을 다룹니다. 또한, 다양한 예제를 통해 실제 개발에서 어떻게 사용할 수 있는지도 함께 살펴봅니다. 스토리북을 처음 사용하는 분들도 쉽게 이해할 수 있도록 구성하였으며, 강의를 따라가면서 자연스럽게 스토리북을 익힐 수 있습니다.

이 강의의 특징

📌 가장 간단한 컴포넌트부터, 여러개의 컴포넌트를 쌓아올린 복잡한 컴포넌트까지 점진적으로 배웁니다

📌 다양한 예제를 통해 현업에서 어떻게 개발하는지 경험할 수 있습니다

📌 현업에서 스토리북을 활용하는 다양한 방식을 경험에서 오는 노하우와 함께 전달합니다

📌 프론트엔드 개발에서 유용하게 쓸 수 있는 TypeScript와 Tailwind 각종 꿀팁을 제공합니다

먼저 수강하신 분들의 이야기 📝

이런 분들께 추천해요

스토리북은 무엇인가요
프론트엔드 프로젝트에서
스토리북을 어떻게 사용할지
막막한 개발자

디자인 시스템에 관심있어요.
사용자 경험과 개발자 경험
향상을 위해 디자인시트템을
구축하고 싶은 개발팀

UI 테스트가 궁금해요.
CI/CD 를 활용해서 UI 테스트를 자동화하고, 리뷰를 통한
컴포넌트 검증이 궁금한 개발자

수강 후에는

  • 스토리북의 기본 개념과 사용 방법을 이해하고, 프로젝트에 적용할 수 있습니다


  • Web Vital을 고려해서 컴포넌트를 개발할 수 있습니다.

  • 스토리북 decorator를 활용하여 컴포넌트를 더욱 효율적으로 개발할 수 있습니다

  • UI 테스트 자동화를 통해 디자인 시스템의 일관성을 가져갈 수 있습니다

  • 디자인 시스템을 npm 패키지로 배포해서 재사용할 수 있습니다

이런 내용을 배워요.

Chromatic 대시보드: UI Review

디자인시스템에 새로운 컴포넌트가 추가됐다면?
GitHub을 Chromatic과 연동해서 새로운 Pull
Request가 생성될 때마다 자동으로 UI Review를 생성합니다.

스토리북 : UI 컴포넌트 검증

스토리북에서 개발된 UI 컴포넌트를 확인하고
다양한 스토리에 따라 컴포넌트가 화면에 어떻게
그려지는지 확인할 수 있습니다

Interaction Test를 통한 스토리 검증

사용자가 서비스를 이용할 때 어떤식으로 우리가
개발한 컴포넌트를 사용하는지 보고 스토리를
검증할 수 있습니다

npm package를 활용한 디자인 시스템

새로운 프로젝트를 시작하려고 하시나요? 디자인
시스템을 npm 패키지로 배포하고 npm install을
통해 쉽게 컴포넌트를 재사용할 수 있습니다

이 강의를 만든 사람

수강 전 참고 사항

실습 환경

  • MacOS를 기준으로 설명하지만, 운영체제에 제한이 없습니다

  • React로 개발환경을 설정한 경험이 있다면 별도의 환경설정 없이 따라오실 수 있습니다

학습 자료

  • 노션 링크

  • GitHub 소스코드

선수 지식 및 유의사항

  • React로 컴포넌트를 한번이라도 만들어보신 분

  • 팀 프로젝트 경험이 없는 분들도 쉽게 따라오실 수 있습니다


이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 스토리북을 활용해보고 싶은 개발자

  • 컴포넌트 주도 개발을 해보고싶은 개발자

  • 디자인시스템을 구축하고싶은 개발팀

선수 지식,
필요할까요?

  • React

  • TypeScript

  • HTML

  • CSS

안녕하세요
강병진입니다.

4,960

수강생

334

수강평

262

답변

4.9

강의 평점

8

강의

더보기

커리큘럼

전체

25개 ∙ (2시간 43분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

36개

5.0

36개의 수강평

  • koreantie3931님의 프로필 이미지
    koreantie3931

    수강평 2

    평균 평점 5.0

    5

    18% 수강 후 작성

    Recently, the desire to build an in-house design system has increased, so I took the course. While listening to the course, I was able to feel not only the understanding of the design system, but also the instructor's overall development skills!! I was able to gain a lot of things in addition to the course, which I lost my direction for these days.

    • jasonkang
      지식공유자

      Thank you for your kind review, Subin! If you have any questions or concerns while taking the class, please feel free to ask questions at any time. Also, the mentoring event is ongoing, so if you have any questions about your career in general or need advice, you don’t have to meet in person to talk, so please send me a question via Google Form. I will do my best to answer to the best of my ability.

  • human2642622님의 프로필 이미지
    human2642622

    수강평 44

    평균 평점 5.0

    5

    32% 수강 후 작성

    • wonza43724985님의 프로필 이미지
      wonza43724985

      수강평 2

      평균 평점 5.0

      5

      20% 수강 후 작성

      I took the course because Storybook has been listed as a required skill often recently. It's good because it explained the basic knowledge needed to apply a design system in an easy-to-understand way :)

      • jasonkang
        지식공유자

        Thank you for the great feedback! In a recent mentoring session, I met a new frontend developer who said their Storybook experience was viewed favorably in their first company interview. I hope you get a good result!

    • keemewoon4112님의 프로필 이미지
      keemewoon4112

      수강평 1

      평균 평점 4.0

      4

      60% 수강 후 작성

      • psr34787690님의 프로필 이미지
        psr34787690

        수강평 2

        평균 평점 5.0

        5

        100% 수강 후 작성

        They are kind and explain things well, which seems helpful for building a design system!

        비슷한 강의

        같은 분야의 다른 강의를 만나보세요!

        ₩59,400