Skip to Content
ResourcesResources

Resources

Vortex 디자인 시스템을 효과적으로 활용하기 위한 리소스와 가이드입니다.

📚 문서 및 가이드

Getting Started

  • 소개 - Vortex 디자인 시스템 개요
  • 설치 - 프로젝트에 Vortex 설치하기
  • 빠른 시작 - 5분 만에 첫 프로젝트 시작

Foundations

Components

Patterns

Examples

🔧 도구 및 리소스

CLI 도구

# Vortex CLI로 컴포넌트 추가
npx @vortex/cli add button input card
 
# 새 프로젝트 생성
npx @vortex/cli init my-project --template vite-react

Storybook

  • Storybook 보기  - 인터랙티브 컴포넌트 문서
  • 모든 컴포넌트의 variants와 props 탐색
  • 실시간으로 props 변경하며 테스트

Figma 디자인 킷

  • Figma 파일 다운로드 - 디자이너를 위한 컴포넌트 라이브러리
  • 디자인 토큰과 컴포넌트가 코드와 1:1 매핑
  • 반응형 레이아웃 템플릿 포함

GitHub Repository

  • 플랫폼 저장소  - Monorepo 소스 코드
  • Issue 제출 및 기여 가이드
  • Pull Request 템플릿

📦 패키지

@vortex/ui

pnpm add @vortex/ui

React 컴포넌트 라이브러리:

  • shadcn/ui 기반의 접근 가능한 컴포넌트
  • TypeScript 완전 지원
  • Tree-shaking 최적화
  • 커스터마이징 가능한 테마

@vortex/cli

npm install -g @vortex/cli

개발 도구:

  • 컴포넌트 자동 설치
  • 프로젝트 템플릿 생성
  • 코드 생성기

🚀 업데이트 및 변경사항

Changelog

버전별 변경사항과 새로운 기능을 확인하세요.

최신 버전: v1.0.0 (2025-11-03)

  • ✨ 5개 핵심 컴포넌트 출시 (Button, Input, Card, Select, Checkbox)
  • 📚 20개 실전 패턴 가이드
  • 🎨 통합 디자인 토큰
  • ♿ WCAG 2.1 AA 접근성 준수
  • 🌍 다국어 지원 (한국어, 영어)

Migration Guide

기존 프로젝트를 Vortex로 마이그레이션하는 가이드입니다.

💬 커뮤니티 및 지원

질문하기

버그 리포트

  • GitHub Issues  - 버그 및 기능 요청
  • Issue 템플릿을 사용하여 상세한 정보 제공

기여하기

팀 연락처

📊 성능 및 최적화

성능 최적화에 대한 자세한 내용은 Performance Optimization 가이드를 참고하세요.

🎯 빠른 링크

카테고리링크
시작하기Installation • Quick Start
컴포넌트Button • Input • Card
패턴Authentication • Form Validation
예제Foundation • iCignal • Cals
리소스Changelog • Migration

🤝 기여자

Vortex 디자인 시스템은 다음 팀원들의 노력으로 만들어졌습니다:

  • 디자인 팀: UI/UX 디자인 및 디자인 시스템 구축
  • 프론트엔드 팀: React 컴포넌트 및 패턴 구현
  • QA 팀: 품질 보증 및 접근성 테스트
  • 기술 문서 팀: 문서 작성 및 튜토리얼 제작

특별히 shadcn과 Radix UI 팀에게 감사드립니다.

💡 시작할 준비가 되셨나요?

Vortex 디자인 시스템으로 첫 프로젝트를 시작해보세요!

설치 가이드 →

예제 보기 →

Last updated on
Changelog