시네마그래프

Cinemagraph

사진처럼 거의 정지된 화면 안에서 아주 작은 한 부분만 계속 반복 재생되는 이미지. 무엇이 움직이는지 알아채는 순간의 낯섦이 포인트입니다.

다른 이름: Living photo
···
html
<div class="stage">
  <div class="photo"></div>
  <div class="cup"></div>
  <div class="steam s1"></div>
  <div class="steam s2"></div>
</div>
css
.stage{position:absolute;inset:0;overflow:hidden}
.photo{position:absolute;inset:0;background:linear-gradient(180deg,#241f2e 0%,#161320 70%)}
.cup{position:absolute;left:50%;bottom:20%;width:16%;height:12%;margin-left:-8%;border-radius:6px 6px 16px 16px;background:#3a3548}
.steam{position:absolute;bottom:32%;width:6px;border-radius:6px;background:rgba(230,225,255,.55);filter:blur(2px);
  height:26%;transform-origin:bottom center;animation:rise 2.4s ease-in-out infinite}
.s1{left:46%;animation-delay:0s}
.s2{left:52%;animation-delay:.5s}
@keyframes rise{
  0%{opacity:0;transform:translateY(0) scaleY(.4) rotate(0deg)}
  30%{opacity:.7}
  100%{opacity:0;transform:translateY(-70%) scaleY(1.3) rotate(8deg)}
}

2011년 사진가 케빈 버그와 야로슬라브 게르진스키가 만들어 퍼뜨린 용어다. 삼각대로 완전히 고정한 카메라로 짧은 영상을 찍고, 마스크로 화면의 나머지를 정지 프레임 한 장으로 얼린 뒤, 움직여야 할 영역(커피 잔의 김, 머리카락 한 올, 깃발)만 루프시킨다.

정지된 영역과 움직이는 영역의 경계가 자연스럽게 이어져야 한다 — 삼각대가 조금이라도 흔들리면 정지된 배경과 살아있는 영역 사이에 떨림 차이가 생겨 합성이 티가 난다. 그래서 촬영 단계부터 삼각대 고정이 필수다.

인스타그램 초기에 크게 유행했고, 지금도 광고 배너나 제품 상세페이지에서 "눈길을 오래 붙잡는" 용도로 쓴다 — 완전한 정지 이미지보다 시선이 오래 머무는데, 풀 비디오만큼 산만하지도 않다.

언제 쓰나

움직이는 영역은 화면의 5~10% 이하로 아주 작게 잡으세요. 너무 넓으면 그냥 "끊긴 영상"으로 보입니다.