RGB 채널이 어긋나고 화면이 깨지는 짧은 노이즈 구간을 두 장면 사이에 넣어, "디지털 신호가 튄다"는 인상으로 전환하는 기법.
디자인 아틀라스<div class="stage">
<div class="scene a">SCENE A</div>
<div class="scene b">SCENE B</div>
<div class="chr r"></div><div class="chr g"></div><div class="chr b2"></div>
<div class="blocks"></div>
</div>.stage{position:absolute;inset:0;overflow:hidden}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font:800 clamp(16px,6vmin,32px)/1 sans-serif;color:#fff;letter-spacing:.03em}
.a{background:linear-gradient(135deg,#1a2a3a,#0b141d);animation:show-a 3.2s steps(1) infinite}
.b{background:linear-gradient(135deg,#3a1a2a,#1d0b14);animation:show-b 3.2s steps(1) infinite}
@keyframes show-a{0%,58%{opacity:1}59%,100%{opacity:0}}
@keyframes show-b{0%,58%{opacity:0}59%,100%{opacity:1}}
.chr{position:absolute;inset:0;font:800 clamp(16px,6vmin,32px)/1 sans-serif;display:flex;align-items:center;justify-content:center;
opacity:0;mix-blend-mode:screen;animation:chr-flash 3.2s steps(1) infinite}
.chr::before{content:'SCENE';display:block}
.r{color:#ff3355;transform:translateX(-6px)}
.g{color:#33ff88;transform:translateX(0)}
.b2{color:#3388ff;transform:translateX(6px)}
@keyframes chr-flash{0%,55%{opacity:0}58%,63%{opacity:.85}64%,100%{opacity:0}}
.blocks{position:absolute;inset:0;opacity:0;
background:repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 3px,transparent 3px 9px,rgba(255,255,255,.3) 9px 11px,transparent 11px 20px);
animation:block-flash 3.2s steps(1) infinite}
@keyframes block-flash{0%,56%{opacity:0}58%,62%{opacity:.5}63%,100%{opacity:0}}지속되는 시각 효과로서의 글리치가 화면 전체의 "고장난 신호" 질감이라면, 글리치 트랜지션은 그 질감을 0.1~0.3초짜리 아주 짧은 구간에 압축해 장면 전환의 신호로만 쓴다.
빨강·초록·파랑 채널을 서로 다른 방향으로 어긋나게 이동시키고(채널 시프트), 그 사이에 수평 블록을 무작위로 잘라 위치를 바꾸는(데이터모싱 흉내) 두 가지를 겹치면 가장 흔한 형태가 된다. After Effects에서는 Turbulent Displace나 전용 글리치 플러그인(트랩코드 등)을 트랜지션 지속시간만큼만 짧게 건다.
너무 길게 끌면 정말 방송 사고처럼 보여 불쾌감을 준다 — 리듬감 있는 편집(비트, 게임 하이라이트)에서 아주 짧게만 쓰는 게 핵심이다.
차분한 브랜드 영상에는 어울리지 않습니다. 리듬이 빠르고 에너지가 강조되는 콘텐츠에만 어울립니다.