[Storybook] Storybook for HTML: 순수 HTML 환경 지원

 

스토리북의 존재를 안건 꽤 됐는데, 회사 업무 환경이 리액트가 아니어서 생각 못하고 있다가, 미래(?)를 위해 강의를 보게 됐다.
그러다가 리액트 뿐만 아니라 순수 html 환경에서도 쓸 수 있는걸 알게됐다.
회사 프로젝트가 커져서 기능있는 스타일 가이드가 너무 필요했는데 잘됐다 🤩
이번에 깊게 공부해서 바로 실무에 적용해 보려고 한다.

---

작업환경: Windows

Node.js 20 이상 필수

 

 

 

 

 

 

 

 

Storybook 지원 환경

• React
• Vue / Vue 3
• Angular
• Svelte
• HTML (프레임워크 없는 환경) ← 내가 원하는 것!
• Web Components
• 기타 커스텀 환경

 

 

 

 

순수 HTML 프로젝트에 스토리북 설정 방법

 

 

1. 새 폴더 만들기 및 이동

mkdir my-html-storybook
cd my-html-storybook

 

 

 

 

2.  Node.js 초기화

npm init -y

package.json 파일이 생깁니다.

 

 

 

3. Storybook 설치 (HTML 환경)

npx storybook@latest init --type html

--type html 옵션은 순수 HTML 환경용 스토리북 세팅을 자동으로 해줍니다.
설치 중에는 몇 가지 디펜던시(@storybook/html, vite 등)가 함께 설치됩니다.

 

 

 

 

4. 폴더 구조 예시

설치가 완료되면 프로젝트 구조는 아래처럼 됩니다:

my-html-storybook/
├── .storybook/
│   ├── main.js
│   └── preview.js
├── stories/
│   ├── Introduction.stories.mdx
│   └── Button.stories.js
├── package.json

stories/폴더 안에 있는 파일들을 기반으로 컴포넌트 문서화가 진행됩니다.

 

 

 

 

5. Storybook 실행

npm run storybook

 

정상 실행되면 브라우저에서 자동으로 열립니다:

http://localhost:6006/

 

 

 

6. 나만의 HTML 컴포넌트 추가 예시

예를 들어 stories/MyCard.stories.js 파일을 추가하면:

export default {
  title: 'Example/MyCard',
};

export const Default = () => `
  <div style="padding: 1em; border: 1px solid #ccc; border-radius: 8px;">
    <h2>My Card</h2>
    <p>This is a sample card component.</p>
  </div>
`;

 

 

선택: vite 빌더로 더 빠르게 구성하고 싶다면?

npx storybook@latest init --type html --builder vite

→ 속도 빠르고 최신 개발 환경에서 유리합니다.

 

 

 

 

 

 

 

 

 

 

 

---

참고

https://storybook.js.org/docs/get-started/install

Storybook: Frontend workshop for UI development