"콘텐츠가 왕이라면, 외관은 여왕입니다." 오늘날의 웹 환경에서 이 말만큼 잘 맞는 표현도 없습니다. 눈길을 사로잡는 디자인은 방문자의 관심을 끌어당기는 데 결정적인 역할을 합니다. 세심하게 설계된 레이아웃, 조화로운 색상 조합, 아름다운 폰트 외에도 방문자의 시선을 즉시 붙잡는 효과적인 방법 중 하나가 바로 움직이는 타자기 스타일의 텍스트입니다. 워드프레스 사용자라면 Typed Js라는 플러그인만 있으면 이 효과를 손쉽게 구현할 수 있습니다.
참고: 이 효과는 텍스트가 움직이기 때문에 글이나 정적인 이미지만으로 그 매력을 전달하기 어렵습니다. 그래서 저는 개인 웹사이트 프로젝트에 직접 적용해 보았으며, 결과물은 제 사이트에서 확인하실 수 있습니다.
플러그인 설치 및 설정
워드프레스에 플러그인을 설치하는 일은 매우 간단합니다. 특히 워드프레스를 다뤄본 경험이 있는 분들이라면 더욱 쉽게 느껴질 것입니다. 관리자 페이지에 로그인한 후 왼쪽 사이드바의 "플러그인 → 새로 추가" 메뉴로 이동하세요. 플러그인 저장소에서 "Typed Js"를 검색한 뒤 설치하고 활성화하면 됩니다.
이제 새로운 Typed Js 효과를 추가할 준비가 되었습니다. 과정은 새 글을 작성하는 것과 거의 비슷합니다. 먼저 왼쪽 사이드바의 "Typed → Add New" 메뉴로 이동한 다음, 새 Typed 효과에 이름을 지정합니다.
중요! "Generated Shortcode(생성된 숏코드)" 부분에 주목하세요. 대괄호 [ ] 안에 있는 문자열이 바로 숏코드입니다. 괄호를 포함한 전체를 복사하여 원하는 위치에 삽입하면 됩니다. 입력한 문자열이 달라지면 숏코드도 함께 달라집니다.
"Typed Options"에서는 화면에 표시할 단어·구문·문장을 원하는 순서대로 추가할 수 있습니다. "+" 버튼으로 새 항목을 추가하고 "-" 버튼으로 항목을 삭제하세요.
문자열 입력란 아래에는 효과의 모양을 조절하는 다양한 설정이 마련되어 있습니다. 타이핑 속도(Typing Speed), 시작 지연 시간(Start Delay), 삭제 속도(Back Speed), 삭제 지연 시간(Back Delay) 등을 자유롭게 조정할 수 있으며, 모든 수치는 밀리초(ms) 단위입니다. 또한 문자열을 무한 반복(loop)하거나, 커서를 표시하고, 커서로 사용할 문자를 지정하고, 깜빡임 효과를 켜거나 끌 수도 있습니다.
그 외에도 폰트와 색상처럼 화면에 표시되는 요소들을 세부적으로 조정할 수 있습니다.
모든 설정을 마쳤다면 "Publish(발행)" 또는 "Update(업데이트)" 버튼을 클릭하면 됩니다.
워드프레스에서 효과 활용하기
앞서 언급했듯이 Typed 효과를 사용하려면 숏코드를 복사해 원하는 위치에 붙여넣기만 하면 됩니다. 저는 SiteOrigin Page Builder로 제작한 랜딩 페이지에 이 효과를 적용해 보겠습니다.
먼저 "페이지 → 새로 만들기"로 새 페이지를 생성합니다. 그다음 "Page Builder" 탭으로 전환하고, 새 "Row"를 추가한 뒤 한 열(one column)로 설정하고, 해당 행 안에 "SiteOrigin Hero" 위젯을 배치합니다.
이제 프레임을 열어 일반 워드프레스 글을 작성하듯이 내용을 편집합니다. 이전 단계에서 생성한 숏코드를 삽입하면 됩니다.
디자인을 완성하기 위해 "Contact Me(연락하기)" 페이지로 연결되는 버튼을 추가하고 스타일을 다듬었습니다. 서비스가 필요한 방문자가 손쉽게 문의할 수 있도록 하기 위해서입니다.
아래가 최종 결과물입니다. 실제로 작동하는 모습이 궁금하시다면 제 사이트를 방문해 확인해 보세요.
Typed Js 항목은 원하는 만큼 자유롭게 만들 수 있으며, 숏코드를 복사해 글이나 페이지 어디에든 효과를 삽입할 수 있습니다. 다만 아쉽게도 게시글 제목에는 적용할 수 없습니다. 직접 시도해 봤지만 안 되더군요.
Typed Js 효과에 대해 어떻게 생각하시나요? 워드프레스 사이트에 사용해 볼 계획이 있으신가요? 아래 댓글로 여러분의 생각과 의견을 자유롭게 공유해 주세요.