모션 스튜디오 기능 전부

그리기 도구 13종

무대 위 툴바 첫 줄. 버튼을 누르거나 단축키를 치면 곧바로 그리기로 들어갑니다.

툴바 둘째 줄은 그리기 옵션입니다. 겹친 색 스와치(앞=선, 뒤=채움 — 좌클릭은 선 색, 우클릭은 채움 색), 빠른 색 6종과 커스텀 피커, 굵기 1~24, 스무딩 켜고 끄기. 모눈(G)·십자선(X)·격자 스냅(N)도 여기서 켭니다.

무대 조작

• 클릭 = 조각 고르기 / 드래그 = 고른 조각 옮기기. 같은 캐릭터 위라면 어디를 잡아도 고른 조각이 따라옵니다.
• Shift+클릭으로 여러 조각 고르기, 빈 곳 드래그로 사각형 범위 선택.
• 우클릭 메뉴 — 움직임 고르기·이름 바꾸기·조각 복제·좌우 반전·숨기기·삭제, 캐릭터 복제·맨 앞으로·삭제. 빈 무대에서는 붙여넣기·전체 선택·새 캐릭터 그리기.
• 리사이즈 핸들 4방위로 캐릭터 크기 조절, 회전 중심(피벗) 찍기로 회전축 지정.
• 왼쪽 계층 트리(무대 → 캐릭터 → 조각)에서 이름으로 고르기, 더블클릭 이름 변경, 드래그로 순서 바꾸기, 👁로 숨기기. 조각마다 미니 썸네일이 붙습니다.
• 무대 크기는 45~100%로 조절되고(우하단 드래그 핸들로도 됩니다), 깜빡임 주기 1.5~6초와 클릭 사운드는 우측 무대 설정에 있습니다.

조각 움직임 21종

고른 조각 하나에 붙이는 움직임입니다. 버튼의 아이콘이 제 이름대로 실제로 움직이므로 눌러 보지 않아도 알 수 있습니다.

움직임마다 흔드는 크기·움직이는 거리·세기·동작 시간·시작 늦추기·가장 작게/가장 크게·회전 중심을 슬라이더로 다듬습니다. 여러 조각에 같은 움직임을 주고 시작 늦추기만 조금씩 어긋내면 꼬리가 물결치는 체인 웨이브가 됩니다.

이동 패턴 14종

캐릭터 전체가 무대 위를 어떻게 돌아다닐지 정합니다. 칩 그리드에서 고르며, 아이콘이 실제로 그 패턴대로 움직입니다.

공통 조절값은 이동 속도 0.2~3, 움직이는 폭 0.2~2.2, 이동 방향 자동 반전입니다. 경로 따라는 무대에 직접 선을 그리면 캐릭터가 그 선을 타고 가는 방식으로, 그린 경로가 무대에 계속 표시되고 멈춤 지점을 최대 8개까지 찍을 수 있습니다. 속도 변화(일정/부드럽게)와 반복(계속/갔다 오기)도 고릅니다. 캐릭터 기울기 -180~180°, 캐릭터 투명도 0.15~1도 여기서 조절합니다.

프레임 타임라인

무대 바로 아래에 항상 열려 있는 바입니다. 같은 그림을 여러 장 만들어 조금씩 다르게 두는, 이른바 프레임 애니메이션을 여기서 만듭니다.

• [프레임 애니]를 켜면 현재 자세 그대로 2장이 만들어지고 2번 프레임 편집으로 들어갑니다.
• 프레임은 최대 12장, 프레임당 지속 시간은 50~2000밀리초. 총 길이가 "총 1.0초 · 2프레임"처럼 표시됩니다.
• 필름 스트립 카드마다 그 프레임을 실제로 그린 미니 썸네일이 붙고, 드래그로 순서를 바꾸며 카드의 ＋로 바로 뒤에 복제합니다.
• 편집 중에는 어니언 스킨(직전 프레임 잔상)이 깔립니다.
• [움직임 굽기] — 조각에 붙인 움직임을 프레임 자세로 구워 넣습니다. 회전·평행이동 계열 10종(살랑살랑·위아래·좌우로·꿈틀꿈틀·펄럭펄럭·파르르·시소·끄덕끄덕·도리도리·폴짝)이 대상이고, 프레임 시간도 원래 한 주기에 맞춰 다시 나눕니다. 되돌리기 한 번으로 통째로 취소됩니다.
• 왼쪽에는 재생 토글과 재생 속도 0.25~2배 조절이 있습니다.

프레임 추가·삭제·순서·지속 시간은 무대의 모든 캐릭터에 함께 적용됩니다. 캐릭터마다 프레임 수가 다르면 내보낸 파일에서 움직임이 어긋나기 때문입니다.

문구·색 편집

• 문구 — 무대의 글자를 더블클릭하면 오버레이 편집기(내용·크기·굵게·기울임·밑줄·삭제)가 열리고, 우측 패널에서도 같은 값을 인라인으로 고칩니다.
• 색 — 조각에 실제로 쓰인 색이 행으로 나열됩니다. 행을 고르고 26색 팔레트를 누르면 같은 색 전체가 한 번에 바뀝니다. 원본은 그대로 남고 되돌리기도 됩니다.
• 한 조각 안에서 색을 나누는 방법은 세 가지 — ＋ 채움 색으로 채움색을 새로 주기, 페인트로 획 하나만 바꾸기, 다른 색으로 획을 더 그리기.
• PNG 이미지로 된 조각은 색 교체가 되지 않습니다(직접 그린 획만 가능).

저장 · 공유 · 내보내기

• 저장 — 장면을 .json 파일로 내 컴퓨터에 저장하고, .json이나 .svg 파일을 열어 이어서 작업합니다.
• 내보낸 SVG가 곧 프로젝트 파일 — 장면 데이터가 파일 안에 함께 들어가므로, 내보낸 SVG를 다시 열면 편집을 이어갈 수 있습니다.
• 움직이는 SVG 내보내기 — 애니메이션이 살아 있는 한 장의 벡터 파일. 화질 손실이 없어 블로그·문서에 그대로 붙입니다.
• GIF 내보내기 — 자체 인코더로 만듭니다. 크기·길이·배경(투명/포함)을 고르고, 무한 반복 GIF로 저장합니다. 결과 화면에서 정지 PNG로 복사할 수도 있습니다.
• 공유 링크 — 장면을 압축해 주소 하나에 담습니다. 링크를 받은 사람은 설치·가입 없이 같은 장면을 열어 이어 편집합니다. 서버 업로드가 없습니다.
• JSON 에디터 드로어 — 장면 데이터를 실시간 양방향으로 편집하고, 적용 중인 설정과 리소스 파일을 열어 봅니다.

이모티콘 팩 스튜디오

여러 컷을 규격에 맞춰 모으고 검증해 내려받는 별도 화면입니다. 규격 5종(360×360 WEBP 24컷 · 360×360 PNG 32컷 · 270×270 APNG 스티커 · 740×640 GIF · 128×128 서버 이모지)을 지원하며, 규격을 고르면 컷 수·크기·형식이 자동으로 따라옵니다.

• 팩을 여러 개 만들어 두고 오갈 수 있고, 진행률과 다음 할 일이 화면에 계속 표시됩니다.
• 24컷 감정 스타터(안녕·좋아요·사랑해·축하해·고마워·미안해·웃음·폭소·눈물·엉엉·화남·삐짐·놀람·부끄·궁금·졸려·잘자·굿모닝·밥먹자·화이팅·OK·NO·부탁해·최고)와 8컷 스타터가 컷 이름과 연출 힌트까지 채워 줍니다.
• 컷 [그리기] → 에디터에서 그리기 → [저장하고 팩으로]로 왕복합니다.
• 컷마다 속도 0.25~3배 · 움직임 강도 0~2배 · 초당 프레임(8·10·12·15·20·24) · 길이(0.5~4초) · 반복 횟수를 조절하고 그 자리에서 미리 봅니다.
• 컷에 문구를 얹으면 모든 프레임에 굵은 글씨와 흰 외곽선으로 합성됩니다(크기·색·세로 위치 조절).
• 규격 검증이 실제 크기로 렌더해 용량·프레임 수를 재고 컷마다 통과 배지를 붙입니다. 통과하면 파일명까지 정리된 제안 파일 ZIP을 받습니다.

규격별 상세 수치는 이모티콘 규격 한눈에에 정리해 두었습니다.

단축키

입력칸에 커서가 있을 때는 도구 단축키와 Delete가 무시됩니다. 이름을 타이핑하다가 도구가 바뀌는 일은 없습니다.

함께 들어 있는 리소스

• 샘플 캐릭터 7종 — 동글이 🐠(20조각) · 해파리 🪼(20) · 모닥불 🔥(13) · 찹쌀 🐹(22) · 몽글 🐶(21) · 새콤 🐸(20) · 르네 🦎(70조각 쇼케이스). 무대에 올려 그대로 쓰거나, 뜯어보며 조각을 어떻게 나누는지 배울 수 있습니다.
• 완성 장면 5종 — 빈 무대 · 외쳐! · 몽글 산책 · 새콤 폴짝 · 르네 나무타기. 클릭하면 장면이 통째로 열립니다.
• 배경 9종·효과 9종(거품·빛줄기·반짝임·반딧불·눈·꽃잎·하트비 등)과 사운드는 엔진에 그대로 살아 있어 기존 장면과 공유 링크에서 계속 재생됩니다. 다만 이모티콘 제작에 집중하려고 고르는 탭은 감춰 두었습니다 — 이모티콘은 투명 배경으로 나가기 때문입니다.
• 사용자 확장 — sample/custom.js에 캐릭터 정의를 추가하면 목록에 함께 뜹니다.