# Storybook 11.0 알파는 덜어 냅니다

Storybook 11.0 알파가 다섯 번 나오는 동안 눈에 띈 것은 새 기능이 아니라 걷어 낸 것들입니다. 디자인 시스템 팀이 확인할 점을 정리했습니다.

- Language: ko
- Published: 2026-10-27
- Tags: design-system, storybook, tooling
- URL: https://devs7ud.io/blog/storybook-v11-alpha
- Translation (en): https://devs7ud.io/en/blog/storybook-v11-alpha-en.md

## Storybook 11.0 알파는 새 기능보다 덜어 내는 일을 합니다

Storybook의 다음 메이저인 11.0 알파가 이번 주까지 다섯 번 나왔습니다. 알파 4부터 8까지입니다. 릴리스 노트를 읽어 보면 눈에 띄는 것은 새 기능이 아니라 사라지는 것입니다.

같은 기간에 현재 안정 계열인 10.6도 10.6.2, 10.6.3, 10.6.4로 세 번 나왔습니다. 변화는 작지만 방향은 같습니다.

npm 주간 다운로드는 17,692,795회입니다. 이렇게 많은 팀이 쓰는 도구라서, 작은 제거도 누군가의 설정을 건드립니다.

![낡은 스티커를 떼어 낸 깨끗한 컴포넌트 카드 더미](/blog-img/storybook-v11-alpha/1.jpg)

## 알파 5와 8에서 걷어 낸 것들

[알파 5 릴리스 노트](https://github.com/storybookjs/storybook/releases/tag/v11.0.0-alpha.5)에 제거 항목이 모여 있습니다.

- `storybook ai` 명령이 사라졌습니다
- `viewport.defaultViewport` 파라미터와 `responsiveViewport` 내보내기가 사라졌습니다
- 사이드바의 새 스토리 만들기 버튼이 사라졌습니다
- 예전 형식의 highlight 객체와 `changeDetection` 기능 플래그가 사라졌습니다

[알파 8](https://github.com/storybookjs/storybook/releases/tag/v11.0.0-alpha.8)에서는 Svelte의 더 이상 쓰지 않는 `parameters.component` 경로가 빠졌습니다.

## 도구의 바탕은 조용히 바뀝니다

기능 목록에는 잘 나오지 않지만, 설정 파일을 읽고 고치는 쪽에서 바뀌는 것이 많습니다.

- 알파 8에서 CSF 파일을 읽는 도구가 Babel 대신 OXC 위에서 돕니다
- 같은 알파에서 Svelte CSF가 CSF factories(`definePreview`)로 옮겨 갑니다
- Vitest 5 지원은 알파 5에 들어왔고, [10.6.3](https://github.com/storybookjs/storybook/releases/tag/v10.6.3)에도 같은 수정이 들어갔습니다
- 업그레이드 명령이 손질됩니다. pnpm 워크스페이스의 모든 프로젝트를 설치하고, 범위가 같은 패키지 묶음은 같은 메이저로 맞추며, CSF2의 argTypes를 옮겨 주고, 끝나지 못한 업그레이드는 실패로 알립니다

![두 섬을 잇는 작은 다리와 길 위의 이정표](/blog-img/storybook-v11-alpha/2.jpg)

## 여기서부터는 저의 견해입니다

디자인 시스템 팀에게 11.0 알파는 지금 올릴 버전이 아닙니다. 우리 설정에 지워질 것이 있는지 미리 확인할 버전입니다. 세 가지만 해 두면 됩니다.

- `.storybook/preview`에서 `viewport.defaultViewport`를 쓰는지 찾아봅니다
- 사이드바의 새 스토리 만들기 버튼이나 `storybook ai` 명령에 기대는 팀 문서가 있는지 봅니다
- 별도 브랜치에서 업그레이드 명령을 한 번 돌려 보고, 자동 이전이 어디까지 해 주는지 기록해 둡니다

안정 계열에 머물러도 서두를 일은 아닙니다. 오래된 줄에도 수선이 계속 나옵니다. [9.1.21](https://github.com/storybookjs/storybook/releases/tag/v9.1.21)과 [8.6.19](https://github.com/storybookjs/storybook/releases/tag/v8.6.19)에는 같은 보안 보강이 들어갔습니다. 미리보기 창이 보내는 메시지를 알려진 매니저 출처로 제한하고, 개발 서버를 localhost가 아닌 곳의 iframe에 넣지 못하게 막는 항목이 있습니다.

다만 알파 번호가 이렇게 빠르게 올라가는 동안, 언제든 되돌아갈 지점을 만들어 두는 일은 팀의 몫입니다.

![닫힌 상자 앞을 지키는 둥근 방패](/blog-img/storybook-v11-alpha/3.jpg)

## 이번 주에 다루지 못한 소식도 있습니다

- shadcn/ui에서는 [shadcn@4.22.1](https://github.com/shadcn-ui/ui/releases/tag/shadcn%404.22.1), [shadcn@4.22.0](https://github.com/shadcn-ui/ui/releases/tag/shadcn%404.22.0), [@shadcn/registry@0.2.0](https://github.com/shadcn-ui/ui/releases/tag/%40shadcn%2Fregistry%400.2.0)이 나왔습니다
- GitHub 트렌딩(TypeScript)에서는 [stablyai/orca](https://github.com/stablyai/orca)가 주간 9,241 스타를 받았습니다
- GitHub 트렌딩(CSS)에서는 AI가 만든 듯한 디자인을 피하게 돕는 스킬인 [Nutlope/hallmark](https://github.com/Nutlope/hallmark)가 주간 5,956 스타를 받았습니다

### 출처

- [storybook](https://www.npmjs.com/package/storybook), npm 주간 다운로드
- Storybook 릴리스: [v11.0.0-alpha.4](https://github.com/storybookjs/storybook/releases/tag/v11.0.0-alpha.4), [v11.0.0-alpha.5](https://github.com/storybookjs/storybook/releases/tag/v11.0.0-alpha.5), [v11.0.0-alpha.6](https://github.com/storybookjs/storybook/releases/tag/v11.0.0-alpha.6), [v11.0.0-alpha.7](https://github.com/storybookjs/storybook/releases/tag/v11.0.0-alpha.7), [v11.0.0-alpha.8](https://github.com/storybookjs/storybook/releases/tag/v11.0.0-alpha.8)
- Storybook 릴리스: [v10.6.2](https://github.com/storybookjs/storybook/releases/tag/v10.6.2), [v10.6.3](https://github.com/storybookjs/storybook/releases/tag/v10.6.3), [v10.6.4](https://github.com/storybookjs/storybook/releases/tag/v10.6.4), [v9.1.21](https://github.com/storybookjs/storybook/releases/tag/v9.1.21), [v8.6.19](https://github.com/storybookjs/storybook/releases/tag/v8.6.19)