웹 페이지에서 글자가 한 글자씩 나타나는 타이핑 효과(Typing Effect)는 사용자의 시선을 끄는 대표적인 UI 연출 기법입니다. JavaScript를 활용하면 간단한 코드만으로도 이러한 효과를 손쉽게 구현할 수 있습니다.
타이핑 효과의 작동 원리
타이핑 효과의 핵심 원리는 다음과 같습니다.
- 출력할 전체 문장을 문자열 변수에 저장합니다.
- 문자열에서 한 글자씩 순서대로 가져와 화면에 추가합니다.
setTimeout()함수를 이용해 일정한 시간 간격으로 반복 실행하여, 마치 사람이 직접 입력하는 것처럼 보이게 만듭니다.
전체 예제 코드
아래는 버튼을 클릭하면 텍스트가 자동으로 타이핑되는 완전한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button{
padding:10px;
font-size: 18px;
background-color: rgb(128, 19, 218);
color:white;
border:none;
}
.heading{
color:crimson;
}
</style>
</head>
<body>
<h1>typeText</h1>
<button class="typeButton">Click me</button>
<h2 class="heading"></h2>
<script>
document.querySelector('.typeButton').addEventListener('click',typeText);
var i = 0;
var text = 'This text is currently being typed across... It is still typing..';
var speed = 50;
function typeText() {
if (i < text.length) {
document.querySelector('.heading').innerHTML += text.charAt(i);
i++;
setTimeout(typeText, speed);
}
}
</script>
</body>
</html>코드 설명
- 이벤트 등록:
addEventListener('click', typeText)를 통해 버튼 클릭 시typeText함수가 실행됩니다. - 변수 초기화: 인덱스 변수
i, 출력할 문장text, 타이핑 속도(밀리초 단위)인speed를 설정합니다.speed값이 작을수록 타이핑이 빨라집니다. - 재귀 호출:
charAt(i)로 한 글자씩 가져와 화면에 더한 뒤,setTimeout(typeText, speed)로 자기 자신을 반복 호출합니다. - 종료 조건: 인덱스
i가 문장 길이에 도달하면 반복이 멈추고 타이핑이 완료됩니다.
실행 결과
위 코드를 실행하면 초기 화면에는 제목과 버튼만 표시됩니다.
Click me 버튼을 클릭하면, 아래와 같이 문장이 한 글자씩 순차적으로 타이핑되는 것을 확인할 수 있습니다.
응용 팁
speed값을 조절해 타이핑 속도를 자유롭게 변경할 수 있습니다.- 커서 깜빡임 효과를 추가하려면 CSS 애니메이션과 함께 활용하면 더욱 실감나는 연출이 가능합니다.
- 여러 문장을 순환하며 타이핑하려면 문장 배열과 인덱스 관리 로직을 추가하면 됩니다.