움직이는 그림: 프레임별 애니메이션 만들기

WigglyPaint에서 여러 프레임을 열어둔 손그림 애니메이션 캐릭터

WigglyPaint에서 무료로 프레임 애니메이션 만들기 방법을 배워보세요. 프레임을 추가하고, 어니언 스킨을 사용하며, 루프를 미리 보고 GIF 애니메이션으로 내보내는 과정을 안내합니다.

WigglyPaint에서는 여러 장의 그림을 차례대로 보여주는 방식으로 나만의 움직이는 그림을 만들 수 있어요. 여기서 그림 한 장 한 장을 ‘프레임(frame)‘이라고 부릅니다. 각 프레임을 조금씩 다르게 그린 다음 순서대로 재생하면 멋진 애니메이션이 완성되죠.

모든 프레임은 여러분이 직접 손으로 그려야 해요. WigglyPaint는 AI로 애니메이션을 뚝딱 만들어주거나, 사진을 영상으로 자동 변환해 주지 않거든요. 이 글에서는 첫 그림을 그리는 것부터 완성된 GIF를 저장하는 것까지, 아주 쉬운 애니메이션 만들기 과정을 차근차근 알려드릴게요.

빠른 시작: 1분 만에 애니메이션 만들기

1. WigglyPaint를 열고 화면 가운데의 Click to start drawing 버튼을 누릅니다.
2. 화면 아래에 있는 Animation 패널을 엽니다.
3. 첫 번째 그림을 그립니다.
4. 프레임을 복사한 뒤, 그림에서 움직일 부분만 지우고 살짝 다르게 다시 그립니다.
5. Play(재생) 버튼을 눌러 그림이 잘 움직이는지 확인합니다.
6. Export 버튼을 눌러 완성된 애니메이션을 GIF로 저장합니다.

프레임 애니메이션이 뭔가요?

프레임은 ‘한 장의 그림’을 뜻해요. 프레임 애니메이션(Frame-by-frame animation)은 교과서 모서리에 그림을 조금씩 다르게 그려서 차르륵 넘겨보는 ‘플립북’과 똑같은 원리예요.

예를 들어, 첫 번째 프레임에는 눈을 뜬 얼굴을 그리고 다음 프레임에는 눈을 감은 얼굴을 그립니다. 이 두 장의 그림이 빠르게 번갈아 가며 재생되면 얼굴이 눈을 깜빡이는 것처럼 보인답니다.

WigglyPaint는 두 가지 재미있는 방식으로 그림에 생동감을 불어넣어 줘요:

  1. 내가 그린 브러시 선 자체가 가만히 있지 않고 자연스럽게 꿈틀거립니다.
  2. 프레임 패널이 내가 그린 여러 장의 그림을 순서대로 재생해 줍니다.

이 기능을 활용하면 손을 흔드는 캐릭터, 피어나는 꽃, 통통 튀는 공처럼 귀여운 손그림 애니메이션을 쉽게 만들 수 있어요.

WigglyPaint로 뭘 할 수 있나요?

WigglyPaint는 인터넷 브라우저에서 바로 작동하는 무료 애니메이션 사이트예요. 무겁고 복잡한 컴퓨터 프로그램을 설치할 필요가 전혀 없죠.

이곳에서 할 수 있는 작업은 다음과 같아요:

  • 새 프레임 추가하기
  • 그려둔 프레임 복사하기
  • 마음에 안 드는 프레임 삭제하기
  • 이전 그림을 연한 회색 가이드로 보기 (어니언 스킨)
  • 프레임들을 무한 반복되는 루프 애니메이션으로 재생하기
  • 완성된 그림을 GIF 애니메이션으로 내보내기
  • WigglyPaint 커뮤니티에 내 작품 자랑하기

이 도구는 짧고 귀여운 낙서, 나만의 스티커, 재미있는 리액션 짤을 만들 때 가장 좋아요. 복잡한 편집이나 긴 영상 제작용은 아니랍니다.

시작하기 전에 알아두면 좋은 팁

  • 이 튜토리얼은 컴퓨터(데스크톱)를 기준으로 설명할게요. 큰 화면에서 마우스로 그리고 버튼을 누르는 게 훨씬 편하거든요.
  • 처음에는 눈을 깜빡이는 얼굴이나 위아래로 움직이는 점처럼, 아주 단순한 동작으로 시작해 보세요.
  • 색상은 두세 가지만 쓰는 게 좋아요. 그림이 단순할수록 원리를 익히기 쉽습니다.
  • 선을 완벽하고 깔끔하게 그리지 않아도 괜찮아요. 선이 삐뚤빼뚤해도 움직임만 잘 보이면 충분히 멋지답니다.

차근차근 따라 하는 애니메이션 만들기

1. 새 그림 시작하기

  • 클릭: WigglyPaint에 접속한 후 화면 한가운데 있는 Click to start drawing 버튼을 누릅니다.
  • 화면 표시: 마음껏 그림을 그릴 수 있는 넓은 도화지(캔버스)와 도구들이 나타납니다.
  • 다음 단계: 마음에 드는 브러시와 색상을 골라보세요.
WigglyPaint 애니메이션 편집기의 Click to start drawing 시작 버튼
시작 버튼을 눌러 그림을 그릴 캔버스를 엽니다.

얼굴, 별, 꽃, 공처럼 크고 단순한 모양을 먼저 그려보세요. 첫 연습으로 아주 좋습니다.

2. Animation 패널 열기

  • 클릭: 화면 맨 아래에 있는 Animation 글자를 클릭합니다.
  • 화면 표시: 작은 네모 칸(프레임)들이 일렬로 나타나고, 재생 버튼, 어니언 스킨 버튼, 커다란 플러스(+) 버튼이 보입니다.
  • 다음 단계: 첫 번째 프레임이 선택되어 있는지 확인하세요.
WigglyPaint에서 확장된 애니메이션 프레임 패널
Animation 패널에는 프레임 그림들과 애니메이션 조작 버튼들이 모여 있어요.

테두리가 쳐진 프레임이 지금 여러분이 그리고 있는 프레임이에요. 다른 프레임을 고치고 싶다면 그 프레임의 작은 그림을 클릭하면 됩니다.

3. 첫 번째 프레임 그리기

  • 실행: 움직일 물체나 캐릭터의 첫 번째 모습을 그립니다.
  • 화면 표시: 캔버스에 그림이 나타나고, 아래쪽 첫 번째 작은 프레임 안에도 똑같은 그림이 쏙 들어갑니다.
  • 다음 단계: 다음 프레임으로 넘어가기 전에 기본 형태를 완전히 다 그려주세요.

눈을 깜빡이는 얼굴을 만든다면 두 눈을 동그랗게 뜬 얼굴을 먼저 그리세요. 튀어 오르는 공을 만든다면 캔버스 위쪽에 공을 그리면 됩니다.

4. 프레임 복사하거나 빈 프레임 추가하기

다음 그림이 첫 번째 그림과 비슷하다면, 지금 프레임을 그대로 복사하는 게 좋아요. 복사한 뒤 움직일 부분만 지우개로 지우고 다시 그리면 훨씬 편하거든요.

  • 클릭: 프레임 그림 옆에 있는 복사(Copy) 버튼을 누릅니다.
  • 화면 표시: 똑같은 그림이 들어간 두 번째 프레임이 생깁니다.
  • 다음 단계: 눈 모양이나 팔의 위치 등 아주 작은 부분만 수정해 보세요.
WigglyPaint 애니메이션 프레임 옆에 있는 복사 및 삭제 컨트롤
프레임을 복사해서 같은 그림을 유지하거나, 필요 없는 프레임을 지울 수 있어요.

만약 다음 그림을 아예 처음부터 새로 그려야 한다면 커다란 플러스(+) 버튼을 누르세요. 아무것도 없는 빈 프레임이 추가됩니다.

WigglyPaint에서 플러스 버튼으로 새 애니메이션 프레임 추가하기
커다란 플러스 버튼을 누르면 빈 프레임이 추가됩니다.

5. 어니언 스킨 켜기

어니언 스킨(Onion skin)은 방금 전에 그린 그림을 연한 회색으로 비춰주는 기능이에요. 마치 얇은 기름종이를 대고 그리는 것과 비슷하죠. 이전 그림이 어디에 있었는지 볼 수 있어서 아주 유용해요. 이 회색 그림은 나중에 저장할 GIF에는 안 보이니까 걱정 마세요.

  • 클릭: 유령 모양의 어니언 스킨 버튼을 누릅니다.
  • 화면 표시: 지금 그리고 있는 캔버스 뒤로 이전 프레임의 그림이 회색으로 나타납니다.
  • 다음 단계: 부드럽게 움직이게 하려면 회색 가이드와 아주 가깝게 다음 위치를 그리세요.
이전 WigglyPaint 프레임을 회색으로 보여주는 어니언 스킨 애니메이션 가이드
회색으로 보이는 그림이 바로 이전 프레임이에요. 이걸 참고해서 다음 그림을 그리세요.

프레임 사이의 변화를 아주 조금씩 주면 움직임이 부드러워집니다. 반대로 변화를 크게 주면 움직임이 빠르고 역동적으로 보여요.

6. 애니메이션 재생하기

  • 클릭: 세모 모양의 Play(재생) 버튼을 누릅니다.
  • 화면 표시: 프레임들이 순서대로 재생되며 계속 반복됩니다.
  • 다음 단계: 마지막 프레임에서 다시 첫 번째 프레임으로 넘어갈 때 움직임이 자연스러운지 확인하세요.
WigglyPaint에서 루프 애니메이션을 미리 보는 재생 버튼
재생 버튼을 누르고 그림이 반복되는 모습을 여러 번 관찰해 보세요.

만약 애니메이션이 뚝뚝 끊기거나 튀는 느낌이 든다면, 마지막 그림과 첫 번째 그림을 비교해 보세요. 마지막 그림을 첫 번째 그림과 더 비슷하게 고치거나, 두 프레임 사이에 그림을 하나 더 추가하면 훨씬 자연스러워집니다.

7. 특정 프레임 길게 보여주기

WigglyPaint에는 그림마다 재생 시간을 다르게 설정하는 기능은 없어요. 하지만 아주 쉬운 꿀팁이 하나 있습니다! 특정 그림을 화면에 더 오래 띄워두고 싶다면, 그 프레임을 여러 번 복사해 보세요.

  • 실행: 길게 보여주고 싶은 프레임을 선택한 뒤, 복사 버튼을 한 번 이상 누릅니다.
  • 화면 표시: 똑같은 그림을 가진 프레임이 여러 개 생깁니다.
  • 다음 단계: 재생 버튼을 누르고 멈춰 있는 시간이 적당한지 확인하세요.

예를 들어, 눈을 뜬 프레임은 2~3번 복사하고, 눈을 감은 프레임은 1개만 남겨두세요. 그러면 평소에는 눈을 뜨고 있다가 아주 빠르게 눈을 깜빡이는 자연스러운 얼굴이 완성됩니다.

이 방법은 복잡한 FPS(초당 프레임 수) 설정을 배우지 않고도 타이밍을 조절할 수 있는 아주 좋은 방법이에요.

8. 움직이는 그림 내보내기

  • 클릭: 반복되는 애니메이션이 마음에 든다면 Export 버튼을 누릅니다.
  • 화면 표시: 완성된 작품을 저장하거나 공유할 수 있는 창이 나타납니다.
  • 다음 단계: 애니메이션을 GIF 파일로 저장하거나, WigglyPaint 커뮤니티에 공유해 보세요.
WigglyPaint 손그림 애니메이션을 GIF로 저장하는 Export 버튼
완성된 애니메이션을 GIF 파일로 내보냅니다.

저장한 GIF 파일을 열어보세요. 그림이 선명하게 잘 보이는지, 반복될 때 어색하게 끊기는 부분은 없는지 마지막으로 확인합니다.

프레임 애니메이션 예시: 눈 깜빡이는 얼굴 만들기

눈 깜빡이는 얼굴은 그림의 대부분이 가만히 있고 눈만 움직이기 때문에 초보자가 처음 도전하기 딱 좋은 주제예요.

  1. 두 눈을 동그랗게 뜬 얼굴을 그립니다.
  2. 이 프레임을 복사합니다.
  3. 새 프레임에서 눈을 반쯤 감은 모습으로 수정합니다.
  4. 그 프레임을 다시 복사한 뒤, 눈을 완전히 감은 모습으로 수정합니다.
  5. 반쯤 감은 눈 프레임을 복사해서 완전히 감은 눈 프레임 뒤로 옮깁니다.
  6. 재생 버튼을 누릅니다. (눈 뜸 -> 반쯤 감음 -> 완전히 감음 -> 반쯤 감음) 순서로 재생되어야 해요.
  7. 얼굴이 너무 쉴 새 없이 깜빡인다면, 첫 번째(눈 뜬) 프레임을 여러 번 복사해서 길이를 늘려주세요.

이 원리를 응용하면 피어나는 꽃, 반짝이는 별, 숨을 쉬는 캐릭터 등 다양한 움직임을 만들 수 있답니다.

더 자연스러운 애니메이션을 위한 초보자 팁

  • 한 번에 하나의 큰 동작만 바꾸세요.
  • 움직이지 않는 부분은 항상 같은 자리에 그대로 두세요.
  • 다음 프레임을 그리기 전에 꼭 어니언 스킨을 켜세요.
  • 끝까지 다 그린 후에 확인하지 말고, 2~3프레임을 그릴 때마다 재생 버튼을 눌러 확인하세요.
  • 동작을 잠시 멈추고 싶을 때는 프레임을 여러 번 복사하세요.
  • 그림을 작게 줄여도 잘 보이도록 단순한 모양을 사용하세요.

문제가 생겼을 때 해결 방법

Animation 패널을 찾을 수 없어요

먼저 화면 한가운데의 Click to start drawing 버튼을 눌러 캔버스를 열어야 해요. 그다음 화면 맨 아래에 있는 Animation 글자를 클릭하면 프레임 조작 메뉴가 나타납니다.

애니메이션이 너무 빨라요

사람들이 더 오래 봤으면 하는 프레임을 복사하세요. 똑같은 프레임이 2~3개 연속으로 있으면 잠시 멈춰 있는 것처럼 보입니다.

프레임 사이의 움직임이 너무 커서 뚝뚝 끊겨요

어니언 스킨을 켜세요. 연한 회색으로 보이는 이전 그림을 참고해서, 다음 그림을 이전 그림과 조금 더 가깝게 그려보세요.

루프가 끝날 때 화면이 튀어요

마지막 프레임과 첫 번째 프레임을 비교해 보세요. 두 그림을 비슷하게 고치거나, 그 사이에 중간 단계를 보여주는 프레임을 하나 더 추가하세요.

재생 버튼을 눌러도 그림이 하나만 보여요

프레임을 추가하거나 복사한 뒤, 새 프레임의 그림을 조금 수정해야 해요. 움직임을 보여주려면 서로 다른 그림이 최소 2장 이상 필요합니다.

WigglyPaint 지원 기능 안내

기능현재 지원 여부
각 프레임을 손으로 직접 그리기지원함
프레임 추가, 복사, 삭제지원함
이전 프레임을 회색 가이드로 보기 (어니언 스킨)지원함
반복되는 루프 애니메이션 재생지원함
GIF 애니메이션으로 내보내기지원함
커뮤니티에 작품 공유하기지원함
AI가 자동으로 애니메이션 생성지원 안 함
사진이나 영상을 애니메이션으로 변환지원 안 함
프레임마다 재생 시간 다르게 설정아직 지원 안 함 (대신 프레임 복사 활용)
FPS(초당 프레임 수) 변경아직 지원 안 함
비디오(MP4) 파일로 내보내기아직 지원 안 함
모바일 앱에서 프레임 편집이 가이드는 웹 브라우저 버전을 기준으로 합니다

애니메이션 만들기 FAQ

애니메이션 만드는 법은 무엇인가요?

첫 번째 그림을 그리고, 프레임을 추가하거나 복사한 뒤, 새 그림의 일부를 다르게 그립니다. 필요한 만큼 프레임을 계속 추가하세요. 재생 버튼을 눌러 움직임을 확인한 후, 완성된 루프를 GIF로 저장하면 됩니다.

WigglyPaint는 무료 프레임 애니메이션 사이트인가요?

네. WigglyPaint는 웹 브라우저에서 바로 실행되는 무료 그리기 및 애니메이션 도구예요. 컴퓨터에 프로그램을 설치하지 않아도 짧은 손그림 애니메이션을 만들 수 있습니다.

애니메이션 프로그램을 따로 다운로드해야 하나요?

아니요. WigglyPaint 웹사이트에서 바로 그리고 움직임을 만들 수 있어요. 작업이 끝나면 완성된 애니메이션을 GIF 파일로 다운로드하면 됩니다.

이전 그림을 참고해서 그릴 수 있나요?

네. 어니언 스킨 기능을 켜면 바로 앞 프레임이 연한 회색으로 보입니다. 이 회색 그림을 참고해서 다음 동작을 자연스럽게 그릴 수 있어요.

AI가 애니메이션을 만들어 주나요?

아니요. 모든 프레임은 여러분이 직접 그려야 해요. WigglyPaint는 꿈틀거리는 브러시, 프레임 관리, 어니언 스킨, 루프 미리보기, GIF 저장 기능 등 그리기 도구만 제공합니다.

초보자는 몇 프레임으로 시작하는 것이 좋나요?

처음에는 3~5장 정도의 서로 다른 프레임으로 시작해 보세요. 눈 깜빡임이나 가볍게 통통 튀는 움직임을 만들기에 충분한 분량입니다.

애니메이션 속도를 조절할 수 있나요?

현재 FPS나 프레임별 시간 조절 기능은 없어요. 특정 그림을 화면에 더 오래 띄워두고 싶다면 해당 프레임을 여러 번 복사하세요.

애니메이션이 계속 반복되나요?

네. 미리보기 재생을 누르면 프레임이 무한 반복(루프)됩니다. 마지막 프레임에서 첫 번째 프레임으로 넘어갈 때 움직임이 자연스러운지 확인하기 좋아요.

어떤 파일로 저장할 수 있나요?

WigglyPaint는 완성된 움직이는 그림을 GIF 애니메이션 파일로 내보냅니다. 현재 비디오(영상) 파일 저장은 지원하지 않아요.

나만의 첫 움직이는 그림 만들기

3장의 프레임과 아주 작은 변화 하나로 시작해 보세요. 얼굴을 그리고, 복사하고, 눈 모양만 살짝 바꾼 뒤 재생 버튼을 눌러보세요. 이 과정이 익숙해지면 프레임을 더 추가하거나 복사해서 타이밍을 멋지게 조절해 보세요.

작은 아이디어를 움직이게 만들어 보세요

Animation 패널을 열어 짧은 루프를 만들고, 완성된 그림을 GIF로 저장해 보세요.

무료로 그리기 시작