CSS Typewriter Effect: CSS3 애니메이션으로 타이핑 효과 만들기: steps()함수
CSS Typewriter Effect: CSS3 애니메이션으로 타이핑 효과 만들기
웹사이트의 텍스트를 동적이고 흥미롭게 만드는 방법 중 하나는 타자기 효과(typewriter effect)를 사용하는 것입니다. 이 효과는 텍스트가 점차적으로 나타나는 것처럼 보이게 해서 사이트 방문자의 주목을 끌 수 있습니다. 이 글에서는 순수 CSS만을 이용해 타자기 효과를 만드는 방법을 알아보겠습니다.
타자기 효과는 쉽게 만들 수 있다
타자기 효과를 구현하는 것은 그다지 어렵지 않습니다. 이 튜토리얼을 이해하기 위해서는 기본적인 CSS와 CSS 애니메이션에 대한 지식만 있으면 충분합니다. 우리가 만들 타자기 효과는 CSS의 steps() 함수를 이용해 텍스트 요소의 너비를 0%에서 100%까지 점차 변경하면서 텍스트를 나타나게 하는 것입니다. 또한, 커서가 텍스트를 "타이핑"하는 것처럼 보이게 하기 위해 깜박이는 애니메이션도 추가할 것입니다.
웹 페이지 구성하기
먼저 타자기 효과를 시연할 웹 페이지를 만들어 보겠습니다. 웹 페이지에는 타자기 텍스트를 위한 <div> 컨테이너가 포함됩니다.
<!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body {
background: navajowhite;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html>타자기 텍스트의 컨테이너 스타일링하기
웹 페이지의 레이아웃을 준비했으니 이제 "typed-out" 클래스를 가진 <div>를 스타일링해 보겠습니다.
.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}여기서 overflow: hidden;과 width: 0;를 사용해 타자기 효과가 시작되기 전에는 텍스트가 나타나지 않도록 했습니다. 또한 border-right: .15em solid orange;를 사용해 타자기 커서를 만들었습니다.
텍스트를 나타내는 애니메이션 만들기
이제 타자기 애니메이션을 만들어 보겠습니다. 이 애니메이션은 "typed-out" 요소 내부의 텍스트가 한 글자씩 타이핑되는 것처럼 만듭니다.
@keyframes typing {
from { width: 0 }
to { width: 100% }
}이 애니메이션은 요소의 너비를 0%에서 100%까지 변경합니다. 이제 이 애니메이션을 "typed-out" 클래스에 포함시키고, 애니메이션의 방향을 forwards로 설정하여 애니메이션이 끝난 후에도 텍스트 요소가 원래대로 돌아가지 않도록 하겠습니다.
.typed-out {
/* ... */
animation: typing 1s forwards;
}타자기 효과에 단계 추가하기
지금까지의 애니메이션은 텍스트를 부드럽게 나타나게 하지만, 이는 타자기 효과와는 거리가 있습니다. 이를 해결하기 위해 CSS의 steps() 함수를 사용하여 애니메이션을 단계별로 나눠 보겠습니다.
.typed-out {
/* ... */
animation: typing 1s steps(20, end) forwards;
}이제 타자기 애니메이션이 20단계로 나눠져, 텍스트가 한 글자씩 나타나게 됩니다.
깜박이는 커서 애니메이션 추가하기
원래의 기계식 타자기에는 깜박이는 커서가 없지만, 현대의 컴퓨터나 워드 프로세서에서 볼 수 있는 깜박이는 커서 효과를 추가해 보겠습니다.
@keyframes blink {
from { border-color: transparent }
to { border-color: orange; }
}이 애니메이션은 타자기 효과의 커서가 사용하는 요소의 테두리 색상을 투명에서 주황색으로 변경합니다.
.typed-out {
/* ... */
animation: typing 1s steps(20, end) forwards, blink .8s infinite;
}이렇게 하면 커서가 0.8초마다 깜박이게 됩니다.
결론
이 글에서는 CSS만을 이용해 타자기 효과를 만드는 방법을 알아보았습니다. 이 효과는 웹 페이지에 다양하게 활용될 수 있으며, 특히 랜딩 페이지나 개인 웹사이트에서 눈에 띄게 사용될 수 있습니다. 하지만 이 효과를 과도하게 사용하면 사용자 경험에 부정적인 영향을 미칠 수 있으므로 주의가 필요합니다.