DIVI 테마 자동 스크롤 텍스트는 한 줄의 글자가 좌우로 끊임없이 흘러가는 ‘움직이는 텍스트 띠’를 말한다. 공지·이벤트 문구·실시간 알림처럼 짧은 메시지를 눈에 띄게 보여줄 때 자주 쓴다. 이 글에서는 자동 스크롤 텍스트가 어떤 원리로 동작하는지 정리하고, 예전 방식인 <marquee> 태그와 오늘날 표준인 CSS 애니메이션을 비교한 뒤, DIVI에서 어디에 코드를 넣으면 되는지 개념 수준으로 설명한다.
자동 스크롤 텍스트란?
자동 스크롤 텍스트는 화면의 일정 영역 안에서 글자가 한 방향으로 계속 이동하는 효과다. 흔히 ‘마키(marquee)’ 또는 ‘티커(ticker)’라고 부른다. 핵심 아이디어는 두 가지다. 첫째, 텍스트를 담는 영역의 폭을 고정하고 넘치는 부분은 잘라낸다. 둘째, 그 안의 글자를 시간에 따라 가로로 이동시켜 흘러가는 것처럼 보이게 한다.
동작을 결정하는 개념은 크게 세 가지로 나뉜다. 아래 표는 움직임의 방식·방향·속도를 어떤 관점으로 다루는지 정리한 것이다.
| 개념 | 의미 | 예시 동작 |
|---|---|---|
| 이동 방식(behavior) | 글자가 어떻게 움직이고 끝나는가 | 흘러가기·끝에서 멈추기·왕복하기 |
| 이동 방향(direction) | 상하좌우 중 어느 쪽으로 가는가 | 오른쪽→왼쪽, 왼쪽→오른쪽 |
| 속도(speed) | 한 바퀴 도는 데 걸리는 시간 | 느리게(예: 20초)·빠르게(예: 8초) |
예전 방식: marquee 태그는 왜 쓰지 않나
과거에는 <marquee> 태그 하나로 손쉽게 스크롤 텍스트를 만들었다. 이 태그는 behavior(scroll·slide·alternate), direction, scrollamount(속도), loop(반복 횟수) 같은 속성으로 움직임을 제어했다.
- behavior=scroll: 흘러가다 사라지고 다시 나타나는 기본 동작
- behavior=slide: 흘러가다 끝에서 멈추는 동작
- behavior=alternate: 양쪽 경계를 오가며 왕복하는 동작
- direction: 이동 방향(left·right·up·down)
- scrollamount: 값이 클수록 빠르게 이동
다만 <marquee>는 비표준 요소로, 현재는 공식적으로 폐기(deprecated)된 상태다. W3C와 MDN은 사용을 권장하지 않으며, 일부 브라우저는 이미 지원을 중단했다. 접근성(화면 낭독기·모션 민감 사용자 대응)에도 불리해, 새로 만든다면 쓰지 않는 것이 맞다. 그래서 오늘날 표준은 CSS 애니메이션이다.
표준 방식: CSS keyframes 자동 스크롤 텍스트
현재 권장되는 방법은 CSS @keyframes와 transform: translateX()를 이용해 글자 띠를 가로로 이동시키는 것이다. 원리는 단순하다. 바깥 컨테이너에 overflow: hidden으로 넘치는 부분을 잘라내고, white-space: nowrap으로 글자를 한 줄에 유지한 뒤, 안쪽 텍스트를 translateX로 오른쪽에서 왼쪽으로 밀어 무한 반복시킨다.
아래는 표준 기법을 그대로 따른 예시 코드다(값은 상황에 맞게 조정).
<div class="ns-marquee">
<span class="ns-marquee__text">누스쿨 자동 스크롤 텍스트 예시 — 공지나 이벤트 문구를 여기에</span>
</div>
<style>
.ns-marquee {
overflow: hidden; /* 영역 밖으로 넘치는 글자 잘라내기 */
white-space: nowrap; /* 글자를 한 줄로 유지 */
}
.ns-marquee__text {
display: inline-block;
padding-left: 100%; /* 처음엔 화면 오른쪽 밖에서 시작 */
animation: ns-scroll 18s linear infinite;
}
@keyframes ns-scroll {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
/* 모션 최소화를 설정한 사용자는 애니메이션 정지 */
@media (prefers-reduced-motion: reduce) {
.ns-marquee__text { animation: none; }
}
</style>핵심은 animation 한 줄이다. 18s는 한 바퀴 도는 시간이라 값이 작을수록 빨라지고, linear는 일정한 속도, infinite는 무한 반복을 뜻한다. 방향을 바꾸려면 translateX의 부호를 반대로 두면 된다. 성능 면에서도 left·margin 대신 transform을 움직이는 편이 유리하다(레이아웃 재계산 없이 GPU 가속).
DIVI 테마에 적용하는 개념
DIVI는 비주얼 빌더 기반 테마라 직접 마크업을 넣을 자리가 정해져 있다. 위 HTML과 CSS는 DIVI의 Code 모듈 또는 Text 모듈(텍스트 모듈의 코드/HTML 입력 영역)에 넣으면 된다. CSS는 모듈에 함께 넣어도 되고, 테마 옵션의 사용자 정의 CSS 영역에 따로 분리해도 동작은 같다. DIVI 버전·인터페이스에 따라 메뉴 명칭이 다를 수 있으니, 정확한 클릭 경로는 사용 중인 빌더 화면에서 ‘Code 모듈’을 추가하는 흐름으로 확인하면 된다.
참고로 누스쿨 사이트는 현재 DIVI가 아니라 Elementor로 운영된다. 이 글은 과거 DIVI 기준으로 작성됐던 기록을 보존·정리한 것으로, 위에 정리한 CSS 자동 스크롤 기법 자체는 테마와 무관하게 동일하게 적용된다. Elementor에서도 동일한 코드를 HTML 위젯에 넣으면 같은 효과를 낼 수 있다.
정리
자동 스크롤 텍스트는 ‘폭을 고정해 넘치는 부분을 자르고, 안쪽 글자를 시간에 따라 가로로 이동시킨다’는 한 문장으로 요약된다. 예전에는 <marquee> 태그를 썼지만 지금은 폐기됐고, 표준은 CSS @keyframes + transform: translateX다. DIVI든 Elementor든 Code/HTML 영역에 동일한 코드를 넣어 적용할 수 있으며, 모션 민감 사용자를 위해 prefers-reduced-motion 처리를 함께 두면 더 안전하다.
💬 댓글 0