스타일리스트, 인테리어 디자이너, 사진 보정 전문가 등 작업의 시각적 결과를 보여주어야 하는 전문가이신가요? 웹사이트에 비포 애프터 슬라이더를 추가하면 사용하기 쉽고 작업의 가치를 즉각적으로 전달할 수 있습니다. 안타깝게도 워드프레스(WordPress) 사용자에게는 플랫폼 자체에 내장된 슬라이더 기능이 없습니다.
하지만 워드프레스에 슬라이더를 추가하는 것이 불가능한 것은 아닙니다. 서드파티 플러그인 사용, 가볍고 무료인 외부 위젯 사용, 또는 맞춤형 코드를 작성하여 처음부터 슬라이더 만들기 등 세 가지 옵션이 있습니다.
이 글에서는 세 가지 방법을 모두 사용하여 워드프레스 비포 애프터 슬라이더를 추가하는 방법을 설명하므로, 귀하의 필요에 맞는 방법이 무엇인지 알 수 있습니다.
옵션 1: 워드프레스 슬라이더 플러그인 설치하기
비포 애프터 슬라이더를 추가하는 가장 일반적인 방법 중 하나는 워드프레스 플러그인을 사용하는 것입니다. 하지만 이 접근 방식에는 몇 가지 단점이 있습니다.
일부 플러그인은 사이트 전체에 추가 CSS와 JavaScript를 추가하여 페이지 로드 시간을 증가시킵니다. 또한, 엘리멘터(Elementor)와 같은 “무거운” 페이지 빌더는 복잡한 숏코드(텍스트 기반의 워드프레스 전용 코드)를 통해 슬라이더를 관리하도록 강제하므로 초보 사용자에게는 악몽이 될 수 있습니다. 실수로 코드의 일부를 삭제하면 슬라이더가 즉시 작동하지 않게 됩니다. 게다가 일부 플러그인은 프리미엄(Freemium) 비즈니스 모델을 채택하여 고급 기능을 유료 결제 장벽 뒤에 숨겨두기도 합니다.
플러그인이 모든 사용자에게 적합한 것은 아니지만, 기술에 능숙하고 워드프레스에 익숙하다면 훌륭한 해결책이 될 수 있습니다. 워드프레스 비포 애프터 플러그인을 설치하려면 다음 지침을 따르세요.
- 플러그인 설치: 워드프레스 대시보드로 이동하여 플러그인(Plugins)을 클릭합니다. 검색(Search)창에 “비포 애프터 슬라이더”를 입력하고 검색 결과에서 사용하려는 플러그인을 선택합니다. (수십 개의 플러그인이 있습니다. 다른 유형의 작업에 대해서는 최고의 워드프레스 플러그인 목록을 확인해 보세요.)
메시지에 따라 플러그인을 설치합니다. (정확한 설치 지침은 특정 플러그인에 따라 다릅니다.)
많은 플러그인이 무료이지만, 일부 플러그인은 일회성 비용이 발생할 수 있습니다. 대부분의 경우 유료 워드프레스 요금제에서만 사용할 수 있습니다.
- 비포 애프터 슬라이더 만들기: 워드프레스 대시보드에서 플러그인을 엽니다. 새 비포 애프터 슬라이더를 만드는 옵션을 선택합니다. 비포(변경 전) 및 애프터(변경 후) 이미지를 업로드합니다. 가장 좋은 결과를 얻으려면 동일한 구도와 크기를 가진 이미지를 사용하는 것이 좋습니다.
- 비포 애프터 슬라이더 맞춤 설정: 대부분의 플러그인에서는 이미지 레이블, 시작 위치, 핸들 모양, 슬라이더 방향과 같은 설정을 조정할 수 있습니다. 설정을 조정하고 저장합니다.
- 워드프레스 사이트에 비포 애프터 슬라이더 추가: 슬라이더를 표시할 워드프레스 페이지를 엽니다. 플러그인에 따라 전용 워드프레스 블록을 만들거나 페이지에 숏코드를 추가하는 방식으로 추가할 수 있습니다.
Pro Tip
워드프레스 플러그인 사용에 대한 더 많은 안내가 필요하신가요? “워드프레스 사용법”은 워드프레스 플러그인, 양식, 테마 등을 사용하는 데 필요한 주요 정보를 제공하는 자세한 튜토리얼입니다.
옵션 2: 무료 노코드 슬라이더 위젯 사용하기 (권장)
워드프레스 사이트의 로딩 속도를 느리게 만드는 번거로운 숏코드나 무거운 플러그인을 다루고 싶지 않다면, 가장 좋은 방법은 노코드 슬라이더 위젯을 사용하는 것입니다. Jform 비포 애프터 슬라이더 위젯은 완전 무료이며 사용하기 쉽습니다. 이 위젯은 서버리스 방식으로 작동하므로 사이트 속도에 전혀 영향을 미치지 않습니다. 또한 데스크톱과 스마트폰에서 완벽하게 작동합니다.
Jform의 비포 애프터 슬라이더 위젯은 코딩이 필요 없는 시각적인 인터페이스를 제공합니다. 위젯 빌더에 두 개의 이미지를 업로드하고, 드래그 핸들 색상을 맞춤 설정하며, 기본 시작 위치를 지정하기만 하면 됩니다. 그런 다음 코드를 복사하여 워드프레스에 붙여넣습니다.
자세한 내용은 다음과 같습니다.
- 이미지 쌍 추가: Jform 비포 애프터 슬라이더 위젯 페이지로 이동하여 위젯 설정 상자에 비포 및 애프터 이미지를 업로드합니다. 위젯 제목을 수정하고, 제공하려는 상호 작용 유형(드래그 및 클릭 대 마우스 오버)을 지정합니다. 계속(Continue)을 클릭하거나 탭합니다.
- 슬라이더 설정 맞춤 설정: 이미지 비율, 모서리 둥글기, 구분선 두께, 슬라이더 색상과 같은 설정을 조정할 수 있습니다. 아래로 스크롤하여 원하는 모든 사양을 선택합니다.
- 슬라이더 위젯의 임베드 코드 가져오기: 내 웹사이트에서 무료로 사용해 보기(Try It on Your Website for Free)를 클릭하거나 탭합니다. Jform에서 슬라이더 위젯의 임베드 코드를 제공합니다. 복사(Copy)를 클릭하거나 탭합니다. Jform에서 코드를 받기 위해 가입하거나 로그인하라는 메시지를 표시할 수 있습니다.
- 워드프레스에 슬라이더 임베드 코드 붙여넣기: 워드프레스 사이트로 이동하여 블록 삽입기(Block Inserter)에서 사용자 정의 HTML(Custom HTML) 블록을 추가합니다. 임베드 코드를 HTML 블록에 붙여넣습니다. 업데이트(Update)를 클릭하거나 탭합니다. 워드프레스가 비포 애프터 슬라이더 위젯을 워드프레스 사이트에 자동으로 삽입합니다.
옵션 3: 맞춤형 HTML/CSS 슬라이더 코딩하기
서드파티 플러그인이나 외부 위젯 사용을 피하고 싶은 워드프레스 순수주의자라면, 순수 코드를 사용하여 처음부터 슬라이더를 만들 수 있습니다.
이 방법은 기술적으로 무료이며 워드프레스에 내장된 방식이지만 쉽지는 않습니다. 특히 웹사이트 방문자가 스마트폰에서 슬라이더를 사용할 수 있게 하려면 코드 작성에 대한 고급 경험이 필요합니다. 또한 코딩 실수 하나로 인해 슬라이더가 작동하지 않게 되거나 스마트폰 반응형에 영향을 미칠 수 있습니다.
맞춤 코드를 사용하여 워드프레스에 비포 애프터 슬라이더를 추가하는 방법은 다음과 같습니다.
- 비포 및 애프터 이미지 업로드: 두 이미지를 모두 워드프레스 미디어 라이브러리(WordPress Media Library)에 추가합니다.
- 슬라이더를 위한 맞춤형 HTML/CSS 코드 작성: 슬라이더의 구조와 스타일을 구성하기 위해 HTML/CSS 코드를 작성합니다. 대화형 드래그 및 스와이프 기능을 추가하려면 자바스크립트(JavaScript)가 필요할 수도 있습니다.
이 코드는 직접 작성하거나, 코딩 경험이 있는 동료와 작업하거나, AI 도구를 사용하여 생성할 수 있습니다.
코드를 복사합니다.
- 워드프레스 사이트에 코드 추가: 워드프레스 사이트에 사용자 정의 HTML(Custom HTML) 블록을 추가하고 코드를 블록에 붙여넣습니다. 워드프레스 테마 또는 사이트 설정을 통해 필요에 따라 CSS와 자바스크립트를 추가합니다.
스마트한 노코드 위젯으로 워드프레스 사이트 향상하기
사이트 속도와 보안을 최우선으로 생각하고, 비용을 낮추며, 복잡한 코드를 피하고 싶다면 Jform의 비포 애프터 슬라이더 위젯이 웹사이트에 풍부한 대화형 미디어를 추가할 수 있는 훌륭한 방법입니다. 완전히 무료로 사용할 수 있으며, 초보자와 전문가 모두에게 이상적이고 코드를 작성할 필요가 전혀 없습니다.
하지만 Jform이 제공하는 기능은 이뿐만이 아닙니다!
Jform 웹사이트 위젯 디렉터리에서는 워드프레스 사이트를 향상시킬 수 있는 150개 이상의 무료 웹사이트 위젯을 찾을 수 있습니다. 예를 들어, 방문자 카운터 위젯(Visitor Counter Widget)은 사이트의 인기를 보여주는 좋은 방법이며, 카운트다운 타이머 위젯(Countdown Timer Widget)은 중요한 이벤트나 캠페인에 대한 긴박감을 조성하는 데 도움이 됩니다.
또한 Jform은 문의 양식, 잠재 고객 확보 양식, 주문 양식과 같은 수천 개의 워드프레스 양식을 제공합니다. 사이트에 추가하여 중요한 방문자 정보를 수집해 보세요.
Jform은 무료 요금제를 제공합니다. 무료 요금제를 통해 위젯을 살펴보고, 코드를 작성하거나 성능을 저하시키지 않으면서 워드프레스 사이트의 기능을 개선하는 것이 얼마나 쉬운지 확인해 보세요.
이 기사는 무거운 플러그인으로 사이트 속도를 늦추거나 복잡한 숏코드와 씨름하지 않고 시각적인 변화(사진 보정, UI 리디자인 또는 리모델링 등)를 보여주고자 하는 워드프레스 블로거, 포트폴리오 소유자 및 에이전시를 위한 것입니다.
코멘트 보내기: