Motion Studio
그림판처럼 그려서 → 파츠별로 움직이고 → GIF, SVG, 링크로 공유
캐릭터 0 효과 0 배경 —
피벗(회전축)으로 쓸 위치를 무대에서 클릭하세요
사용 가이드

워크플로우

  1. 그리기 도구로 무대에 직접 그리기, 몸통과 머리처럼 파츠별로 나눠 그리세요
  2. [파츠 완성]을 누르면 이름을 짓고 스윙, 맥동 같은 움직임 효과를 그 자리에서 붙일 수 있어요
  3. 왼쪽 레일에서 캐릭터, 배경, 꾸미기를 추가해 장면 꾸미기
  4. 왼쪽 패널의 무빙 & 자세에서 캐릭터 전체의 이동 패턴(둥실둥실/지그재그/원형…)과 기울기 지정
  5. [내보내기] 한 곳에서 링크 복사, GIF(카카오 이모티콘 360×360 규격)와 움직이는 SVG, WebM 저장까지
  6. 자동 저장(이 브라우저), [내 컴퓨터에 저장](.json)에 더해 내보낸 SVG 파일 자체가 프로젝트 파일이라 다시 열면 이어서 편집됩니다

내 리소스 추가

  • SVG 캐릭터/배경/효과: sample/custom.js에 예시(🦐) 복사, 수정 → F5
  • 손그림 PNG 파츠: fish-preview.html (그리기 규칙 docs/04)
  • 무대 아래 JSON 에디터에서 로드된 리소스 파일 내용 열람 가능
  • 인스펙터 탭에서 선택 캐릭터에 실제 적용되는 함수와 설정값, SVG를 실시간 열람 (읽기 전용)

불러온 리소스

애니메이션 타입

  • sway 회전 / bob 상하 / driftx 좌우 / pulse 맥동 / spin 연속회전 / glow 반짝임 / eyes_* 깜빡임
  • 파츠 공통: 기본 각도(포즈), 위치 이동, 색상 교체, 숨기기
  • 캐릭터 공통: 무빙 패턴 7종, 이동 속도와 범위, 기울기, 투명도, 크기, 반전