CSS 애니메이션을 활용하면 JavaScript만으로도 타자기가 글자를 입력하고 지우듯 움직이는 타이핑(Typing) & 삭제(Deleting) 효과를 손쉽게 구현할 수 있습니다. 이 효과는 랜딩 페이지의 헤드라인, 포트폴리오 소개 문구 등에서 시각적인 몰입감을 더할 때 자주 활용됩니다.
아래 예제에서는 여러 개의 단어를 순차적으로 한 글자씩 타이핑한 뒤, 다시 한 글자씩 삭제하고 다음 단어로 넘어가는 과정을 무한 반복합니다. 깜빡이는 커서(|)는 CSS @keyframes 애니메이션으로 표현했습니다.
동작 원리
- typeNow() 함수: 현재 단어를 문자 배열로 분리(
split)한 후,shift()로 앞 글자부터 하나씩 화면에 추가합니다. - deleteNow() 함수:
pop()으로 뒤 글자부터 하나씩 제거하며 화면을 갱신합니다. - 삭제가 끝나면 다음 단어로 인덱스를 이동하고, 마지막 단어까지 출력하면 첫 번째 단어부터 다시 반복합니다.
setTimeout을 사용해 200ms 간격으로 글자를 하나씩 처리하여 자연스러운 타이핑 속도를 만듭니다.
예제 코드
<!DOCTYPE html>
<html>
<style>
div {
display: flex;
margin: 4%;
padding: 2%;
box-shadow: inset 0 0 12px blue;
}
p {
font-family: "Courier Monospace";
font-size: 2em;
color: red;
}
p:last-of-type {
animation: type 0.33s infinite;
}
@keyframes type{
to { opacity: .0; }
}
</style>
<body>
<div>
<p id="text"></p>
<p>|</p>
</div>
<script>
const words = ["Nulla", "facilisi", "Cras sed odio sed leo laoreet molestie id non purus.."];
let i = 0;
let counter;
function typeNow() {
let word = words[i].split("");
var loopTyping = function() {
if (word.length > 0) {
document.getElementById('text').innerHTML += word.shift();
} else {
deleteNow();
return false;
};
counter = setTimeout(loopTyping, 200);
};
loopTyping();
};
function deleteNow() {
let word = words[i].split("");
var loopDeleting = function() {
if (word.length > 0) {
word.pop();
document.getElementById('text').innerHTML = word.join("");
} else {
if (words.length > (i + 1)) {
i++;
}
else {
i = 0;
};
typeNow();
return false;
};
counter = setTimeout(loopDeleting, 200);
};
loopDeleting();
};
typeNow();
</script>
</body>
</html>실행 결과
위 코드를 실행하면 빨간색 고정폭(monospace) 글씨로 단어가 한 글자씩 입력되고, 파란색 그림자 효과가 적용된 박스 안에서 깜빡이는 커서와 함께 단어가 반복해서 타이핑되었다가 지워지는 모습을 확인할 수 있습니다.
응용 팁
setTimeout의 지연 시간(200ms)을 조절하면 타이핑 속도를 자유롭게 변경할 수 있으며, words 배열에 원하는 문장을 추가하기만 하면 별도의 로직 수정 없이 여러 문구를 순환 출력할 수 있습니다. 또한 CSS의 animation 속성 값을 바꾸면 커서의 깜빡임 속도도 조절 가능합니다.