Fable 5.2로 편집 가능한 SVG 일러스트와 애니메이션 만들기

Fable 5.2는 브라우저에서 편집 가능한 벡터 그림으로 표시되는 SVG 코드를 만들 수 있습니다. 이번 예제에서는 API 호출 두 번으로 그룹이 나뉜 돛단배를 만들고, 벡터 형상을 유지하면서 큰 돛의 색을 바꾸고 잔잔한 움직임을 추가했습니다. 두 파일을 내려받아 확인하고 아래 요청을 재현할 수 있습니다.

이는 코드로 시각물을 만드는 작업이며 모델이 이미지 파일을 직접 생성하는 기능과는 다릅니다. Anthropic의 Fable 5.2 사양은 입력을 텍스트와 이미지, 출력을 텍스트로 명시합니다. SVG는 도형을 설명하는 텍스트이고 브라우저나 벡터 편집기가 이를 그림으로 표시합니다. 편집이 쉽다는 장점도 있지만, 유효한 코드여야 하며 응답 성공이 보기 좋은 결과까지 보장하지는 않습니다.

2026년 11월 11일 Ofox의 Anthropic 호환 엔드포인트에서 anthropic/claude-fable-5.2, low effort, 출력 상한 8,192토큰으로 테스트했습니다. 작은 원본 일러스트 사례이며 다른 모델과의 벤치마크나 복잡한 3D 장면 테스트가 아닙니다. 이 가이드는 Ofox가 발행합니다.

실제 결과 파일 내려받기

Fable SVG 예제 모음에는 최초 SVG, 수정한 애니메이션 SVG, 실제 요청 본문, 반환 텍스트와 토큰 사용 기록, 구조 비교 자료가 들어 있습니다. API 키는 포함하지 않습니다. 원본과 수정본을 따로 보관해야 변경 내용을 확인할 수 있습니다.

실제 API 출력 파일을 영어로 된 로컬 결과 확인 화면에서 연 브라우저 스크린샷입니다. Ofox Chat 인터페이스가 아닙니다. 글의 표지는 별도의 개념 일러스트입니다.

작은 돛에 주목할 필요가 있습니다. 모델은 ‘돛을 바꾸라’는 요청을 모든 돛 모양 영역이 아니라 큰 주황색 돛에 대한 지시로 해석했습니다. 둘 다 바꾸려면 두 요소를 명시하세요. 그럴듯한 수정 결과도 실제 요청과 비교해야 하는 이유입니다.

편집할 요소를 먼저 정의하기

웹페이지용 작은 그림인지, 색을 바꿀 도식인지, 간단한 애니메이션인지 용도를 먼저 정하세요. 의미 있는 그룹 ID, 캔버스 크기, 몇 가지 제약을 요청하면 됩니다. 막연히 멋진 그림을 요구하면 결과가 쓸 만한지 판단할 기준이 부족합니다.

첫 프롬프트는 의도적으로 범위를 좁혔습니다. 테스트를 재현할 수 있도록 실제 사용한 영어 원문을 그대로 제공합니다.

Return ONLY a complete standalone SVG, no markdown. Create an original
flat vector illustration of a small orange sailboat riding three blue
waves under a pale circular sun. Canvas 800x500, viewBox 0 0 800 500.
Off-white background, charcoal outlines, orange sail, pale blue water.
Organize editable groups with IDs boat, sail, waves, sun.
Use vector paths and shapes, no raster images, no external URLs,
no scripts, no foreignObject, no animation in this first version.
Include title and desc. Keep the geometry clean and readable at 320px
width. This is a small reusable illustration, not a complex artwork;
keep SVG under 8000 characters.

이 조건들은 구체적인 검수 기준이 됩니다. 그룹은 나중에 애니메이션 대상을 지정하게 해 주고, viewBox는 확대·축소를 예측 가능하게 합니다. 외부 리소스를 제외하면 다른 컴퓨터로 파일을 옮기기 쉽습니다. 크기 제한은 불필요하게 복잡한 파일을 요청하지 않도록 하는 프롬프트 조건이며 서버가 강제하는 SVG 한도가 아닙니다.

결과는 의도적으로 단순합니다. Fable이 사진을 복원하거나 상표를 정확히 보존하거나 바로 사용할 고급 모션 그래픽을 자동 제작한다는 증거는 아닙니다. 기존 래스터 디자인을 바꾸려면 원본과의 일치가 핵심인 PNG → 편집 가능한 SVG 작업 흐름을 참고하세요.

첫 API 요청 보내기

실제로 테스트한 요청은 ZIP의 first-request.json에 있습니다. 평소 사용하는 비밀정보 관리 방식으로 셸 환경에 자신의 키를 설정하세요. JSON, 브라우저 스크립트, 스크린샷, 저장소에 커밋하는 파일에 키를 넣지 마세요.

curl --fail-with-body https://api.ofox.ai/anthropic/v1/messages \
  -H "x-api-key: $OFOX_API_KEY" \
  -H "anthropic-version: 2023-06-01" \
  -H "content-type: application/json" \
  --data-binary @first-request.json \
  -o first-response.json

주요 요청 필드는 다음과 같습니다.

{
  "model": "anthropic/claude-fable-5.2",
  "max_tokens": 8192,
  "output_config": {"effort": "low"},
  "messages": [{"role": "user", "content": "YOUR COMPLETE SVG BRIEF"}]
}

위의 짧은 JSON은 설정을 보여 주며 내려받은 요청 파일에는 전체 프롬프트가 포함됩니다. Ofox의 모델 ID는 Claude API를 직접 호출할 때 쓰는 claude-fable-5-2와 다릅니다. 공급자별 모델 이름과 기본 URL을 혼용하지 마세요. 설정 방법은 Fable 5.2 API 가이드와 Ofox Messages API 문서를 참고하세요.

사양에 따르면 Fable의 적응형 사고는 항상 활성화됩니다. Low effort는 추론 노력 수준이며 사고를 끄는 요청이 아닙니다. 이 예제에는 temperature, top_p, 강제 도구 선택을 추가하지 않았습니다. 마이그레이션한 요청에서 400이 발생하면 그림 프롬프트를 바꾸기 전에 Fable 5.2 매개변수·도구 선택 오류 해결 가이드를 확인하세요.

표시하기 전에 SVG를 추출하고 검사하기

응답은 JSON으로 전달됩니다. type이 text인 블록을 모아 SVG 마크업을 저장하세요. 전체 응답을 .svg로 저장하면 안 됩니다. 응답이 정상 종료됐는지, 닫는 </svg> 태그가 있는지 확인하세요. 출력 상한 때문에 중단된 응답은 일부 뷰어에서 그림 일부가 보여도 완성된 문서가 아닐 수 있습니다.

import json
import re
from pathlib import Path

response = json.loads(Path("first-response.json").read_text())
if response.get("stop_reason") != "end_turn":
    raise RuntimeError("Inspect the response before accepting the SVG")
text = "\n".join(block.get("text", "")
                 for block in response.get("content", [])
                 if block.get("type") == "text")
match = re.search(r"<svg\b[\s\S]*?</svg>", text)
if not match:
    raise RuntimeError("No complete SVG found")
Path("first.svg").write_text(match.group())

추출과 안전성 검사는 다릅니다. 생성된 마크업을 웹사이트에 사용하기 전에 스크립트, 이벤트 핸들러, 외부 URL, foreignObject, 포함된 이미지를 확인하세요. 이번 작은 예제에서는 실제 파일을 검사했고 그러한 활성 콘텐츠나 외부 콘텐츠를 발견하지 못했습니다. 단순한 문자열 검사만으로 모든 SVG의 안전을 보장할 수는 없습니다.

신뢰할 수 있는 출력은 브라우저에서 열고, 최종 작업이 벡터 편집기에서 이루어진다면 그 편집기에서도 확인하세요. 실루엣, 겹침 순서, 빈 공간을 살펴보세요. 이 예제의 파도는 물 위에 뜬 배처럼 선체 아래쪽을 덮습니다. XML이 유효해도 시각적 레이어 순서가 틀리거나 대상이 잘릴 수 있습니다.

수정 범위를 제한해서 요청하기

두 번째 요청에는 최초 사용자 프롬프트와 반환된 SVG를 대화 맥락으로 넣고 다음 지시를 추가했습니다. 아래 역시 실측 요청의 영어 원문입니다.

Return the complete revised SVG only. Change the sail from orange to
purple #7953A9. Preserve all geometry, group IDs and other colors.
Add gentle 6px vertical bobbing only to the boat group using internal
CSS keyframes, a 3-second loop. Include a prefers-reduced-motion: reduce
rule that disables animation. Keep the sun and waves static.
No scripts, external URLs or raster images.

두 번째 호출은 같은 엔드포인트에 revision-request.json을 보내면 재현할 수 있습니다. 이 예제는 눈에 보이는 SVG 텍스트를 다시 전달한 것입니다. 도구 호출 기록이나 숨겨진 사고 정보의 보존을 시연한 것이 아닙니다. 모델 버전 사이에서 도구 이력을 옮겨야 한다면 이 최소 대화를 그대로 적용하지 말고 Agent 모델 전환 가이드를 참고하세요.

구조 비교에서는 기존 도형과 그룹 가운데 채우기 색 하나가 바뀐 것을 확인했습니다. path 좌표, ID, 다른 도형 속성은 유지됐습니다. 모델은 접근성용 제목과 설명을 수정하고 내부 스타일 블록도 추가했습니다. 따라서 파일의 다른 모든 바이트가 동일했다고 표현하는 것보다 이 설명이 정확합니다.

애니메이션을 확인하고 정적 버전 보관하기

수정 SVG는 #boat에 CSS keyframes를 적용하여 3초 주기의 중간 지점에서 위로 6단위 이동시킵니다. 브라우저에서 두 시점의 transform 값이 달라지는 것을 관찰했고 해와 파도에는 애니메이션이 없었습니다. CSS에 동작 줄이기 규칙이 있는 것도 확인했습니다. 다만 이 테스트에서 운영체제의 해당 설정을 실제로 전환하지는 않았습니다.

움직임을 보려면 revision.svg를 직접 여세요. 스크린샷은 한 프레임만 보여 주며 PNG로 내보내도 정적인 이미지가 됩니다. 브라우저에서는 재생되지만 일부 편집기나 문서 앱은 SVG의 CSS 애니메이션을 무시합니다. 정적인 전달물이 필요하면 first.svg를 원본으로 보관하거나 수정 그림의 정적 사본을 별도로 만드세요. PowerPoint, 이메일, 디자인 도구에 삽입해도 움직임이 유지된다고 약속하면 안 됩니다.

같은 HTML 문서에 SVG를 여러 개 인라인으로 넣으면 중복 ID와 전역 CSS 선택자가 서로 영향을 줄 수 있습니다. 고유한 ID 접두사를 쓰거나 각 SVG를 이미지 리소스로 분리하세요. 예제 확인 화면은 파일을 각각 표시하므로 수정된 배의 애니메이션이 원본에 영향을 주지 않습니다.

GIF가 필요하면 프레임 시퀀스를 캡처하거나 렌더링한 뒤 별도로 인코딩하세요. SVG 애니메이션과 내보낸 GIF는 형식과 장단점이 다릅니다. 프레임 타이밍과 출력 검사는 GIF 작업 흐름 가이드를 참고하세요. SVG 확장자만 바꾸는 방식은 작동하지 않습니다.

두 번의 호출 비용과 확인할 수 있는 범위

이 추정치는 11월 11일 Ofox 카탈로그의 입력 토큰당 $0.000008, 출력 토큰당 $0.00004를 사용합니다. 응답의 캐시 카운터는 0이었습니다. 계산식은 입력 토큰 × 입력 단가 + 출력 토큰 × 출력 단가이며 계정에서 최종 차감된 금액을 확인한 것은 아닙니다. 요청 시간에는 관찰한 왕복 시간이 포함되며 일반적인 속도 벤치마크가 아닙니다. 그림의 복잡도, 대화 길이, 재시도 횟수에 따라 시간과 비용은 달라질 수 있습니다.

확인된 결론은 제한적입니다. 이 경로와 이 요청에서 유효한 그룹형 벡터 그림과 범위를 통제한 애니메이션 수정본을 얻었습니다. 광범위한 예술적 우위나 성공률을 입증하지는 않습니다. 가치가 있는 것은 직접 검사할 수 있는 파일과 재현 가능한 작업 방법입니다.

대화로 작업하고 싶다면 Ofox Chat에서 시작하면서 SVG 출력, 편집 가능한 그룹, 정확한 수정 범위를 지정하세요. 이 글은 API로 테스트했습니다. 특정 Chat 모드가 Fable 5.2를 선택하거나 이 API 매개변수를 제공하는지는 검증하지 않았습니다. 모델별 결과를 재현해야 한다면 API 작업 흐름을 사용하세요.