[CSS] 전광판처럼 흐르는 텍스트 효과

개요

이번 글에서는 CSS를 사용하여 웹사이트에서 전광판처럼 흐르는 텍스트 효과를 어떻게 구현할 수 있는지에 대해 알아보겠습니다.
이러한 효과는 웹사이트를 더 동적으로 만들어 주며 방문자의 시선을 끌기에 탁월합니다.
글에서는 가급적 자바스크립트를 사용하지 않고 CSS만으로 작성하는 방법에 대해 다루어 볼 것입니다.

전광판 느낌 내기

기본 스타일링

전광판 느낌을 내기 위해서는 텍스트에 화려한 스타일을 적용해야 합니다. 다양한 색상, 그림자 효과, 그리고 글자 크기 조절을 통해 전광판과 유사한 느낌을 연출할 수 있습니다. 예를 들어 다음과 같은 스타일링을 적용할 수 있습니다.

.text {
    font-size: 48px;
    color: #00FF00; /* 녹색 글자색 */
    text-shadow: 0 0 10px #FF0000; /* 빨간색 그림자 효과 */
    background-color: black; /* 배경색을 검은색으로 설정 */
    padding: 20px; /* 텍스트 주변에 여백 추가 */
}

도트 느낌을 위한 격자무늬

전광판에서 흔히 볼 수 있는 도트 느낌을 주기 위해 격자 무늬(그리드)를 배경으로 사용할 수 있습니다. 다음은 CSS를 사용하여 격자 무늬를 만드는 방법입니다.

.text {
    font-size: 48px;
    color: #00FF00;
    text-shadow: 0 0 10px #FF0000;
    background: repeating-linear-gradient(0deg, black, black 10px, transparent 10px, transparent 20px); /* 10px 간격의 가로 격자 무늬 */
    padding: 20px;
}

위 코드에서 repeating-linear-gradient를 사용하여 가로로 10px 간격의 검은색 가로 격자 무늬를 만들었습니다. 이를 텍스트의 배경으로 적용함으로써 도트 느낌을 표현할 수 있습니다.

텍스트 스크롤링 구현하기

애니메이션 원리

텍스트 스크롤링 효과를 구현하려면 CSS의 @keyframes를 사용하여 키프레임 애니메이션을 정의해야 합니다. 이 애니메이션은 텍스트가 화면을 벗어나는 것처럼 보이게 하고, 움직임을 주어 스크롤링과 유사한 효과를 만듭니다.

먼저, @keyframes 규칙을 사용하여 시작과 끝 지점에서의 스타일을 정의합니다. 예를 들어, 텍스트를 오른쪽으로 이동시켜 화면 밖으로 보내려면 다음과 같이 애니메이션 키프레임을 정의할 수 있습니다:

@keyframes scrollText {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

위 코드에서 scrollText라는 이름의 키프레임을 정의했습니다. 시작 지점(0%)에서는 텍스트를 오른쪽으로 100% 이동시켜 화면 밖으로 보내고, 종료 지점(100%)에서는 텍스트를 왼쪽으로 100% 이동시켜 화면 밖으로 보냅니다. 이렇게 하면 텍스트가 왼쪽으로 이동하면서 스크롤링하는 효과를 얻을 수 있습니다.

무한 반복을 위한 가상요소 설정

위에서 정의한 애니메이션을 보면 무한반복은 되지만 뚝뚝 끊기는 듯한 느낌이 듭니다.
애니메이션이 매끄럽게 무한으로 흐르는 듯한 효과를 주기 위해서는 글자를 옆에 복사해서 문구의 앞부분이 뒤에도 같은 모양으로 되어 있어서 매끄럽게 보입니다.
다음은 자바스크립트 없이 CSS많으로 내용을 자동으로 복사하는 방법은 글을 두번써도 되지만 그렇게 되면 글자량에 따라 애니메이션이 되는 부분을 잡기가 힘듭니다.
즉 원본의 글 폭만큼 작동하는 애니메이션이기 때문이에 원본글을 회손하면 안되죠.

다음은 가상요소를 사용하여 원본의 글을 뒤에 나타내고자 합니다.

.scroll_text {white-space: nowrap;font-size: 100px; animation: scroll 30s linear infinite; width:fit-content; font-weight: bold; }

.scroll_text::after {content:attr(data-text);position: absolute;}
<div class="scroll_text" data-text="여기에 표시할 텍스트를 입력하세요. 이 텍스트가 무한히 흘러갑니다.">여기에 표시할 텍스트를 입력하세요. 이 텍스트가 무한히 흘러갑니다. </div>

위 코드에서 주목할 것은 가상요소의 content에 attr(data-text)로 속성의 글자를 얻어와 설정한 항목입니다. 이로서 원래의 원본을 건드리지 않고 텍스트를 덧붙이는 효과를 주고 가상요소에 포지션을 absolute를 주어 자리를 차지 않게 해줍니다.

이렇게 하면 텍스트에 스크롤링 애니메이션을 주었을 때 부드럽게 이어지는 효과를 구현할 수 있습니다.

흐르는 글자 효과 예제 소스

이제 위에서 설명한 것을 확용하여 스타일링과 애니메이션 효과를 적용해 보겠습니다.

<style>
body {background:#000;}
.scroll_container {border:1px dashed gray; overflow: hidden;position: relative; color:lightgreen; background:rgba(0,0,0,0.5)}
.scroll_text {white-space: nowrap;font-size: 100px; animation: scroll 30s linear infinite; width:fit-content; font-weight: bold; }
.scroll_text::before {content:"";background: repeating-linear-gradient(0deg, #000, #000 1px, transparent 1px, transparent 4px), repeating-linear-gradient(90deg, #0000, #000 1px, transparent 1px, transparent 4px); position: absolute; width:200%; height:100%; left:0; top:0;opacity:.5}
.scroll_text::after {content:attr(data-text);position: absolute;color:lightgreen; z-index:-1;}
@keyframes scroll {
      0% {transform: translateX(0);}
      100% {transform: translateX(-100%);}
}
</style>
<div class="scroll_container">
    <div class="scroll_text" data-text="여기에 표시할 텍스트를 입력하세요. 이 텍스트가 무한히 흘러갑니다.">여기에 표시할 텍스트를 입력하세요. 이 텍스트가 무한히 흘러갑니다. </div>
</div>

여기에 표시할 텍스트를 입력하세요. 이 텍스트가 무한히 흘러갑니다.

위의 소스를 응용한 것이 웹툴의 전 광판앱입니다.
예능에서 보면 방청객이 핸드폰을 들고 전광판 앱을 켜놓고 보여주고 있을때가 있죠. 거기서 아이디어를 얻어 만든것입니다.

결론

이러한 방법들을 사용하여 CSS로 전광판처럼 흐르는 텍스트 효과를 구현할 수 있습니다. 이 효과는 사용자의 시선을 끌어 웹사이트에 동적이고 화려한 느낌을 더해줍니다. 이러한 기술을 응용하여 웹사이트나 웹 앱에서 다양한 텍스트 애니메이션 효과를 만들어보세요.

자주 묻는 질문 (FAQs)

이 텍스트 효과를 모방해서 사용할 수 있을까요?
네, 이 코드를 사용하여 텍스트 효과를 구현할 수 있습니다. 적절한 속성을 수정하여 원하는 디자인으로 커스터마이즈할 수 있습니다.

이 코드는 모든 브라우저에서 작동할까요?
대부분의 최신 브라우저에서 잘 작동합니다. 그러나 오래된 브라우저에서는 지원되지 않을 수도 있으므로 확인이 필요합니다.

추가적인 효과를 적용할 수 있을까요?
네, 여러 가지 효과를 결합하여 더욱 독특하고 흥미로운 텍스트 애니메이션을 만들 수 있습니다. 실험해보며 창의성을 발휘해보세요.

이 효과를 사용하려면 어떤 기술적인 지식이 필요한가요?
기본적인 HTML, CSS, 그리고 CSS 애니메이션에 대한 기본 지식이 있으면 이 효과를 구현할 수 있습니다. 각 속성의 동작 방식을 이해하면 더욱 효과적으로 사용할 수 있습니다.

웹사이트에 이 효과를 적용하려면 어떻게 해야 하나요?
위의 코드 예제를 참고하여 웹사이트의 특정 요소에 이 효과를 적용하려면 해당 요소의 클래스 또는 ID를 지정하고, CSS 코드를 스타일 시트에 추가하면 됩니다.

개요