맙소사.. 프로젝트 적용할 때 많은 시행착오를 겪었는데 정말 이 강의 하나로 많은 것을 해결할 수 있는 것 같아요. 강의 먼저 보고 프로젝트를 시작했다면 좋았을텐데 진행 중인 프로젝트에서 놓친 부분이 많다는걸 강의 보고 알게 되었습니다. 리뷰 검증과 테스트 부분은 정말 큰 도움 됐습니다💖 무엇보다 전반적으로 깔끔한 구성으로 핵심만 알려주셔서 이틀 동안 너무 재밌게 봤습니다. 강의 또 내주세요!

5.0

뚜우뚜우

100% 수강 후 작성

이번에 개발자로 첫 취업을 했는데 회사에서 스토리북을 적용하고 싶다고 하셔서 갑자기 배우게 되었습니다. 사수도 없이 혼자 공문을 보며 공부하려고 하니 대충 어떻게 하는지는 알겠는데 내가 제대로 사용하고 있는게 맞는지 답답했던 찰나 (스트레스를 많이 받았어요ㅠㅠㅠ) 스토리북 강의가 있다는 걸 알고 바로 결제해서 보게 되었습니다. 그동안 답답했던 마음이 쓱~내려갈 정도로 강의가 정말 맘에 들었습니다. 꼼꼼하게 알려주시면서 이해하기 쉽게 설명해주셨고 스토리북뿐만 아니라 여러가지 꿀팁들이 정말 많이 담겨진 강의라서 이제 막 취업해서 아직 어리숙한 저에게 딱 맞는 강의였습니다. 강의를 통해 몰랐던 부분도 많이 알게되었고 성장할 수 있는 계기가 되었던 것 같아요! 좋은 강의 만들어주셔서 감사합니다! :) 덕분에 살았어요!!!😂

5.0

miho2582

100% 수강 후 작성

디자인 시스템에 대해 관심이 생겨서 강의를 구매했습니다! 스토리북을 작성하면서도 이게 맞나? 내가 잘 활용하고 있는 게 맞나? 의심이 들었는데 강사님께서 작성하시는 방법을 보면서 팁들을 많이 얻을 수 있었어요. 그리고 저는 깃허브 액션에 대해 막연히 어려움을 가지고 있었는데, 크로마틱으로 스토리북을 자동 배포하는 액션과, 스토리북의 사용자 접근성 테스트를 하는 액션을 직접 작성해보면서 어려움이 많이 해결되었습니다. 직접 액션을 작성해보고 디펜던시가 잘 연결되어 원하는대로 동작할 때 감동이 정말 컸습니다... ㅠㅠ 제 궁금증을 해결할 수 있는 강의였다는 생각이 들어요! 좋은 강의 만들어주셔서 감사합니다!

수강 후 이런걸 얻을 수 있어요

스토리북을 활용한 컴포넌트 주도 개발(CDD)
GitHub Action, CI를 활용한 UI 테스트 자동화
npm 패키지 배포를 통한 디자인시스템 활용

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

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

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

이런 분들께
추천드려요

학습 대상은
누구일까요?

스토리북을 활용해보고 싶은 개발자
컴포넌트 주도 개발을 해보고싶은 개발자
디자인시스템을 구축하고싶은 개발팀

선수 지식,
필요할까요?

React
TypeScript
HTML
CSS

안녕하세요
입니다.

16,291

명

수강생

1,185

개

수강평

483

개

답변

4.9

점

강의 평점

개

강의

FAANG Senior Software Engineer
(전) GS 그룹 AI Agent 플랫폼 개발/운영
(전) GS 그룹 DX BootCamp 멘토/코칭
(전) 시리즈 C AI 스타트업 테크리드
Stanford University Code in Place Python Instructor
네이버 부스트캠프 웹/모바일 멘토
네이버 클라우드 YouTube Channel presenter
혼자서도 척척 해내는 AI 에이전트 만들기 with 랭체인 & 랭그래프 저자
원티드 프리온보딩 프론트엔드/백엔드 챌린지 진행 (누적 6000+)
항해 AI 플러스코스 1기 코치

커리큘럼

전체

24개 ∙ (2시간 43분)

섹션 1. 스토리북이란?

4개 ∙ (20분)

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

10개 ∙ (1시간 14분)

5. Label 컴포넌트와 스토리의 metadata 소개
09:51
6. TextField의 atom, ErrorMessage 컴포넌트
02:58
7. [업데이트] 스토리북 8.x 에서 이벤트 핸들링 방식 변경
02:28
8. TextField의 IconButton 컴포넌트와 .svg 관리방법
05:42
9. atomic 컴포넌트들을 쌓아올린 TextField 컴포넌트
09:19
10. Cumulative Layout Shift (CLS)를 고려한 컴포넌트 개발
05:45
11. NavigationBar 컴포넌트와 Story Decorator
11:02
12. 다양한 스토리를 가진 PrimaryButton 컴포넌트
11:43
13. TagList의 atom, TagButton 컴포넌트
06:58
14. Generic Type과 Event Bubbling을 활용한 TagList 컴포넌트
08:30

섹션 3. UI 테스트

5개 ∙ (43분)

15. Chromatic을 활용한 Visual 테스트
04:54
16. GitHub Action을 활용한 CI/CD와 Visual 테스트
11:47
17. Test Runner를 활용한 Accessibility 테스트
12:07
18. [업데이트] 사용자와 브라우저의 상호작용을 확인하는 Interaction 테스트
11:40
19. 공식문서에는 있지만 오류로 가득한 Test Coverage와 Snapshot 테스트
02:55

섹션 4. 디자인 시스템 배포와 활용

3개 ∙ (16분)

섹션 5. [Legacy] 버전문제로 더이상 쓸 수 없는 영상들 😂

2개 ∙ (8분)

강의 게시일:

마지막 업데이트일:

수강평

전체

45개

5.0

45개의 수강평

안수빈
수강평 4
∙
평균 평점 5.0
5
18% 수강 후 작성
최근 사내 디자인시스템 구축에 대한 욕구가 늘어나 강의를 수강하게 되었습니다. 강의를 듣다보면, 디자인 시스템에 대한 이해 뿐만 아니라, 강사님의 개발에 대한 전반적인 내공을 느낄 수 있어요!! 방향성을 잃은 요즘 강의 외에도 많은 것을 얻어갈 수 있어 좋았습니다.
- 제이쓴
  지식공유자
  친절한 수강평 감사합니다 수빈님! 강의 들으면서 이해가 되지 않는 부분이나 궁금한 점이 있으시면 언제든 질문으로 올려주세요~ 그리고 멘토링 이벤트도 계속 진행중이니 커리어 전반적으로 궁금한 점이 있으시거나 상담이 필요하시면 만나서 이야기하지 않으셔도 되니 구글폼으로 질문을 보내주세요. 제가 도와드릴 수 있는 선에서 최대한 답변 드리도록 하겠습니다.
dydgus0421
수강평 3
∙
평균 평점 4.7
5
100% 수강 후 작성
생각만하고 어떻게 적용해볼지 엄두가 안났었는데 자세히 설명해주셔서 이젠 적용해볼 수 있을것 같습니다 감사합니다~!
참참나무
수강평 3
∙
평균 평점 5.0
5
33% 수강 후 작성
수수수
수강평 5
∙
평균 평점 5.0
5
92% 수강 후 작성
공식 문서를 보면서 스토리북을 공부했지만 너무 많은 정보와 종종 문서와 맞지 않아 에러가 나는 부분이 있어 정리된 강의를 찾게 되었습니다. 실무에서 꼭 필요할만한 내용으로 간결하게 정리해주셔서 보기 너무 편했습니다. 다음에도 좋은 강의 부탁드리겠습니다.
- 제이쓴
  지식공유자
  좋은 후기 정말 감사합니다! 😊 공식 문서만으로는 어려움을 느끼실 수 있는데, 강의가 도움이 되었다니 정말 기쁩니다. 실무에 바로 적용할 수 있는 내용으로 계속해서 유익한 강의 만들어가겠습니다!
정호연
수강평 72
∙
평균 평점 5.0
5
32% 수강 후 작성

₩59,400

제이쓴님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

LangGraph를 활용한 AI Agent 개발 (feat. MCP)

제이쓴

대기업 AI Agent 담당자의 노하우를 가득 담은 LangGraph. 현업에서 얻어맞으면서 습득한 지식을 전달드립니다

초급

프롬프트엔지니어링, LLM, AI Agent

LangGraph를 활용한 AI Agent 개발 (feat. MCP)

제이쓴

RAG를 활용한 LLM Application 개발 (feat. LangChain)

제이쓴

실리콘밸리 GenAI 해커톤 우승자에게 배우는 RAG. 현업 노하우를 가득 담았습니다

초급

LLM, RAG, LangChain

RAG를 활용한 LLM Application 개발 (feat. LangChain)

제이쓴

회사에서 바로 쓰는 업무자동화 AI 에이전트 (w. n8n, LangGraph)

제이쓴

인공지능, AI, 에이전트… 뭔가 대단해 보이지만, 막상 해보면 생각보다 별 거 아닙니다. 그래서 간단한 기능을 직접 구현해보는 것이 중요합니다. 회사에서 실제로 쓸 수 있는 실용적인 프로젝트를 통해, 다양한 유즈케이스를 직접 경험하고, AI 에이전트를 활용하고 응용하는 방법까지 배워봅니다.

초급

n8n, 인공지능(AI), LangChain

회사에서 바로 쓰는 업무자동화 AI 에이전트 (w. n8n, LangGraph)

제이쓴

한시간으로 끝내는 LangChain 기본기

제이쓴

커피 한잔 가격으로 즐기는(?) 공식문서에서 핵심만 뽑아온 LangChain 기본 강의입니다. 본격적인 개발에 들어가기 전 LangChain 문법과 친해지세요!

초급

프롬프트엔지니어링, LLM, LangChain

한시간으로 끝내는 LangChain 기본기

제이쓴

Flutter로 만드는 LLM 챗봇 (feat. Gemini)

제이쓴

Flutter가 처음이신가요? Flutter Contributor가 처음부터 하나씩 소개해드립니다! Gemini를 활용한 AI 프로젝트로 Flutter 개발을 시작해보세요

초급

Flutter, 챗봇, gemini

Flutter로 만드는 LLM 챗봇 (feat. Gemini)

제이쓴

실무에 바로 적용하는 AWS 배포

제이쓴

AWS로 서비스를 배포/운영하고싶은 분들을 위해 준비했습니다. 도메인 설정부터 도커와 서버리스까지!

초급

AWS, Docker, aws-ecs

실무에 바로 적용하는 AWS 배포

제이쓴

2시간으로 끝내는 프론트엔드 테스트 기본기

제이쓴

테스트코드! 어디서부터 시작해야할지 막막한 분들을 위해 준비했어요. 테스트 작성부터, 자동화를 통한 배포까지 한번에!

초급

React, Cypress, Jest

2시간으로 끝내는 프론트엔드 테스트 기본기

제이쓴

비슷한 강의

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

2시간으로 끝내는 프론트엔드 테스트 기본기

제이쓴

테스트코드! 어디서부터 시작해야할지 막막한 분들을 위해 준비했어요. 테스트 작성부터, 자동화를 통한 배포까지 한번에!

초급

React, Cypress, Jest

2시간으로 끝내는 프론트엔드 테스트 기본기

제이쓴

실무 중심! FE 입문자를 위한 React

IT Share

강의를 모두 듣고 나면, 스스로 하나의 웹서비스를 개발할 수 있는 역량을 갖게 됩니다.

초급

React, Node.js, Redux

실무 중심! FE 입문자를 위한 React

IT Share

타입스크립트 입문 - 기초부터 실전까지

캡틴판교

타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관점에서 쉽고 재밌게 배워보겠습니다 😄

초급

TypeScript, ES6, JavaScript

타입스크립트 입문 - 기초부터 실전까지

캡틴판교

스토리북 & 자동화 테스트와 함께 하는 컴포넌트 주도 프론트엔드 개발

인프런

입문

frontend, 소프트웨어 테스트, storybook

스토리북 & 자동화 테스트와 함께 하는 컴포넌트 주도 프론트엔드 개발

인프런

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

중급이상

React, Next.js, cursor

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

최신 Vue 3 완벽 가이드: 프로젝트 설정 & 스펙 총정리

짐코딩

"Vue 3 완벽 마스터" 후속 강의로 최신 Vue 3 버전의 프로젝트 설정과 최신 스펙을 익히는 강의입니다. Vue 기본편 또는 실전편을 수강하신 분들에게 무료로 제공되는 강의입니다.

초급

Vue.js, Vue 3, TailwindCSS

최신 Vue 3 완벽 가이드: 프로젝트 설정 & 스펙 총정리

짐코딩

Spring Boot + React.js 로그인 (+소셜) 서비스 이해하기

영넨

Spring Boot + React.js 로그인 (+소셜) 서비스 이해하기는 JWT 기반 인증 및 소셜 로그인(Kakao/Google)을 포함한 실전형 로그인 시스템을 직접 구현하며 프론트엔드와 백엔드 인증 흐름을 깊이 이해할 수 있도록 설계된 강의입니다. 프론트엔드는 React.js, 백엔드는 Spring Boot를 기반으로 구성되며, 실제 서비스 환경에서 사용되는 Access Token + Refresh Token 방식, HttpOnly Cookie, Redux를 활용한 사용자 상태 관리, Role 기반 권한 처리, 소셜 로그인 연동까지 하나씩 따라하며 익힐 수 있습니다.

초급

React, Node.js, REST API

Spring Boot + React.js 로그인 (+소셜) 서비스 이해하기

영넨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

입문

JavaScript, React, Node.js

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

TDD 개발 방법론을 활용한 React Native 앱 개발

박동호

간단한 ReactNative 앱을 TDD 방법론을 통해 개발하면서 TDD 의 개념을 확실히 익히고, ReactNative 모바일 앱 개발에 적용할 수 있도록 연습합니다.

초급

JavaScript, React, React Native

TDD 개발 방법론을 활용한 React Native 앱 개발

박동호

공식문서로 배우는 실전 타입스크립트

어쩔코딩

타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

입문

TypeScript, JavaScript, ES6

공식문서로 배우는 실전 타입스크립트

어쩔코딩

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

초급

TypeScript, JavaScript

따라하며 배우는 타입스크립트 A-Z

John Ahn

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

이진석

파이썬/장고 웹서비스 개발의 기초를 탄탄히 다져보세요. 장고 학습에는 시간도 걸리지만, 반복되는 개발 속에 여러분의 생산성을 극대화하실 수 있습니다. 여러분의 상상을 현실로 만들어보세요.

초급

Python, Django, React

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

이진석

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

🔥 한자 학습을 위한 맞춤형 플랫폼 구축! Google Gemini AI와 Firestore를 활용해 나만의 한자 단어장, 획순 애니메이션, 필기 인식까지 직접 구현해보세요!

초급

gemini, HTML/CSS, TailwindCSS

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)

닭강정

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

초급

React, Electron, GUI

[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)

닭강정

Flutter 테스트 기초

오준석

플러터에서의 유닛 테스트, UI 테스트, 통합 테스트 방법에 대해 공식 문서 내용에 기반하여 설명하는 강의입니다.

초급

Flutter, 소프트웨어 테스트, integration-tests

Flutter 테스트 기초

오준석

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

중급이상

Next.js, React, GraphQL

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

초급

React Native, React, ES6

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

SpringAI + React로 만들어보는 나만의 감정일기 서비스

Neo

SpringAI + React로 만들어보는 나만의 감정일기 서비스 Neo + Essential과 함께 만들어보는 4번째 프로젝트 시간입니다!

초급

React, Kotlin, Spring Boot

SpringAI + React로 만들어보는 나만의 감정일기 서비스

Neo

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

IT s Dev

A Complete End-to-End Developer Journey — Build Lightning-Fast APIs, Modern Frontend Interfaces, Real Projects, Authentication Systems, Dashboards & Full Deployments Using FastAPI, React, and Vibe Coding Techniques.

입문

React, React Native, react.js

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

IT s Dev

[PROKIT] 프론트엔드 프로젝트 키트: 타이머 앱 만들기

닙스(NYBS)

프론트엔드 프로젝트를 미션 콘텐츠입니다. DevTime이라는 타이머 앱을 직접 구현해보면서 프로젝트 실습을 해볼 수 있도록 PRD 기획 문서, Figma 시안, API 엔드포인트를 제공합니다. 실제 서비스와 유사한 수준의 프로젝트를 구현해 보면서 그동안 학습한 지식을 완벽하게 자신의 것으로 만들어 보세요 🚀

입문

React

[PROKIT] 프론트엔드 프로젝트 키트: 타이머 앱 만들기

닙스(NYBS)

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

먼저 경험한 수강생들의 후기

5.0

수강 후 이런걸 얻을 수 있어요

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

이 강의의 특징

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

이런 분들께 추천해요

수강 후에는

이런 내용을 배워요.

이 강의를 만든 사람

수강 전 참고 사항

실습 환경

학습 자료

선수 지식 및 유의사항

이런 분들께
추천드려요

안녕하세요
입니다.

커리큘럼

수강평

제이쓴님의 다른 강의

비슷한 강의

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

먼저 경험한 수강생들의 후기

5.0

수강 후 이런걸 얻을 수 있어요

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

이 강의의 특징

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

이런 분들께 추천해요

수강 후에는

이런 내용을 배워요.

이 강의를 만든 사람

수강 전 참고 사항

실습 환경

학습 자료

선수 지식 및 유의사항

이런 분들께 추천드려요

안녕하세요 .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}입니다.

커리큘럼

수강평

제이쓴님의 다른 강의

비슷한 강의

이런 분들께
추천드려요

안녕하세요
입니다.