편집 중 같은 샷을 살짝 키워, 컷처럼 리듬을 바꾸고 작은 디테일을 읽히게 합니다.
<div class="stage"><div class="shot"><div class="paper"><div class="line long"></div><div class="line"></div><div class="line short"></div><div class="stamp">03</div></div><div class="focus"></div></div>
<div class="caption"><span class="before">ORIGINAL</span><span class="after">PUNCH IN · +18%</span></div>
</div>.stage{position:absolute;inset:0;overflow:hidden;background:#d8d3c8}
.shot{position:absolute;inset:0;display:grid;place-items:center;transform-origin:58% 53%;animation:punch 3.2s steps(1,end) infinite}
.paper{position:relative;width:47%;height:60%;background:var(--surface);border:1px solid var(--line);box-shadow:0 9px 24px #0002;padding:8% 7%}
.line{height:3px;width:76%;margin:9% 0;background:var(--muted);opacity:.45}.line.long{width:92%}.line.short{width:52%}
.stamp{position:absolute;right:10%;top:16%;font:700 clamp(24px,6vw,56px) ui-monospace,monospace;color:var(--accent)}
.focus{position:absolute;left:55%;top:41%;width:15%;height:16%;border:2px solid var(--accent);border-radius:4px;opacity:.75}
.caption{position:absolute;left:12px;bottom:12px;width:170px;height:24px;padding:5px 8px;background:var(--surface);border:1px solid var(--line);font:10px ui-monospace,monospace;letter-spacing:.08em}
.caption span{position:absolute;left:8px;white-space:nowrap}
.after{animation:after 3.2s steps(1,end) infinite}.before{animation:before 3.2s steps(1,end) infinite}
@keyframes punch{0%,34%{transform:scale(1)}35%,84%{transform:scale(1.18)}85%,100%{transform:scale(1)}}
@keyframes before{0%,34%,85%,100%{opacity:1}35%,84%{opacity:0}}
@keyframes after{0%,34%,85%,100%{opacity:0}35%,84%{opacity:1}}펀치 인은 인터뷰나 화면 녹화에서 같은 장면을 조금 확대해 다음 컷처럼 보이게 하는 편집 방식입니다. 화면을 크게 흔들기보다 살짝 가까워지는 변화로 말의 리듬이나 작은 변화를 강조합니다.
편집 타임라인에서 같은 클립을 복제해 뒤쪽 구간의 scale을 조금 높이거나, 하나의 클립에 스케일 키프레임을 짧게 넣습니다. 데모도 원래 구도와 확대 구도 사이를 빠르게 전환합니다.
Punch-in은 편집 현장에서 쓰이는 설명용 작업명이며 모든 도구가 같은 기능 이름을 쓰는 표준 용어는 아닙니다. 크래시 줌보다 확대 폭이 작고, 보통 한동안 유지합니다.
말하는 영상에서 강조할 문장에 박자를 주거나, 같은 화면의 특정 부분을 조금 더 잘 읽히게 할 때 씁니다.