타이핑 효과와 커서 깜빡임, JS 아닌 CSS 원리
타이핑 효과가 걸린 문구를 보면 자바스크립트가 실시간으로 한 글자씩 그려 넣는 것처럼 보입니다. 옆에서 깜빡이는 커서까지 더해지면 더 그렇게 느껴집니다. 하지만 이 효과는 순수 CSS 애니메이션 두 개만으로 만들어집니다.
요약 ① 글자가 한 글자씩 나타나는 것은 텍스트를 추가하는 게 아니라 요소의 너비(width)를 0에서 전체 글자 수만큼 늘리는 CSS 애니메이션입니다 ② overflow: hidden이 아직 늘어나지 않은 너비 밖의 글자를 가려서, 너비가 늘어날수록 글자가 나타나는 것처럼 보이게 만듭니다 ③ 옆의 커서는 별개의 border-right + 점멸(blink) 애니메이션이며, 타이핑 애니메이션과 동시에 실행될 뿐 서로 다른 효과입니다
타이핑 효과 — 왜 자바스크립트처럼 보이나
글자가 시간차를 두고 하나씩 나타나기 때문에 대부분 자바스크립트가 setInterval 같은 걸로 문자열을 한 글자씩 이어 붙인다고 생각합니다. 실제로 그렇게 구현하는 라이브러리도 많습니다.
하지만 CSS만으로도 똑같은 착시를 만들 수 있습니다. 텍스트 전체를 처음부터 요소 안에 넣어두고, 그 요소의 너비를 0에서 전체 텍스트 폭까지 애니메이션으로 늘립니다. 요소에 overflow: hidden을 걸어두면 아직 너비가 닿지 않은 부분의 글자는 화면에 보이지 않습니다.
너비가 조금씩 늘어날 때마다 가려져 있던 뒤쪽 글자가 순서대로 드러나므로, 실제로는 텍스트를 추가하는 게 아니라 '가리개'가 옆으로 밀려나는 것뿐입니다. 그런데 이 너비 증가가 매끈하게 이어지면 글자 단위가 아니라 픽셀 단위로 흐르듯 보이게 됩니다.
여기서 CSS의 steps() 타이밍 함수가 핵심입니다. steps(글자수, end)를 쓰면 너비 애니메이션이 부드럽게 흐르지 않고 글자 수만큼 딱딱 끊어서 늘어납니다. 글자 폭이 모두 같은 monospace(고정폭) 글꼴, 그리고 글자 하나의 너비를 뜻하는 CSS 단위 ch를 함께 쓰면 한 단계가 정확히 한 글자와 일치합니다.
확인하는 방법 — 코드로 직접 만들어보기
먼저 텍스트를 감쌀 요소에 overflow: hidden, white-space: nowrap, font-family: monospace를 지정합니다. 줄바꿈과 넘침을 막아야 너비 애니메이션이 의도대로 동작합니다.
다음으로 너비를 0에서 텍스트 글자 수만큼(예: 20글자면 20ch)으로 늘리는 keyframes를 만들고, animation 속성에 duration과 steps(글자수, end)를 지정합니다. 이 값이 실제 글자 수와 다르면 텍스트가 다 보였는데도 애니메이션이 계속 진행 중이거나, 반대로 애니메이션이 끝났는데 마지막 글자가 아직 안 보이는 어긋남이 생깁니다.
커서는 별도로 만듭니다. border-right로 세로선을 하나 그려 넣고, border-color를 투명과 커서색 사이에서 왕복시키는 blink-caret 애니메이션을 콤마로 이어서 함께 겁니다. step-end를 써야 서서히 흐려지지 않고 딱딱 켜지고 꺼지는 커서처럼 보입니다.
저희 도구로 확인하기. 문구와 타이핑 속도, 커서 색상을 입력하면 이 원리대로 계산된 CSS·HTML 코드가 미리보기와 함께 바로 만들어집니다.
무료 · 가입 불필요 · 브라우저에서 바로 CSS 코드 생성
자주 막히는 지점
| 상황 | 원인 |
|---|---|
| 텍스트를 바꿔도 처음부터 다시 재생되지 않음 | 너비 애니메이션은 요소가 새로 렌더링될 때 시작되므로, 텍스트 변경 시 요소를 다시 마운트해야 처음부터 재생됩니다 |
| 일반 폰트에서 타이핑이 부자연스러움 | 글자마다 실제 폭이 달라 ch 단위 너비와 맞지 않아, 글자가 미리 다 보이거나 끝에 빈 여백이 남습니다 |
| steps() 숫자와 글자 수가 다름 | 애니메이션 진행 속도와 실제로 보이는 글자 수가 어긋나 마지막 글자가 늦게 나타나거나 일찍 다 드러납니다 |
| 커서가 깜빡이지 않고 계속 떠 있음 | border-right만 넣고 별도의 blink-caret 애니메이션을 함께 걸지 않은 경우입니다 |
표에 정리된 상황 대부분은 '너비 애니메이션의 steps 값'과 '실제 글자 수'가 어긋나는 데서 시작됩니다. 두 값을 항상 같은 곳에서 함께 계산하면 이런 어긋남이 생기지 않습니다.
정리
타이핑 효과에서 글자가 한 글자씩 나타나는 것은 텍스트 추가가 아니라, overflow: hidden으로 가려둔 요소의 너비를 steps() 단위로 늘리는 CSS 애니메이션입니다. 옆의 커서 깜빡임은 여기에 border-right와 별도의 점멸 애니메이션을 더한 것뿐입니다.
문구 하나를 한 번 타이핑하고 반복하는 정도라면 자바스크립트 없이 이 두 애니메이션 조합만으로 충분합니다.
무료 · 가입 불필요 · 브라우저에서 바로 CSS 코드 생성
자주 묻는 질문
자바스크립트 없이 정말 되나요?
네, 고정된 문구 하나를 타이핑하고 반복 재생하는 효과라면 순수 CSS만으로 충분합니다. width 애니메이션과 blink-caret 애니메이션 두 개를 함께 거는 것이 전부입니다.
monospace가 아닌 다른 폰트를 써도 되나요?
가능하지만 권장하지 않습니다. ch 단위는 글꼴의 숫자 0 하나의 너비를 기준으로 계산되는데, 고정폭이 아닌 폰트는 글자마다 실제 폭이 달라 steps 단계와 화면에 보이는 글자가 정확히 맞아떨어지지 않습니다.
여러 문구를 순서대로 바꿔가며 반복하려면 어떻게 하나요?
하나의 고정된 문구를 반복 재생하는 것은 CSS만으로 되지만, 문구 자체를 계속 교체하려면 텍스트 내용을 바꿔줄 무언가가 필요합니다. CSS 애니메이션은 요소의 스타일만 바꿀 뿐 content 문자열 자체를 순서대로 교체하지는 못하기 때문입니다.