Webflow에서 Typewriter 효과 주는 방법

Webflow에서 Typewriter 효과를 주는 방법은 주로 Custom Code를 통해 구현할 수 있습니다. Typewriter 효과는 텍스트가 마치 타자기로 치는 것처럼 한 글자씩 나타나는 애니메이션을 의미합니다. Webflow는 기본적으로 이러한 애니메이션 효과를 지원하지 않지만, 외부 자바스크립트 라이브러리를 활용하면 쉽게 구현할 수 있습니다.

Typewriter 효과 구현 방법 (Typed.js 활용)

1. Typed.js 라이브러리 추가:

   • Webflow에서는 자바스크립트 파일을 로드하기 위해 Custom Code 섹션을 사용합니다.

   • Webflow 프로젝트의 대시보드에서 Project Settings로 이동한 후, Custom Code 탭에서 다음 코드를 </body> 태그 전에 추가합니다.

     html
     코드 복사
     <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
     

2. Typewriter 효과를 적용할 HTML 요소 추가:

   • Webflow 디자이너 모드로 이동하여, Typewriter 효과를 적용할 텍스트 요소(예: Heading, Text Block 등)를 추가합니다.
   • 해당 요소에 고유한 class나 ID를 부여하여 자바스크립트에서 쉽게 선택할 수 있도록 설정합니다. 예를 들어, typewriter-text라는 클래스를 설정할 수 있습니다.

3. Typed.js 초기화 코드 추가:

   • Webflow의 Page Settings에서 페이지 하단에 Custom Code 섹션을 엽니다.

   • 페이지 Body 끝 부분에 다음 스크립트를 추가하여 Typewriter 효과를 설정합니다.

     html
     코드 복사
     <script>
       var options = {
         strings: ["첫 번째 문장입니다.", "두 번째 문장입니다.", "세 번째 문장입니다."],
         typeSpeed: 50, // 타이핑 속도
         backSpeed: 25, // 백스페이스 속도
         loop: true, // 반복 여부
         showCursor: true, // 커서 표시 여부
         cursorChar: '|', // 커서 모양
       };
     
       var typed = new Typed('.typewriter-text', options);
     </script>
     

   • 위 코드에서 strings 배열에 나타낼 문장을 넣을 수 있습니다.

   • typeSpeed는 타이핑 속도를 밀리초 단위로 설정하며, backSpeed는 텍스트가 삭제되는 속도를 설정합니다.

   • loop를 true로 설정하면 텍스트가 반복 재생됩니다.

4. 미리보기 및 퍼블리싱:

   • 코드를 적용한 후 Webflow 미리보기를 통해 Typewriter 효과가 정상적으로 작동하는지 확인합니다.
   • 문제가 없으면 Publish 버튼을 눌러 사이트를 공개합니다.

이 방법을 통해 Webflow에서도 간단히 Typewriter 애니메이션 효과를 적용할 수 있습니다. 추가적으로 원하는 디자인이나 텍스트 스타일링을 Webflow에서 자유롭게 적용할 수 있습니다.