For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ko/docs/web/ui-kit.md (or send Accept: text/markdown).

UI 키트와 블록

공유 컴포넌트, 디자인 토큰, 블록 카탈로그.

이 가이드에 대해 질문하기

시작하기 전에

파일 → 폴더 열기를 사용하여 Visual Studio Code에서 다운로드한 supastack 프로젝트를 연 다음 터미널 → 새 터미널을 선택합니다. 저장소 루트는 package.json, 앱 및 패키지가 포함된 폴더입니다. 아래 명령을 실행하고 터미널을 열어 두십시오. 명령이 인식되지 않으면 계속하기 전에 도구 설치 가이드를 완료하세요.

먼저 플랫폼 튜토리얼을 읽어보세요. 서버는 브라우저 또는 전화 요청에 응답하는 앱 프로세스입니다. 웹은 apps/web/.env.local를 읽고, Expo는 apps/mobile/.env.local를 읽고, 데이터베이스 마이그레이션 명령은 루트 .env를 읽습니다. 데이터베이스 없는 /dashboard 데모는 Postgres를 마이그레이션해야 하는 실제 /auth 계정과 별개입니다. 전화 또는 데스크톱 전용 결제에는 별도로 실행되는 웹 백엔드가 필요합니다.

corepack pnpm --filter @supastack/web dev

설치 및 설정

packages/ui-web에는 공유 프로덕트 컴포넌트(버튼, 입력, 카드, 배지, 다이얼로그, 셸 부품)가 있고 packages/design-tokens는 app-theme.css가 CSS 변수로 매핑하는 토큰 소스입니다. /kit-blocks 라우트는 블록 카탈로그(프로덕트로 가져갈 수 있는 합성 섹션)를 마운트합니다.

apps/mobile은 동등한 네이티브 프리미티브로 packages/ui-native를 소비하므로 표면 스타일링은 플랫폼별로 유지되면서 계약은 공유됩니다.

# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web dev
# Then open http://localhost:3000/kit-blocks in your browser

# Theme tokens used by components
var(--page) var(--section) var(--raised)
var(--text) var(--muted) var(--border)
var(--accent) var(--accent-ink) var(--radius-*)

구현 워크플로

먼저 공유 컴포넌트로 화면을 조합하고, 키트가 패턴을 표현할 수 없을 때만 커스텀 요소로 되돌아가세요. 새로운 공유 부품은 토큰 주도 스타일링으로 ui-web에 두어 모든 테마 팩이 자동으로 적용되게 합니다.

마케팅 컴포넌트(src/marketing)는 프로덕트 표면 밖에, 그 반대도 마찬가지로 — 두 크롬 시스템은 의도적으로 분리되어 있습니다.

검증 및 문제 해결

새 컴포넌트를 모든 density/radius/font 프리셋과 최소 하나의 라이트·다크 팩에 대해 검증합니다. 키보드 포커스, 320px 레이아웃, reduced motion을 확인하세요. /settings/appearance의 키트 갤러리가 가장 빠른 점검입니다.