Bannerify는 배너 하나의 레이어와 현재 타이밍을 ChatGPT, Claude, Gemini 등 AI 어시스턴트용 구조화된 프롬프트로 만들어 줘요. 돌려받은 JSON을 Bannerify에 붙여 넣으면, 무언가를 적용하기 전에 제안된 등장, 퇴장, 호버 애니메이션을 검증하고 검토할 수 있어요.
프롬프트를 복사할 때 Bannerify는 AI 서비스에 연결하지 않고 타임라인도 바꾸지 않아요. 프롬프트를 어디에 붙여 넣을지는 직접 고르고, 타임라인은 JSON 응답이 검증을 통과하고 Apply AI Timeline을 클릭한 뒤에만 업데이트돼요.
AI 타임라인 만들기
- 배너 프레임이나 섹션을 Bannerify로 불러오세요.
- 애니메이션을 넣을 배너의 헤더에서 Create AI Animation Timeline 프롬프트 아이콘을 클릭하세요.
- 원하는 방향을 설명하세요. 의도한 분위기, 시각적 위계, 중요한 레이어 순서, 은은하게 유지해야 할 요소 등을 적어 주세요.
- Copy AI Prompt를 클릭하세요.
- 프롬프트가 복사됐다고 Bannerify가 알려 주면, 원하는 AI 어시스턴트에 붙여 넣고 포함된 타임라인 데이터나 규칙을 지우지 않은 채 보내세요. 생성된 프롬프트는 플러그인에 표시되지 않고 바로 클립보드에 복사돼요.
- AI 응답에서 JSON 객체를 복사하세요.
- Bannerify로 돌아와 응답을 Paste and validate the JSON response에 붙여 넣으세요. 붙여 넣은 JSON은 Bannerify가 자동으로 검증하며, Validate JSON을 클릭해도 돼요.
- Bannerify가 문제를 알리면 Copy JSON Fix Prompt를 클릭하고, 그 프롬프트를 같은 AI 대화에 붙여 넣은 다음 수정된 JSON 응답을 복사해 검증하세요.
- 이전 애니메이션과 추천 애니메이션, 타이밍을 포함해 제안된 모든 변경 사항을 검토하세요.
- Apply AI Timeline을 클릭하면 이 배너만 업데이트돼요. 배너를 여러 개 불러왔고 레이어 구조가 일치한다면 대신 Apply to All Matching Banners를 클릭하세요.
미리보기가 바로 업데이트되고, Bannerify가 새 애니메이션 설정을 Figma 레이어에 저장해요.
더 유용한 결과를 얻으려면 애니메이션 프리셋 이름을 나열하기보다 보는 순서를 설명하세요. 예: 헤드라인을 먼저 보여 주고, 제품을 오른쪽에서 들여온 다음 CTA를 드러내 주세요. 움직임은 절제하고 CTA에 은은한 호버를 추가해 주세요. 복사된 프롬프트에는 지원되는 Bannerify 애니메이션 이름이 이미 들어 있어요.
결과 검토 및 실행 취소
검토 패널은 오른쪽 열에 열리고 변경될 트랙만 보여 줘요. 레이어 목록은 따로 스크롤되므로 검토 제목과 적용 버튼은 계속 보여요. 변경되는 각 트랙에서 해당 레이어의 현재 등장, 퇴장, 호버 설정을 검증된 추천과 비교할 수 있어요.
Apply to All Matching Banners는 검증된 계획을 현재 Bannerify에 불러온 배너 전체에 안전하게 재사용해요. 편집 가능한 모든 원본 레이어마다 정규화된 이름, 레이어 유형, 섹션 장면 위치가 같은 고유 레이어가 하나씩 있고, 배너의 소스 모드와 타임라인 길이가 같을 때만 일치하는 배너로 판단해요. Bannerify는 적용하기 전에 다시 매핑된 계획을 해당 배너의 애니메이션 호환성과 타이밍 범위에 맞춰 검증해요. 모호하거나 호환되지 않는 배너는 건너뛰며, 확인 메시지에서 일치한 배너와 건너뛴 배너 수를 알려 줘요.
AI 타임라인을 적용하면 여러 레이어나 일치하는 배너가 바뀌더라도 Bannerify 기록 단계는 하나만 생겨요. Undo 버튼이나 macOS에서 Command + Z, Windows에서 Ctrl + Z를 사용하면 이전 타임라인 전체를 복원할 수 있어요. 그런 다음 같은 AI 계획을 다시 실행하거나 새 계획을 생성할 수 있어요. 모든 단축키와 기록 동작은 타임라인 변경 실행 취소 및 다시 실행을 참고하세요.
프롬프트에 포함되는 내용
복사된 프롬프트에는 AI가 유효한 계획을 만드는 데 필요한 정보가 들어 있어요.
- 편집 가능한 모든 타임라인 레이어의 임시 참조(예:
L1) - 레이어 이름, 유형, 쌓임 순서, 경계
- 배너 크기와 타임라인 길이
- 현재 등장, 퇴장, 호버 설정
- 레이어나 섹션 장면별로 허용된 타이밍 범위
- Split Text와 SVG Draw 호환성
- 지원되는 Bannerify 애니메이션 ID 목록(등장이나 퇴장 트랙에 쓸 수 있는 저장된 사용자 지정 애니메이션 포함)
- 사용자가 적은 애니메이션 방향
Bannerify는 Figma 배너나 레이어의 원본 ID, 내보낸 이미지 데이터, SVG 마크업 등 레이어 에셋 바이트는 포함하지 않아요. 다만 복사된 프롬프트에는 레이어 이름과 레이아웃, 타임라인 메타데이터가 들어 있으므로, 기밀성 있는 이름이나 구조가 담긴 디자인을 공유하기 전에는 내용을 검토하세요.
JSON 검증 방식
Bannerify는 레이어를 변경하기 전에 응답 전체를 검증해요. 다음 사항을 확인해요.
- 응답이 현재 Bannerify 타임라인 스키마를 사용하고 복사한 프롬프트와 일치하는지
- 제공된 모든 레이어 참조가 정확히 한 번씩 나오는지
- 알 수 없는 레이어 참조나 애니메이션 ID를 지어내지 않았는지
- Split Text와 SVG Draw 애니메이션을 호환되는 레이어에만 사용했는지
- 등장과 퇴장 애니메이션이 레이어에 허용된 타임라인 또는 장면 범위 안에 들어가는지
- 등장과 퇴장 범위가 겹치지 않는지
- 지속 시간이 0.1초 이상인지
- 타이밍 값을 Bannerify의 0.1초 타임라인 단위로 정규화할 수 있는지
원래 프롬프트는 AI에 응답하기 전에 엄격한 JSON인지 스스로 점검하도록 요청하고, 설명 문장, URL, 주석, 후행 쉼표, 다른 문자열 안에 감싼 JSON을 명시적으로 금지해요. 그래도 응답이 검증에 실패하면 Copy JSON Fix Prompt가 정확한 오류, 거부된 응답, 정리된 원래 타임라인 지침을 담은 새 프롬프트를 만들어 AI가 처음부터 다시 시작하지 않고 고칠 수 있게 해 줘요.
프롬프트를 복사한 뒤 타임라인, 레이어 설정, 사용자 지정 애니메이션 목록, 장면 타이밍이 바뀌면 Bannerify는 이전 응답을 거부해요. Copy Fresh Prompt를 클릭하고 AI에 다시 요청해 현재 타임라인을 기준으로 계획을 세우게 하세요.
JSON 응답 형식
복사된 프롬프트는 AI에 다음 형식의 JSON 객체 하나를 반환하도록 요청해요.
{
"schemaVersion": "bannerify.timeline-plan.v1",
"snapshotId": "ai-example-snapshot",
"timelineSeconds": 5,
"layers": [
{
"layerRef": "L1",
"entry": {
"animationId": "fade-in-bottom",
"startSeconds": 0.2,
"durationSeconds": 0.6,
"loop": false
},
"exit": {
"animationId": "fade-out",
"startSeconds": 4.3,
"durationSeconds": 0.5,
"loop": false
},
"hover": null
}
]
}각 entry, exit, hover 값은 다음 중 하나예요.
- 해당 트랙을 대체할 애니메이션 객체
- 애니메이션을 제거하는
null - 현재 값을 그대로 두는
"keep"
schemaVersion, snapshotId, timelineSeconds, 레이어 참조, 애니메이션 ID는 수정하지 마세요. AI가 응답을 json 코드 블록 하나로 감싸더라도 Bannerify는 읽을 수 있어요.
섹션 장면과 특수 애니메이션 다루기
Figma 섹션에서 불러온 배너라면 프롬프트에 장면별 현재 타이밍 범위가 들어 있어요. AI는 그 범위 안에서 레이어 타이밍을 바꿀 수 있지만, 레이어를 다른 장면으로 옮길 수는 없어요. AI가 새 범위를 쓰게 하려면 먼저 Bannerify에서 장면 타이밍을 조정한 다음 새 프롬프트를 복사하세요.
Split Text 애니메이션은 조건을 충족하는 텍스트 레이어에서만 사용할 수 있어요. SVG Draw 애니메이션은 호환되는 SVG 레이어에서만 사용할 수 있어요. 저장된 사용자 지정 키프레임 애니메이션은 등장과 퇴장 선택지로 포함돼요. 제공된 AI 목록에 없는 기존 애니메이션도 해당 트랙에 "keep"을 반환하면 그대로 유지할 수 있어요.
locked-로 시작하는 레이어는 의도적으로 제외돼요. 중첩 레이어가 빠져 있다면 Bannerify 타임라인에서 펼친 다음 배너를 새로 고치고 새 프롬프트를 복사하세요.
문제 해결
응답이 유효한 JSON이 아니에요
검증 경고에서 Copy JSON Fix Prompt를 클릭하고, 같은 AI 대화에 붙여 넣은 다음 포함된 오류나 타임라인 지침을 수정하지 말고 보내세요. Bannerify에서 거부된 응답을 수정된 JSON으로 바꾼 뒤 Validate JSON을 다시 클릭하세요.
타임라인이 변경됐다는 응답이 나와요
프롬프트가 더 이상 현재 배너 상태를 기준으로 하지 않아요. Copy Fresh Prompt를 클릭하고, AI 어시스턴트에서 이전 프롬프트를 대체한 다음 새 JSON 응답을 사용하세요.
애니메이션 ID가 목록에 없어요
복사한 프롬프트에 제공된 animationCatalog ID만 정확히 사용하라고 AI에 요청하세요. 표시 이름으로 바꾸거나 새 애니메이션 이름을 지어내면 안 돼요.
레이어가 빠졌거나 중복됐어요
AI 응답에는 제공된 모든 layerRef가 정확히 한 번씩 들어가야 해요. 해당 레이어의 모든 트랙이 "keep"이어도 마찬가지예요.
등장과 퇴장 애니메이션이 겹쳐요
퇴장이 시작되기 전에 등장을 끝내도록 AI에 요청하세요. 두 범위 모두 해당 레이어의 timeWindowSeconds 안에 있어야 해요.
JSON은 유효하지만 변경 사항이 없어요
응답이 현재 값을 유지했거나 이미 타임라인에 있는 설정을 추천한 경우예요. 다른 결과를 원하면 방향을 조정하고 새 프롬프트를 복사하세요.
내보내기 전에는 항상 배너 전체를 미리 보세요. JSON 검증은 계획이 구조적으로 안전하고 현재 타임라인과 호환되는지 확인할 뿐이며, 크리에이티브 결과는 여전히 눈으로 검토해야 해요.