Skip to Content
ComponentsIcignaliCignal Components

iCignal Components

iCignal 브랜드 아이덴티티가 적용된 프리미엄 컴포넌트 라이브러리입니다.

개요

iCignal Components는 Foundation Components를 기반으로 iCignal 브랜드 가이드를 적용한 컴포넌트 세트입니다. 모든 컴포넌트는 iCignal의 브랜드 컬러(Blue, Green, Orange)와 디자인 원칙을 따르며, iCignal 제품군에서 일관된 사용자 경험을 제공합니다.

특징

  • iCignal 브랜딩: 고유의 브랜드 컬러와 스타일 적용
  • Foundation 기반: 검증된 Foundation Components를 상속
  • 일관성: 모든 iCignal 제품에서 동일한 디자인 언어
  • 접근성 우선: WCAG 2.1 AA 기준 준수
  • TypeScript 지원: 완벽한 타입 정의 제공

iCignal 브랜드 컬러

Primary (Blue) - #2196f3

iCignal의 메인 브랜드 컬러입니다. 주요 액션, CTA 버튼, 중요한 UI 요소에 사용됩니다.

<Button variant="primary">iCignal Blue Button</Button>

Secondary (Green) - #4caf50

성공, 확인, 긍정적 액션을 나타내는 브랜드 컬러입니다.

<Alert variant="success">데이터 저장 완료</Alert>

Accent (Orange) - #ff9800

강조, 경고, 주의가 필요한 요소에 사용되는 브랜드 컬러입니다.

<Badge variant="warning">주의 필요</Badge>

Foundation과의 차이점

특징FoundationiCignal
브랜딩중립적iCignal 브랜드 컬러
Primary Color#3B82F6#2196f3 (iCignal Blue)
Secondary Color#64748B#4caf50 (iCignal Green)
Accent Color없음#ff9800 (iCignal Orange)
커스터마이징자유롭게 가능브랜드 가이드 준수 필요
사용 제한없음iCignal 제품 전용
로고없음iCignal 로고 사용 가이드 포함

빠른 시작

설치

# 패키지 설치
npm install @vortex/ui-icignal
 
# 또는 CLI로 개별 컴포넌트 추가
npx @vortex/cli add button --package icignal

사용법

// 1. iCignal 테마 import
import "@vortex/ui-icignal/theme";
 
// 2. 컴포넌트 import
import { Button, Card, Alert } from "@vortex/ui-icignal";
 
export default function App() {
  return (
    <Card>
      <Alert variant="info">iCignal 브랜드가 적용된 Alert</Alert>
      <Button variant="primary">iCignal Blue Button</Button>
    </Card>
  );
}

컴포넌트 카테고리

Basic (기본) - 6개

가장 기본적인 UI 구성 요소입니다.

Form (폼) - 5개

사용자 입력을 받는 폼 컴포넌트입니다.

Layout (레이아웃) - 4개

페이지 구조와 레이아웃을 구성하는 컴포넌트입니다.

  • Card - 카드 컨테이너
  • Container - 콘텐츠 컨테이너
  • Grid - 그리드 레이아웃
  • Stack - 스택 레이아웃

Feedback (피드백) - 5개

사용자에게 피드백을 제공하는 컴포넌트입니다.

Data Display (데이터 표시) - 4개

데이터를 표시하는 컴포넌트입니다.

Navigation (네비게이션) - 3개

페이지 간 이동을 돕는 네비게이션 컴포넌트입니다.

사용 가이드

iCignal 제품에서 사용하기

iCignal Components는 iCignal 제품군(Analytics, Dashboard, Reports 등)에서 사용하도록 최적화되어 있습니다.

import "@vortex/ui-icignal/theme";
import { Button, Card, Alert, Table } from "@vortex/ui-icignal";
 
// iCignal Analytics Dashboard
export default function AnalyticsDashboard() {
  return (
    <div>
      <Card>
        <h2>데이터 분석</h2>
        <Button variant="primary">분석 시작</Button>
      </Card>
 
      <Alert variant="success">분석이 완료되었습니다.</Alert>
 
      <Table>{/* 분석 데이터 표시 */}</Table>
    </div>
  );
}

브랜드 가이드 준수

iCignal Components를 사용할 때는 다음 브랜드 가이드를 준수해야 합니다:

  • ✅ iCignal 브랜드 컬러 유지 (Blue, Green, Orange)
  • ✅ 일관된 타이포그래피 사용
  • ✅ iCignal 로고 사용 가이드 준수
  • ⚠️ 브랜드 컬러 커스터마이징은 브랜드 팀 승인 필요

Foundation 참조

iCignal Components는 Foundation Components를 기반으로 하므로, 더 자세한 사용법과 API 문서는 Foundation 문서를 참조하세요:

다음 단계

Last updated on
SelectAvatar