움직이는 이모티콘은 ① 캐릭터를 조각으로 나눠 그리고 ② 조각마다 움직임을 붙이고 ③ 프레임을 이어붙이고 ④ 컷을 모아 팩을 만들고 ⑤ 규격을 검증해 내보내는 다섯 단계로 완성됩니다. 모션 스튜디오는 이 다섯 단계를 브라우저 한 곳에서 끝냅니다. 설치할 프로그램도, 만들 계정도 없습니다.
포토샵이나 애프터이펙트를 배우지 않아도 됩니다. 그림판을 써 봤다면 그대로 시작할 수 있어요. 아래 순서는 실제 화면에 있는 버튼 이름 그대로 적었으니, 에디터를 옆에 띄워 두고 한 줄씩 따라오시면 됩니다.
준비물 — 브라우저 하나. 마우스로도 되고, 태블릿 펜이나 손가락으로도 그립니다. 그린 그림은 서버로 올라가지 않고 브라우저 안에서만 처리되며, 저장은 파일(.json)이나 링크 하나로 합니다.
걸리는 시간 — 처음 한 컷을 완성하는 데 보통 10~20분. 캐릭터를 한 번 만들어 두면 두 번째 컷부터는 자세만 바꾸면 되므로 훨씬 빨라집니다.
움직이는 이모티콘과 멈춘 그림의 차이는 딱 하나입니다. 따로 움직일 부분이 따로 그려져 있느냐. 그래서 첫 단계는 예쁘게 그리는 게 아니라 나누어 그리는 것입니다. 머리·몸통·왼팔·오른팔·눈처럼 나중에 흔들거나 깜빡일 부분은 각각 다른 조각으로 그려 두세요. 몸통과 팔을 한 획으로 이어 그리면 팔만 흔드는 일이 영영 불가능해집니다.
에디터를 열면 곧바로 그리기 상태입니다. 빈 무대를 클릭하면 펜이 자동으로 잡히고, 무대 위 툴바에는 도구 13종이 있습니다. 손·선택에 더해 펜·브러쉬·직선·타원·사각형·텍스트·페인트·지우개·그라디언트·에어브러시·스포이드 열한 가지입니다. 쉽게 그리기 쪽에 무게를 둔 도구들이라, 펜은 손떨림을 매끈한 곡선으로 정리해 주고 브러쉬는 손이 빨라질수록 선이 가늘어집니다. 볼터치나 그림자는 에어브러시가 편합니다.
무대에서 클릭은 조각 고르기, 드래그는 고른 조각 옮기기입니다. 덮여 있는 조각도 왼쪽 레이어 트리에서 이름으로 고를 수 있고, 조각 위에서 우클릭하면 이름 바꾸기·복제·좌우 반전·숨기기가 바로 나옵니다. 잘못했으면 Ctrl+Z로 20단계까지 되돌아갑니다.
조각을 고르면 오른쪽 패널이 그 조각을 가리킵니다. 🎬 조각 움직임 그룹에는 움직임 21종이 성격별 여섯 묶음(잔잔·흔들기·콩콩·고개와 몸짓·회전과 맥동·눈)으로 깔려 있고, 버튼의 아이콘이 제 이름대로 실제로 움직이기 때문에 눌러 보지 않아도 어떤 움직임인지 보입니다. 살랑살랑·시소·꿈틀꿈틀·파르르·펄럭펄럭·끄덕끄덕·도리도리·두근두근·빙글빙글 같은 이름 그대로입니다.
움직임을 고르면 무대에서 곧바로 움직이기 시작합니다. 흔드는 크기·움직이는 거리·세기·동작 시간·시작 늦추기 같은 값은 아래 슬라이더로 다듬습니다. 회전이 어색하면 회전 중심(피벗)을 어깨 위치로 찍어 주세요. 팔이 어깨에서 돌기 시작하면 손그림이 갑자기 캐릭터처럼 보입니다.
조각이 아니라 캐릭터 전체를 움직이려면 조각 선택을 풀고 이동 그리드에서 패턴 14종 중 하나를 고릅니다. 제자리·부르르 떨기·둥실둥실·파도타기·하늘로 둥둥·좌우 왕복·지그재그·쌩쌩 대시·통통 튀기·그네 타기·작게 맴돌기·크게 맴돌기·흘러가기, 그리고 경로 따라입니다. 경로 따라는 무대에 직접 선을 그리면 캐릭터가 그 선을 타고 갑니다. 그린 경로는 무대에 계속 보이고 멈춤 지점도 최대 8개까지 찍을 수 있습니다.
여기가 손그림 애니메이션이 되는 자리입니다. 무대 바로 아래 프레임 타임라인이 항상 열려 있습니다. 캐릭터를 고르고 [프레임 애니]를 켜면 지금 자세 그대로 2장이 만들어지고 2번 프레임 편집으로 들어갑니다. 여기서 팔을 조금만 올려 두면, 재생했을 때 팔이 오르내립니다. 같은 그림을 여러 장 두고 조금씩만 다르게 두는 것 — 프레임 애니메이션의 전부가 이것입니다.
②에서 붙인 움직임을 프레임 자세로 구워 넣는 버튼입니다. 회전·평행이동 계열 10종(살랑살랑·위아래·좌우로·꿈틀꿈틀·펄럭펄럭·파르르·시소·끄덕끄덕·도리도리·폴짝)을 프레임 수만큼 등간격으로 샘플링해 각 프레임 자세에 더하고, 구운 조각의 움직임은 끕니다. 프레임 시간도 원래 한 주기에 맞춰 다시 나눠 줍니다. 여기서부터는 프레임을 손으로 다듬어 원하는 만큼 과장할 수 있습니다. 마음에 안 들면 Ctrl+Z 한 번으로 통째로 되돌아갑니다.
프레임 경계(추가·삭제·순서·지속 시간)는 무대의 모든 캐릭터에 함께 적용됩니다. 캐릭터마다 프레임 수가 다르면 내보낸 파일에서 두 움직임이 영영 어긋나기 때문입니다.
이모티콘은 한 장으로 끝나지 않습니다. 마켓에 제안하려면 같은 캐릭터의 여러 표정·동작을 정해진 개수만큼 모아야 합니다. 그 관리를 이모티콘 팩 스튜디오가 맡습니다. 규격을 고르면 컷 수·크기·형식이 자동으로 따라오고, 어떤 컷이 비었는지 진행률로 보여 줍니다.
마지막은 숫자 싸움입니다. 캔버스 크기, 컷 수, 파일 하나당 용량, 프레임 수, 재생 길이 — 하나라도 어긋나면 업로드 단계에서 막힙니다. 하단 [규격 검증]을 누르면 화면에 보이는 미리보기가 아니라 실제 규격 그대로 렌더해서 바이트 수와 프레임 수를 재고, 통과·실패 배지를 컷 위에 바로 붙여 줍니다. 어느 컷이 걸렸는지 리포트를 열지 않아도 보입니다.
한 장짜리로 충분하다면 팩까지 갈 것 없이 에디터의 내보내기에서 움직이는 SVG(무손실이고 다시 열어 편집됨)나 GIF(투명 배경·무한 반복)로 바로 저장해도 됩니다. 링크 하나로 장면을 통째로 공유할 수도 있습니다.
처음 쓰는 분이 가장 자주 멈추는 세 지점입니다.
재생이 꺼져 있을 때입니다. 프레임 타임라인 왼쪽의 ▶ 버튼이 재생 스위치입니다. 이동 패턴을 고를 때는 재생이 자동으로 켜지지만, 자세를 손보는 중에는 일부러 멈춰 두기도 하니 한 번 확인해 보세요.
무대에서 클릭은 고르기, 드래그는 이미 고른 조각 옮기기입니다. 뒤에 덮인 조각은 왼쪽 레이어 트리에서 이름으로 고르는 편이 확실합니다. 트리에서는 Ctrl+클릭으로 여러 개, Shift+클릭으로 범위를 고를 수 있습니다.
초당 프레임을 12에서 8~10으로, 길이를 1.5초에서 1초로 줄이는 것이 가장 효과가 큽니다. 그다음이 색 수를 줄이는 것(단색 면이 많을수록 작아집니다)이고, 배경을 투명하게 두는 것도 도움이 됩니다. 규격별 상한은 이모티콘 규격 한눈에에 정리해 두었습니다.
다섯 단계를 다 읽으셨다면, 이제 첫 조각을 그릴 차례입니다.
그리기 시작하기 →