움직이는 캐릭터, 코드 한 줄 없이 브라우저에서 완성하세요

주요 기능

SVG 애니메이션 메이커로서 Motion Studio가 제공하는 핵심 기능입니다.

무엇을 위한 도구인가

그림 도구와 이모티콘 규격 사이에는 늘 빈자리가 있었습니다. 그 자리를 메우려고 만든 도구입니다.

이모티콘 한 벌을 만들려면 보통 세 곳을 오갑니다. 그림은 그리기 프로그램에서 그리고, 움직임과 파일 변환은 다른 변환기에 맡기고, 크기·용량·컷 수가 맞는지는 접수처 공지를 열어 확인합니다. 내보내고 옮기고 다시 재는 왕복이 실제 작업 시간의 상당 부분을 잡아먹는 데다, 마지막 단계에서 수치 하나가 어긋나면 앞으로 돌아가 다시 뽑아야 합니다.

그래서 세 가지를 한 페이지 안에 두었습니다. 그린 자리에서 바로 움직임이 붙고, 같은 화면에서 내보낼 파일과 똑같은 조건으로 미리 뽑아 용량과 프레임 수를 재고, 기준을 넘지 않은 결과만 파일명까지 정리된 묶음으로 받습니다. 중간에 파일을 다른 프로그램으로 옮기는 단계가 없습니다. 만드는 사람이 규격 표를 외우지 않아도 되게 하는 것 — 이 도구가 노리는 건 그 하나입니다.

그림 실력이나 장비를 요구하지도 않습니다. 마우스와 브라우저 하나로 시작해서, 마지막에 나오는 파일이 곧바로 접수 가능한 규격이면 됩니다. 그 사이를 짧게 만드는 것이 이 도구가 하는 일 전부입니다.

세 가지 원칙

기능을 넣을지 말지 망설일 때마다 이 셋을 기준으로 정했습니다. 셋 모두 얻는 것과 잃는 것이 함께 있습니다.

어떻게 만들었나

코드 쪽이 궁금한 분을 위한 항목입니다. 쓰는 데는 몰라도 됩니다.

• 정적 파일만 서빙합니다. 백엔드도, 프레임워크 런타임도, 데이터베이스도 없습니다. 손으로 쓴 HTML·CSS·JavaScript 파일이 그대로 올라가므로 빌드 산출물이 곧 배포물입니다. 원격 호출이 있어야만 열리는 경로가 없으니, 어느 서비스가 멈춰서 도구가 안 열리는 일도 없습니다.
• GIF·APNG·애니메이션 WebP 인코더를 직접 구현했습니다. 외부 인코딩 라이브러리를 쓰지 않고 컨테이너 규격을 그대로 씁니다. js/85-gif.js는 GIF89a를 median-cut 색 양자화와 LZW 압축까지 손으로 써서 만들고(최대 255색 + 투명 인덱스 한 칸), js/84-emoformats.js는 캔버스가 뽑은 PNG 프레임을 APNG(acTL·fcTL·fdAT)로 조립하고 정지 WebP를 VP8X·ANIM·ANMF로 다시 묶습니다. 제안 파일 ZIP(무압축 store)도 같은 파일이 만듭니다. 두 파일 모두 바깥에서 가져오는 코드가 0인 것이 계약입니다.
• 왜 직접 썼나. 인코딩을 남의 서버에 맡기면 그림을 밖으로 보내야 하고, 외부 라이브러리에 맡기면 그 배포처가 멈추는 날 내보내기도 함께 멈춥니다. 프레임을 브라우저 안에서 바이트로 조립하면 두 문제가 같이 사라집니다. 위의 원칙 1·2를 지키려면 결국 직접 쓰는 수밖에 없었습니다.
• 수치와 수식은 한 곳에서만 정의합니다. 화면에서 움직이는 모습, 내보낸 SVG, 구워진 GIF가 서로 다르게 보이면 안 되니, 셋이 같은 계산 함수를 함께 씁니다. 미리보기와 결과물이 어긋나는 일을 줄이려는 구조입니다.

못 하는 일

미리 알고 시작하는 편이 낫습니다. 아래 넷은 지금 안 되고, 당분간 그럴 예정입니다.

• 글꼴을 파일에 심지 않습니다. 컷에 얹은 문구는 기기가 가지고 있는 글꼴로 그려집니다. 그림 파일(WebP·PNG·GIF·APNG)로 나갈 때는 글자가 픽셀로 구워져 받는 쪽 기기와 무관하게 같아 보이지만, 만드는 기기에 그 글꼴이 없으면 의도와 다른 모양으로 구워집니다. 움직이는 SVG로 내보내면 글꼴 이름만 남아 여는 기기에서 다른 글꼴로 대체될 수 있습니다. 글자 모양 자체가 디자인이라면 직접 그리는 편이 안전합니다.
• 폴더 연결은 지원하는 브라우저에서만 됩니다. 작업물의 저장 원본인 폴더 연결(내 컴퓨터 폴더에 팩을 파일로 자동 기록)은 브라우저가 파일 시스템 접근 기능을 제공할 때만 켜집니다. 없는 브라우저에서는 그 입구 대신 안내가 뜨고, 파일로 저장·가져오기가 그 자리를 대신합니다 — 이때는 브라우저를 닫기 전에 파일로 챙겨야 작업물이 남습니다.
• 제출을 대신해 주지 않습니다. 파일과 제안 문구를 준비하는 데까지가 이 도구의 몫이고, 업로드는 각 접수처 계정으로 직접 하셔야 합니다(접수처 약관). 남의 계정을 대신 다루는 기능은 앞으로도 만들지 않을 생각입니다.
• 규격은 바뀝니다. 위에 적은 수치는 자동으로 따라오지 않고 사람이 손으로 갱신합니다. 마지막 확인 이후 기준이 달라졌을 수 있으니, 실제로 제안하기 직전에는 접수처 공식 안내를 한 번 더 보세요.

만든 곳과 연락처

회사가 운영하는 서비스가 아니라 혼자 만들어 고쳐 나가는 작은 도구입니다.

어떤 접수처와도 제휴·후원·공식 인증 관계가 없는 독립 도구입니다. 그래서 특정 접수처에 유리하게 규격을 소개할 이유도, 어느 한 곳으로 몰아 보낼 이유도 없습니다. 필요한 기능이 생기면 만들고 쓰이지 않는 기능은 걷어내는 식으로 이어 가고 있어서, 화면이 조금씩 달라질 수 있습니다.

어디서 무엇을 보나

만드는 순서는 이 페이지에서 다시 설명하지 않습니다. 주제마다 맡은 자리가 따로 있어요.