FunwayHQ/quar-design

Quar Animator에서 디자인 및 애니메이션화하기

Quar Animator는 2D 벡터 애니메이션 편집기입니다. MCP 도구는 사용자의 클라우드 프로젝트를 읽고 편집합니다. 자신의 작업을 볼 수 있는 모션 디자이너처럼 작업합니다: 계획, 구축, 확인, 수정, 애니메이션, 모션 확인, 내보내기. 모든 확인은 서버의 사진입니다 — 의도한 대로가 아니라 그 사진을 신뢰하세요.

quar-animator 도구를 사용할 수 없으면 그렇게 말하고 이 스킬의 README에 있는 설정 방법을 사용자에게 안내하세요 (https://api.animator.quar.pro/mcp에서 MCP 연결). 파일을 만드는 다른 방법을 즉흥적으로 사용하지 마세요.

루프

1. 읽기. list_projects (또는 새로 시작하려면 create_project {name} — 사용자에게 editorUrl을 제공하여 편집기에서 열리도록 함; stillUploading으로 표시된 것은 아직 버전이 없으며 비디오가 편집기에서 계속 업로드 중임: 열 수 없음), 그런 다음 get_scene_context {project_id}. seq를 기록하세요 — 모든 편집에 base_seq로 전달하여 아직 보지 못한 변경 사항에 편집이 적용되는 대신 실패하도록 합니다. frameRate, duration, artboardTimelines 및 잠긴 항목(사용자의 것: 요청하지 않는 한 건드리지 마세요)을 기록합니다.
2. 계획을 먼저 세우세요: 프레임(아트보드 크기), 레이아웃, 팔레트, 유형, 무엇이 언제 움직이는지. 사용자를 위해 몇 줄로 계획을 적으세요. reference/design.md 및 reference/motion.md를 사용하세요. 알려진 유형의 작업인 경우 recipes/에 있는 레시피를 따르세요.
3. 드라이 런으로 구축하세요. 일관된 단계(배경, 레이아웃, 유형…)에 대해 하나의 apply_edit_batch를 dry_run: true와 함께 사용하세요. 아무것도 저장하지 않고 변경될 사항, 즉 placed 를 반환합니다 — 추가되거나 변경된 각 노드의 at 및 bounds(결과를 저장하기 전에 레이아웃을 측정하기 위함)와 사진(preview_frame, preview_node로 하나의 아트보드 또는 노드 표시, preview_size는 최대 1024)을 반환합니다. add_node에 고유한 id(예: "id": "title")를 제공하여 이후 배치 작업에서 참조할 수 있도록 합니다.
4. 확인하고 수정하세요. 사진을 reference/design.md의 체크리스트와 비교하세요: 정렬, 간격, 계층, 대비, 잘린 부분 없음. 배치를 수정하고 올바를 때까지 드라이 런을 반복하세요. 그런 다음 dry_run 없이 message와 함께 보냅니다(예: "레이아웃: 제목, 부제목 및 로고").
5. 애니메이션화도 같은 방식으로: animate 작업(속성당 하나, 곡선 전체를 한 번에)을 배치로, 드라이 런으로 preview_frame을 적절한 순간에 사용한 다음 커밋합니다.
6. 모션을 확인하세요. render_preview를 count: 8–12(그리는 대상의 타임라인에 분산 — 자체 아트보드의 타임라인) 또는 정확한 frames(최대 16개)로 사용하면 레이블이 지정된 연락처 시트가 제공됩니다(count가 있는 경우 마지막 셀은 프레임 N이며 내보내기에서는 재생되지 않음). 타이밍, 겹침, 홀드, 점프 여부, 루프의 경우 마지막 프레임이 첫 번째 프레임과 일치하는지 확인하세요. animate, move_keyframes, set_easing으로 수정합니다.
7. 요청 시 내보내기(export, 그런 다음 get_export {export_id, wait: true})하고 세부 정보를 읽습니다: Lottie가 가져올 수 없는 것(unsupported: 노드 유형, 효과가 있는 레이어, 블렌드 모드), 프레임, 크기. 사용자에게 링크를 즉시 제공하세요 — 한 번 작동하며 1시간 이내; get_export를 다시 호출하면 새 링크가 제공됩니다.
8. 사용자에게 만든 내용을 몇 줄로 알리고 각 단계가 취소할 수 있는 버전(list_versions, restore_version)임을 알립니다.

배치를 목적에 맞게 유지하세요: 의미 있는 단계당 하나의 버전(모양당 하나가 아니라, 전체 작업을 한 번에 블라인드로 처리하지 않음). 배치는 최대 500개의 작업을 포함하며 전부 아니면 전무(all-or-nothing)입니다.

호출

인수는 서로 나란히 위치하며 options 객체에 중첩되지 않습니다.

create_project      {name}
get_scene_context   {project_id, page?, node?, depth?}
get_node            {project_id, node, page?}          (모든 저장된 속성, 키프레임)
get_timeline        {project_id, page?, node?, property?} (모든 키프레임, 이징 포함, 하나의 속성)
get_animatable_properties {node_type}                  (유형이 애니메이션화할 수 있는 것: 뼈대는 x, y도 가능)
list_fonts          {}                                 (텍스트를 그릴 수 있는 패밀리와 두께)
measure_text        {text, font_family?, font_weight?, font_size?, letter_spacing?, line_height?, box_width?}
                                                       (각 글리프의 x 및 advance, 줄 너비, 어센트, 디센트)
apply_edit_batch    {project_id, ops: [...], base_seq?, message?, dry_run?, preview_frame?,
                     preview_page?, preview_node?, preview_size?}
render_frame        {project_id, frame?, node?, page?, size?, transparent?}
render_preview      {project_id, frames? | count?, node?, page?, size?, transparent?}
capture_canvas      {project_id, frame?, page?}        (사용자의 열린 편집기가 그리는 것; 응답하지 않으면 저장된 버전)
export              {project_id, format, node?, frame?, start_frame?, end_frame?, fps?, width?, height?}
get_export          {export_id, wait?, include_file?}
list_versions       {project_id}
restore_version     {project_id, seq}

작업(op)은 {"op": <이름>, ...인수} 형식입니다. 각 작업은 자체 선택적 page를 사용합니다(배치 자체에는 page가 없음). 작업은 편집 도구의 이름입니다: add_node, update_node, set_style, delete_node, duplicate_node, group_nodes, mask_nodes, ungroup_node, reorder_node, set_pivot, convert_to_outlines, add_keyframe, animate, remove_keyframe, move_keyframes, set_easing, clear_animation, add_page, delete_page, rename_page, duplicate_page, set_document, set_artboard_duration, add_bone, pose_bone, set_ik_target, bind_mesh (배치당 최대 20개의 bind_mesh 작업과 60개의 레이어: 여러 모양을 한 번에 바인딩), unbind_mesh, set_video_clip (아래 참조). get_bindings는 각 바인딩된 레이어가 따르는 뼈대를 읽습니다. 바인딩된 레이어는 삭제할 수 있습니다(바인딩도 함께 삭제됨). 이름이 공유되는 경우(모양과 뼈대 모두 "Thigh L"), id를 사용하세요.

[
  { "op": "add_node", "type": "rectangle", "id": "card", "parent": "frame", "x": 0, "y": 0,
    "width": 640, "height": 360, "cornerRadius": 24, "fill": "#1f1d29" },
  { "op": "set_style", "node": "card",
    "effects": [{ "type": "drop-shadow", "color": "#07060b", "offsetY": -16, "blur": 40, "opacity": 0.4 }] },
  { "op": "animate", "node": "card", "property": "y",
    "keyframes": [{ "frame": 0, "value": -120 }, { "frame": 18, "value": 0, "easing": "easeOutCubic" }] },
  { "op": "animate", "node": "card", "property": "scale",
    "keyframes": [{ "frame": 0, "value": { "x": 0.9, "y": 0.9 } }, { "frame": 18, "value": { "x": 1, "y": 1 } }] },
  { "op": "animate", "node": "card", "property": "fill",
    "keyframes": [{ "frame": 0, "value": "#1f1d29" }, { "frame": 18, "value": "#a855f7" }] }
]

값: x, y, rotation, opacity, 크기는 숫자; position 및 scale은 {x, y}; fill 및 stroke는 "#rrggbb". 효과: drop-shadow 및 inner-shadow는 color, offsetX, offsetY, blur, spread, opacity를 사용합니다. layer-blur는 radius를 사용합니다.

사람들이 헷갈려하는 사실들

• Y는 위쪽을 가리킵니다. 노드의 x, y는 앵커입니다 — 대부분의 모양(아트보드 포함)의 중심입니다. y가 클수록 화면에서 더 위쪽입니다. (svg 경로 데이터는 예외: SVG 파일과 마찬가지로 Y가 아래쪽이며, 노드 자체 공간에서 중심을 기준으로 함.)
• 두 공간. at 및 bounds(get_scene_context 및 드라이 런의 placed)는 페이지 좌표입니다. 노드의 x, y — 및 이에 대한 키프레임 —은 부모 공간에 있습니다. 페이지 중심에 있지 않은 아트보드나 그룹 내에서는 둘이 다릅니다: 노드 자체의 x/y(get_node)를 중심으로 키프레임을 설정하고 at을 사용하지 마세요.
• 자식은 뒤에서 앞으로 그려집니다: 나중에 있는 형제가 위에 있습니다. 배경을 먼저 추가하고 초점 모양을 마지막에 추가하거나 reorder_node {node, to: "front"|"back"|…, index?}로 재정렬하세요.
• 아트보드는 채우기가 지정되지 않으면 흰색입니다: 투명하게 하려면 "fill": "none" (앱의 Lottie, 스티커).
• 피벗. 크기 조정 및 회전은 노드 위치, 즉 피벗을 기준으로 발생합니다 — 대부분의 모양에서 중심입니다. 다른 곳(관절의 팔다리, 바닥에 찌그러지는 로고, 오른쪽으로 자라는 단어)을 피벗하려면 set_pivot {node, at: "bottom"} (자체 상자상의 위치: left, top-right…) 또는 {node, x, y} (페이지의 한 점); 화면상 위치는 그대로 유지됩니다. 그룹, 직사각형 및 이미지는 피벗을 사용합니다. 다른 것은 먼저 그룹에 넣으세요(group_nodes {nodes: [it], id} — 해당 그룹은 피벗될 때까지 부모의 원점에 앉음), 그런 다음 그룹을 피벗합니다. 회전 또는 크기 조정 애니메이션 전에 피벗을 설정하세요: 애니메이션 회전은 피벗을 중심으로 발생합니다. (update_node는 부모를 변경할 수 없음: reorder_node {node, parent}는 노드를 제자리에 유지하면서 이동시킵니다.)
• 마스크. mask_nodes {nodes, mask?, mode?}는 노드와 마스크(모양, 텍스트 또는 이미지; 이름이 지정되지 않은 경우 노드 중 가장 앞에 있는 것)를 그룹에 넣어 내부에서만 표시합니다 — 공개, 비네트, 프레임 속 그림, 가장자리 뒤로 숨는 것. 마스크는 그려지지 않습니다. 마스크를 애니메이션화(크기, 위치, 배율)하여 공개합니다. mode: clip (윤곽선), alpha (불투명도: 그라데이션 페이드), luminance (흰색 표시, 검은색 숨김).
• rotation은 시계 반대 방향의 도수이며 작성된 대로 트위닝됩니다: 0 → 360은 한 바퀴 회전; −360은 시계 방향 회전.
• 그라데이션: angle 0°는 왼쪽 → 오른쪽, 90°는 아래쪽 → 위쪽(270°는 위쪽 → 아래쪽).
• 그림자: offsetY 음수는 그림자를 아래에 둡니다.
• letterSpacing은 픽셀 단위입니다(100px에서 −2는 빡빡한 디스플레이 유형).
• 경로는 자체 중심을 위치로 유지합니다: x/y 키프레임은 현재 값(get_scene_context의 at으로 읽음) 주변으로 설정하고 절대 0을 기준으로 하지 않습니다.
• 텍스트 및 글꼴. 텍스트는 Inter(항상 있음: 100에서 900까지 모든 두께, 400 및 700에서 이탤릭)이거나 편집기의 Google Fonts 중 하나(list_fonts: 패밀리 및 해당 두께 — 일반만 해당; 누락된 두께는 가장 가까운 것으로 대체됨)인 경우 자체 패밀리로 그려지고 배치되며 측정됩니다. 서버는 문서가 처음 사용할 때 Google Font를 가져옵니다. 너비는 정확합니다(advance, 커닝, 문자 간격). 높이는 라인 박스(라인 × 크기 × lineHeight)입니다. 목록에 없는 패밀리는 Inter로 그려지고 측정되며 응답에 그렇게 표시됩니다(fonts): 목록에서 선택하거나 사용자가 편집기에서 프로젝트를 열어 둔 상태에서 capture_canvas로 사용자 고유 글꼴을 확인하세요. measure_text는 텍스트를 배치하지 않고 설정합니다: 각 글리프의 x 및 advance, 각 줄의 너비, 글꼴의 어센트 및 디센트 — 커서, 밑줄 및 단어를 너비에 맞추기 위한 것입니다. convert_to_outlines {node}는 텍스트를 문자 경로 그룹(<id>-1…, 해당 문자로 이름 지정)으로 변환하여 문자별 애니메이션(엇갈리게, 하나의 색상 변경, 튕기게)을 가능하게 합니다. 단방향입니다.
• 타임라인. duration 및 frameRate는 문서의 것입니다. 페이지 상단의 각 아트보드는 자체 타임라인(해당 레이어의 키프레임, 자체 길이)을 재생합니다(artboardTimelines; set_artboard_duration {artboard, duration}; 자체 아트보드가 있을 때까지 문서의 타임라인을 사용). N 프레임의 타임라인은 0…N의 키프레임을 사용합니다. 내보내기 및 슬라이드는 프레임 0…N−1을 재생하므로 루프의 경우 키 프레임 N이 프레임 0과 같아야 합니다. 끝을 넘어 키를 설정하기 전에 타임라인을 늘리세요(set_document {duration} for 페이지의).
• 슬라이드. 편집기의 프레젠테이션 및 비디오 내보내기, 그리고 여러 아트보드가 있는 페이지의 GIF 및 PNG 시퀀스 내보내기(node 또는 범위 없음)에서 아트보드는 차례로 재생됩니다 — 가장 앞에 있는 것(레이어 패널의 맨 위)이 먼저 재생되며, 각각 자체 길이만큼 첫 번째 아트보드의 크기에 맞춰집니다. 나중에 추가된 아트보드는 앞에 있으므로 먼저 재생됩니다: index: 0으로 나중 슬라이드를 추가하거나 reorder_node로 재정렬하세요. artboardTimelines는 재생 순서대로 나열합니다. node로 하나의 아트보드를 내보냅니다. MP4 및 WebM은 편집기(파일 › 내보내기)에서 제공되며 MCP에서 제공되지 않습니다.
• easing은 이전 키프레임에서 해당 키프레임으로 들어가는 곡선입니다. 이름은 reference/motion.md에 있습니다. [x1, y1, x2, y2]는 큐빅 베지어를 제공합니다. 이미 오버슛인 키프레임으로 오버슈팅 이징(easeOutBack)을 사용하면 두 번 오버슈트됩니다: 피크까지는 easeOutCubic을 사용하고 안정화에는 스프링 이징을 사용하세요.
• 비디오. 비디오 레이어("type": "video": MP4, MOV 또는 WebM, 또는 사용자가 가져온 애니메이션 GIF)는 클립이 재생되는 동안 재생되는 그림이며, 클립이 홀드되지 않는 한 외부에는 아무것도 표시하지 않습니다. get_scene_context는 video를 제공합니다: file, gif, length(초), clip — start(시작 프레임), end(종료 프레임), offset(비디오 시작 부분에서 잘라낸 초), duration(한 번 재생되는 비디오의 초), speed, loop 및 loopFor(계속 루프되는 초), hold(종료 후 마지막 그림 유지) — 및 연결된 sound(함께 이동하는 타임라인의 클립). set_video_clip {node, moveTo?, trimStart?, trimEnd?, speed?, loop?, hold?, stopAt?, unlinkSound?}로 클립을 변경합니다 — 레이어가 재생되는 타임라인의 프레임으로, loop, speed, moveTo, trimStart, trimEnd, hold, stopAt 순서로 적용됩니다:
  • moveTo는 특정 프레임에서 시작합니다. trimStart는 프레임을 첫 번째 프레임으로 만들고 끝은 그대로 둡니다(나중 값은 비디오 시작 부분을 더 잘라내고, 이전 값은 더 많이 재생). trimEnd는 특정 프레임에서 중지합니다(이전 값은 끝을 잘라내고, 나중 값은 비디오 끝까지 더 재생하거나 loop와 함께 계속 루프: {loop: true, trimEnd: 300}은 10초 슬라이드를 채움).
  • speed 0.25–4 (사운드는 피치 유지); hold: true는 마지막 그림을 유지; stopAt은 프레임에서 종료하고 그곳에 표시되는 것을 유지(GIF가 부분적으로 멈춤); loop: false는 GIF를 유지.
  • 사운드는 각 변경을 따르며, 재생되는 타임라인은 끝까지 재생하도록 늘어납니다(결과는 timelineLengthened라고 표시). unlinkSound: true는 사운드를 독립시킵니다. 그 외에 비디오 레이어는 그림입니다: 이동, 크기 조정(width, height), 둥글게(cornerRadius), 페이드, adjustments, 효과, 블렌드 모드, 마스크(마스크 가능), 피벗 및 키프레임 — 이미지와 동일하지만 코너 풀 및 뼈대는 없음. duplicate_node는 사운드를 복사합니다. delete_node는 사운드를 삭제합니다.

…

(truncated for translation)