카카오톡 움직이는 이모티콘 [카카오톡이모티콘 출시과정]애니메이션검수/webp/A~Z까지

안녕하세요! 상품화 과정 중 애니메이션 검수 과정에 대해 이야기해보려고 합니다.애니메이션 검수 과정에서 24개의 모든 이모티콘을 움직이는 이모티콘 Webp 형식으로 제출해야 합니다.

Webp란?? 여기서 찌랏!!Webp가 뭐죠?(아시는 분은 나가셔도 됩니다) 저는 몰랐습니다.)

움직이는 이모티콘을 만들기 위해 카카오톡 이모티콘으로만 제공하는 프로그램입니다.

카카오톡 이모티콘 스튜디오 공지사항에 접속하셔서 웹피 애니메이션 툴과 뷰어 모두 다운로드 받으시기 바랍니다.

Webp 설치 방법(Mac/윈도우)

다운로드가 완료되면 컴퓨터 바탕화면에 웹티 애니툴이 생기고 저런 화면이 켜지면 다운 완료!!

지금부터 애니메이션을 만들어 봅시다.아~

WebpAnimator 사용 전에 알아두면 좋은 팁

추후 알려드릴 Webp Animator 사용 과정에서 단계 절차를 빠짐없이 하는 것이 중요합니다.

WHY? 최종 파일의 검수 단계에서 모든 파일을 PSD.zip 파일로 밀어내 제출하도록 했습니다.

제 경우 step1 애니메이션 제작 도구를 활용해 모션 구현 과정을 넘어 PNG 파일만 추출하고 작업을 했더니 다음 과정에서 다시 작업해야 하는 불상사가 일어났습니다.ㅠㅠ그래서! 미리 다운 받아서 쓰면 좋은 파일 알려드릴게요!!

카카오톡 이모티콘 스튜디오 공지사항에 가셔서 카카오 이모티콘 제작 가이드 안내를 다운로드 받으시기 바랍니다.(앞으로 모든 과정에서 우리의 선생님이 되어줄 것입니다.) 믿을 수 있는 것은 저것밖에 없습니다.ㅠ）

움직이는 이모티콘으로 PSD 파일을 눌러 emot_000_xs.psd를 이용하여 step1 모션을 구현해 놓으면 다음 최종 검수 수단이 편해집니다.

AND는 WebpAnimator를 이용하여 움직이는 이모티콘을 만듭니다.만들고자 하는 이모티콘 모션이 그려진 png 파일이 미리 준비되어 있어야 합니다.+ 배경화면이 없고 흰색 테두리가 완료된

WebpAnimator의 사용 과정을 반복 작업하기만 하면 됩니다.눈이 빠질 것 같은 부분이지만 단순 작업은 편합니다.

절대 어렵지 않으니까. 겁먹지 말고 해봐요!! (카카오톡 이모티콘 제작과정에서 간단한 부분도 있었다니..ㅎㅎ)

웹pAnimator 제작과정

작가님마다 의도하는 이모티콘 컨셉에 맞게 속도를 조절하면 될 것 같습니다.

메시지가 너무 빨리 사라지면 사용자가 불편할 수 있으니 너무 빠르지 않은 것이 사용성과 안정성에 도움이 될 것 같아요!물론 메세지가 없는 경우나 메세지가 화면 밖으로 나가지 않고 화상만 빠르게 움직이는 것이라면 상관없네요! (웃음)

• Loops 값이 기본값인 4회로 설정되어 있는지 확인.-어두운 배경에서도 무리 없이 잘 보이는지 확인.
• 이 두 가지가 중요하지만 그냥 넘어가기 쉬운 부분인 것 같아요.여기서 고쳐 버리면 다시 수정할 필요는 없죠.(네. 저는 몇가지 수정했습니다.) ㅠㅠ 아니…전체 수정했습니다…)

마지막으로 파일명을 emot_001_x3로 해주세요! 다음 과정에서 어차피 파일명을 모두 바꿔야 합니다.처음부터 저장하시면 편해요!!

…..

Finally 이렇게 만든 24개의 움직이는 이모티콘을 제출하시면 됩니다.

만약 좋은 팁이 있다면 항상 감사합니다.포스팅에서의 좋은 성적과 피드백도 환영합니다.만약 모르거나 정체되는 일이 있으면 질문도 환영합니다.

우리 모두 이모티콘 연금의 길만 걸어요~ (두 번째 승인도 있었으면 하는 바람.. 제발..)