글리치 텍스트 효과, 영상 아니라 CSS 원리
게임 사이트나 이벤트 페이지 제목 글자가 빨강·청록색으로 어긋나며 지지직 흔들리는 걸 본 적이 있을 것입니다. 화면이 깨진 것처럼 보이지만 실제로는 동영상도 GIF도 아니고, 같은 텍스트를 색만 다르게 겹쳐 놓고 빠르게 흔드는 CSS 코드입니다. 원리를 알면 무거운 영상 파일 없이도 이 효과를 직접 만들어 넣을 수 있습니다.
요약 ① 글리치 효과는 동영상·GIF가 아니라 같은 텍스트를 색이 다른 레이어로 겹친 뒤 흔드는 CSS 애니메이션입니다 ② 의사 요소(::before, ::after)에 같은 글자를 넣고 색과 위치를 몇 픽셀씩 어긋나게 배치합니다 ③ clip-path로 가로 띠를 무작위로 잘라 매 순간 다른 조각만 보이게 하면 화면이 깨진 듯한 착시가 생깁니다
화면이 지지직 깨져 보이는데 — 이거 영상 손상인가요
결론부터 말하면 파일이 손상된 게 아니라 디자인 의도입니다. 제작자가 고장 난 브라운관이나 신호가 끊긴 화면의 느낌을 내려고 일부러 텍스트를 여러 겹 겹쳐 놓은 것입니다.
화면에는 한 겹처럼 보이지만 실제로는 세 겹의 텍스트가 쌓여 있습니다. 눈에 보이는 진짜 글자 한 장 위에, 살짝 어긋난 빨간색 글자 한 장과 청록색 글자 한 장이 겹쳐 있는 구조입니다.
이 세 장이 딱 맞게 겹쳐 있으면 그냥 흰 글자로만 보입니다. 하지만 애니메이션이 매 순간 조각을 다르게 잘라내고 위치도 흔들면, 신호가 끊긴 화면처럼 지지직거리는 것으로 보이는 것입니다.
이 효과를 CSS로 직접 만드는 방법
직접 만들려면 세 겹의 텍스트가 필요합니다. 실제로 보이는 글자 한 겹과, 의사 요소 ::before·::after로 만든 색이 다른 글자 두 겹입니다.
의사 요소에는 content: attr(data-text)를 써서 태그의 data-text 속성 값을 그대로 글자로 표시합니다. 이렇게 하면 텍스트를 두 번 타이핑하지 않고도 세 겹이 같은 글자를 공유합니다.
두 겹을 각각 몇 픽셀씩 좌우로 밀고 색을 빨강·청록처럼 다르게 지정하면, 멈춰 있어도 색이 어긋난 것처럼 보입니다. 여기에 keyframes로 clip-path 값을 프레임마다 무작위로 바꿔주면, 매 순간 다른 가로 띠만 보이면서 화면이 끊기는 느낌이 완성됩니다.
문제는 이 keyframe 값입니다. 구간마다 어디를 얼마나 자르고 얼마나 움직일지 전부 손으로 정해야 해서, 자연스러운 무작위 느낌을 내려면 값을 여러 번 고쳐가며 눈으로 확인해야 합니다.
저희 도구로 확인하기. 텍스트와 속도·강도·색 이동 슬라이더만 조절하면 keyframe 값이 자동으로 계산되고, 완성된 HTML+CSS 코드를 그대로 복사해 쓸 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 바로 코드 복사
자주 막히는 지점
| 상황 | 원인 |
|---|---|
| 코드를 복사해 텍스트만 바꿨는데 안 바뀜 | data-text 속성은 그대로 두고 안의 글자만 바꿔서, 겹쳐진 색상 레이어는 예전 글자로 남아있습니다 |
| 흔들림이 너무 빨라 눈이 아픔 | speed 값(초)이 낮을수록 애니메이션 한 바퀴가 짧아져 더 빠르게 반복됩니다 |
| 색이 겹쳐 보이지 않고 흐릿하기만 함 | 색 이동(px) 값이 작아서 두 레이어의 어긋남이 잘 안 보입니다 |
| 얇은 폰트로 바꾸니 효과가 어색해짐 | 얇은 글꼴은 잘린 조각의 경계가 흐릿해 보여 두꺼운 글꼴이 효과에 더 잘 맞습니다 |
표에 정리된 것처럼, 대부분의 문제는 data-text 속성과 실제 글자가 서로 다른 값을 갖게 되는 데서 시작됩니다. 두 곳의 텍스트를 항상 같이 맞춰주면 대부분 해결됩니다.
정리
화면이 지지직 깨지며 색이 어긋나 보이는 글리치 텍스트는 영상 손상이 아니라, 같은 텍스트를 색이 다른 레이어로 겹치고 clip-path로 잘게 잘라 흔드는 CSS 트릭입니다.
손으로 keyframe 값을 하나하나 정하는 대신, 슬라이더로 속도·강도·색 이동을 조절하며 미리보기로 바로 확인하면 원하는 느낌을 훨씬 빠르게 찾을 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 바로 코드 복사
자주 묻는 질문
이 효과는 동영상이나 움짤(GIF)인가요?
아닙니다. 화면에 보이는 것은 텍스트와 CSS 애니메이션뿐이라 영상 파일이 필요 없습니다. 그만큼 파일 용량이 가볍고, 글자를 바꾸면 효과도 그대로 새 글자에 적용됩니다.
빨강·청록 조합을 많이 쓰는 이유가 있나요?
신호가 끊긴 옛날 브라운관 화면이나 인쇄물의 색이 어긋나 보이는 모습을 흉내 낸 배색이라 자주 쓰입니다. 색 자체에 정해진 규칙은 없어서, color1·color2 값을 바꾸면 다른 색 조합으로도 같은 원리가 그대로 적용됩니다.
긴 문장에도 이 효과를 쓸 수 있나요?
짧은 제목이나 로고 문구에 가장 잘 어울립니다. clip-path가 글자 전체 높이를 기준으로 가로 띠를 잘라내는 방식이라, 문장이 길어져 줄바꿈이 생기면 띠가 여러 줄에 걸쳐 나뉘어 의도한 모습과 달라질 수 있습니다.