1. 프롤로그 컴포넌트 UI를 개발하면서 Storybook을 많이 사용하죠 이번 포스팅에서는 Next 환경에서 Storybook을 적용하면서 Storybook에 애드온 패널을 연결해 곧바로 컴포넌트를 편집하는 방법을 알아보도록 하죠 2. 환경세팅 > 🌱 Next 설치 및 실행 > > 터미널을 열고 차례대로 입력을 해준다 > 🌱 Storybook 설치 및 실행 > > 스토리북 설치가 되면 애드온 knobs도 추가 해준다 > 🌱 addon-knobs 설치 > > 애드온 knobs을 사용하면 컨트롤바에서 동적으로 props를 조작할 수 있음 3. 컴포넌트 컴포넌트를 하나 만들건데 단계별 진행 표시를 해주는 Progress Bar를 생성한다 > Knobs 창에서 props를 직접 바꿔가면서 상태를 확인할 수 있음! ![](https://images.velog.io/images/mujaen/post/d3c983e7-819e-4f