Getting Started

Featuring Design System 시작하기 — 패키지 구조, 핵심 개념, 기술 스택

Featuring Design System

피처링의 모든 프로덕트에서 일관된 사용자 경험을 만들기 위한 React 디자인 시스템입니다. 디자이너와 개발자가 같은 언어로 소통하고, 빠르게 프로덕션 품질의 UI를 구축할 수 있도록 설계되었습니다.

패키지 구성

세 개의 독립적인 패키지로 구성되어 있으며, 필요한 것만 선택하여 사용할 수 있습니다.

패키지	설명
`@featuring-corp/design-tokens`	1,000개 이상의 디자인 토큰 — 색상, 간격, 타이포그래피, 반지름, 그림자. CSS 변수와 JS 객체로 제공
`@featuring-corp/components`	30개 이상의 React UI 컴포넌트 — Layout primitives, Form, Feedback, Navigation
`@featuring-corp/icons`	333개 시스템 아이콘 + 26개 서비스 아이콘. React 컴포넌트로 제공

패키지 의존성

design-tokens ← icons (독립) ← components (둘 다 의존)

design-tokens는 다른 패키지에 의존하지 않으며, icons는 독립적이고, components가 두 패키지 모두를 사용합니다.

핵심 개념

$css Prop

레이아웃 컴포넌트(Box, Flex, HStack, VStack, Center, Grid, Typo)에서 사용하는 토큰 기반 스타일링 API입니다.

import { Box } from '@featuring-corp/components';

<Box $css={{
  padding: '$spacing-400',
  bgColor: { default: '$background-1', hover: '$background-2' },
  borderRadius: '$radius-200',
}}>
  Token-based styling
</Box>

토큰 값($spacing-400)과 임의 CSS 값(100%, 16px)을 모두 지원하며, 반응형과 인터랙티브 조건을 네이티브로 지원합니다.

자세한 내용: $css Prop

반응형 디자인

레이아웃 속성에 객체를 전달하면 브레이크포인트별로 다른 값이 적용됩니다.

<Box $css={{
  padding: { mobile: '$spacing-300', desktop: '$spacing-600' },
  display: { mobile: 'block', tablet: 'flex' },
}}>
  Responsive content
</Box>

4단계 브레이크포인트: mobile(0px) → tablet(768px) → desktop(1024px) → wide(1440px)

자세한 내용: Responsive Design

render Prop

모든 레이아웃 컴포넌트는 render prop으로 렌더링할 HTML 요소를 변경할 수 있습니다.

import { Box, Typo } from '@featuring-corp/components';

// section으로 렌더링
<Box render={<section />} $css={{ padding: '$spacing-400' }}>
  Content
</Box>

// h1으로 렌더링
<Typo render={<h1 />} variant="$heading-1">
  Page Title
</Typo>

3-Layer Token System

레이어	역할	예시
Global	브랜드 독립적 원시 값	`--global-colors-red-50`, `--global-spacing-400`
Semantic	UI 맥락에 매핑	`--semantic-color-text-1`, `--semantic-color-background-1`
Color Set	브랜드별 Primary 팔레트	`--global-colors-primary-60` (Featuring: `#5e51ff`)

자세한 내용: Design Philosophy

브랜드 테마

두 가지 브랜드 테마를 지원합니다. CSS 파일 교체만으로 전체 테마가 전환됩니다.

테마	Primary 색상	CSS 파일
Featuring	`#5e51ff` (보라색)	`featuring.css`
DataEffect	`#0065ff` (파란색)	`dataEffect.css`

기술 스택

기술	역할
React 18+	UI 렌더링
TypeScript	타입 안전성
Vanilla Extract	Zero-runtime CSS-in-JS
Rainbow Sprinkles	`$css` prop (토큰 기반 atomic CSS)
Base UI	Polymorphic rendering (`useRender`, `mergeProps`)

빠른 시작

// 1. CSS import (앱 진입점)
import '@featuring-corp/components/preset/featuring';

// 2. 컴포넌트 사용
import { Box, HStack, Typo, Button } from '@featuring-corp/components';
import { IconSearchOutline } from '@featuring-corp/icons';

function App() {
  return (
    <Box $css={{ padding: '$spacing-600' }}>
      <Typo variant="$heading-3" render={<h1 />}>
        Welcome
      </Typo>
      <HStack $css={{ gap: '$spacing-300', marginTop: '$spacing-400' }}>
        <Button.Root variant="primary" size="md">
          <Button.Icon><IconSearchOutline /></Button.Icon>
          <Button.Text>Search</Button.Text>
        </Button.Root>
      </HStack>
    </Box>
  );
}

다음: Installation

On this page