line-art-animation의 개요
line-art-animation은 저장소 하나에 두 가지가 들어 있습니다. 스킬(SKILL.md와 참고 가이드 여섯 개)은 브라우저에서 움직이는 선화 애니메이션을 만드는 방법을 Claude에게 알려 줍니다. 라이브러리를 프로젝트에 복사하고, 인물 하나를 보여 승인을 받고, 움직임을 프레임 단위로 확인하는 방식입니다. 라이브러리는 의존성 없는 TypeScript 모듈 네 개입니다. 펜 선을 그리는 기본 요소인 ink.ts, 걷기와 달리기를 푸는 gait.ts, 스프링, 진자, 바람을 다루는 motion.ts, 시간대별 색상표인 daynight.ts입니다.
예제가 두 개 들어 있습니다. 클릭하면 모자를 들어 인사하는 약 150줄짜리 걷는 남자, 그리고 일정에 따라 움직이는 주민, 고양이, 새, 뱃사공이 있고 열두어 가지 상호작용이 있는 운하 옆 일본 거리입니다. 캡처 스크립트가 헤드리스 Chrome을 한 프레임씩 움직이고 FFmpeg가 프레임을 영상으로 만듭니다. 참고 클립을 측정해 타이밍을 맞추는 스크립트도 있습니다.
저장소는 MIT 라이선스이며, 예제를 돌리려면 Node 22.18 이상이 필요하고, 2026년 11월 10일에 커밋 하나로 공개됐습니다.
line-art-animation, 쓸 만한 가치가 있습니까?
대부분의 애니메이션 스킬은 모델에게 스타일 가이드를 주고 잘되길 바랍니다. 이 스킬은 물리적인 답을 줍니다. 보행 솔버는 다리를 키프레임으로 움직이지 않고 계산으로 풉니다. 땅을 디딘 발은 정확히 이동 속도로 뒤로 미끄러지고, 내딛는 발은 저크가 최소인 궤적을 따르며, 뒤꿈치가 발끝보다 먼저 들리고, 엉덩이 높이는 다리가 닿는 범위에서 정해지므로 몸이 걸음마다 올라갑니다. 코트와 기모노는 무릎 주위에 그려져 보폭에 맞춰 벌어집니다. 그래서 예제가 보간한 그림이 아니라 먹으로 그린 그림처럼 보입니다.
작업 방식도 합리적입니다. Claude는 장면을 만들기 전에 인물 하나를 보여 승인을 받고, 넘기기 전에 움직임을 프레임 단위로 검증하라는 지시를 받습니다. 영상 캡처는 스크린숏 한 장마다 장면을 정확히 한 프레임씩 진행하므로 30초짜리 1080p 렌더링이 느린 노트북에서도 빠른 노트북과 똑같이 나옵니다. 문서는 소셜 클립 대부분이 가변 프레임레이트라서 시간 기준으로 다시 샘플링해야 하는 이유도 설명합니다.
주의할 점: 이것은 2026년 11월 10일 커밋 하나뿐이고, 이 리뷰보다 나흘 앞섭니다. 스타 727개, 포크 118개에 유지 관리를 판단할 이력이 없습니다. npm 패키지가 없고 스킬이 lib/를 프로젝트에 복사하므로, 원본의 수정 사항이 전달되지 않습니다. 또 스타일은 하나, 종이에 먹선과 낮밤 변화뿐입니다. 모션 그래픽, 제품 홍보 영상, 선화 인물이 아닌 것에는 Motionmaxxing이나 Bang Motion이 더 맞습니다.
결론: 랜딩 페이지에 살아 있는 일러스트, 걷는 인물이나 해 질 녘 작은 마을을 넣고 싶은 프런트엔드 개발자라면, 범용 애니메이션 라이브러리보다 이것으로 오후 한나절에 더 멀리 갑니다. lib/는 이제 내 것이 된 코드로 다루십시오.
제 역할을 하는 곳
작은 디자인 스튜디오의 프런트엔드 개발자
포트폴리오 사이트 헤더에 클릭에 반응하며 걷는 먹선 인물 넣기
스킬을 ~/.claude/skills에 클론하고 Claude에게 인물을 요청한 뒤 첫 포즈를 승인합니다. 걷는 남자 예제가 약 150줄로 패턴을 보여 주며, 비용은 Claude 요금제입니다.
빵집의 웹 개발자
가게 홈페이지에 제빵사와 오븐이 있는 새벽 장면을 반복 재생으로 만들 기
낮밤 변화가 있는 장면을 요청합니다. daynight.ts가 시간대에 따라 먹과 종이 색을 바꾸고 밤에는 창문에 불을 켭니다. 브라우저에서 SVG로 실시간 동작하므로 어느 화면에서나 선명합니다.
고객의 참고 영상에 맞춰야 하는 모션 디자이너
소셜 클립의 걷기 동작을 선화로 재현해 1080p 영상으로 내보내기
clip.ts로 반복 길이와 발 위치를 재고, Claude가 걸음을 맞추게 한 뒤, 캡처 스크립트로 900프레임을 찍어 FFmpeg로 인코딩합니다.
도입 전 확인할 점
- 설정
- 저장소를 ~/.claude/skills/line-art-animation 또는 프로젝트의 .claude/skills 폴더에 git clone합니다. Node 22.18 이상에서 npm install과 npm run dev로 예제를 봅니다.
- 연동
- 스킬을 통한 Claude Code, 예제용 Vite, 영상용 DevTools 프로토콜 기반 헤드리스 Chrome과 FFmpeg.
- 데이터와 개인정보
- 모든 것이 로컬에서 돌아갑니다. 내 컴퓨터 밖으로 나가는 것은 Claude에 보내는 내용뿐이며, 첨부한 참고 클립도 포함됩니다.
- 제한
- 인물은 높이 약 95단위의 고정된 공간에 그려짐, 먹 스타일 하나, 캡처에 로컬 Chrome 또는 Chromium 필요, 공개 패키지와 릴리스 없음.
좋은 점
- 보행 솔버가 키프레임 없이 땅을 딛는 발과 자연스러운 상하 움직임을 만듦
- 라이브러리는 런타임 의존성 없는 TypeScript 모듈 네 개
- 장면 전체를 만들기 전에 인물 하나로 승인받는 단계
- 결정적 프레임 캡처로 재현 가능한 영상 렌더링
- 참고 클립의 타이밍을 맞추는 도구
아쉬운 점
- 커밋 하나뿐이고 리뷰 시점에 나흘 됨
- 시각 스타일은 먹 선화 하나
- 패키지가 없어 복사한 코드에 원본 수정이 반영되지 않음
- 영상 렌더링에 로컬 Chrome과 FFmpeg 필요
추천 대상
Claude Code를 쓰면서 웹 페이지에 손그림 느낌의 인터랙티브 SVG 인물이나 장면을 넣고 싶은 프런트엔드 개발자와 디자이너.
line-art-animation 대안
line-art-animation: 자주 묻는 질문
- line-art-animation, 쓸 만한 가치가 있습니까?
- 보기 드물게 진짜 공학이 받쳐 주는 애니메이션 스킬이고 특히 보행 솔버가 뛰어나지만, 나온 지 나흘이고 만들 수 있는 모양은 한 가지뿐입니다. 평점은 5점 만점에 3.6점입니다.
- line-art-animation의 가격은 얼마입니까?
- MIT로 무료입니다. 스킬 사용에는 Claude 요금제 비용이 들고, 영상 렌더링에는 로컬 Chrome과 FFmpeg가 필요합니다.
- line-art-animation의 단점은 무엇입니까?
- 커밋 하나뿐이고 리뷰 시점에 나흘 됨; 시각 스타일은 먹 선화 하나; 패키지가 없어 복사한 코드에 원본 수정이 반영되지 않음; 영상 렌더링에 로컬 Chrome과 FFmpeg 필요.
- line-art-animation에 적합한 사람은 누구입니까?
- Claude Code를 쓰면서 웹 페이지에 손그림 느낌의 인터랙티브 SVG 인물이나 장면을 넣고 싶은 프런트엔드 개발자와 디자이너.
- line-art-animation에 회사 데이터를 맡겨도 안전합니까?
- 모든 것이 로컬에서 돌아갑니다. 내 컴퓨터 밖으로 나가는 것은 Claude에 보내는 내용뿐이며, 첨부한 참고 클립도 포함됩니다.
- line-art-animation의 가장 좋은 대안은 무엇입니까?
- 저희가 리뷰한 것 중 가장 가까운 대안은 motionmaxxing, Bang Motion 및 reanimate입니다.
답변 확인일: 2026년 11월 14일.