2.5D 카메라 패럴랙스

2.5D camera parallax

평평한 이미지를 요소별로 오려 서로 다른 z축 거리에 배치하고, 가상 카메라를 움직여 깊이감을 만드는 After Effects 합성 기법.

다른 이름: Fake 3D cameraPhoto parallaxDepth compositing
···
html
<div class="stage">
  <div class="layer sky"></div>
  <div class="layer far"></div>
  <div class="layer mid"></div>
  <div class="layer near"></div>
</div>
css
.stage{position:absolute;inset:0;overflow:hidden}
.layer{position:absolute;left:-20%;right:-20%;animation:pan 6s ease-in-out infinite}
.sky{top:0;height:60%;background:linear-gradient(180deg,#1a2a4a,#2a3a6a);animation-duration:6s}
.far{bottom:22%;height:26%;background:#26304a;clip-path:polygon(0 100%,0 40%,12% 55%,26% 20%,40% 60%,55% 10%,68% 50%,82% 25%,100% 55%,100% 100%);
  animation-name:pan-far}
.mid{bottom:10%;height:24%;background:#3a4266;clip-path:polygon(0 100%,0 55%,15% 70%,32% 35%,50% 75%,66% 30%,83% 65%,100% 40%,100% 100%);
  animation-name:pan-mid}
.near{bottom:0;height:16%;background:#181c2e;clip-path:polygon(0 100%,0 60%,10% 80%,22% 45%,38% 85%,55% 40%,72% 80%,88% 50%,100% 75%,100% 100%);
  animation-name:pan-near}
@keyframes pan{0%,100%{transform:translateX(-1%)}50%{transform:translateX(1%)}}
@keyframes pan-far{0%,100%{transform:translateX(-3%)}50%{transform:translateX(3%)}}
@keyframes pan-mid{0%,100%{transform:translateX(-7%)}50%{transform:translateX(7%)}}
@keyframes pan-near{0%,100%{transform:translateX(-14%)}50%{transform:translateX(14%)}}

한 장짜리 사진(풍경, 일러스트)을 포토샵에서 전경·중경·배경 레이어로 오려낸다(가려진 부분은 콘텐츠 인식 채우기로 메운다). 이 레이어들을 After Effects의 3D 공간에 z값을 다르게 줘서 배치하면, 평면 이미지 여러 장이 실제 깊이가 있는 세트처럼 늘어선다.

여기에 카메라 레이어를 추가해 살짝 움직이면(트럭인·팬), 가까운 레이어는 화면에서 크게 움직이고 먼 레이어는 거의 안 움직인다 — 이게 스크롤 패럴랙스와 같은 원리이지만, 스크롤이 아니라 카메라 애니메이션으로 만든다는 점이 다르다. 다큐멘터리에서 정지 사진에 생동감을 주는 "켄 번즈 효과"의 확장판이다.

레이어 사이 간격(오려낸 경계)이 카메라가 많이 움직이면 드러난다 — 뻥 뚫린 구멍이 보이지 않는 범위 안에서만 카메라를 움직여야 한다.

언제 쓰나

카메라 이동 폭을 작게 잡으세요. 절단면이 보이기 시작하면 3D 세트가 아니라 "종이 인형극"처럼 보입니다.