Skip to Content
Getting StartedIntroduction

Introduction

Vortex UI에 오신 것을 환영합니다. 이 문서는 Vortex UI의 철학, 특징, 그리고 기술 스택을 소개합니다.

Vortex UI란?

Vortex UI는 전사 표준 컴포넌트 라이브러리로, 디자이너와 개발자가 일관된 사용자 경험을 제공할 수 있도록 설계되었습니다.

주요 특징

  • Multi-tenant Architecture: 제품별로 최적화된 3가지 패키지 제공
  • shadcn/ui 기반: 검증된 컴포넌트 라이브러리 확장
  • 디자인 토큰 시스템: 일관된 디자인 언어

핵심 특징

1. Multi-tenant Architecture

Vortex UI는 세 가지 제품 패키지를 제공합니다:

Foundation

  • 목적: 중립적인 기본 컴포넌트
  • 사용 대상: 새로운 프로젝트, 커스텀 브랜딩이 필요한 경우
  • 특징: 완전한 커스터마이징 가능

iCignal

  • 목적: iCignal 브랜딩이 적용된 컴포넌트
  • 사용 대상: iCignal 제품 개발팀
  • 특징: iCignal 디자인 토큰 (색상, 폰트, 로고)

Cals

  • 목적: Cals 브랜딩이 적용된 컴포넌트
  • 사용 대상: Cals 제품 개발팀
  • 특징: Cals 디자인 토큰 + 예약 상태 컬러

2. 개발자 경험

TypeScript 완벽 지원

import { Button } from "@vortex/ui-foundation";
import type { ButtonProps } from "@vortex/ui-foundation";
 
const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Tailwind CSS 기반

UI에 필요한 Tailwind 유틸리티, 토큰, 폰트, 다크 모드 스타일은 각 제품의 styles에 컴파일되어 제공됩니다. 패키지 사용을 위해 앱에 Tailwind/PostCSS를 설치할 필요는 없습니다. 아래처럼 앱에서 Tailwind 유틸리티를 직접 추가하려는 경우에만 앱의 Tailwind v4 빌드와 선택적 tailwind-config를 구성하세요. 자세한 내용은 설치 가이드를 참고하세요.

// 유연한 스타일 확장
<Button className="hover:scale-105 transition">Custom Styled Button</Button>

CLI 도구 제공

init은 새 앱 템플릿을 생성합니다. add는 컴포넌트 소스를 앱으로 복사하는 별도 흐름이며 복사한 소스를 빌드하기 위한 Tailwind, 경로 별칭, 의존성 설정이 필요할 수 있습니다.

# 컴포넌트 추가
npx @vortex/cli add button
 
# 프로젝트 생성
npx @vortex/cli init my-project

3. 접근성 우선

Vortex UI의 모든 컴포넌트는 접근성을 최우선으로 설계되었습니다:

  • WCAG 2.1 AA 준수: 웹 접근성 표준 충족
  • 키보드 네비게이션: 모든 인터랙션은 키보드로 가능
  • 스크린 리더 지원: ARIA 속성 및 시맨틱 HTML 사용
  • 색상 대비: 충분한 색상 대비 보장

기술 스택

Core Technologies

  • React 19: 최신 React 기능 활용
  • TypeScript 5: 타입 안전성과 개발자 경험
  • Tailwind CSS 4.0: 유틸리티 기반 스타일링
  • Radix UI Primitives: 접근성이 검증된 기본 컴포넌트

Build Tools

  • Vite: 빠른 개발 서버 및 빌드
  • Turborepo: 모노레포 빌드 최적화
  • pnpm: 효율적인 패키지 관리

Quality Assurance

  • Vitest: 빠른 단위 테스트
  • ESLint: 코드 품질 관리
  • Prettier: 일관된 코드 포맷팅

디자인 시스템

Vortex UI는 다음 디자인 토큰을 제공합니다:

  • Colors: Primary, Secondary, Neutral, Semantic Colors
  • Typography: 폰트 패밀리, 크기, 가중치, 행간
  • Spacing: 일관된 간격 시스템 (4px 기준)
  • Shadows: 깊이감을 표현하는 그림자 시스템
  • Border Radius: 모서리 곡률 토큰
  • Transitions: 부드러운 애니메이션

다음 단계

Vortex UI를 시작할 준비가 되셨나요?

Last updated on
iCignal 설치 가이드Quick Start