# Show GN: VSCode extension: Open Storybook – 원하는 Storybook만 빠르게 실행하기

> Clean Markdown view of GeekNews topic #19704. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19704](https://news.hada.io/topic?id=19704)
- GeekNews Markdown: [https://news.hada.io/topic/19704.md](https://news.hada.io/topic/19704.md)
- Type: show
- Author: [guseod24](https://news.hada.io/@guseod24)
- Published: 2025-03-12T10:20:55+09:00
- Updated: 2025-03-12T10:20:55+09:00
- Original source: [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=roseline-song.open-storybook&ssr=false#overview)
- Points: 8
- Comments: 1

## Summary

저희 팀은 프로젝트 규모가 커지면서 Storybook의 전체 빌드 시간이 길어지는 문제를 해결하기 위해 VSCode 익스텐션 "Open Storybook"을 개발했습니다. 이 익스텐션은 특정 폴더나 파일의 Storybook만 선택적으로 실행할 수 있게 하여 불필요한 빌드 시간을 줄여줍니다. 또한, 모노레포 환경에서 패키지별로 Storybook 터미널을 관리하고, 스크립트에서 Storybook 커맨드를 자동으로 찾아 실행합니다.

## Topic Body

### 배경   
저희 팀은 Storybook을 실행할 때 속도 문제를 겪고 있었습니다.  
프로젝트가 커지면서 Storybook의 전체 빌드 시간이 점점 길어졌고,  
테스트할 스토리 일부만 열고 싶은데 매번 전체 Storybook을 실행하거나 .storybook/main.ts에서 경로를 수정하는 불편함이 있었습니다.  
  
이를 해결하기 위해, VSCode 익스텐션인 "Open Storybook"을 만들었습니다.  
Jest Runner처럼 Storybook도 "파일 탐색기에서 특정 폴더만 선택해서 실행" 또는 "원하는 스토리북 파일 선택해서 실행"할 수 있도록 했습니다.  
  
### 기능  
  
- 폴더 - 우클릭 - Open Stories 커맨드: 해당 폴더 안의 모든 스토리북을 추가로 열 수 있습니다.  
- 커맨드 팔레트: Open Storybook 커맨드: 커맨드로 열어둔 스토리북이 있으면 기존 + 새 스토리북을 합쳐서 볼 수 있습니다. (Open Stories로 열어도 마찬가지로 합쳐집니다.)  
- 모노레포 관리: 패키지 별로 스토리북 터미널 따로 관리합니다.  
- script에서 storybook 커맨드를 찾아서 실행합니다. 없으면 npx storybook으로 실행합니다.  
  
### 설치   
- extension에서 `roseline-song.open-storybook` or `open storybook` 검색  
- cursor의 경우: vscode 버전 호환성 에러가 발생한다면, install 옆의 톱니바퀴 버튼 클릭 - install specific version - 최신 버전 설치

## Comments



### Comment 35835

- Author: guseod24
- Created: 2025-03-13T18:28:24+09:00
- Points: 1

0.0.5 버전  
----  
  
스토리북이 아닌 파일을 Open Storybook으로 열려고 하는 경우 에러 토스트 띄움  
package별 스토리북 경로가 계속 누적해서 쌓이는 문제 해결  
Storybook 터미널 종료 시 main.ts 복원