로컬 Qwen 3.6과 최신 모델들의 코딩 성능 비교: 단일 파일 HTML 캔버스 애니메이션 구현 결과 및 GIF
핵심 요약
로컬 LLM과 최신 모델들을 대상으로 단일 HTML 파일 캔버스 애니메이션 구현 성능을 비교한 실험 결과입니다.
- 실험 목적 — 단일 파일 HTML 캔버스 애니메이션을 통해 로컬 모델과 최신 모델의 코딩 성능을 비교함.
- 테스트 모델 — Qwen 3.6 시리즈를 포함한 로컬 모델들과 Perplexity를 통한 최신 모델들을 비교함.
- 평가 기준 — 파라락스 효과, 바퀴 회전, 차체 움직임 등 시각적 완성도와 자연스러운 루핑 애니메이션을 중점적으로 평가함.
- 주요 결과 — Kimi k2.6이 가장 뛰어난 시각적 결과를 보였으며, 로컬 27B 모델도 기대 이상의 성능을 발휘함.
최근 이 포스트에서 코딩 기본 작업에 대한 Qwen 3.6 변형 모델들을 비교하는 것을 보고, 로컬 양자화 모델들이 비슷한 밀도의 단일 파일 코딩 작업에서 최신 모델들과 어떻게 비교되는지 확인해보고 싶었습니다. 저는 Perplexity 구독을 통해 접근한 로컬 모델과 웹 기반 모델들에 동일한 프롬프트를 실행했습니다.
프롬프트
"라이브러리 없이 전체 페이지 캔버스를 사용하는 단일 HTML 파일을 작성하세요. 움직이는 자동차의 현실적인 측면 모습을 메인 주제로 시뮬레이션하세요. 자동차가 전진하는 느낌을 주기 위해 배경 풍경이 계속 스크롤되는 동안 자동차는 전경에 계속 보이게 하세요. 깊이감을 위해 층별 풍경을 사용하세요: 가까운 지면, 길가 요소, 나무, 기둥, 먼 언덕이나 산은 자연스러운 파라락스 효과를 위해 서로 다른 속도로 움직여야 합니다. 바퀴가 현실적으로 회전하도록 애니메이션을 넣고, 자동차가 도로와 연결된 느낌을 주도록 미세한 차체 움직임을 추가하세요. 주변 환경이 자동차 뒤로 부드럽게 지나가게 하고, 반복적이면서도 다양하게 구성하여 움직임이 믿을 만하게 느껴지도록 하세요. 분위기를 향상시키기 위해 일몰, 황혼, 낮과 같은 영화 같은 조명과 응집력 있는 하늘을 사용하세요. 전체적인 움직임은 차분하고 몰입감 있으며 현실적이어야 하며, 매끄럽게 루핑되는 애니메이션이어야 합니다."
테스트한 모델
최신 모델 (Perplexity를 통한 웹 기반, tok/s 측정 안 함):
- Claude sonnet 4.6 Thinking — 추론을 위해 인터넷 사용
- Gemini 3.1 Pro Thinking
- GPT 5.4 Thinking
- Kimi k2.6 Thinking
로컬 모델 (Ryzen 5 5600, 24 GB DDR4-3200, RX 5700 XT 8GB):
- Qwen3.5 9B Q4_K_M — ~50 tok/s
- Qwen3.6-27B (Claude-opus-reasoning-distilled) Q4_K_M — 2.65 tok/s
- Qwen3.6-27B Q4_K_M — 2.70 tok/s
- Qwen3.6-35B A3B Q4_K_M — 12.13 tok/s
- Gemma-4-31b-it — 1.91 tok/s
- Qwen3.5 4B Q8 — 60 tok/s — 추론을 위해 인터넷 사용
- Qwen3.5 4B Q4_K_M — 80 tok/s — 추론을 위해 인터넷 사용
확인한 점
현실적인 측면 주행 애니메이션: 층별 파라락스 풍경, 회전하는 바퀴, 미세한 차체 움직임, 응집력 있는 하늘과 조명, 매끄러운 루핑 — 모두 라이브러리 없는 순수 JS/캔버스 사용.
이 특정 작업에 대한 주관적 순위
- Kimi k2.6 Thinking — 전반적으로 가장 깔끔한 시각적 결과
- Qwen3.6-27B Q4_K_M (로컬) — 예상보다 강력함; 좋은 파라락스와 도로 느낌
- Qwen3.6-27B Claude-opus-reasoning-distilled — 근소한 차이로 3위
