참조
디자인 시스템 및 모델
Vibr로 빌드할 수 있는 디자인 시스템, npm의 패키지를 사용하는 방법, 공급자별로 제공되는 모델을 알아봅니다.
기본 제공 디자인 시스템
| 디자인 시스템 | 종류 | 패키지 |
|---|---|---|
| Material UI (MUI) | React | @mui/material@6, @mui/icons-material@6, Emotion |
| Ant Design | React | antd@5 |
| Fluent UI React | React | @fluentui/react-components@9 |
| Mantine | React | @mantine/core@7, @mantine/hooks@7 |
| Shoelace | 웹 컴포넌트 | @shoelace-style/shoelace@2 |
| Octuple | React | @eightfold.ai/octuple@2 |
초안은 CDN에서 불러온 이 패키지들의 실제 컴포넌트를 가져와 React 19로 렌더링합니다. Vibr는 빌드하기 전에 각 패키지가 실제로 내보내는 컴포넌트를 읽어 두므로, 모델이 존재하지 않는 컴포넌트를 지어낼 수 없습니다. CDN은 esm.sh입니다. 응답하지 않으면 Vibr는 이번 방문 동안 대신 예비 경로(jsDelivr, 또는 Vibr가 보관한 Fluent UI 사본)에서 초안을 불러오고 이를 알려 줍니다.
디자인 시스템을 변경하면 새 세션이 시작됩니다. 보관하려는 작업은 먼저 저장하세요.
npm의 패키지 사용하기
디자인 시스템 선택기에서 사용자 지정 npm 패키지… 항목을 선택하고 다음 항목을 입력하세요.
| 입력란 | 입력할 내용 | 예 |
|---|---|---|
| 패키지(버전 포함) | 패키지 이름과 메이저 버전. | @radix-ui/themes@3 |
| CSS 경로 또는 URL(선택 사항) | 선택 사항. 패키지에 스타일시트가 있으면 입력합니다. | @radix-ui/themes@3/styles.css |
| 종류 | React 또는 웹 컴포넌트. | React |
| 등록 모듈(선택 사항) | 선택 사항. 등록하는 데 로더가 필요한 웹 컴포넌트에 사용합니다. | my-ds@1/dist/loader.js |
Vibr는 빌드하기 전에 npm에 패키지가 있는지 확인합니다. 이름이나 버전이 잘못되면 알려 줍니다.
Vibr는 무엇이든 패키지를 불러오기 전에 패키지도 살펴봅니다. 버전 범위는 게시된 지 2주 이상 된 최신 릴리스로 고정되므로(필드의 @radix-ui/themes@3이 예를 들어 @radix-ui/themes@3.3.0으로 바뀝니다), 오늘 게시된 문제 있는 릴리스가 쓰이지 않습니다. 악성 코드로 등록된 패키지는 절대 불러오지 않습니다. 필드 아래에는 알려진 보안 권고, 지원 중단된 버전, 게시된 지 30일이 안 되었거나 지난주 다운로드가 1,000회 미만인 패키지, 인기 패키지와 한두 글자만 다른 이름이 표시됩니다. 이 확인에는 deps.dev, npm, OSV의 공개 데이터를 사용하며, 패키지 이름과 버전만 보냅니다.
차트와 표 라이브러리도 고르려면 차트와 표를 참고하세요.
공급자 및 모델
| 공급자 | 모델 | 계획에 사용하는 모델 |
|---|---|---|
| Google Gemini | gemini-3.5-flash(기본값), gemini-3.7-flash, gemini-flash-latest, gemini-3.1-pro-preview | gemini-3.5-flash |
| OpenAI | gpt-5.5(기본값), gpt-5.4, gpt-5.4-mini | gpt-5.4-mini |
| Anthropic | claude-sonnet-5-5(기본값), claude-opus-5-5 | claude-haiku-5-5 |
| OpenRouter | anthropic/claude-sonnet-5.5(기본값), anthropic/claude-opus-5.5, openai/gpt-5.5, google/gemini-3.5-flash, google/gemini-3.1-pro-preview | anthropic/claude-haiku-5.5 · openai/gpt-5.4-mini · google/gemini-3.5-flash |
OpenRouter를 쓰면 키 하나로 Claude, GPT, Gemini 모델을 사용할 수 있습니다. 키를 붙여 넣는 대신 키 대화 상자에서 OpenRouter로 로그인을 선택할 수도 있습니다. OpenRouter가 Vibr 전용 키를 만들며, OpenRouter 계정에서 확인하고 한도를 정하거나 취소할 수 있습니다.
계획 단계에서는 같은 공급자의 더 빠른 모델을 사용합니다. 키로 그 모델을 사용할 수 없으면 선택한 모델이 대신 계획합니다. 각 모델에는 같은 공급자의 백업 모델도 있어, 모델이 사용 중이거나 할당량을 초과하면 대신 처리합니다. 실행 과정을 참조하세요.
Gemini의 무료 등급은 Flash 모델에서 작동합니다. Pro 모델은 Google AI Studio에서 결제를 사용 설정해야 합니다.