3D 아이콘 하나를 만들고, 자연스러운 반복 애니메이션을 붙이고, 투명 배경 Animated WebP로 내보내는 과정을 한 번에 돕는 Claude Code 스킬 3dicon이 공개됐다. 아이콘의 스타일을 먼저 정한 뒤 모션을 설명하면, 웹과 앱에 바로 쓸 수 있는 결과물을 만든다.
기본 출력은 384px이며 예제에서는 288px WebP도 만든다. 설치한 뒤 아이콘 설명과 움직임을 평범한 문장으로 적어 시작할 수 있다.
정지 아이콘에서 투명 Animated WebP까지
3dicon은 아이콘의 정지 이미지부터 만든다. 디자인을 확인한 다음 아이콘이 실제로 어떻게 움직이는지 설명하면 영상 모델이 시작 자세로 돌아오는 루프 애니메이션을 생성한다. 배경을 분리하고 반투명 가장자리를 다듬은 뒤 Animated WebP로 인코딩하고 루프를 검사한다.
- 이미지 모델이 3D 아이콘의 정지 이미지를 만든다.
- 영상 모델이 첫 프레임에서 출발해 원래 자세로 돌아오는 모션을 만든다.
- 배경 분리 단계에서 투명도를 적용하고 부드러운 가장자리를 보존한다.
- Animated WebP로 인코딩한 뒤 움직임과 루프 연결을 확인한다.
기본 마스터 이미지는 512px이고 기본 WebP 출력은 384px이다. --size 옵션으로 크기를 지정할 수 있으며 README의 stopwatch 예제는 288px, 24fps, 122프레임, 투명 배경으로 출력됐다.
같은 예제의 정지 이미지는 still.png에서 볼 수 있고, 단계별 프레임은 contact sheet로 확인할 수 있다. 전체 데모는 README 예제 MP4에서 볼 수 있다.
Claude Code에 플러그인 설치하기
3dicon은 Claude Code 플러그인 마켓플레이스를 통해 설치한다. 설치 후 스킬 폴더에서 Python 의존성을 준비하고 ffmpeg를 사용할 수 있게 PATH를 설정한다.
/plugin marketplace add samyost1/3dicon
/plugin install 3diconcd ~/.claude/skills/3dicon
pip install -r requirements.txt
cp .env.example .env환경 파일에 선택한 이미지·영상 공급자의 API 키를 넣는다. ffmpeg가 필요하고, 첫 실행 때 배경 분리 모델 약 180MB를 내려받는다. 저장소는 Claude Code용 플러그인 설치 흐름을 제공한다.
원하는 스타일과 움직임을 문장으로 설명
Claude Code에서 아이콘의 종류와 모양을 요청하면 정지 이미지부터 제안한다. 예를 들어 README는 다음과 같은 stopwatch 프롬프트를 소개한다.
a 3D stopwatch icon in sage green and cream, soft matte plastic,
rounded friendly proportions, small feet and a top button스타일을 일정하게 유지하려면 색상, 재질, 형태, 비율 같은 공통 속성을 각 아이콘 요청에 반복해 쓴다. 모션은 의성어나 분위기만 적기보다 물체가 실제로 움직이는 방식을 구체적으로 표현하면 된다.
the stopwatch rocks gently side to side while its hand sweeps steadily clockwise동작의 강도는 still, calm, lively, playful 중에서 고른다. 스킬은 움직임 유형에 맞춰 native, event, part, surface 전략을 제안하며, 필요한 모션에는 --emit 옵션도 사용할 수 있다. 아이콘의 작은 부품이나 재질 특성에 맞춰 움직임을 정하면 자연스러운 루프를 만들기 쉽다.
이미지·영상 모델과 API 키 설정
이미지 모델과 영상 모델은 각각 설정할 수 있다. 저장소 예제의 기본 이미지 백엔드는 OpenAI이고, 모션 영상은 OpenRouter의 Seedance 2.0을 사용한다. Gemini 이미지 모델이나 OpenRouter 통합 이미지 API, Seedance 2.5·Veo 3.1·Hailuo 3·Wan 2.7 등으로 바꿀 수 있다.
OpenRouter 키 하나로 이미지부터 영상까지 실행하려면 .env에 이미지 백엔드를 지정한다.
ICONLOOP_IMAGE_BACKEND=openrouter
OPENROUTER_API_KEY=your_key모델 이름을 직접 정할 때는 ICONLOOP_IMAGE_MODEL과 ICONLOOP_VIDEO_MODEL을 사용한다. 이미지 키는 선택한 이미지 백엔드에 따라 OPENAI_API_KEY, GOOGLE_API_KEY, OPENROUTER_API_KEY 중 하나를 설정하며, --via replicate 경로는 REPLICATE_API_TOKEN을 사용한다.
실행 단계별 CLI
자연어 요청 외에도 python -m iconloop로 각 단계를 따로 실행할 수 있다.
python -m iconloop --out out still \
--prompt "a 3D stopwatch, sage green and cream, soft matte plastic"
python -m iconloop --out out animate \
--motion "the stopwatch rocks gently while its hand sweeps clockwise"
python -m iconloop --out out matte
python -m iconloop --out out encode --sweep
python -m iconloop --out out encode --size 288 --name timer
python -m iconloop --out out verify예상 비용과 라이선스
저장소 안내 기준 정지 아이콘 생성은 약 $0.13, 이미지 승인 후 전체 애니메이션 파이프라인은 약 $0.48이며 약 4분이 걸린다. 실제 API 비용은 연결한 공급자와 모델 설정에 따라 달라진다.
| 항목 | 저장소 안내 기준 |
|---|---|
| 정지 이미지 한 장 | 약 $0.13 |
| 전체 애니메이션 파이프라인 | 약 $0.48 · 약 4분 |
| 라이선스 | MIT |
| GitHub 스타 | 280개 · 2026년 9월 24일 기준 |
프로젝트 코드는 MIT 라이선스로 공개됐고, 저장소 설명은 생성한 아이콘을 자유롭게 사용할 수 있다고 안내한다. 정지 이미지와 모션을 순서대로 살펴보고 원하는 스타일과 움직임을 확인한 뒤 생성 과정을 이어갈 수 있다.
제작자 Sam Yost가 공개한 데모 영상에서는 프롬프트에서 완성 애니메이션까지의 흐름을 볼 수 있다.
