여러 모델 간의 애니메이션 SVG 비교
Animated SVG comparisons between several models
핵심 요약
스케이트보드를 타는 갈매기 애니메이션 SVG 생성을 통해 여러 AI 모델의 성능을 비교했습니다.
- 모델 성능 비교 — Haiku, Sonnet, Opus, Fable, GPT, Gemini 모델의 SVG 생성 능력을 테스트함
- 애니메이션 구현 — CSS를 활용한 완벽한 루프 애니메이션 구현 여부를 평가함
- 모델별 결과 — Fable 5가 가장 상세한 묘사를 보여주었고, Gemini 3.1 Pro는 가장 부드러운 애니메이션을 구현함
- GPT 모델 한계 — GPT-5.5 및 5.6 Sol 모델은 낮은 프레임과 부자연스러운 움직임으로 기대 이하의 성능을 보임
사람들이 모델한테 어렵고 특이한 SVG 이미지를 만들어보라고 시키면서 테스트하는 걸 봤는데, 문득 이런 생각이 들더라. 난이도를 좀 더 높여서 애니메이션까지 넣고, 완벽하게 루프까지 돌게 만들라고 하면 어떨까?
Claude Code에서 Haiku 4.5, Sonnet 5, Opus 4.8, Fable 5를 전부 Max effort로 설정해서 테스트해 봤다.
Codex에서도 GPT-5.5 Sol이랑 GPT-5.5를 돌려봤는데, 둘 다 최대 사고 수준(5.5는 xhigh, 5.5 Sol은 Max)으로 설정했다.
구글의 Antigravity CLI(일명 agy)로 Gemini 3.1 Pro도 돌려봤고, 이것도 사고 수준을 high로 맞췄다.
프롬프트:
In a single .html file, create a highly detailed, realistic SVG of a seagull riding a skateboard, while holding a starfish, ready to throw it as a boomerang. It should be animated using CSS, and do a perfect loop (it should start at some point, then seagull catches the starfish from the air, throws it, and then catches it again, ready to throw, creating a prefect animated loop (it should still move forward on a skate and pushing itself forward, moving from left to right slightly, looping that move again perfectly).
결과는 전부 원샷(single shot)으로 뽑았고, 시각적 검증이랑 수정을 위해 playwright를 쓸 수 있게 환경을 갖춰놨다.
GPT-5.5만 결과를 좀 더 다듬을 기회를 주려고 추가 프롬프트를 줬는데, 별로 도움은 안 되더라.
1. Haiku 4.5
도대체 뭘 하려는 건지 이해가 안 가더라. 공중에 둥둥 떠 있고, 스케이트보드 바퀴로 보이는 것들도 제멋대로 떠다니고, 불가사리는 보이지도 않음(사실 불가사리인 것 같은 물체가 있긴 했는데, 화면 밖으로 나가버림).
https://seagull-haiku-4-5-max.pages.dev
2. Sonnet 5
Sonnet 5는 확실히 더 낫긴 한데, 불가사리가 움직이는 궤적도 그렇고 스케이트보드 탈 때 다리를 전혀 안 쓰는 것 때문에 성공이라고 부르기엔 좀 부족함. 게다가 '불가사리 던지기'를 할 때 날개가 이상하게 움직이더라.
