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/mobile/ui.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/mobile start

설치 및 설정

화면 프리미티브는 apps/mobile/src/ui(Screen, Card, Title, Detail, SectionLabel, ErrorText, AppButton)에 있으며 apps/mobile/src/theme에서 스타일을 가져오므로 웹에서 내린 시각적 결정이 네이티브 UI에 그대로 반영됩니다. 모양 설정에서 ‘웹 앱과 일치’ 모드(GET/PUT /api/mobile/appearance를 사용하는 apps/mobile/src/theme/synced.ts)를 선택하면 로그인한 사용자의 동기화된 웹 색상 팩이 로컬 캐시에서 적용됩니다.

packages/ui-native는 크로스플랫폼 뷰 모델 헬퍼를 담습니다: createEntitlementCard가 서버의 엔타이틀먼트 상태를 카드의 제목, 상태, 설명, 액션 라벨, 접근성 라벨로 변환하므로 웹과 모바일이 같은 접근 결정을 렌더링합니다.

apps/mobile/src/ui/screen.tsx exports:
  Screen, Card, H1, H2, Title, Detail,
  SectionLabel, ErrorText, AppButton

@supastack/ui-native → createEntitlementCard(input)
  → { title, status, detail, accessibilityLabel, action }

구현 워크플로

새 요소를 작성하기 전에 공유 프리미티브로 화면을 구성하세요. 크기와 색을 하드코딩하는 대신 테마 모듈의 토큰과 밀도를 맞추세요.

제품 카피는 프리미티브에 두지 마세요 — 프리미티브는 카피 결정이 아니라 라벨을 렌더링합니다. 접근성 라벨은 createEntitlementCard처럼 커스텀 행에도 함께 전달하세요.

검증 및 문제 해결

라이트와 다크, 가장 큰 텍스트 크기, 스크린 리더 라벨, 작은 기기에서 화면을 확인하세요. 200% 텍스트에서 잘리거나 클립되는 컴포넌트는 완성이 아닙니다.