CSS 글리치 텍스트 애니메이션 연출 공식과 clip-path 절단 가이드

사이버펑크 스타일의 게임 웹사이트나 SF 콘셉트의 브랜딩 페이지에서는 화면이 순간적으로 어긋나는 글리치(Glitch) 텍스트 효과를 종종 볼 수 있습니다. 이 효과는 이미지나 캔버스 스크립트 없이도 CSS의 의사 요소(::before, ::after)와 clip-path, @keyframes만으로 구현할 수 있습니다. 이 글에서는 글리치 효과가 만들어지는 원리와, 화면을 지나치게 어지럽히지 않게 적용하는 방법을 정리합니다.

요약 ① 글리치 효과는 동일한 텍스트를 원본·붉은색 층·청록색 층 3개로 겹친 뒤, 각 층을 clip-path로 상하 일부만 보이게 자르고 좌우로 살짝 어긋나게 이동시켜 만듭니다. ② ::before/::after 의사 요소에 서로 다른 색의 text-shadow를 주는 것이 RGB 크로매틱 애버레이션 표현의 핵심입니다. ③ 화면이 빠르게 번쩍이는 효과이므로 prefers-reduced-motion 미디어 쿼리를 함께 적용하는 것이 좋습니다.

GIF나 캔버스 대신 CSS만으로 구현하는 이유

과거에는 이런 화면 왜곡 효과를 구현하려면 용량이 큰 GIF 이미지나 캔버스(Canvas) 스크립트를 사용해야 했습니다. 모던 브라우저에서는 CSS의 의사 요소와 clip-path, @keyframes 속성만으로 같은 효과를 구현할 수 있어, 별도 이미지 파일이나 스크립트 실행 없이 애니메이션을 재생할 수 있습니다.

글리치 효과의 핵심 원리는 동일한 텍스트 층을 3개(원본, 붉은색 층, 청록색 층)로 겹쳐놓고, 각 색상 층을 clip-path로 상하 일부 영역만 보이게 자른 뒤 좌우로 무작위 오프셋만큼 이동시키는 것입니다. 즉 각 레이어가 화면에 보이는 모습은 시간에 따라 달라지는 "보이는 범위"(clip-path의 상하 절단선)와 "가로 이동값"(transform)을 함께 적용한 결과로 정해집니다.

주요 시각 요소는 다음과 같습니다.

• RGB 크로매틱 애버레이션(Chromatic Aberration): ::before 요소에는 붉은색 계열(text-shadow: -2px 0 #ff0055;), ::after 요소에는 청록색 계열(text-shadow: 2px 0 #00ffff;)을 부여해 렌즈 왜곡 현상을 흉내냅니다.
• clip-path: inset() 절단: clip-path: inset(top% 0 bottom% 0) 속성으로 텍스트의 특정 상하 영역만 보이게 하고 나머지는 가립니다.
• 무작위 펄스 타임라인: 키프레임 퍼센티지를 0%100% 사이 2025% 간격으로 나누어 구간마다 다른 위치로 조각이 튀도록 만들어 신호 오류처럼 보이게 합니다.

CSS로 직접 만드는 방법

직접 코드를 작성해 구현하려면 마크업에 data-text 속성을 추가하는 것부터 시작합니다. attr(data-text)를 사용하면 의사 요소에도 같은 문구가 자동으로 채워집니다.

html

다음으로 ::before, ::after 각각에 서로 다른 색의 text-shadow와 clip-path를 지정하고, 서로 다른 지속 시간의 @keyframes 애니메이션을 연결합니다.

css .glitch-text { position: relative; font-size: 48px; font-weight: 900; color: #ffffff; letter-spacing: 3px; text-transform: uppercase; }

/* 붉은색 글리치 의사 레이어 */ .glitch-text::before { content: attr(data-text); position: absolute; top: 0; left: -2px; width: 100%; height: 100%; color: #ffffff; text-shadow: -2px 0 #ff0055; background: #0f172a; overflow: hidden; clip-path: inset(0 0 0 0); animation: glitch-anim-1 2s infinite linear alternate-reverse; }

/* 청록색 글리치 의사 레이어 */ .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 2px; width: 100%; height: 100%; color: #ffffff; text-shadow: 2px 0 #00ffff; background: #0f172a; overflow: hidden; clip-path: inset(0 0 0 0); animation: glitch-anim-2 2.5s infinite linear alternate-reverse; }

/* 1번 레이어 절단 키프레임 */ @keyframes glitch-anim-1 { 0% { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 0); } 20% { clip-path: inset(80% 0 5% 0); transform: translate(4px, 0); } 40% { clip-path: inset(40% 0 45% 0); transform: translate(-2px, 0); } 60% { clip-path: inset(10% 0 75% 0); transform: translate(3px, 0); } 80% { clip-path: inset(65% 0 15% 0); transform: translate(-3px, 0); } 100% { clip-path: inset(30% 0 50% 0); transform: translate(2px, 0); } }

/* 2번 레이어 절단 키프레임 */ @keyframes glitch-anim-2 { 0% { clip-path: inset(15% 0 70% 0); transform: translate(3px, 0); } 25% { clip-path: inset(55% 0 20% 0); transform: translate(-3px, 0); } 50% { clip-path: inset(75% 0 10% 0); transform: translate(4px, 0); } 75% { clip-path: inset(5% 0 85% 0); transform: translate(-4px, 0); } 100% { clip-path: inset(35% 0 40% 0); transform: translate(1px, 0); } }

이 코드를 그대로 사용해도 되지만, 키프레임 퍼센티지와 clip-path 수치를 원하는 느낌에 맞게 조정하려면 값을 하나씩 바꿔가며 여러 번 미리보기로 확인해야 합니다. 문구나 색상, 노이즈 속도를 바꿀 때마다 결과를 바로 확인하고 싶다면 아래 도구를 사용해 실시간으로 미리 확인할 수 있습니다.

직접 해보기 →

적용 시 참고할 점

정리

• 글리치 효과는 원본·붉은색 레이어·청록색 레이어 3겹을 clip-path와 transform으로 어긋나게 배치해 만듭니다.
• ::before/::after의 text-shadow 색상 차이가 RGB 크로매틱 애버레이션을 표현합니다.
• data-text 속성 하나만 바꾸면 모든 레이어의 문구가 함께 바뀝니다.
• 상시 노출보다는 호버나 로딩 초반 등 제한된 구간에만 적용하고, prefers-reduced-motion을 함께 고려하는 것이 좋습니다.

자주 묻는 질문

생성된 코드를 어디에 붙여넣나요?

HTML은 표시할 위치에, CSS는 스타일시트나 style 태그에 넣습니다. div의 class와 data-text 속성에는 동일한 텍스트를 입력해야 효과가 정상적으로 작동합니다.

텍스트를 바꾸면 애니메이션 모양도 바뀌나요?

애니메이션 패턴 자체는 시드값을 기반으로 계산되며 텍스트 내용과는 무관합니다. 패턴만 바꾸고 싶다면 도구의 패턴 변경 버튼을 사용하면 됩니다.

이 도구는 입력한 텍스트를 서버로 전송하나요?

아니요. 입력한 텍스트와 설정값은 모두 브라우저 안에서만 처리되며 외부로 전송되지 않습니다.