CSS로 타자기 효과를 만드는 방법
CSS(Cascading Style Sheets)는 시간이 흐르면서 놀라운 발전을 거듭해 왔습니다. 지속적인 개선과 발전을 통해, 이제는 CSS만으로도 우리가 예전에는 상상하기 어려웠던 많은 기능들을 구현할 수 있게 되었습니다.
특히 CSS 기능들의 등장은 웹 콘텐츠 스타일링의 기능과 유연성을 크게 향상시켰으며, 이는 CSS 발전의 가장 중요한 부분 중 하나라고 할 수 있습니다.
타자기 효과란 무엇일까요?
타자기 효과는 텍스트가 마치 타자기로 입력되는 것처럼 한 글자씩 나타나는 애니메이션 기술입니다. 이 효과는 오래된 타자기, 초기 컴퓨터 터미널, 혹은 명령줄 인터페이스(CLI)를 떠올리게 합니다.
텍스트가 점진적으로 나타나는 과정을 통해 긴장감과 호기심을 유발하여, 보는 사람이 메시지에 더욱 집중하도록 만드는 매력적인 효과입니다.
CSS `steps()` 함수의 작동 원리
CSS 기능은 예전에는 정적인 스타일링만으로 구현하기 어려웠던 수준의 유연성을 제공합니다. `steps()` 함수는 CSS 애니메이션에서 매우 유용하게 사용되는 기능 중 하나이며, 애니메이션이 부드럽게 전환되는 대신, 뚜렷하고 분리된 단계들을 거치며 진행되는 것처럼 보이게 합니다.
`steps()` 함수는 두 개의 매개변수를 사용합니다. 첫 번째 매개변수는 애니메이션이 수행할 단계의 수를 나타내며, 두 번째 매개변수는 각 단계의 진행 방향을 정의합니다. `steps()` 함수의 기본적인 구문은 다음과 같습니다.
animation-timing-function: steps(n, direction);
여기서 `n`은 애니메이션의 단계 수를, `direction`은 각 단계의 시작점 또는 끝점을 지정합니다. `direction`은 `start` 또는 `end` 값을 가질 수 있습니다.
만약 `direction`을 `start`로 설정하면, 애니메이션이 시작됨과 동시에 첫 번째 단계가 즉시 완료됩니다. 반대로 `end`로 설정하면, 애니메이션이 끝날 때 마지막 단계가 실행됩니다. `steps()` 함수의 중요성을 이해하기 위해 다음 HTML 코드를 살펴보겠습니다.
<div class="container"><div></div></div>
이 코드는 내부 `div` 요소를 포함하는 컨테이너 `div`를 정의합니다. 이제 내부 `div`가 화면을 가로질러 움직이도록 CSS 애니메이션을 적용해 보겠습니다.
.container {background-color: blue;}
div:not(.container) {background-color: red; width: 88px; height: 88px; animation: movebox 4s infinite;}
@keyframes movebox {100% {transform: translateX(100vw);}}
위 코드에서 `@keyframes` 규칙을 사용하여 `movebox`라는 애니메이션을 정의하고, 이 애니메이션을 내부 `div`에 적용하여 화면에서 무한히 반복 이동하도록 설정했습니다.
만약 부드러운 애니메이션 대신 "끊김이 있는" 효과를 원한다면, `steps()` 함수를 다음과 같이 활용할 수 있습니다.
div:not(.container) {background-color: red; width: 88px; height: 88px; animation: movebox 4s infinite; animation-timing-function: steps(10, end);}
아래 GIF 이미지에서 볼 수 있듯이, `steps()` 함수에 매개변수 값으로 10을 지정하면 내부 `div`가 부드럽게 움직이는 대신, 단계별로 애니메이션되는 것을 확인할 수 있습니다. 단계의 수가 많을수록 애니메이션은 더욱 끊겨 보입니다.
위 예시에서는 `direction` 매개변수를 명시적으로 지정했지만, 생략할 경우 브라우저는 기본값으로 `end`를 사용합니다.
타자기 효과 구현하기
이제 `steps()` 함수의 작동 방식을 이해했으므로, 실제로 이 지식을 활용하여 타자기 효과를 만들어 보겠습니다. 먼저 새 폴더를 생성하고 적절한 이름을 지정합니다. 해당 폴더 안에 마크업을 위한 `index.htm` 파일과 스타일을 위한 `style.css` 파일을 생성합니다.
`index.htm` 파일에 다음과 같은 기본 코드를 추가합니다.
<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/how-to-create-a-typewriter-effect-with-css/style.css" /> <div class="container"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, tempore! </div> </div>
위 코드 블록은 간단한 HTML 웹사이트의 마크업을 정의합니다. 컨테이너 `div` 안에 더미 텍스트를 포함하는 또 다른 `div`가 있습니다.
텍스트 애니메이션 적용
`styles.css` 파일을 열고 컨테이너 `div`의 너비를 해당 콘텐츠의 너비에 맞게 설정합니다.
.container {width: fit-content;}
다음으로 `@keyframes` 규칙을 사용하여 애니메이션의 진행 방식을 제어하는 애니메이션을 정의합니다. 0% 시점에서 너비를 0%로 설정하고, 100% 시점에서 너비를 100%로 설정합니다.
@keyframes type-text {
0% { width: 0%; }
100% { width: 100%; }
}
이제 클래스 이름이 `text`인 요소를 선택하고, `overflow` 속성을 `hidden`으로 설정합니다. 이렇게 하면 타이핑 효과가 시작되기 전까지 텍스트가 숨겨진 상태로 유지됩니다. `white-space` 속성을 `nowrap`으로 설정하여 텍스트가 한 줄에 표시되도록 합니다. 또한, `text` 클래스에 고정폭 글꼴을 지정하고, 텍스트 오른쪽에 녹색 세로 테두리를 추가합니다. 이 테두리는 커서처럼 보이게 할 것입니다. 적절한 글꼴 크기와 애니메이션 속성을 `type-text`로 설정합니다. 마지막으로 `animation-timing-function`에 `steps()` 함수를 추가합니다.
.text {
overflow: hidden;
white-space: nowrap;
font-family: "Courier New", Courier, monospace;
border-right: solid 10px green;
font-size: 23px;
animation: type-text forwards 4s;
animation-timing-function: steps(40);
}
이제 브라우저에서 코드를 실행하면 텍스트가 한 글자씩 나타나는 타자기 효과를 확인할 수 있습니다.
만약 더 긴 타이핑 효과를 원한다면, 애니메이션 지속 시간과 `steps()` 함수에 지정된 단계 수를 조정하면 됩니다.
커서에 생명 불어넣기
타자기 효과는 거의 완성되었지만, 깜박이는 커서가 빠져 있습니다. 이전 코드에서 커서 역할을 할 텍스트에 오른쪽 테두리를 설정한 것을 기억하시나요? 이제 `@keyframes` 규칙을 사용하여 이 커서에 깜박이는 애니메이션을 추가해 보겠습니다.
@keyframes cursor-blink {
0% { border-color: transparent; }
100% { border-color: green; }
}
사용자 정의 애니메이션을 정의한 후, `text` 클래스의 `animation` 속성에 애니메이션 이름을 추가하고 지속 시간을 0.6초로 설정합니다.
.text {
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
이제 코드를 실행하면 커서가 깜박이는 것을 볼 수 있습니다. 완벽한 타자기 효과를 완성했습니다.
CSS 함수의 힘
CSS 기능은 웹사이트 구축 방식을 혁신적으로 변화시켜 개발자들에게 강력한 도구를 제공합니다. 이러한 다재다능한 기능들은 이전에는 복잡한 스크립팅 언어로만 가능했던 동적 스타일링 및 상호 작용을 가능하게 합니다.
색상 조작에서부터 반응형 레이아웃, 애니메이션, 창의적인 변형까지, CSS 기능은 웹 디자인의 가능성을 확장했습니다. 유연한 계산을 위한 `calc()`, 아름다운 배경을 위한 `linear-gradient()`, 그리고 매력적인 애니메이션을 위한 `transform()`과 같은 기능을 사용해 시각적으로 돋보이고 매력적인 사용자 경험을 만들 수 있습니다.