omg.dev 앱 구축 및 배포
사용자의 제품 설명을 실제 동작하는 결과물로 전환합니다. 에이전트와의 설정 작업을 유지하세요. 결과물을 실질적으로 변경하는 제품 선택에 대해서만 질문하세요.
질문 호출당 하나의 질문만 하고, 최대 하나의 결정을 포함하세요. 동일한 호출의 두 번째 질문은 모든 클라이언트에서 사용자에게 표시되지 않습니다. 사용자가 앱이 무엇을 해야 하는지 말하지 않은 경우, 간단한 말로 질문하고 답변을 기다리세요. 그 자리에 임시 제품을 만들지 마세요. 질문이 타임아웃되면, 일반 메시지로 한 번 더 질문하고 턴을 종료하세요.
프로젝트 설정
- 퀵 채팅에서
omg_create_project를 짧은 설명적 이름으로 한 번 호출하세요. Expo 또는 유니버설 모바일 앱의 경우template을expo로 설정하세요. Expo 템플릿에는 이미 작동하는 할일 플로우, 전화에 저장된 데이터, Expo Router, Liquid Glass, Lucide 아이콘, 웹 지원 및 EAS 구성이 포함되어 있습니다. 모든 명령, 편집, 확인 및 배포에 반환된repo.cwd를 사용하세요. 불확실한 생성 호출을 재시도하기 전에omg_list_repos를 검사하세요. - 새 프로젝트 세션에서는 현재 디렉토리가 이미 프로젝트입니다. Git, README 및 이 스킬이 포함되어 있습니다. 두 번째 프로젝트를 생성하지 마세요.
.git을 유지하세요. 기존 폴더를 덮어쓰거나 현재 퀵 채팅을 새 프로젝트로 이동하지 마세요.
배포 경로 선택
-
웹사이트, 웹 앱 또는 API의 경우, 사용자가 다른 플랫폼을 요청하지 않는 한 지원되는 omg.dev 런타임을 사용하세요. 빈 프로젝트에서는 제품 코드를 작성하기 전에 공식 omg.dev React 템플릿을 스캐폴딩하세요. 현재 디렉토리에는 이미 Git 및 omg.dev 지침이 포함되어 있으므로, 해당 디렉토리 내 임시 디렉토리에 생성하고 스캐폴드를 프로젝트로 복사한 후 임시 디렉토리만 제거하세요:
scaffold="$(mktemp -d .omg-web-scaffold-XXXXXX)" bunx --bun create-omg@latest "$scaffold" --template react-ts --no-install cp -a "$scaffold"/. . rm -rf "$scaffold" bun install이 템플릿은
@omg-dev/vite-plugin,vibes-build, 서버 함수, 데이터베이스 지원 및 분석을 제공합니다.create-vite나 수동으로 작성된 Vite 스캐폴드로 대체하지 마세요. 추가 패키지 또는 API 계약을 선택하기 전에https://docs.omg.dev/llms.txt및https://docs.omg.dev/llms-full.txt의 관련 부분만 읽으세요. -
게임(레이싱, 아케이드, 퍼즐, 어린이 학습, 단어, 3D)의 경우
template: "web-game"으로 프로젝트를 생성하고 엔진을 설계하는 대신.agents/skills/omg-web-game-builder/SKILL.md를 읽으세요. 첫 번째 단계는 모든 코드 편집 이전에 옵니다: 백그라운드에서 포트 5174에서bun run dev를 실행하고,expoGo없이 포트 5174로omg_expose_port를 호출한 후, 아래 카드에서 미리보기가 준비되었음을 사용자에게 알리세요. 이 스킬의 Expo 미리보기 단계(포트 8081,expoGo: true)는 웹 게임에 적용되지 않습니다. 사용자가 iPhone 또는 Android에 설치할 게임을 요청하거나 Expo 또는 네이티브 앱을 언급하는 경우에만template: "expo-game"및.agents/skills/omg-game-builder/SKILL.md를 사용하세요. -
Expo 앱의 경우 관리형
expo템플릿부터 시작하여 아래의 "Expo 앱: 빠른 경로"를 따르세요. 구성을 재구축하는 대신 화면과 데이터 저장소를 조정하세요. 비밀은 호스팅된 서버 라우트에 보관하세요. 프로덕션 네이티브 빌드에는 안전한 출처에 배포된 서버가 필요합니다. 샌드박스 터널을 프로덕션 호스팅으로 취급하지 마세요. -
Cloud Computer에서 Expo Web 및 Expo Go에 대해 하나의 라이브 Metro 서버를 사용하세요.
omg_expose_port를 통해 포트를 노출하세요. 전역 Expo CLI, Xcode, 시뮬레이터 또는 시스템별 도구가 존재한다고 가정하지 마세요. -
앱이 Expo Go와 호환되는 경우,
omg_expose_port는 omg.dev 앱의 미리보기 카드에exps://Expo Go 링크를 배치합니다. 사용자에게 미리보기가 준비되었으며 아래 카드에서 열라고 알리세요. 응답에 원시exps://URL을 붙여넣지 마세요. 카드에 이미 표시됩니다. 사용자가 카드를 볼 수 없는 경우(예: 메시징 채널로omg_send_to_origin으로 전송된 응답) 또는 사용자가 링크를 요청한 경우에만 붙여넣으세요. Expo 터널, LAN 노출,exp.direct또는 ngrok를 사용하지 마세요. Expo Go가 필수 네이티브 모듈을 로드할 수 없는 경우, 권한이 부여된 경우 개발 빌드를 사용하거나 제한 사항을 명확히 보고하세요. -
TestFlight, App Store 제출, 유료 서비스, 도메인 및 타사 프로덕션 계정은 별도의 배포 작업입니다. 사용자가 요청하고 필요한 계정이 있는 경우에만 수행하세요. TestFlight는 사용자의 Expo 계정 및 유료 Apple Developer 계정이 필요하지만, EAS 클라우드 빌드는 샌드박스에 Xcode 또는 Mac이 필요하지 않습니다. 지원되는 로그인 흐름을 사용하고 채팅에서 비밀번호나 토큰을 요청하지 마세요.
Expo 앱: 빠른 경로
새로운 사용자가 기다리고 있습니다. 첫 번째 화면은 약 3분 이내에 사용자의 전화에 도달해야 하며, 기능 작업 이전에 이루어져야 합니다. 다음 단계를 순서대로 따르세요:
template: "expo"로omg_create_project를 호출하세요.node_modules가 없는 경우bun install을 한 번 실행하세요.- 코드를 작성하기 전에 미리보세요. 포트 8081 및
expoGo: true로omg_expose_port를 호출하세요. 그런 다음 프로젝트 디렉토리에서 240000ms 셸 타임아웃으로bash scripts/start-expo-preview.sh <expoGo.proxyUrl> 8081을 실행하세요. "Sandbox proxy answers: HTTP 200"이 출력되면 먼저 웹 미리보기를 제시하세요: "앱이 준비되었습니다. 아래 카드에 실행 중이며, 모든 기기에서 작동합니다." 그런 다음 전화에 대해 한 문장으로 언급하세요: "자신의 전화에서 시도하려면 카드에서 내 전화를 탭하세요."omg_expose_port결과에simulatorAvailable: true가 있는 경우, 한 문장을 더 추가하세요: "카드에서 바로 iPhone으로 시도할 수도 있습니다: 시뮬레이터를 탭하세요." 해당 필드가 false이거나 없는 경우 시뮬레이터를 약속하지 마세요.expoGo.url을 붙여넣지 마세요. 카드에 표시됩니다. Metro는 저장할 때마다 앱을 다시 로드하므로, 미리보기는 여기서부터 편집을 따릅니다. - 턴당 한 번의 작은 편집보다는 몇 번의 큰 편집으로 화면을 작성하세요.
src/app/index.tsx에서 템플릿 홈 화면을 교체하세요. 두 번째 인덱스 라우트를 추가하지 마세요. bun run typecheck를 실행하고 보고된 사항을 수정하세요. 또한 라우트를 확인하고 두 번째 홈 화면 또는 루트app/폴더에서 실패합니다. 그런 다음bun run check:ui를 실행하고, 해당 PNG를 열고, 잘못된 부분을 수정하세요(빌드 단계 4 참조). 사용자가 요청하지 않는 한 자동화된 테스트를 작성하지 마세요.omg_deploy로 한 번 배포하세요(아래 참조). 데이터는 전화에 남아 있으므로 정적 웹 빌드입니다.omg_ship으로 마무리하세요.
첫 번째 미리보기 전에 node_modules를 검색하거나, 문서를 가져오거나, 템플릿 파일을 파일별로 읽지 마세요. 위 요약으로 충분합니다. 자체 브라우저 테스트 루프나 스크린샷 스크립트를 작성하지 마세요. bun run check:ui가 그 작업을 수행합니다. 이미지를 볼 수 없는 경우 텍스트 보고서만 읽으세요.
템플릿:
src/app/index.tsx: 홈 화면이며/에 대한 유일한 파일입니다. 내용을 홈 화면으로 교체하세요. 모든 화면을src/app/에 유지하세요. Expo Router는src/app이 존재하는 동안 루트app/폴더를 무시합니다. 탭의 경우 홈 화면을src/app/(tabs)/index.tsx로 이동하고src/app/index.tsx를 삭제하세요. 둘 다/에 응답하고 이전 것이 우선하기 때문입니다. 템플릿 파일에는 헤더, 추가 버튼이 있는 입력, 토글 및 삭제가 있는 목록, 오류 카드 및 다시 로드 버튼이 있습니다. 스타일은 하나의StyleSheet하단에 있으며, 테마 상수는 상단에 있습니다 (INK,CORAL,BACKGROUND,SURFACE,SURFACE_BORDER).src/app/_layout.tsx: 헤더가 없는 Expo Router 스택으로,KeyboardProvider내부에 있습니다. 새 화면은src/app/의 새 파일입니다 (stats.tsx는/stats).expo-router에서router.push("/stats")또는<Link href="/stats">를 사용하여 탐색하세요.src/lib/tasks.ts: AsyncStorage(웹의 경우 localStorage)를 사용하여 전화에 저장된 데이터입니다.tasksApi.list(),create(title),update(id, patch),remove(id). 이 파일을 유지하세요. 각 새 항목 유형에 대해 자체 저장소 키로 모양을 복사하세요.- 아이콘:
lucide-react-native, 예:<Plus color={CORAL} size={22} />. 유리 표면:expo-glass-effect의GlassView. - 색상: 화면 스타일을 지정하기 전에 디자인에서 모든 테마 상수를 설정하세요. 카드, 행 및 시트는 디자인 자체 표면 색상을 사용합니다. 템플릿의 반투명 흰색
SURFACE는 밝은 시작 템플릿에만 적합합니다. 어둡거나 컬러 디자인에 남겨두면 모든 카드가 흰색으로 나옵니다. 디자인이 프로스트 유리를 보여주는 경우에만GlassView를 사용하세요. Android에서는 유리를 그리지 않으므로 배경 색상을 지정하세요. - Safe 영역: 각 화면을
react-native-safe-area-context의SafeAreaView로edges={["top", "bottom"]}으로 감싸거나,useSafeAreaInsets()를 사용하세요.react-native에서SafeAreaView를 가져오지 마세요. iOS 전용이므로 Android에서는 헤더가 상태 표시줄 아래로, 탭 표시줄이 제스처 표시줄 아래로 이동합니다. - 키보드: 텍스트 입력이 있는 화면을 템플릿과 같이
src/lib/keyboard의KeyboardAwareScrollView(bottomOffset={24},keyboardShouldPersistTaps="handled")에 배치하세요. 하단에 고정된 필드의 경우 동일한 파일의KeyboardStickyView를 사용하세요.react-native-keyboard-controller에서 직접 가져오지 마세요. 그.web.tsx쌍이 정적 웹 내보내기를 작동하게 유지하기 때문입니다. React Native의KeyboardAvoidingView를 사용하지 마세요. iOS에서는 키보드 후에 화면이 느리게 이동합니다.
데이터: 기본적으로 tasks.ts 패턴으로 전화에 저장하세요. 사용자가 계정 또는 사람들 간 공유 데이터를 요청하는 경우에만 호스팅 데이터를 사용하세요. 그런 다음 @omg-dev/sdk 및 schema.ts의 .scoped("user") 컬렉션으로 로그인을 추가하세요. 원시 fetch로 /api/...를 호출하지 마세요. 호스팅 컬렉션은 익명 전화에 401 Authentication required로 응답합니다.
호스팅 데이터의 경우 최신 @omg-dev/sdk를 설치하고 Metro에서 공유 데이터를 테스트하기 전에 백엔드를 배포하세요. 프로젝트 디렉토리에 .omg/project.json을 유지하세요. 호스팅된 웹 미리보기는 등록된 앱 ID를 사용하고 SDK를 통해 소유자에게 로그인합니다. <VibesAuthProvider> 및 SDK 요청을 사용하세요. 별도의 미리보기 로그인, 대시보드 쿠키 전달 또는 사용자의 앱 권한 교체를 추가하지 마세요. 실제 전화는 여전히 앱의 일반 로그인 및 배포된 백엔드 출처가 필요합니다.
Metro 규칙: 포트 8081에서 8099까지만 사용하세요. Expo Go 링크가 해당 범위에서만 작동하기 때문입니다. 스크립트로만 Metro를 시작하세요. 모든 컴퓨터에 npx 및 ss가 설치되어 있지 않습니다.
빌딩 블록 (Expo)
템플릿에는 테스트된 도우미가 src/kit/에 포함되어 있습니다. 가져와서 사용하고 다시 작성하지 마세요. iOS, Android 및 웹에서 작동합니다. 각 파일은 사용 방법을 보여주는 주석으로 시작합니다.
overlay.tsx:useConfirm()및useSheet().<OverlayProvider>는 이미_layout.tsx에 있습니다. 모든 삭제 또는 확인에if (await confirm({ title, destructive: true }))를 사용하세요. 버튼이 있는Alert.alert는 웹에서 아무 작업도 하지 않습니다. 시트 및 양식에는useSheet().open(node)를 사용하세요.Modal컴포넌트를 쌓지 마세요. 두 번째 것은 웹에서 첫 번째 것 뒤에 그려집니다.ActionRow.tsx: 옆에 삭제 또는 다른 작업이 있는 누를 수 있는 행입니다. 누를 수 있는 행 내부에 중첩된 버튼도 웹에서 행을 실행합니다.image.ts:await toPersistentImage(pickerAsset).base64: true, quality: 0.5로 피커를 호출하고 반환된 문자열을 저장하세요. 웹의 피커 URI는blob:URL로 다시 로드 후 사라집니다.use-timer.ts:usePersistedTimer(key, durationMs)withstart,pause,resume,reset,formatClock. 종료 시간을 저장하므로 다시 로드해도 재설정되지 않습니다. 모든 타이머 또는 카운트다운에 사용하세요.use-viewport.ts:useViewport()및useIsWide(). 정적 웹 내보내기에서useWindowDimensions()는 첫 렌더링 시 너비 0을 줄 수 있습니다.flex및maxWidth를 선호하고, 숫자가 필요한 경우에만 훅을 사용하세요.
사람들 간 공유 데이터(공유 목록, 거래, 그룹): 위의 "데이터" 섹션에서 호스팅된 @omg-dev/sdk 경로를 사용하세요. 로컬 서버를 작성하지 마세요. 로컬 서버가 불가피한 경우 모든 응답에 OPTIONS에 응답하고 Access-Control-Allow-Origin을 요청의 Origin(또는 *), Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,OPTIONS, Access-Control-Allow-Headers: content-type,authorization을 보내세요. PUT 또는 DELETE가 누락되면 브라우저에서만 실패합니다.
빌드
- 요청을 작은 관찰 가능한 완료 조건으로 변환하세요. 사용자가 지정하지 않은 경우 합리적인 시각적 및 기술적 선택을 하세요.
- 프로젝트 디렉토리 내에 스캐폴딩하세요. 관리형 Expo 템플릿의 경우 고정된 종속성을 설치하고
.omg/template.json을 유지하세요. 다른 스타터로 교체하지 마세요. 빈 프로젝트의 경우 현재 문서화된 종속성 및 구성을 설치하세요. 폐기된 omg.dev CLI를 설치하거나 사용자에게 인프라 토큰을 요청하지 마세요. 런타임 도구는 Cloud 자격 증명을 제공합니다. - 실제 경로를 구현하세요. 제품에 공유 데이터, 인증, 업로드 또는 서버 작업이 필요한 경우 문서화된 호스팅 API를 사용하고 지속성 및 액세스 제어를 확인하세요. 요청된 공유 동작을 모의 데이터 또는 브라우저 전용 저장소로 대체하지 마세요.
- 사용자가 요청하지 않는 한 자동화된 테스트를 작성하지 마세요. 대신 자체 확인으로 검증하세요:
bun run typecheck를 실행한 다음bun run check:ui를 실행하세요. 확인은 웹 내보내기를 빌드하고, 앱의server또는backend스크립트가 있으면 시작하고, 각 라우트를 390x844로 열고,.omg/ui-check/에 라우트당 하나의 PNG를 저장합니다. 빈 페이지, 오류 경계, 콘솔 오류, 실패한 요청, 충돌한 서버 및 다른 요소가 덮는 버튼이나 링크(예: 탭 표시줄 아래의 "추가" 버튼)를 보고합니다. 그런 다음 이미지 뷰어로 각 PNG를 열고 요청 및 모든 디자인 참조와 비교하세요. 잘못된 부분을 수정하고 보고서가 깔끔해질 때까지 확인을 다시 실행하세요. 어떤 표면을 확인했는지 명시하세요. 웹 실행은 네이티브 동작의 증거가 아닙니다. - 제품 목적, 로컬 실행 명령, 아키텍처 및 배포 노트로 README를 업데이트하세요. 완료된 소스를 로컬에 커밋하여 이후 omg.dev 세션이 완전한 기준선에서 시작되도록 하세요.
호스팅 웹 앱의 로그인
omg.dev는 <slug>.omgs.app 앱의 로그인을 소유합니다. 로그인 양식, 비밀번호 필드 또는 자체 세션 저장소를 만들지 마세요.
- 비공개(기본값): 모든 방문자는 앱이 열리기 전에 omg.dev에 로그인합니다. 앱에는 로그인 UI가 필요하지 않습니다.
- 로그인이 있는 공개: 사용자가 방문자를 위한 방문 페이지를 원할 때 사용하세요. 앱을
public으로 설정하세요...