Skip to Content
Getting StartedGetting Started

Getting Started

Vortex UI를 사용하여 프로젝트를 빠르게 시작하세요.

Vortex UI란?

Vortex UI는 전사 표준 프론트엔드 컴포넌트 라이브러리입니다. React 19, TypeScript 5, Tailwind CSS 4.0을 기반으로 하며, 세 가지 제품 패키지를 제공합니다.

제품 패키지

  • Foundation: 중립적인 기본 컴포넌트 (커스터마이징 가능)
  • iCignal: iCignal 브랜딩이 적용된 컴포넌트
  • Cals: Cals 브랜딩이 적용된 컴포넌트

왜 Vortex UI를 사용해야 하나요?

1. Multi-tenant Architecture

제품별로 최적화된 컴포넌트를 제공하여 각 팀이 독립적으로 개발할 수 있습니다.

2. 개발자 경험

  • TypeScript 완벽 지원: 타입 안전성과 IntelliSense 자동완성
  • Tailwind CSS 기반: 유연한 스타일링과 빠른 개발
  • CLI 도구 제공: npx @vortex/cli로 간편한 컴포넌트 추가

3. 접근성 우선

  • WCAG 2.1 AA 준수
  • 키보드 네비게이션 지원
  • 스크린 리더 호환

빠른 시작 (3단계)

React / React DOM 19 앱과 Vortex Private Registry 접근이 준비되어 있어야 합니다. 레지스트리 설정은 설치 가이드를 참고하세요.

Step 1: 설치

pnpm add @vortex/ui-foundation

Step 2: 스타일 import

앱의 전역 진입점에 한 번 추가하세요.

import "@vortex/ui-foundation/styles"

Step 3: 사용

import { Button } from "@vortex/ui-foundation"
 
export default function App() {
  return <Button>저장</Button>
}

UI 유틸리티, 디자인 토큰, 폰트, 다크 모드 스타일은 컴파일된 CSS에 포함됩니다. 패키지 사용을 위한 Tailwind/PostCSS 설정이나 TypeScript 경로 별칭은 필요하지 않습니다. 특정 컴포넌트가 요구하는 Provider 등은 해당 문서를 따르세요.

Cals/iCignal은 해당 제품 패키지 하나만 설치하고 같은 제품의 styles와 컴포넌트를 import합니다. Foundation은 내부 의존성으로 자동 설치되어 별도 설치나 import가 필요하지 않습니다.

앱 자체 Tailwind v4 유틸리티를 작성하는 경우에만 앱 Tailwind 설정과 선택한 제품의 tailwind-config를 사용할 수 있습니다. 이는 선택 사항이며 styles import를 대신하지 않습니다. CLI add의 소스 복사는 별도 흐름으로, 앱의 Tailwind/경로 설정이 필요할 수 있습니다.

제품별 가이드

선택한 제품에 맞는 설치 가이드를 확인하세요:

추가 자료

Last updated on
Choose Your Product