figma-storyboard-animation

Figma 스토리보드 → 장면 모션 디자인

스토리보드는 일련의 정적 1920×1080 프레임입니다. 당신의 임무는 타임라인이 그 사이를 이동하는 하나의 장면을 생성하는 것입니다. 대부분의 모션은 이미 디자인에 존재하므로, 발명하지 말고 복구하세요.

코드를 실행할 수 없나요? 이 레시피가 "생성기 스크립트 작성"이라고 말하는 곳마다 대신 picsart_scene_patch를 통해 장면을 구축하고 각 변경 후 picsart_scene_query_layout으로 동일한 불변 조건을 고정하세요(아래 명령 참조). 방법은 동일하며 실행 표면만 다릅니다.

흐름

1. 트리를 한 번 읽습니다 — 사용자가 Figma 커넥터를 통해 스토리보드를 공유했다면 페이지의 프레임 트리를 한 번 읽으세요. 모든 프레임, 레이어, 이름 및 박스를 반환합니다. 아래의 모든 것은 이것에서 파생됩니다. 보드를 프레임별로 탐색하지 마세요.
2. 비트를 계획합니다 — (아래에서) 제작하기 전에 비트 테이블을 작성하세요.
3. 각 요소를 자체 레이어로 추출하여 사용자가 공유한 디자인에서 가져옵니다: 소스 측정값에서 편집 가능한 모양 지오메트리를 구성하고 기존 레이어에 CSS 채우기, 그림자 또는 그라데이션 페인트를 적용하려면 picsart_scene_import_figma_paint를 사용하세요. 텍스트는 라이브 상태로 유지하세요. 자동 모양 노드 변환은 여기서 노출되지 않습니다. 지원되지 않는 처리 또는 진정으로 레이어화되지 않은 소스에만 이미지를 사용하세요; 추출 참조.
4. 지오메트리에서 장면을 구축하고 모든 규칙을 고정합니다. 코드를 실행할 수 있는 곳에서는 생성기 스크립트(직접 작성한 JSON이 아님)를 작성하여 각 규칙이 assert가 되도록 하세요. 그렇지 않은 경우 picsart_scene_patch를 통해 구축하고 picsart_scene_query_layout으로 동일한 불변 조건을 고정하세요. 지오메트리는 메타데이터에서 오며, 눈대중으로 판단하지 않습니다.
5. 수치적으로 검증한 다음 내보냅니다.

3~5단계는 장면당 한 번씩 순서대로 실행됩니다. 이 루프가 방법입니다.

정적 프레임 하나

요청이 단일 프레임(스틸, 상점 이미지, 카드)인 경우 스토리보드가 없습니다. 비트를 건너뛰고 해당 프레임을 정지 장면으로 구축하세요:

1. 사용자의 공유된 Figma 커넥터를 통해 선택한 프레임을 읽습니다. 그 크기는 composition.width 및 height이고, 채우기는 composition.background이며, 짧은 duration(1)으로 충분합니다.
2. 페인트 순서로 각 자식당 하나의 레이어(트리의 첫 번째 자식이 맨 아래). 레이어의 position은 프레임 내 박스의 CENTRE, [x + width/2, y + height/2]입니다: 레이어는 중심을 기준으로 회전하고 크기가 조정됩니다. 프레임에 대해 중첩된 자식 하나를 교차 확인하세요: 일부 그룹은 그룹을 기준으로 자식을 저장합니다(references/figma-extraction.md).
3. 각 자식을 편집 가능하게 유지하는 매체로: 모양 지오메트리를 작성한 다음 picsart_scene_import_figma_paint를 통해 CSS 페인트를 적용하고, 텍스트는 라이브 텍스트로, 각 IMAGE 채우기는 scaleMode(FILL→cover, FIT→contain, CROP→cover + crop, TILE→표현 불가; 표와 자르기 계산은 references/figma-extraction.md의 "Image fills"에 있음)에 따라 원본 비트맵의 미디어 레이어로 적용합니다. 노드 export를 절대 사용하지 마세요. 이는 투명도를 프레임의 배경으로 평탄화합니다. 각 이미지를 먼저 업로드하세요. Figma 자산 URL은 만료됩니다.
4. 하나로 클리핑 또는 페이드하는 로컬 그룹은 일반적으로 인라인 composition 레이어입니다. 의도적으로 재사용 가능하고 별도로 소유된 컴포넌트인 경우 장면 참조를 사용하세요.
5. 숫자로 검증한 다음, 전체 그림 하나를 확인합니다. 0에서 picsart_scene_query_layout: 모든 box가 Figma 박스에서 1픽셀 이내에 있어야 합니다. crop이 없는 최상위 이미지는 drawn을 전달합니다: 디자인에 표시된 대로 박스와 sourceCrop입니다. 그룹 내부의 이미지는 clippedBox, 그룹이 표시하는 부분을 읽습니다. 그런 다음 명시적 times와 컴포지션 차원과 동일한 resolution을 사용하여 picsart_scene_contact_sheet 하나: 썸네일은 2px 라인과 작은 텍스트를 떨어뜨립니다.

레이어, 화면이 아님

장면은 이동 가능한 레이어의 합성물이지, 평평한 화면의 몽타주가 아닙니다. 디자인은 레이어로 제공됩니다. 분리 가능하게 유지하여 각각이 자체적으로 움직일 수 있도록 하세요. 이것이 스크린샷을 크로스페이드하는 대신 장면을 구축하는 이유입니다.

• 재구성하고, 래스터화하지 마세요. 사용자가 공유한 디자인에서 편집 가능한 shape 지오메트리를 구축하세요. picsart_scene_import_figma_paint로 CSS 페인트를 기존 레이어에 적용하세요. 완전한 Figma 디자인 노드 가져오기는 여기서 지원되지 않습니다. 모서리, 경로 및 배치는 편집 가능하게 유지하고 텍스트는 라이브 상태로 유지하세요. 이들을 PNG 또는 SVG로 평탄화하면 부품의 독립적인 애니메이션이 불가능해집니다.
• 사용자의 Figma 커넥터를 통해 공유된 디자인에서 자산을 가져올 때, 자식 대신 부모 프레임을 절대 가져오지 마세요. 자식이 움직이는 것입니다.
• 이미지로의 평탄화는 최후의 수단 — 진정으로 레이어화되지 않은 소스(래스터화된 자산, 레이어 접근 불가)에만 해당합니다. 최후의 수단으로 사용할 때는 명시적으로 말하세요.
• references/figma-extraction.md의 "노드 내보내기" 습관은 전체적으로 가져오기로 선택한 하나의 요소의 충실도에 관한 것입니다. 이를 "모든 것을 래스터화"로 일반화하지 마세요.

장면별로 순서대로 구축

이것은 아래의 어떤 개별 규칙보다 중요합니다. 전체 타임라인을 작성한 다음 제시하지 마세요. 또한 먼저 극적인 중간 비트를 프로토타이핑하지 마세요: 중간에 설계된 모션은 연결될 대상이 없으므로 버려집니다.

첫 번째 프레임에서 시작하여 앞으로 나아가세요. 장면당:

1. 편집 가능한 레이어뿐만 아니라 의미적 모션 단위로 분할하세요. 컨트롤, 레이블 및 아이콘은 일반적으로 하나의 배치 소유자를 공유합니다. 의도적인 상태 변경에 대해서만 자식-로컬 모션을 추가하세요. 정지는 계층 구조 및 읽기 시간에 유용하며 결함이 아닙니다. 그룹화, 패널 성장 및 재배치에는 연결된 요소 모션을 사용하세요(picsart_scene_recipe로 가져오기, 이름 linked-element-motion).
2. 이미 구축된 것에 추가하여 모션을 작성 — 코드를 실행할 수 있는 곳에서는 생성기에 추가하고, 그렇지 않은 곳에서는 동일한 장면에 패치를 적용하세요. 절대 처음부터 시작하지 마세요: 모든 이전 비트의 상수와 검사는 그대로 유지되므로 새 비트가 기존 비트를 조용히 깨뜨리지 않습니다.
3. 해당 비트를 렌더링하고 자체 윈도우를 통해 비디오로 표시하세요. 모션은 정지 이미지나 연락처 시트로 검토할 수 없습니다.
4. 방향을 받고 다시 렌더링하세요. 하나의 비트에 대해 여러 번의 패스를 예상하세요. 방향은 숫자가 아닌 품질("더 스냅하게", "타일 분리", "그 요소가 소음을 내니 제거하세요")로 제공되며, 각각은 타이밍, 지연 또는 요소 인벤토리에 매핑되며 새로운 디자인에는 매핑되지 않습니다.
5. 그런 다음 다음 장면으로의 연결을 자체 명시적 단계로 설계하세요. 장면이 올바르게 보일 때 완료된 것이 아닙니다. 종료와 다음 장면의 시작이 동의될 때 완료됩니다. 연결은 스토리보드에 없는 부분이므로, 방향이 가장 구체적("축소한 다음, 다음 장면이 카메라에서 도착하며 확대된 상태가 아님")이고 추측이 가장 큰 낭비입니다.

자율적 반복이 허가된 경우, 이를 내부 검증 게이트로 사용하고 모든 비트에 대해 승인을 요청하기보다는 의미 있는 마일스톤을 표시하세요. 큰 타임라인의 경우 대규모-장면-어셈블리를 사용하세요(picsart_scene_recipe로 가져오기, 이름 large-scene-assembly).

그런 후에야 다음으로 넘어가세요. 작업하면서 비트 테이블을 업데이트하세요. 이것은 합의된 사항의 기록이며, 빌드가 완료되기 전에 타임라인이 깁니다.

스토리보드 읽기

• 캔버스 x-순서가 시간적 순서입니다. 프레임은 왼쪽에서 오른쪽으로 배치됩니다. 이름이 아닌 x로 정렬하세요.
• 프레임 이름은 거짓말을 합니다. 순서는 그렇지 않습니다. 중복 이름은 일반적입니다(디자이너가 프레임을 복제하고 번호를 다시 매기는 것을 잊음). 하나가 누락되었다고 결론 내리기 전에 프레임을 숫자와 비교하세요.
• 중복 이름의 프레임은 일반적으로 하나의 비트에 대한 A→B 포즈입니다. 해당 레이어 세트를 비교하세요: 동일한 자식, 다른 변환은 디자이너가 모션을 델타로 인코딩했음을 의미합니다. 그 모션은 측정 가능하며, 당신이 내려야 할 디자인 결정이 아닙니다.
• 사용자의 Figma 커넥터를 통해 디자인이 들어올 때, 프레임을 한 번에 하나씩 캡처하세요: 한 번에 캡처된 전체 보드는 높이보다 훨씬 넓어 가느다란 조각으로 줄어듭니다.

진정으로 당신이 디자인할 것: 머무름, 이징, 그리고 쌍을 이루지 않은 프레임 간의 연결.

각 쌍을 이루지 않은 연결에 대해 motion-scene-continuity를 사용하세요(picsart_scene_recipe로 가져오기, 이름 motion-scene-continuity)를 사용하여 의미적 관계를 명명하고 지속 레이어, 카탈로그 전환, 하드 컷, 크로스페이드 또는 사용자 정의 전환을 메커니즘 작성 전에 선택하세요. 이 스토리보드 워크플로는 여전히 쌍을 이루는 디자인 프레임에 의해 암시된 모션의 복구를 소유합니다. 연속성은 경계에서의 관계와 표현만을 소유합니다.

변환을 선택하지 말고 해결하세요

알 수 없는 피벗 C에 대한 균일한 스케일 s는 p → C + s(p − C)를 매핑합니다. 따라서 하나의 대응하는 좌표 쌍이 피벗을 고정합니다:

C = (p2 − s·p1) / (1 − s)

두 프레임 간의 요소 크기 비율에서 s를 가져오고 C를 해결한 다음, 두 번째 독립적인 요소에 대해 확인하세요. 픽셀의 분수까지 일치한다면 디자이너의 실제 변환을 찾은 것입니다. 불일치는 요소가 자체적으로 이동했으며 자체 처리가 필요함을 의미합니다.

비트 테이블을 작성하세요 — 측정된 델타, 해결된 피벗, 시간 할당. 숫자가 포함된 아홉 개의 안무 비트는 스크롤백에서 살아남지 못하며, 렌더링과 비교하고 싶을 것입니다.

모션 규칙

전체 세부 사항 및 작업된 숫자: references/motion-rules.md. 비트가 올바르게 읽히는지 결정하는 규칙:

• 강체 vs 독립. 진정으로 독립적인 객체(그리드 타일, 스티커)에만 위치/스케일을 지연시키세요. 카드, 잠금 또는 부품이 있는 객체는 하나의 지오메트리 클록을 공유해야 합니다. 그렇지 않으면 부품이 비행 중에 정렬에서 벗어납니다. 대신 페이드에 지연을 넣으세요.
• 페이드는 하나의 제스처로 읽히려면 모션과 동시에 종료되어야 합니다. 페이드가 이동보다 먼저 끝나면 눈은 두 개의 이벤트를 봅니다. 이징 곡선도 일치시키세요.
• 평면 프레임 렌더링에서 줌인은 안전합니다. 이동은 그렇지 않습니다. 확대는 가장자리를 노출시키지 않습니다. 이동은 이미지 자체의 후행 가장자리를 노출시킵니다.
• 크기 항목 이동은 선행 부분이 캔버스 바로 밖에서 시작하도록 합니다 — 이동 ≥ 캔버스 − 가장 왼쪽_x. 너무 적으면 화면에서 시작합니다. 너무 많으면 데드 타임입니다.
• 종료는 가속(ease_in)됩니다. 차등 가속을 위해 두 객체에 다른 범위를 제공하세요.
• 선택 크롬은 배타적입니다 — 한 번에 두 개의 마키가 절대 없어야 하며, 그 비트보다 오래 지속되어서는 안 됩니다. 요소 단계가 범위를 겹치면 요소는 조작 중에 선택을 잃습니다.

저작을 변경하는 렌더링 사실

• 불투명도는 선형 광에서 합성됩니다. 인코딩된 sRGB 값을 스케일링하지 않습니다. 측정된 밝기를 맞추려면 감마를 통해 변환하세요: opacity = linear(target) / linear(source).
• 불투명도는 검은색 배경에서 어둡게 하는 제어일 뿐입니다. 밝은 배경에서는 배경이 비쳐들면서 어두운 피사체를 더 밝게 만듭니다. 실제 어둡게 하려면 피사체의 불투명도가 아니라 위에 어두운 스크림이 필요합니다.
• anchor는 비중심 피벗을 제공합니다(레이어의 왼쪽 상단에서 레이어-로컬 픽셀). 모서리-피벗 스케일링(예: 선택 상자의 왼쪽 상단을 기준으로 스케일링하여 오른쪽 아래 핸들을 드래그하는 것처럼 보이게 함)에 사용하세요. 위치 키프레임으로 피벗을 위조하지 마세요.
• 문자당 텍스트 애니메이션은 내장되어 있습니다. 텍스트 레이어의 content.animations[]는 After Effects 애니메이터 + 범위 선택기입니다: basedOn: "character", 깜박임을 위한 randomizeOrder/randomizeSeed. 깜박임이 동기화되지 않도록 다른 시드에 항목을 쌓으세요. 활성 범위는 [start + offset, end + offset]입니다: 좁은 윈도우는 offset: 1 − end에서 텍스트의 끝에 먼 가장자리를 주차하거나 offset: 1 − start에서 모든 글리프를 지웁니다(start가 0일 때만 1 − w / 1 사용 — 그렇지 않으면 사용하지 마세요). 램프 모양의 FULL 윈도우(start:0,end:1)는 대신 텍스트 너비와 정확히 같은 하나의 램프입니다: offset -1 → 1을 스윕하고 각 글리프는 한 번에 모두 전환하는 대신 위치에 따라 지연되어 스윕의 절반에 걸쳐 이징됩니다 — 작업된 숫자는 picsart_scene_capabilities의 textAnimationAuthoring.rawSelector를 참조하세요.
• 인라인 SVG는 #가 퍼센트 인코딩된 URL 인코딩되어야 합니다. 원시 #는 URI 조각을 시작하고 첫 번째 16진수 색상에서 SVG를 자릅니다.
• 이징을 측정하고, 사전 설정 이름을 신뢰하지 마세요. 키프레임 윈도우의 25%/75%에서 값을 샘플링하고 곡선이 의도한 것인지 확인하세요.

수치적으로 검증

축소된 연락처 시트를 눈으로 확인하면 잘못된 알람이 생성됩니다. 측정으로 반증되는 위치 오류를 안정적으로 보고합니다. 프레임을 전체 해상도로 비교하거나 측정하세요.

• picsart_scene_validate는 구조만 확인합니다. 레이어가 아무것도 렌더링하지 않는 장면에서 통과합니다.
• picsart_scene_query_layout은 렌더링 없이 박스를 해결합니다 — 렌더링에 시간을 쓰기 전에 Figma 숫자에 대해 지오메트리를 확인하는 데 사용하세요. 지오메트리 전용입니다: 해결된 박스는 콘텐츠가 디코딩되는지 여부에 대해 아무것도 말하지 않습니다.
• 캔버스에 아무것도 없는 틈을 찾으려면 times: [t1, t2, …] 및 resolution을 장면의 composition.width 및 composition.height로 설정한 picsart_scene_contact_sheet로 의심스러운 시간을 살펴보세요. 작은 로고만 있는 프레임은 언뜻 보기에 비어 보일 수 있습니다. 틈이라고 부르기 전에 확인하세요.
• 코드를 실행할 수 있는 곳에서는 생성기에 불변 조건을 어설트로 넣으세요(해결된 피벗 일치, 충분히 긴 이동, 한 번에 하나의 선택, 경계가 합리적). 정지 프레임이 숨기는 회귀를 포착합니다.

명령

코드를 실행할 수 있는 곳에서는 동일한 생성기와 자체 검사를 유지하세요. 그렇지 않으면 제한된 picsart_scene_patch 편집을 사용하세요. picsart_scene_validate로 검증하고, picsart_scene_query_layout으로 이벤트 지오메트리를 쿼리하고, times: [t1, t2](호출당 최대 8회) 및 resolution을 장면의 composition.width 및 composition.height로 설정한 picsart_scene_contact_sheet를 사용하여 전체 해상도 스틸을 검사하세요. 모션 주장에 대해 연속 내보낸 비디오를 검사하세요.