@agent-native/core 0.76.5 → 0.76.6

package/corpus/core/docs/content/locales/ko-KR/template-slides.md

@@ -0,0 +1,293 @@
+---
+title: "슬라이드"
+description: "프롬프트에서 데크를 생성하고, 시각적으로 편집하고, 전체 화면으로 발표하세요. Google Slides, Pitch 및 PowerPoint를 대체하는 오픈 소스입니다."
+---
+
+# 슬라이드
+
+프롬프트에서 전체 프리젠테이션 데크를 생성하고 슬라이드를 시각적으로 편집하며 전체 화면으로 프리젠테이션합니다. 에이전트에게 "커피 구독 서비스를 위한 10개 슬라이드 피치 데크"를 요청하고 몇 초 만에 슬라이드별로 편집기로 스트리밍되는 것을 지켜보세요. Google Slides, Pitch 및 PowerPoint를 대체하는 오픈 소스입니다.
+
+```an-wireframe
+{
+  "surface": "desktop",
+  "html": "<div style='display:flex;flex-direction:column;gap:12px;padding:16px;min-height:530px;box-sizing:border-box'><div style='display:flex;align-items:center;gap:10px'><h1 style='margin:0'>Q3 Board Update</h1><span class='wf-pill accent'>Title slide</span><div style='flex:1'></div><button>Preview</button><button>Present</button><button class='primary'>Share</button></div><main style='display:grid;grid-template-columns:1fr 220px;gap:12px;flex:1;min-height:0'><section class='wf-card' style='display:flex;align-items:center;justify-content:center;text-align:center;padding:36px'><div><strong style='font-size:28px'>Q3 Board Update</strong><br/><small>Maya Chen · CEO</small><div style='height:46px'></div><span class='wf-pill'>Product momentum</span></div></section><section style='display:flex;flex-direction:column;gap:10px'><div class='wf-card'><strong>Slide outline</strong><div class='wf-box'>1 Title</div><div class='wf-box'>2 Agenda</div><div class='wf-box'>3 Metrics</div><div class='wf-box'>4 Shipped</div></div><div class='wf-card' style='flex:1'><strong>Speaker notes</strong><p class='wf-muted' style='margin:8px 0 0'>Open with launch progress and retention story.</p></div></section></main><div style='display:grid;grid-template-columns:repeat(5,1fr);gap:8px'><div class='wf-box'>1 Title</div><div class='wf-box'>2 Agenda</div><div class='wf-box'>3 Metrics</div><div class='wf-box'>4 Shipped</div><div class='wf-box'>5 Risks</div></div></div>"
+}
+```
+
+데크를 열면 상담원이 actions를 통해 슬라이드를 계속 생성, 수정 및 탐색할 수 있는 동안 슬라이드 캔버스, 개요, 메모 및 필름 스트립이 하나의 편집기 화면에 유지됩니다.
+
+```an-diagram title="Prompt to deck" summary="Ask for a deck and the agent streams slides in one at a time through the same actions you could call from the CLI."
+{
+  "html": "<div class=\"diagram-flow\"><div class=\"diagram-node\">Prompt<br><small class=\"diagram-muted\">\"10-slide pitch deck\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">picks layouts</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">create-deck</div><div class=\"diagram-pill\">add-slide &#215; n</div><small class=\"diagram-muted\">parallel, streaming</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>decks (SQL)</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">Editor renders live</div></div>",
+  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:6px;align-items:center}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+}
+```
+
+## 그것으로 무엇을 할 수 있나요
+
+- **프롬프트에서 데크를 생성합니다.** "커피 구독 서비스를 위한 10개 슬라이드 피치 데크를 생성합니다. 청중은 투자자입니다."
+- **슬라이드를 시각적으로 편집** — 편집하려면 텍스트를 두 번 클릭하고, 풍선 메뉴의 경우 블록을 클릭하고, 슬래시 메뉴의 경우 `/`를 사용하여 블록을 삽입하세요.
+- **AI로 이미지를 생성합니다.** 히어로 이미지, 제품 모형, 일러스트레이션은 자산에 위임하는 것이 바람직하며 Builder 관리 이미지 생성을 통해 일단 배포되면 현재 대체 수단으로 공급자 키를 직접 사용할 수 있습니다.
+- **스톡 사진 및 회사 로고를 검색하세요.** "stripe.com 로고를 찾아 슬라이드 2에 추가하세요."
+- **키보드 탐색, 자동 숨기기 컨트롤, 발표자 노트가 포함된 전체 화면 표시**.
+- **댓글 달기, 공동 작업 및 공유.** 여러 사람이 동일한 데크를 실시간으로 편집할 수 있습니다. 공개 읽기 전용 URL를 생성하거나 특정 팀원과 공유하세요.
+- **PDF에서 가져오기.** PDF를 스타터 데크로 전환합니다. 에이전트가 이를 구문 분석하고 콘텐츠를 배치합니다.
+- **다른 형식에서 가져오기.** PPTX, DOCX, Google Docs, GitHub 저장소 또는 URL를 시작점으로 가져옵니다. PPTX, Google Slides 또는 HTML로 내보냅니다.
+- **디자인 시스템을 적용합니다.** 브랜드 토큰, 사용자 정의 지침 및 기본 팔레트가 디자인 시스템으로 저장되어 새 데크에 적용됩니다.
+- **이전 버전을 복원합니다.** 각 데크 변경 사항이 스냅샷으로 기록됩니다. 이전 버전을 나열하거나 복원합니다.
+
+## 시작하기
+
+라이브 데모: [slides.agent-native.com](https://slides.agent-native.com).
+
+앱을 열 때:
+
+1. **새 데크**를 클릭하세요.
+2. 상담원에게 다음과 같이 질문하세요. "커피 구독 서비스를 위한 10슬라이드 피치 자료를 생성하세요. 청중은 투자자입니다."
+3. 슬라이드 스트림을 시청하세요. 편집할 슬라이드를 클릭하거나 상담원에게 계속해서 수정하도록 요청하세요.
+
+### 유용한 메시지
+
+- "커피 구독 서비스를 위한 10개 슬라이드 프레젠테이션 자료를 생성합니다. 청중은 투자자입니다."
+- "슬라이드 3 뒤에 가격 슬라이드를 추가하세요."
+- "이 슬라이드의 제목을 더 크게 만들고 강조 색상을 녹색으로 변경합니다."
+- "현재 슬라이드에 대해 어둡고 미니멀하며 영화 같은 히어로 이미지를 생성합니다."
+- "stripe.com 로고를 찾아 슬라이드 2에 추가하세요."
+- "이 자료의 모든 부분에서 '고객'이라는 단어를 '회원'으로 바꾸세요."
+- "이 PDF를 6슬라이드 자료로 요약합니다." (PDF 부착)
+
+슬라이드에서 텍스트를 선택하고 Cmd+I를 눌러 해당 선택 항목에 에이전트의 초점을 맞추세요. 선택한 내용에만 에이전트가 작동합니다.
+
+## 개발자용
+
+이 문서의 나머지 부분은 Slides 템플릿을 포크하거나 확장하는 모든 사람을 위한 것입니다.
+
+### 빠른 시작
+
+CLI에서 새 프레젠테이션 앱을 만듭니다.
+
+```bash
+npx @agent-native/core@latest create my-slides --standalone --template slides
+cd my-slides
+pnpm install
+pnpm dev
+```
+
+### 주요 기능 {#key-features}
+
+**데크 생성 프롬프트.** 데크를 요청하면 상담원이 사용자가 직접 실행할 수 있는 동일한 생성 및 편집 actions를 사용하여 편집기로 슬라이드를 스트리밍합니다.
+
+**편집 가능한 슬라이드 캔버스.** 인라인 텍스트 편집, 슬래시 삽입, 코드 편집, 드래그 앤 드롭 순서 지정, 실행 취소/다시 실행, 댓글 및 프레젠테이션 모드가 모두 데크 표면에 있습니다.
+
+**가져오기 및 내보내기.** PPTX, DOCX, Google Docs, PDF, URLs 및 GitHub 저장소를 가져옵니다. PPTX, Google Slides, HTML 또는 공유 링크로 내보낼 수 있습니다.
+
+**디자인 시스템 및 미디어.** 저장된 브랜드 시스템, 이미지 생성, 재고 검색 및 로고 검색은 데크를 의도한 시각적 방향에 더 가깝게 유지합니다.
+
+**협업 및 기록.** 실시간 Yjs 편집, 스레드 댓글, 역할 공유, 데크 버전 스냅샷이 내장되어 있습니다.
+
+### 에이전트와 협력하기
+
+에이전트 채팅은 사이드바에 있습니다. 데크 생성, 개별 슬라이드 편집, 이미지 생성, 로고 검색, UI 탐색 등이 모두 가능하며 모두 CLI에서 실행하는 것과 동일한 actions를 사용합니다.
+
+#### 상담원이 보는 것
+
+덱이 열리면 에이전트는 자동으로 다음을 확인합니다.
+
+- 현재 `deckId` 및 `slideIndex`.
+- 오픈 데크의 전체 슬라이드 목록
+- 현재 선택한 슬라이드의 HTML 콘텐츠
+
+이는 모든 메시지에 `current-screen` 블록으로 삽입되므로 상담원은 "이 슬라이드"가 무엇을 의미하는지 추측할 필요가 없습니다. 데이터는 UI가 모든 탐색 시 작성하는 `navigation` 애플리케이션 상태 키에서 가져옵니다. `templates/slides/actions/view-screen.ts`를 참조하세요.
+
+#### 집중 편집을 위한 텍스트 선택
+
+슬라이드에서 텍스트를 선택하고 Cmd+I를 눌러 해당 선택 항목이 미리 로드된 에이전트에 초점을 맞춥니다. 상담원은 귀하가 선택한 것에 대해서만 조치를 취합니다.
+
+#### 채팅의 인라인 슬라이드 미리보기
+
+상담원은 프레임워크의 포함 펜스를 사용하여 채팅 응답에 실시간 슬라이드 미리보기를 직접 포함할 수 있습니다. `app/routes/slide.tsx`를 통해 크롬 없는 iframe을 렌더링하므로 대화를 종료하지 않고도 결과를 볼 수 있습니다.
+
+### 데이터 모델
+
+모든 데크 데이터는 Drizzle ORM를 통해 SQL에 있습니다. 스키마: `templates/slides/server/db/schema.ts`.
+
+```an-schema title="Slides data model" summary="A deck owns its slides as JSON in decks.data; comments, versions, shares, and design systems hang off it."
+{
+  "entities": [
+    {
+      "id": "decks",
+      "name": "decks",
+      "note": "Slides live as JSON in data; carries ownableColumns",
+      "fields": [
+        { "name": "id", "type": "text", "pk": true, "note": "e.g. deck-1712345-abc" },
+        { "name": "title", "type": "text" },
+        { "name": "data", "type": "text", "note": "JSON: { title, slides: [{ id, content, layout }] }" },
+        { "name": "created_at", "type": "text" },
+        { "name": "updated_at", "type": "text" }
+      ]
+    },
+    {
+      "id": "slide_comments",
+      "name": "slide_comments",
+      "fields": [
+        { "name": "id", "type": "text", "pk": true },
+        { "name": "deck_id", "type": "text", "fk": "decks.id" },
+        { "name": "slide_id", "type": "text", "note": "Slide the comment lives on" },
+        { "name": "thread_id", "type": "text", "note": "Threading" },
+        { "name": "parent_id", "type": "text", "nullable": true },
+        { "name": "content", "type": "text" },
+        { "name": "quoted_text", "type": "text", "nullable": true },
+        { "name": "author_email", "type": "text" },
+        { "name": "author_name", "type": "text" },
+        { "name": "resolved", "type": "boolean" }
+      ]
+    },
+    {
+      "id": "deck_versions",
+      "name": "deck_versions",
+      "note": "Point-in-time snapshots for restore",
+      "fields": [
+        { "name": "deck_id", "type": "text", "fk": "decks.id" },
+        { "name": "title", "type": "text" },
+        { "name": "data", "type": "text", "note": "Full deck JSON" },
+        { "name": "change_label", "type": "text", "nullable": true }
+      ]
+    },
+    {
+      "id": "design_systems",
+      "name": "design_systems",
+      "note": "Reusable brand tokens; ownableColumns",
+      "fields": [
+        { "name": "data", "type": "text", "note": "colors / typography / spacing" },
+        { "name": "assets", "type": "text", "nullable": true },
+        { "name": "custom_instructions", "type": "text", "nullable": true },
+        { "name": "is_default", "type": "boolean" }
+      ]
+    },
+    {
+      "id": "deck_share_links",
+      "name": "deck_share_links",
+      "note": "Persisted public share-link snapshots",
+      "fields": [
+        { "name": "token", "type": "text", "pk": true },
+        { "name": "title", "type": "text" },
+        { "name": "slides", "type": "text", "note": "JSON slides snapshot" },
+        { "name": "aspect_ratio", "type": "text", "nullable": true },
+        { "name": "created_at", "type": "text" }
+      ]
+    }
+  ],
+  "relations": [
+    { "from": "decks", "to": "slide_comments", "kind": "1-n", "label": "comments" },
+    { "from": "decks", "to": "deck_versions", "kind": "1-n", "label": "snapshots" }
+  ]
+}
+```
+
+프레임워크 공유 테이블(`deck_shares`, `design_system_shares`)은 주체를 리소스당 뷰어/편집자/관리자 역할에 매핑합니다.
+
+#### 덱
+
+| 열           | 유형   | 참고                                                      |
+| ------------ | ------ | --------------------------------------------------------- |
+| `id`         | 텍스트 | 기본 키, 예: `deck-1712345-abc`                           |
+| `title`      | 텍스트 | 덱 제목                                                   |
+| `data`       | 텍스트 | JSON 얼룩: `{ title, slides: [{ id, content, layout }] }` |
+| `created_at` | 텍스트 | 타임스탬프                                                |
+| `updated_at` | 텍스트 | 타임스탬프                                                |
+
+각 데크에는 표준 `ownableColumns`(소유자, 가시성, 공유 토큰)도 포함되어 프레임워크의 공유 모델에 배치됩니다.
+
+#### 슬라이드 코멘트
+
+| 열                            | 참고                            |
+| ----------------------------- | ------------------------------- |
+| `id`                          | 기본 키                         |
+| `deck_id`                     | 상위 자료                       |
+| `slide_id`                    | 댓글 실시간 슬라이드            |
+| `thread_id`, `parent_id`      | 스레딩                          |
+| `content`, `quoted_text`      | 댓글 본문 및 선택적 텍스트 발췌 |
+| `author_email`, `author_name` | 저자                            |
+| `resolved`                    | 부울 플래그                     |
+
+#### deck_shares
+
+덱당 주체(사용자 또는 조직)를 역할(뷰어, 편집자, 관리자)에 매핑하는 프레임워크 제공 공유 테이블(`createSharesTable`를 통해 생성됨)
+
+#### 데크 버전
+
+데크의 특정 시점 스냅샷 — `deck_id`, `title`, `data`(풀 데크 JSON) 및 선택 사항인 `change_label`. `list-deck-versions` / `restore-deck-version`에서 사용됩니다.
+
+#### 디자인\_시스템
+
+재사용 가능한 브랜드 토큰 — `data`(색상/활자체/간격), `assets`, `custom_instructions` 및 `is_default` 플래그. `ownableColumns`를 사용하여 디자인 시스템을 사용자별 또는 조직별로 공유할 수 있습니다.
+
+#### design_system_shares
+
+프레임워크는 디자인 시스템을 위한 테이블을 공유하여 주체를 역할(뷰어, 편집자, 관리자)에 매핑합니다.
+
+#### deck_share_links
+
+`token`에 의해 키가 지정된 지속적인 공개 공유 링크 스냅샷. 각 행에는 `title`, JSON `slides` 어레이 스냅샷, 선택적 `aspect_ratio` 및 `created_at`가 저장됩니다. 여기에서 공유 링크를 유지한다는 것은 서버를 다시 시작해도 유지되고 서버리스 인스턴스 전반에서 작동한다는 것을 의미합니다.
+
+#### 슬라이드 구조
+
+`decks.data` 내부의 각 슬라이드는 다음과 같습니다.
+
+```json
+{
+  "id": "slide-1",
+  "layout": "title",
+  "content": "<div class=\"fmd-slide\" style=\"...\">...</div>"
+}
+```
+
+`content`는 원시 HTML입니다. 렌더러(`app/components/deck/SlideRenderer.tsx`)는 검정색 배경과 고정된 종횡비를 제공하고 HTML는 ​​내부의 모든 것을 제공합니다. 풍부한 임베딩도 지원됩니다: `ExcalidrawSlide.tsx`를 통한 Excalidraw 다이어그램 및 `MermaidRenderer.tsx`를 통한 인어 차트.
+
+### 사용자 정의 {#customizing}
+
+Slides 템플릿은 완전히 포크 가능합니다. 확장 시 살펴봐야 할 주요 장소:
+
+#### Actions — `templates/slides/actions/`
+
+에이전트 호출 가능한 모든 작업은 여기에 TypeScript 파일로 존재합니다. 자주 만지게 될 몇 가지:
+
+- `create-deck.ts` — 처음부터 새로운 데크 또는 대량 교체.
+- `add-slide.ts` — 하나의 슬라이드를 추가합니다. 스트리밍 생성에는 이것을 선호합니다.
+- `update-slide.ts` — 외과적 찾기/바꾸기 또는 전체 콘텐츠 교환.
+- `view-screen.ts` — 사용자가 보는 것의 스냅샷.
+- `generate-image.ts`, `edit-image.ts`, `image-search.ts`, `logo-lookup.ts` — 이미지 도구.
+- `extract-pdf.ts` — PDF 수집.
+
+모든 작업은 `POST /_agent-native/actions/:name`에 자동으로 마운트되며 CLI에서 `pnpm action <name>`로 호출할 수 있습니다. 에이전트에 새로운 기능을 제공하려면 여기에 새 파일을 추가하세요.
+
+#### 경로 — `templates/slides/app/routes/`
+
+- `_index.tsx` — 덱 목록.
+- `deck.$id.tsx` — 편집자.
+- `deck.$id_.present.tsx` — 프레젠테이션 모드.
+- `share.$token.tsx` — 공개 읽기 전용 공유 페이지.
+- `slide.tsx` — 채팅 미리보기에 사용되는 단일 슬라이드 삽입
+- `settings.tsx` — 템플릿 설정.
+- `team.tsx` — 조직 및 팀 관리
+
+#### 편집기 구성 요소 — `templates/slides/app/components/editor/`
+
+대부분의 UI 사용자 정의는 `SlideEditor.tsx`, `EditorToolbar.tsx`, `EditorSidebar.tsx`, 풍선 메뉴, 슬래시 메뉴 및 이미지 생성, 검색 및 기록을 위한 패널에서 이루어집니다.
+
+#### Skills — `templates/slides/.agents/skills/`
+
+에이전트가 코드를 수정해야 할 때 패턴을 설명하는 에이전트 skills:
+
+- `create-deck/` — 슬라이드로 새 데크를 만드는 방법
+- `slide-editing/` — 개별 슬라이드를 편집하는 방법
+- `deck-management/` — 데크를 저장하고 액세스하는 방법.
+- `slide-images/` — 이미지 생성 및 검색 작업 흐름
+
+#### AGENTS.md
+
+`templates/slides/AGENTS.md`는 에이전트가 모든 대화에서 읽는 짧은 라우터입니다. `.agents/skills/` 아래의 skills를 가리키며 핵심 규칙, 애플리케이션 상태 계약 및 기술 인덱스를 배치합니다. 모든 레이아웃에 대한 정확한 슬라이드 HTML 템플릿은 `.agents/skills/create-deck/SKILL.md`에 있습니다. 슬라이드 레이아웃 패턴을 추가하거나 변경할 때마다 해당 기술을 업데이트하세요.
+
+#### API 경로
+
+actions가 적합하지 않은 경우(파일 업로드, 스트리밍) 템플릿은 REST 엔드포인트의 작은 집합인 `GET/POST /api/decks`, `GET/PUT/DELETE /api/decks/:id`를 노출합니다. `templates/slides/server/routes/api/`를 참조하세요.

package/corpus/core/docs/content/locales/ko-KR/template-videos.md

@@ -0,0 +1,222 @@
+---
+title: "동영상"
+description: "모션 그래픽, 제품 데모 및 키네틱 텍스트를 위한 프로그래밍 방식 비디오 스튜디오입니다. 프롬프트에서 애니메이션을 생성하고 타임라인에 맞춰 조정하세요."
+---
+
+# 동영상
+
+손으로 키프레임을 지정하기 어려운 모션 그래픽, 제품 데모 및 키네틱 텍스트 비디오를 위한 프로그래밍 방식 비디오 스튜디오입니다. 에이전트에게 "2초에 페이드 인되는 6초 로고 표시"를 요청하면 애니메이션이 빌드됩니다. 타임라인에서 타이밍, 이징, 카메라 이동을 조정한 다음 MP4 또는 WebM으로 렌더링하세요.
+
+```an-wireframe
+{
+  "surface": "desktop",
+  "html": "<div style='display:flex;flex-direction:column;gap:12px;padding:16px;min-height:530px;box-sizing:border-box'><div style='display:flex;align-items:center;gap:10px'><h1 style='margin:0'>Logo reveal</h1><span class='wf-pill accent'>6 seconds</span><div style='flex:1'></div><button>Preview</button><button class='primary'>Render</button></div><div class='wf-card' style='flex:1;display:flex;align-items:center;justify-content:center;min-height:250px'><div style='text-align:center'><strong>Remotion preview</strong><br/><small class='wf-muted'>logo scales in as the title fades</small></div></div><div class='wf-card' style='display:flex;flex-direction:column;gap:10px'><div style='display:flex;gap:8px;align-items:center'><span class='wf-pill'>0s</span><span class='wf-pill'>2s</span><span class='wf-pill'>4s</span><span class='wf-pill'>6s</span><div style='flex:1'></div><button>New track</button></div><div class='wf-box'>Title fade · 0-48 frames</div><div class='wf-box'>Logo scale · 48-120 frames</div><div class='wf-box'>Camera push · 72-144 frames</div></div></div>"
+}
+```
+
+스튜디오를 열면 홈 화면에 작곡 목록이 표시됩니다. 하나를 클릭하면 상단에 플레이어, 하단에 타임라인, 오른쪽에 속성 패널이 표시됩니다. 에이전트는 항상 귀하가 어떤 구성을 열었는지 알고 있습니다.
+
+```an-diagram title="Animation as data" summary="A composition is a React component; every animation reads from a track so the agent and the timeline edit the same data."
+{
+  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Timeline<br><small class=\"diagram-muted\">drag, resize, scrub</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">\"fade in at 2s\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">AnimationTrack</span><small class=\"diagram-muted\">startFrame / easing / animatedProps</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>React composition<br><small class=\"diagram-muted\">Remotion &lt;Player&gt;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">MP4 / WebM</div></div>",
+  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+}
+```
+
+## 그것으로 무엇을 할 수 있나요
+
+- **프롬프트에서 애니메이션을 생성합니다.** "2초에 페이드 인되고 5초까지 유지되는 타이틀 카드를 추가합니다." 상담원이 작곡을 편집합니다.
+- **타임라인의 타이밍을 조정합니다.** 애니메이션 트랙을 드래그하여 크기를 조정하고, 프레임을 스크럽하고, 이징 곡선을 시각적으로 설정합니다.
+- **카메라를 애니메이션화합니다.** 화면 도구를 사용하여 이동, 확대/축소, 기울기를 수행합니다. 도구를 클릭하고 미리보기에서 드래그하면 키프레임이 자동으로 생성됩니다.
+- **빈 구성 또는 예제에서 시작합니다.** 템플릿은 시작할 수 있는 하나의 코드 내 구성(`BlankComposition`)을 제공합니다. 예제 구성 — 운동 텍스트, 로고 공개, 입자 폭발, 대화형 UI 데모, 슬라이드쇼 — 데이터베이스에서 로드하고 직접 추가할 수 있습니다.
+- **이징 곡선을 시각적으로 편집합니다.** 파워, 백, 바운스, 순환, 탄성, 엑스포, 사인, 스프링 물리학 등 30개 이상의 곡선이 제공됩니다.
+- **카메라 줌 중에 선명한 텍스트와 벡터를 위해 1x, 2x 또는 3x 슈퍼샘플링으로 MP4 또는 WebM**으로 렌더링합니다.
+
+이것은 다른 템플릿보다 개발자 중심의 도구입니다. 컴포지션은 React 구성 요소이므로 고급 사용자(또는 에이전트)가 처음부터 완전히 새로운 애니메이션 유형을 작성할 수 있습니다. 하지만 일상적인 조정("타이핑 속도를 느리게 만들기", "입자 수를 12개로 줄이기")은 단지 채팅일 뿐입니다.
+
+## 시작하기
+
+라이브 데모: [videos.agent-native.com](https://videos.agent-native.com).
+
+스튜디오를 열 때:
+
+1. 홈 화면에서 작품을 선택하세요.
+2. 에이전트를 사용해 보세요. "2초에 페이드 인되는 로고 표시를 추가하세요." 타임라인 업데이트를 시청하세요.
+3. 트랙을 드래그하여 시간을 재조정하고, 카메라 도구를 클릭하고, 플레이어를 스크러빙하세요.
+
+### 유용한 메시지
+
+- "2초에 페이드 인되고 5초까지 유지되는 타이틀 카드를 추가하세요."
+- "프레임 60과 90 사이의 로고를 2배 확대하도록 카메라를 변경합니다."
+- "타이핑이 더 느리게 표시되도록 합니다 — 40% 더 길어집니다."
+- "입자 폭발이 너무 조밀합니다. 개수를 12로 낮추십시오."
+- "인트로 루프, 1080x1080, 6초라는 새 컴포지션을 만듭니다."
+- "버튼 영역에 클릭 애니메이션을 추가하고 커서를 거기에 애니메이션으로 적용합니다."
+- "이 트랙에 완화 대신 봄 완화를 제공합니다."
+
+타임라인에서 트랙을 선택하고 Cmd+I를 누르면 에이전트가 해당 선택을 선택합니다. "이 트랙을 더 빠르게 만들기"가 작동합니다.
+
+## 개발자용
+
+이 문서의 나머지 부분은 비디오 템플릿을 포크하거나 확장하는 모든 사람을 위한 것입니다. 이 템플릿은 다른 템플릿보다 더 코드 지향적입니다. 모든 구성은 React 구성 요소이고 모든 애니메이션은 트랙의 데이터입니다.
+
+### 건축
+
+스튜디오에서 보는 모든 것은 코드입니다. 컴포지션은 `app/remotion/compositions/`의 React 구성 요소를 가리키는 `app/remotion/registry.ts`의 `CompositionEntry`입니다. 해당 구성 요소의 모든 애니메이션은 `AnimationTrack`에서 읽혀지므로 사용자는 UI 타임라인에서 드래그하고, 크기를 조정하고, 시간을 재조정할 수 있습니다. 에이전트는 새 컴포지션을 만들고, 트랙을 추가하고, 이징을 조정하고, 레지스트리에 연결되는 전체 React 구성 요소를 작성할 수 있습니다.
+
+스튜디오는 미리보기용으로 Remotion의 `<Player>`를 사용하고 최종 렌더링용으로 Remotion CLI를 사용합니다. 출력 기본값은 30fps에서 1920x1080입니다.
+
+### 빠른 시작
+
+CLI의 새로운 비디오 앱을 스캐폴드하세요:
+
+```bash
+npx @agent-native/core@latest create my-video-app --standalone --template videos
+cd my-video-app
+pnpm install
+pnpm dev
+```
+
+브라우저에서 스튜디오를 열고 작품을 만든 후 처음부터 시작하세요. 상담원에게 "2초에 페이드 인되는 로고 공개 추가"와 같은 질문을 하면 구성이 편집됩니다.
+
+### 주요 기능
+
+**React 기반 구성.** 동영상은 원격 지원 React 구성 요소이며, SQL 지원 사용자 구성과 로컬 기본값에 대한 선택적 코드 레지스트리가 포함되어 있습니다.
+
+**타임라인 우선 애니메이션.** 기간 트랙, 키프레임, 여유 곡선, 카메라 이동 및 프로그래밍 방식 트랙은 모두 동일한 구성 데이터를 편집합니다.
+
+**조정 가능한 모션 시스템.** 매개변수, 커서 트랙, 대화형 호버 영역, 범위 탐색 및 반복 재생을 통해 생성된 애니메이션을 코드 없이 조정할 수 있습니다.
+
+**렌더링 및 지속성.** 컴포지션 설정, 품질, fps, 트랙 값 및 재정의는 컴포지션별로 지속되며 Remotion을 통해 MP4 또는 WebM으로 렌더링됩니다.
+
+### 에이전트와 협력하기
+
+에이전트는 귀하가 어떤 구성을 열어 놓았는지 항상 알고 있습니다. 탐색 상태(`{ view, compositionId }`)는 프레임워크의 `application_state` 테이블에 기록되고 `view-screen` 작업은 이를 반환하고 `app/remotion/registry.ts`를 가리키는 힌트를 반환합니다. 어떤 구성을 사용하고 있는지 에이전트에게 알릴 필요가 없습니다. "이 구성"에 대해 조치를 취하도록 요청하면 그렇게 됩니다.
+
+내부적으로 에이전트는 `navigate`, `save-composition` 및 `generate-animated-component`와 같이 actions를 호출합니다. SQL 지원 작성 레코드는 `save-composition`를 통해 생성되거나 업데이트됩니다. 코드 지원 Remotion 구성 요소는 여전히 `app/remotion/compositions/*.tsx`에 있으며 `app/remotion/registry.ts`에 등록되어 있습니다.
+
+### 데이터 모델
+
+서버 측 스키마는 `templates/videos/server/db/schema.ts`에 있습니다:
+
+```an-schema title="Video data model" summary="SQL-backed compositions plus design systems and nestable folders, each with a framework shares table."
+{
+  "entities": [
+    {
+      "id": "compositions",
+      "name": "compositions",
+      "note": "User-created compositions and overrides; ownableColumns",
+      "fields": [
+        { "name": "id", "type": "text", "pk": true },
+        { "name": "title", "type": "text" },
+        { "name": "type", "type": "text" },
+        { "name": "data", "type": "text", "note": "Full composition JSON blob" },
+        { "name": "created_at", "type": "text" },
+        { "name": "updated_at", "type": "text" }
+      ]
+    },
+    {
+      "id": "design_systems",
+      "name": "design_systems",
+      "note": "Reusable brand tokens; ownableColumns",
+      "fields": [
+        { "name": "data", "type": "text", "note": "colors / typography / spacing" },
+        { "name": "assets", "type": "text", "nullable": true },
+        { "name": "custom_instructions", "type": "text", "nullable": true },
+        { "name": "is_default", "type": "boolean" }
+      ]
+    },
+    {
+      "id": "folders",
+      "name": "folders",
+      "note": "Nestable folders; ownableColumns",
+      "fields": [
+        { "name": "id", "type": "text", "pk": true },
+        { "name": "name", "type": "text" }
+      ]
+    },
+    {
+      "id": "folder_memberships",
+      "name": "folder_memberships",
+      "note": "Many-to-many join",
+      "fields": [
+        { "name": "folder_id", "type": "text", "fk": "folders.id" },
+        { "name": "composition_id", "type": "text", "fk": "compositions.id" }
+      ]
+    }
+  ],
+  "relations": [
+    { "from": "folders", "to": "folder_memberships", "kind": "1-n", "label": "members" },
+    { "from": "compositions", "to": "folder_memberships", "kind": "1-n", "label": "in folders" }
+  ]
+}
+```
+
+각 테이블에는 `createSharesTable()`에서 생성된 일치하는 프레임워크 공유 테이블(`composition_shares`, `design_system_shares`, `folder_shares`)도 있습니다.
+
+- `compositions` — ID, 제목, 유형, `data`(전체 구성 JSON blob), 소유권 열, 타임스탬프.
+- `composition_shares` — `createSharesTable()`가 생성한 표준 주식 부여
+- `design_systems` — `ownableColumns`를 사용한 재사용 가능한 브랜드 토큰(색상, 타이포그래피, 간격, 자산, 맞춤 지침, `is_default` 플래그)
+- `design_system_shares` — 설계 시스템에 대한 공유 부여.
+- `folders` — `ownableColumns`를 사용하여 도서관 정리를 위한 중첩 가능한 폴더입니다.
+- `folder_shares` — 폴더에 대한 공유 권한 부여.
+- `folder_memberships` — `folder_id`와 `composition_id` 간의 다대다 조인.
+
+### 폴더 및 디자인 시스템
+
+작품은 폴더로 정리하고 디자인 시스템으로 스타일을 지정할 수 있습니다. Actions: `create-folder`, `rename-folder`, `delete-folder`, `move-composition-to-folder`. 디자인 시스템 actions: `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `set-default-design-system`, `apply-design-system`, `analyze-brand-assets`. actions 가져오기: `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF).
+
+`app/remotion/registry.ts`의 레지스트리는 템플릿과 함께 제공되는 정보의 코드 내 소스입니다. SQL 테이블은 사용자가 만든 구성과 재정의를 저장합니다. Studio 상태(컴포지션별 트랙 편집, 소품 재정의, 컴포지션 설정)는 `videos-tracks:<id>`, `videos-props:<id>` 및 `videos-comp-settings:<id>` 아래의 `localStorage`에 미러링되며 로드 시 레지스트리 기본값으로 다시 심층 병합됩니다.
+
+핵심 TypeScript 모양(`app/types.ts`):
+
+- `AnimationTrack` — `id`, `label`, `startFrame`, `endFrame`, `easing`, `animatedProps[]`.
+- `AnimatedProp` — `property`, `from`, `to`, `unit` 및 옵션 `keyframes`, `programmatic`, `description`, `codeSnippet`, `parameters`, `parameterValues`.
+- `CompositionEntry` — `id`, `title`, `description`, `component`, `durationInFrames`, `fps`, `width`, `height`, `defaultProps`, `tracks`.
+
+작곡물은 기본적으로 비공개입니다. 가시성은 `private`, `org` 또는 `public`일 수 있으며 공유 부여는 프레임워크의 공유 기본 요소를 통해 연결된 `viewer`, `editor` 또는 `admin` 역할을 제공합니다.
+
+### 맞춤 설정
+
+템플릿 폴더는 `templates/videos/`입니다(사용자용 슬러그는 `video`이지만 폴더는 복수임).
+
+**Actions** — `templates/videos/actions/`
+
+- `view-screen.ts` — 에이전트의 현재 탐색 상태를 반환합니다.
+- `navigate.ts` — 컴포지션(`--compositionId <id>`) 또는 홈 보기(`--view home`)로 이동합니다.
+- `save-composition.ts` — SQL 지원 작곡 레코드를 생성하거나 업데이트합니다.
+- `generate-animated-component.ts` — 상용구를 사용하여 새로운 Remotion 구성 요소 파일을 생성합니다.
+- `validate-compositions.ts` — 등록된 모든 작품에 구조적 문제가 있는지 확인하세요.
+- `list-compositions.ts`, `get-composition.ts`, `update-composition.ts`, `delete-composition.ts` — SQL 지원 작성 레코드를 읽고 업데이트하고 삭제합니다.
+
+**경로** — `templates/videos/app/routes/`
+
+- `_index.tsx` — 스튜디오 홈; 셸 및 구성 목록을 렌더링합니다.
+- `c.$compositionId.tsx` — 구성 편집기(타임라인, 플레이어, 속성 패널).
+- `components.tsx` — 구성 요소 라이브러리 브라우저.
+- `team.tsx` — 팀 관리.
+
+**리모션 내부** — `templates/videos/app/remotion/`
+
+- `registry.ts` — 권위 있는 작곡 목록
+- `compositions/` — 구성당 하나의 `.tsx`와 `index.ts` 배럴.
+- `trackAnimation.ts` — `trackProgress`, `getPropValue`, `findTrack`, `getPropValueKeyframed`.
+- `CameraHost.tsx` — 카메라 변환으로 컴포지션 콘텐츠를 래핑합니다.
+- `hooks/`, `ui-components/`, `components/` — 대화형 요소 도우미, 커서 렌더링, 애니메이션 요소 래퍼.
+
+**스튜디오 UI** — `templates/videos/app/components/`
+
+- `Timeline.tsx` — 완전히 제어되는 타임라인(`viewStart` / `viewEnd`는 내부적으로 상태 없음을 소유함).
+- `VideoPlayer.tsx` — 범위가 제한된 재생 기능을 갖춘 Remotion `<Player>` 래퍼.
+- `TrackPropertiesPanel.tsx`, `CompSettingsEditor.tsx`, `PropsEditor.tsx` — 오른쪽 패널.
+- `CameraToolbar.tsx`, `CameraControls.tsx` — 카메라 도구 및 숫자 컨트롤
+
+**에이전트 지침** — `templates/videos/AGENTS.md`는 에이전트가 읽는 긴 형식의 가이드입니다. 트랙으로서의 애니메이션 규칙, 카메라 시스템, 커서 시스템, CSS 필터 장치, 대화형 구성 요소 등록, UI 간격 및 구성 생성 또는 편집을 위한 체크리스트를 다룹니다.
+
+**Skills** — `templates/videos/.agents/skills/`
+
+- `composition-management/SKILL.md` — 작곡을 만들고 등록하는 방법
+- `animation-tracks/SKILL.md` — 트랙 및 애니메이션 소품을 편집하는 방법
+- 또한 표준 프레임워크 skills: `actions`, `self-modifying-code`, `delegate-to-agent`, `storing-data`, `security`, `frontend-design`, `create-skill`, `capture-learnings`.
+
+새 구성을 추가하려면 `AGENTS.md`의 체크리스트를 따르세요. 구성 요소를 만들고, `FALLBACK_TRACKS`를 선언하고, `findTrack` / `trackProgress` / `getPropValue`를 사용하고(하드코드 프레임은 사용하지 않음), `compositions/index.ts`에서 내보내고, 레지스트리에 `CompositionEntry`를 추가하고, `pnpm typecheck`를 실행하세요.