IDS — Infoteam Design System

GIST 인포팀 서비스(지글, 팟쥐 등)의 UI를 일관되게 유지하기 위한 크로스플랫폼 디자인 시스템.

React (Web)과 Flutter (Mobile)을 동시 지원하며, 토큰 파이프라인으로 CSS·Dart 코드를 자동 생성한다.

패키지

패키지	설명	배포
@gsainfoteam/ids-css	CSS 변수 + Tailwind @theme	GitHub Packages
@gsainfoteam/ids-react	React 컴포넌트	GitHub Packages
ids_flutter	Flutter 컴포넌트	pub.dev
packages/core	토큰 소스 + Style Dictionary codegen	-

설치법은 각 패키지 README 에 있다. npm 패키지는 GitHub Packages 라 인증이 필요하다.

환경 세팅

# pnpm이 없으면 먼저 설치
npm install -g pnpm

# 의존성 설치
pnpm install

Flutter 작업 시 mise 사용을 권장한다:

mise install   # .mise.toml에 명시된 Flutter 버전 설치

CI

PR을 열면 자동으로 아래 체크가 실행된다.

• JS: pnpm codegen → 생성 파일 동기화 확인 → typecheck → lint → build
• Flutter: flutter test

토큰 파일(packages/core/tokens/)을 수정했는데 pnpm codegen을 실행하지 않으면 CI가 실패한다.

개발 워크플로우

토큰 수정

토큰은 packages/core/tokens/에서만 편집한다. 직접 생성 파일을 수정하면 안 됨.

# 1. 토큰 파일 편집
#    packages/core/tokens/palette.json
#    packages/core/tokens/semantic/*.json
#    packages/core/tokens/spacing.json 등

# 2. 생성 파일 업데이트
pnpm codegen

# 3. 생성된 파일 확인 후 커밋
#    packages/css/dist/ids.css
#    packages/react/src/tokens/types.ts
#    packages/flutter/lib/tokens/*.dart

새 색상 추가

# 1. 팔레트 값 추가
#    packages/core/tokens/palette.json

# 2. semantic 파일 추가
#    packages/core/tokens/semantic/[color].light.json
#    packages/core/tokens/semantic/[color].dark.json

# 3. codegen 실행
pnpm codegen

React 컴포넌트 개발

# Storybook으로 컴포넌트 개발
pnpm storybook   # http://localhost:6006

# 빌드 확인
pnpm build

# 타입·린트 검사
pnpm typecheck
pnpm lint

컴포넌트는 외부 headless 라이브러리(Radix, Base UI 등)에 의존하지 않고 전부 직접 구현한다.

모든 IDS 컴포넌트는 ThemeProvider 없이 동작하지 않는다:

// Storybook decorator나 App 최상단에 반드시 추가
<ThemeProvider color="blue" mode="light">
  <App />
</ThemeProvider>

Flutter 컴포넌트 개발

cd packages/flutter
flutter pub get
flutter test

배포

배포는 Changesets로 관리한다. @gsainfoteam/ids-css와 @gsainfoteam/ids-react는 항상 동일한 버전을 가진다.

# 1. 변경 내용 기록 (어떤 패키지가 어떻게 바뀌는지 작성)
pnpm changeset

# 2. 생성된 .changeset/*.md 파일을 커밋에 포함해서 PR

# 3. PR 머지 후 버전 bump. 파일만 바뀌므로 직접 커밋해서 PR 을 올린다
pnpm version:packages    # package.json + pubspec 버전 올리고 CHANGELOG 생성
git commit -am "chore(release): version packages"

# 4. 버전 bump 가 main 에 머지된 뒤 그 커밋에 태그를 찍는다
git switch main && git pull
git tag v1.2.3 && git push origin v1.2.3   # CI 가 GitHub Packages + pub.dev 로 배포
gh release create v1.2.3 --generate-notes --verify-tag

npm 패키지는 secrets.GITHUB_TOKEN으로 배포하므로 갱신할 토큰이 없다.

3번에서 changeset version을 직접 쓰지 않는다. pub.dev 자동 배포는 태그와 pubspec.yaml의 version이 일치해야 통과하므로, 태그를 찍기 전에 pubspec 값이 커밋돼 있어야 한다.

4번에서 태그를 직접 push 한다. pub.dev 는 태그 push 로 트리거된 워크플로에서만 게시를 허용하고, gh release create 가 만드는 릴리스 이벤트로는 거부한다.

의존성 구조

graph LR
  core["packages/core (codegen source)"]
  css["@gsainfoteam/ids-css"]
  react["@gsainfoteam/ids-react"]
  flutter["ids_flutter"]
  tw["tailwindcss"]

  core -->|codegen| css
  core -->|codegen| react
  core -->|codegen| flutter
  css -->|peerDep| react
  tw -->|peerDep| react
  tw -->|peerDep| css

Loading

core는 런타임 의존성이 아니다. 빌드 시에만 사용하는 코드 생성기.

자주 쓰는 명령어

pnpm codegen      # 토큰 → css / react / flutter 생성
pnpm build        # 전체 빌드 (turbo, css → react 순서 자동)
pnpm typecheck    # TypeScript 검사
pnpm lint         # ESLint
pnpm storybook    # Storybook (포트 6006)
pnpm changeset    # 변경 내용 기록