디자인 아틀라스
EN
▶ 모션 그래픽

심리스 루프

Seamless loop

끝 지점이 시작 지점과 완전히 이어져서, 반복 재생해도 이어 붙인 자리(loop point)가 눈에 띄지 않는 영상.

다른 이름: Perfect loop무한 루프
···
html
<div class="stage">
  <svg class="ring" viewBox="0 0 100 100">
    <circle class="track" cx="50" cy="50" r="40"/>
    <circle class="sweep" cx="50" cy="50" r="40"/>
  </svg>
  <span class="pt">loop point</span>
</div>
css
.stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ring{width:min(62%,220px);aspect-ratio:1;transform:rotate(-90deg)}
.track{fill:none;stroke:var(--line);stroke-width:6}
.sweep{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:251;stroke-dashoffset:251;animation:sweep 3s linear infinite}
@keyframes sweep{0%{stroke-dashoffset:251}100%{stroke-dashoffset:0}}
.pt{position:absolute;bottom:8%;font:10px/1 ui-monospace,monospace;color:var(--muted)}

마지막 프레임과 첫 프레임이 값(위치·회전·색)까지 정확히 같아야 한다. 하나만 어긋나도 반복될 때 "덜컹"하는 점프가 눈에 띈다 — 이 지점을 업계에서는 그냥 "루프 포인트"라고 부른다.

가장 쉬운 방법은 처음부터 순환 구조를 설계하는 것이다. 예를 들어 한 바퀴 도는 회전이나 위상이 정확히 한 주기 도는 파형은 시작과 끝이 자동으로 같아진다. 반대로 직선 이동처럼 되돌아오지 않는 움직임은, 끝에서 시작으로 크로스 디졸브를 살짝 섞어 이음매를 숨기기도 한다.

SNS의 짧은 루프 영상(부메랑, GIF, 배경 비디오)에서 특히 중요하다 — 루프가 티 나는 순간 시청자는 무의식적으로 "다시 봤다"는 걸 인지하고 이탈한다.

언제 쓰나

루프 길이를 짧게 잡을수록 이음매를 숨기기 쉽습니다. 길게 늘어진 루프는 어디선가 반드시 티가 납니다.