패키지 구조 설계

[ryxxn]

처음에 생각한 프로젝트 구조는

• React + Vite 기반
• tailwind 기반 컴포넌트 시스템

으로 가려고 했어요.

그런데, 저희 디자인 시스템에서는 디자인 토큰 및 스키마 정보를 따로 관리해야 하기 때문에

...
├── src/
├── tokens/ 
│   ├── color.ts
│   └── typography.ts
...

// color.ts
export const colors = {
  // gray
  gray100: '#F5F5F5',
  gray200: '#E7E7E7',
  gray300: '#BBBABA',
  gray400: '#929292',
  gray500: '#787777',
  gray600: '#565656',
  gray700: '#403F3F',
  gray800: '#262424',
  gray900: '#1B1818',
} as const;

이런식의 구조를 생각했어요.

---

그런데 tailwind 기반이다 보니 css에 직접 디자인 토큰을 추가해주거나, tailwind config에 추가해주는 방법을 사용해야 해요.
이런 경우 디자인 토큰 상수(예: color.ts)를 통해 타입 검사를 하기 힘들어져요.

그래서

1. tailwind를 사용하지 않기 (CSS in JS 고려)
2. 토큰 상수 기반 index.css에 자동 생성 스크립트 구현

위 방법들에 대해서 논의해보면 좋을 것 같아요.

[cychann]

저는 Tailwind CSS 방향이 괜찮다고 생각합니다!

해당 이슈와 관련해서 여러 방안들을 검토해봤는데, CSS-in-JS(styled-components, vanilla-extract 등)도 고려해봤지만 서비스 특성상 빠른 프로토타이핑과 고객별 브랜딩이 보다 중요하다고 생각해서 Tailwind가 가장 적합하다고 판단이 돼요.

저희가 나중에 Figma Plugin으로 토큰을 뽑아내면 해당 토큰을 기반으로 아래와 같이 정의해서 사용하면 됩니다.

// 1. 디자인 토큰 정의
export const colors = {
  // gray
  gray100: '#F5F5F5',
  gray200: '#E7E7E7',
  gray300: '#BBBABA',
  gray400: '#929292',
  gray500: '#787777',
  gray600: '#565656',
  gray700: '#403F3F',
  gray800: '#262424',
  gray900: '#1B1818',
} as const;

// 2. Tailwind config 연동
import { colors } from './src/tokens/color';
import type { Config } from 'tailwindcss';

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}', './.storybook/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors,
    },
  },
  plugins: [],
} satisfies Config;

위 구조로 가져가면 토큰을 상수로 관리해서 타입 검사나 관리도 확보할 수 있습니다.

예상 가능한 이슈로는 Tailwind 버전 업데이트로 인한 영향 정도인데, 저희의 큰 구조에서 벗어날만한 이슈는 발생하지 않을 거라고 생각합니다.
또한 추후 홈페이지 연결 등 확장을 고려했을 때도 더 유연한 방향이라고 생각합니다!

물론 찾아본 결과로는 CSS in JS 방식도 초기 설계나 방향성에 따라 더 좋은 방법이 될 순 있을 것 같은데, 추가로 논의해보면 좋을 것 같아요 😄

[ryxxn]

말씀 주신대로 tailwind config에 직접 연동하는 방식으로 하면 토큰별 타입 검사 및 연동 자동화가 깔끔하게 이루어질 것 같아요 👍

tailwind를 사용했을 때 걸리는 부분은 DOM의 크기가 커지는 문제였는데, 빠른 프로토타이핑과 고객별 브랜딩 입장에서 생각해보니 유연하게 확장성을 확보할 수 있어 트레이드 오프를 감수해볼만 할 것 같아요. 또, AI에게 데이터를 요청할 때 tailwind 기반 스타일이라면 따로 정보를 제공할 필요가 없다는 부분도 큰 장점이 될 것 같아요.

tailwind 기반으로 진행하는 것으로 하면 좋을 것 같아요. 😄