워블 GIF가 뚝뚝 끊기거나 찢어지거나 이상하게 보이는 이유 (그리고 해결법)

이미지를 업로드하고, 강도를 고르고, 내보내기를 눌렀는데 결과가 이상합니다 — 매끄럽게 흔들리는 것이 아니라 눈에 띄게 갈라지거나, 가장자리가 찢어지거나, 그냥 살아 있다기보다 고장 난 것처럼 움직입니다. 이것은 워블 메이커가 실제로 모션을 렌더링하는 방식과 연결된 구체적이고 고칠 수 있는 이유로 일어납니다. 메커니즘을 이해하고 나면 해결은 빠릅니다.

---

먼저, 워블이 실제로 생성되는 방식

워블 메이커는 천 물리나 뼈대를 시뮬레이션하지 않습니다. 이미지를 24×24 격자의 타일로 나누고 각 타일을 사인파를 따라 변위시키며, 그 진폭은 여러분이 고른 강도가 결정합니다 — 그리거나 마스크를 지정하는 단계 없이 이미지 전체가 자동으로 움직입니다. 인접한 두 타일은 독립적으로 애니메이션됩니다 — 각각은 격자 위치에 따라 자기만의 위상 오프셋을 받으므로, 이웃한 타일들은 의도적으로 서로 살짝 어긋나게 움직입니다(이것이 워블에 딱딱한 블록 하나가 미끄러지는 것이 아니라 유기적이고 탄력적인 느낌을 줍니다).

이 독립성이 바로 문제가 생길 수 있는 이유이기도 합니다. 이미지의 모든 타일이 같은 진폭으로 변위되기 때문에, 디테일이 많거나 고대비인 이미지에서는 하나의 프레임 안에서 타일들이 충분히 멀어져 그 사이의 이음매가 눈에 보이게 될 수 있습니다 — 타일 경계에서 메시가 말 그대로 갈라지는 얇은 틈이나 이중 가장자리요. 이것은 버그가 아니라 격자가 격자라는 것의 직접적인 결과입니다. 타일 가장자리를 이어붙이는 보간이 없고 그저 타일별 독립적인 변위만 있습니다.

이를 염두에 두고, 좋지 않은 내보내기의 가장 흔한 원인들을 알아보겠습니다.

---

원인 1: 이미지의 디테일 양에 비해 강도가 너무 높습니다

워블 메이커는 세 가지 강도 프리셋을 가지고 있고, 이것들은 그냥 "조금 더" 대 "조금 덜"이 아닙니다 — 실제 픽셀 변위량에 매핑됩니다. 약함은 5px, 중간은 10px, 강함은 18px이며, 이는 작업 캔버스(최대 480px)에서 타일별, 프레임별로 적용됩니다. 강함은 약함보다 거의 4배 더 많이 변위되고, 이미지 전체가 한꺼번에 움직이기 때문에 그 변위가 화면의 모든 타일에서 동시에, 각자 독립적으로 일어납니다.

단순하고 깔끔한 이미지 — 배경이 단조로운 굵은 일러스트 — 에서는 타일당 18px의 흔들림이 경쾌하고 탄력적으로 보이며, 이것이 정확히 강함 프리셋의 의도입니다. 복잡하거나 디테일이 아주 많은 이미지(어수선한 배경, 섬세한 질감, 작고 독립적인 형태가 많은 그림)에서는 같은 18px의 흔들림이 모든 타일에서 동시에 일어나면서 이웃 타일들이 서로 어디에 있어야 하는지 눈에 띄게 어긋나고, 이는 움직임이 아니라 찢어지거나 산산조각 나는 것처럼 읽힙니다.

해결책: 화면에 얼마나 많은 것이 담겨 있는지에 강도를 맞추세요. 강함은 경쟁하는 디테일이 적고 대비가 뚜렷한 단순한 아트를 위해 아껴두세요. 더 복잡한 이미지 — 디테일한 배경, 사진, 정교한 선화 — 에는 중간이나 약함을 쓰세요. 중간의 10px 흔들림은 보통 "명확히 살아 있지만 여전히 형태가 유지되는" 최적점이며, 약함의 5px는 개별적으로는 거의 눈에 띄지 않지만 디테일한 화면 전체에 걸쳐서는 은은한 흔들림으로 좋게 읽힙니다.

---

원인 2: 원본 이미지 안의 딱딱한 가장자리나 날카로운 경계

이미지 어딘가에 날카로운 경계 — 단조로운 배경과 맞닿은 얼굴의 윤곽, 단단한 물체의 외곽선, 급격한 색 전환 — 가 있다면, 이미지의 모든 타일이 똑같이 움직이고 있는데도 그 경계에 걸친 타일들이 서로에게서 벗겨져 나가는 것처럼 보일 수 있습니다. 날카로운 시각적 경계는 이웃 타일 사이의 작은 어긋남을, 부드러운 그라데이션이나 질감 위에서보다 눈이 훨씬 쉽게 잡아내게 만듭니다.

이것은 얼굴과 직선 형태의 물체 주변에서 특히 눈에 띕니다. 턱선, 액자, 패널 테두리 같은 것들이요. 워블이 매 프레임 그 가장자리를 눈에 띄게 잡아당기고, 이는 약한 강도에서도 부자연스러워 보입니다.

해결책: 이제 이미지 전체가 균일하게 흔들리므로 — 특정 영역만 예외로 둘 방법은 없습니다 — 완고한 이음매를 잠재우는 주된 수단은 강도입니다. 유난히 날카로운 직선 경계 하나가 문제라면 강도를 한 단계 낮추세요. 진폭이 낮아지면 같은 이음매가 훨씬 덜 눈에 띕니다.

---

덜 명백한 원인: 원본 이미지 자체

합리적인 강도를 골랐더라도 원본 이미지가 여러분에게 불리하게 작용할 수 있습니다. 워블 메이커는 렌더링 전에 원본을 최대 480px의 작업 크기로 리샘플링합니다 — 원본 아트에 이미 모션 블러, 강한 안티앨리어싱, 혹은 매우 섬세한 선화(얇은 한 픽셀짜리 머리카락 가닥, 섬세한 크로스해칭)가 있다면, 그 디테일은 480px에서 매우 적은 픽셀로 압축됩니다. 이미 부드럽거나 이미 얇은 그 디테일을 타일당 10~18px 변위시키면, 애초에 픽셀 정보가 많지 않았기 때문에 원본보다 더 흐릿하거나 지저분하게 뭉개질 수 있습니다.

해결책: 원본에 섬세한 선화나 블러가 있다면 약함 강도로 낮추고, 얇은 디테일(한 가닥 머리카락, 섬세한 보석 체인)이 정지 상태보다 움직일 때 조금 더 부드럽게 읽힐 것으로 예상하세요. 명확하고 두꺼운 윤곽선을 가진 평평하고 깔끔한 선화는 사실적이거나 심하게 흐릿한 원본 이미지보다 변위에서 훨씬 잘 버팁니다. 변위가 산산조각 나지 않고 움직일 수 있는 견고한 픽셀 데이터가 타일당 단순히 더 많기 때문입니다.

---

빠른 진단 체크리스트

• 이미지 조각 사이에 틈이나 이중 가장자리가 보이나요? 화면의 디테일 양에 비해 강도가 너무 높습니다 — 한 단계 낮추세요.
• 이미지 전체가 산산조각 나는 것처럼 보이나요? 강함에서 중간이나 약함으로 낮추세요.
• 얼굴이나 딱딱한 윤곽 근처의 무언가가 뜯겨 나가는 것처럼 보이나요? 강도를 낮추세요 — 이미지 전체가 균일하게 흔들리므로 그 부분만 예외로 둘 방법은 없습니다.
• 낮은 강도에서도 모든 것이 약간 번져 보이나요? 원본에 섬세한 선화나 블러가 있습니다 — 약함을 유지하고 얇은 디테일이 부드러워질 것을 예상하세요.

좋은 소식은 이 중 어느 것도 다시 업로드할 필요가 없다는 것입니다. 워블 메이커의 미리보기는 라이브이고 즉각적이므로, 강도를 한 단계 낮추고 즉시 결과를 볼 수 있습니다 — 내보내기를 낭비하지 않으며, 미리보기는 토큰이 들지 않으므로 실제로 내보내기 전에 원하는 만큼 조정할 수 있습니다.

자주 묻는 질문

워블 메이커로 내보낸 결과물에 이미지 조각 사이 틈이나 찢어진 이음새가 왜 보이나요?

워블 메이커는 이미지를 24×24 그리드로 나누고 각 타일을 저마다 다른 위상 오프셋을 가진 사인파를 따라 독립적으로 변위시킵니다. 디테일이 많거나 고대비인 이미지에서는 한 프레임 안에서 타일들이 충분히 멀리 벌어져서, 타일 경계를 이어붙이는 보간이 없기 때문에 그 이음새가 눈에 보일 수 있습니다. 강도 프리셋을 한 단계 낮추세요 — 약함은 5px 변위, 중간은 10px, 강함은 18px 변위입니다 — 그러면 이음새가 훨씬 덜 눈에 띕니다.

이미지 전체가 흔들리는 게 아니라 산산조각 나는 것처럼 보이는 이유는 무엇인가요?

거의 항상 강함 프리셋(타일당 18px 변위)을 복잡하거나 디테일이 많은 원본 이미지에 적용했을 때 생깁니다. 강함은 경쟁하는 디테일이 적은 단순하고 고대비인 아트를 위한 것입니다. 복잡한 배경, 사실적인 사진, 정교한 선화라면 중간이나 약함으로 바꾸세요 — 중간의 10px 진폭이 보통 "확실히 살아있는 느낌"과 "형태가 유지되는 느낌" 사이의 절묘한 지점입니다.

얼굴이나 딱딱한 경계선 근처에서 워블이 유독 찢어지는 것처럼 보이는 이유는 무엇인가요?

턱선, 사진 프레임, 패널 테두리 같은 날카로운 시각적 경계는 부드러운 그라데이션 위에서보다 인접한 타일 사이의 작은 어긋남을 눈이 훨씬 쉽게 잡아냅니다. 이미지 전체가 균일하게 흔들리고 특정 영역만 예외로 둘 수는 없으므로, 딱딱한 경계에서 완고하게 나타나는 이음새를 잠재우는 주된 방법은 강도를 한 단계 낮추는 것입니다.

원본 이미지에 이미 가는 선화나 모션 블러가 있는데 왜 워블 후에 뭉개져 보이나요?

워블 메이커는 렌더링 전에 원본을 최대 480px 작업 크기로 리샘플링합니다. 원본에 이미 얇은 한 픽셀짜리 머리카락 가닥이나 강한 안티앨리어싱이 있었다면 그 디테일이 아주 적은 픽셀로 압축되고, 타일당 10~18px로 변위시키면 더 뭉개질 수 있습니다. 가는 선화나 기존 블러가 있는 원본 아트에는 약함 강도를 쓰고, 얇은 디테일이 움직일 때 조금 더 부드럽게 읽힐 것을 예상하세요.

다른 강도를 테스트할 때마다 매번 내보내기를 해야 하나요?

아니요 — 워블 메이커의 미리보기는 내보내기와 정확히 같은 사인파 변위 루프를 브라우저에서 즉시 실시간으로 렌더링하며, 미리보기에는 토큰이 들지 않습니다. 무작정 내보내고 이상하면 다시 내보내는 대신, 각 강도에서 두세 번의 전체 루프를 지켜본 뒤에 내보내기를 확정하세요.

---

워블 메이커 무료로 사용해보기 → — 첫 내보내기는 무료, 카드 필요 없음.

함께 읽으면 좋은 글

• 워블 메이커 사용해보기 → — 이미지 전체가 자동으로 흔들립니다, 첫 내보내기 무료
• 워블 메이커 — 모든 애니메 아트를 위한 무료 지글 & 바운스 애니메이션
• 워블로 애니메이션화하기 좋은 요소
• 워블 메이커 vs 메시 리깅
• 푸루푸루 효과 완전 정리