App Canvas를 만든 이유

App Canvas를 만든 이유

AI로 새 페이지를 만들기는 쉬워졌지만 커지는 앱을 이해하기는 여전히 어려웠습니다. 모든 화면을 클릭하거나 두 번째 디자인 파일을 관리하지 않고 구현된 화면과 실패 상태를 함께 보고 싶었습니다.

App Canvas는 검토를 탐색 가능한 지도로 바꿉니다. 에이전트는 저장소별 통합을 맡고 공유 도구는 캔버스, 실제 코드 preview, 카메라 이동, 검증된 재생을 제공합니다.

StoolSense는 합성 공개 예제입니다. 프로덕션 세션, 실제 건강 기록 또는 AI 요청이 없습니다. 선택적 사용 이벤트는 앱 데이터와 분리됩니다.

보고, 사용하고, 재생하기

기존 저장소를 상호작용 캔버스로

파일을 읽고 수정하고 명령을 실행할 수 있는 에이전트에 통합을 맡기세요. 기존 Storybook이나 수동 화면 목록은 필요 없습니다. 패키지 설치만으로 캔버스가 채워지지는 않습니다.

코딩 에이전트에 붙여 넣기

Read https://github.com/tombelieber/app-canvas/blob/v0.12.0/AGENT_GUIDE.md and add a completely populated App Canvas to this repository. Discover all screens, components, variants, states and navigation from the whole application source. Use original UI code. Create the missing synthetic fixtures and render harnesses. Reconcile an independent source inventory with rendered cases and source-linked runtime checks. Add checked happy, failure and recovery journeys. Run --complete against the original source root. Continue until the full landscape is populated and verified; report genuine blockers as incomplete. Keep production sessions, credentials and real user data out of previews.

1. 공유 도구 설치

   Node.js 22+와 프로젝트의 패키지 관리자 및 lockfile을 사용합니다. 고정한 GitHub 릴리스와 브라우저를 설치하세요. npm 12가 이 직접 Git 의존성을 차단할 때만 --allow-git=root를 추가하고 전역 정책은 바꾸지 마세요.

   npm install --save-dev github:tombelieber/app-canvas#v0.12.0
   npx app-canvas browsers

2. 케이스 선택 전에 소스 조사

   전체 앱 루트에서 discover를 실행합니다. 에이전트는 모든 소스 영역과 후보를 검토하고 pending을 해결하며 catalog와 독립적으로 의미 있는 상태를 열거합니다. 미해결 문제는 그대로 표시합니다.

   npx app-canvas discover --source-root . --out .artifacts/app-canvas/inventory.json
   npx app-canvas pending --inventory .artifacts/app-canvas/inventory.json

3. Fixtures로 원래 UI 렌더링

   ui-review에 config, catalog, 합성 fixtures, preview entry, 검증 가능한 journeys를 만듭니다. Adapter는 실제 페이지, providers, 스타일을 가져옵니다. 데이터와 의존성만 교체하고 UI를 복제하지 않습니다. 알 수 없는 네트워크 요청은 거부합니다.

   ui-review/
     canvas.config.mjs
     catalog.json
     frame.jsx
     fixtures.js
     README.md
   .artifacts/app-canvas/inventory.json

   // package.json → scripts
   "ui:review": "app-canvas --config ui-review/canvas.config.mjs"

   React/Vite · 에이전트 가이드

4. 상태와 상호작용 검증

   정상, 빈 화면, 로딩, 오류, 접근 거부, 대화상자, 복구를 포함합니다. 각 케이스와 연속 흐름의 실제 컨트롤을 검증하세요. Inventory, 소스와 연결된 assertions, routes를 대조하고 같은 루트에서 --complete를 통과합니다.

   npx app-canvas --config ui-review/canvas.config.mjs --check
   npx app-canvas --config ui-review/canvas.config.mjs --verify
   npx app-canvas --config ui-review/canvas.config.mjs --complete --source-root .

5. 소스에서 검토하고 유지

   ui:review로 전체 화면과 상태 그래프를 보고 흐름을 재생하세요. 에이전트는 실제 앱 코드를 수정합니다. 기존 preview는 다시 빌드되지만 새 경로와 상태는 inventory, fixture, journey 업데이트가 필요합니다. 인계 전에 전체 검증을 요구하세요.

   npm run ui:review

앱 저장소에 남는 파일

공유 패키지는 viewer, CLI, skill을 관리합니다. 각 저장소는 adapter, fixtures, 독립 inventory, catalog, 상호작용 검증을 관리합니다. 실행 가능한 React/Vite 예제로 시작하고 다른 스택에는 전용 adapter를 사용하세요.

선택 사항인 Agent Skill

Codex와 Claude Code는 포함된 skill을 설치할 수 있습니다. 다른 에이전트는 AGENT_GUIDE.md를 직접 읽습니다. Runtime은 모델을 호출하지 않으며 API 키도 필요 없습니다. 선택한 에이전트 자체의 비용과 권한은 별도입니다.

npx app-canvas install --target both

개인정보 및 텔레메트리

선택적인 최소 사용 이벤트를 Cloudflare를 통해 PostHog로 전송합니다. 내용, 코드, 이름, 경로, 이메일 또는 IP는 PostHog로 전달하지 않습니다. 끌 수 있습니다.

개인정보 및 텔레메트리 ↗

이번 릴리스의 범위와 한계

• Web은 실제 HTML/CSS와 상호작용 시 원래 JavaScript를 사용합니다. UIKit, SwiftUI, Android는 원래 runtime의 harness와 증거가 필요합니다. 캡처 이미지는 조작 가능한 네이티브 앱이 아닙니다.
• 커버리지는 검토한 소스와 케이스의 대응이며 모든 업무 조건의 자동 발견이 아닙니다. UI 검증은 운영 backend나 의료 정확도, 모델 정밀도를 보장하지 않습니다.
• Viewer는 영어가 기본이며 11개 언어를 지원합니다. 공개 데모는 고정된 합성 프론트엔드이고 로컬 통합은 소스를 따릅니다. 실제 iPad 성능은 측정하지 않았습니다.