워드프레스에 맨 위로 이동 버튼 추가하는 방법

워드프레스에서 맨 위로 가기 버튼을 추가하는 방법을 모르시나요? 안타깝게도 대부분의 워드프레스 테마에는 이 버튼이 기본으로 포함되어 있지 않습니다. 하지만 웹사이트에 이 버튼을 추가할 수 있는 몇 가지 방법이 있습니다.

충분히 노력을 들일 가치가 있는 작업입니다. 웹사이트에 사용자가 탐색 메뉴나 행동 유도(CTA) 버튼에서 멀리 떨어질 정도로 긴 페이지가 포함되어 있다면, 이 버튼을 통해 최소한의 노력으로 페이지의 주요 영역으로 다시 돌아갈 수 있도록 도울 수 있습니다. 

워드프레스 맨 위로 가기 버튼을 추가하는 가장 일반적인 방법으로는 플러그인 사용, 사용자 정의 코드 추가, 노코드 위젯 임베드 등이 있습니다. 플러그인과 임베드된 위젯은 코딩 전문 지식이 필요하지 않으므로 HTML, CSS 또는 JavaScript에 익숙하지 않은 경우 선호되는 방법입니다. 사용자 정의 코드를 사용하면 버튼을 완벽하게 제어할 수 있지만 초보자에게는 좋은 해결책이 아닙니다.

이 가이드에서는 이러한 방법들을 사용하여 워드프레스에서 맨 위로 가기 버튼을 추가하는 방법과 각 방법의 장단점을 살펴봅니다. 

워드프레스 플러그인으로 맨 위로 가기 버튼 추가하기

워드프레스는 웹사이트의 기능을 향상시키기 위해 다양한 플러그인을 제공합니다. 디렉토리 내에서 여러 개발자가 만든 워드프레스 맨 위로 가기 플러그인을 찾을 수 있으며, 이는 버튼을 추가하는 가장 일반적인 방법입니다. 

워드프레스 맨 위로 가기 플러그인에서 사용할 수 있는 옵션

이러한 플러그인 중 다수는 버튼의 위치와 디자인을 선택할 수 있는 사용자 정의 옵션을 제공합니다. 웹사이트에 적합한 맨 위로 가기 버튼 플러그인을 찾을 때 어떤 설정이 가장 중요한지 결정하세요. 고려해야 할 몇 가지 사항은 다음과 같습니다.

• 버튼 위치: 페이지에서 버튼이 표시되는 위치를 결정합니다. 플러그인은 버튼을 오른쪽, 왼쪽 또는 중앙에 배치하는 옵션을 제공할 수 있습니다. 일부 플러그인은 더 세밀한 제어 기능을 제공합니다.
• 아이콘 또는 라벨: 플러그인은 단일 아이콘을 제공하거나 선택할 수 있는 옵션 메뉴를 제공할 수 있습니다. 일부는 아이콘 색상도 사용자 정의할 수 있습니다.
• 모바일 또는 데스크톱에서의 표시 여부: 버튼은 PC와 모바일 기기에서 다르게 표시될 수 있습니다. 플러그인의 표시 여부 옵션을 확인하여 버튼이 어떻게 나타날지 파악하세요.
• 부드러운 스크롤: 일부 버튼은 페이지 상단으로 즉시 이동하는 대신 스크롤 옵션을 제공합니다. 이는 사용자가 페이지 탐색을 더 세밀하게 제어하기를 원할 때 유용합니다.
• 스크롤 오프셋 또는 임계값: 이 설정은 페이지 상단의 요소와 스크롤 위치 사이에 얼마나 많은 공간을 둘지 결정합니다. 이상적으로는 맨 위로 가기 버튼을 클릭했을 때 메뉴나 헤더에 의해 콘텐츠가 가려지지 않아야 합니다.

일부 플러그인은 다른 플러그인보다 더 많은 사용자 정의 기능을 제공합니다. 수많은 스타일링 옵션이 있는 맨 위로 가기 버튼이 필요하지 않을 수도 있지만, 선택한 버튼이 웹사이트에서 이질적으로 느껴져서는 안 됩니다. 페이지의 다른 요소들과 깔끔하게 어우러지도록 하는 것이 좋습니다.

워드프레스에서 맨 위로 가기 버튼을 추가하는 방법

필요에 맞는 플러그인을 선택했다면 다음 단계에 따라 설치하세요.

1. 웹사이트의 관리자 대시보드에 로그인합니다.
2. 플러그인(Plugins)을 클릭합니다.
3. 워드프레스 플러그인 디렉토리에서 해당 플러그인을 찾습니다. 검색창에 이름을 입력하여 찾을 수 있습니다.
4. 플러그인을 클릭합니다.
5. 설치 및 활성화(Install and activate)를 클릭합니다. (유료 플러그인을 설치하는 경우 구매 및 활성화(Purchase and activate)를 클릭합니다.)

프로그램을 설치한 후에는 설정(Settings) 메뉴로 이동하여 맨 위로 가기 버튼의 모양과 스크롤 동작을 구성하세요.

인기 있는 워드프레스 맨 위로 가기 플러그인

워드프레스에 맨 위로 스크롤 버튼을 추가해 주는 플러그인은 수백 가지가 있습니다. 몇 가지 옵션을 소개하자면 다음과 같습니다.

• WPFront Scroll Top: 이 플러그인은 선택할 수 있는 수십 가지의 사전 스타일이 적용된 맨 위로 스크롤 버튼을 제공합니다. 또한 버튼의 크기, 배치 및 스크롤 동작을 설정할 수 있습니다.

• Smooth Scroll Page Up/Down Buttons: 사이트 페이지에 긴 문서가 포함되어 있다면 이 플러그인이 도움이 될 수 있습니다. 워드프레스 부드러운 맨 위로 스크롤 기능을 제공하여 사용자가 개별 텍스트 문서 간에 스크롤하거나 페이지의 시작 부분으로 스크롤할 수 있도록 합니다.

• Nicescrollr: 이 플러그인을 사용하면 맨 위로 가기 버튼을 추가하고 버튼 크기 및 스크롤 속도를 포함한 여러 설정을 관리할 수 있습니다.

플러그인은 설치하기 쉽지만, 지속적으로 관리해야 하는 새로운 의존성을 추가하게 됩니다. 보안 패치가 포함될 수 있으므로 플러그인 업데이트를 항상 최신 상태로 유지하는 것이 중요합니다.  

사용자 정의 코드로 워드프레스에서 맨 위로 가기 버튼 추가하기

워드프레스의 사용자 정의 맨 위로 가기 버튼을 사용하면 버튼의 모양과 동작을 완벽하게 제어할 수 있습니다. 플러그인이 제공하는 설정 옵션에 얽매이지 않고 요구 사항에 완벽하게 맞도록 버튼을 수정할 수 있습니다. 맞춤형 디자인을 원하거나 플러그인으로 인해 발생할 수 있는 페이지 속도 저하를 피하고 싶은 분들에게 훌륭한 대안입니다.

하지만 직접 버튼을 만들려면 전문 지식이 필요합니다. 워드프레스 테마를 능숙하게 편집할 수 있어야 하며 사용자 정의 HTML, CSS 또는 JavaScript에 대한 경험이 있어야 합니다. 

직접 버튼을 개발하려면 사용자 정의 HTML 블록, 테마 사용자 정의 영역 또는 코드 스니펫 워크플로에 코드를 추가하세요. 사이트에 구현한 후에는 새 버튼이 버그를 일으키지 않는지 주의 깊게 테스트해야 합니다.

사용자 정의 버튼의 장단점

맞춤 제작된 맨 위로 가기 버튼은 높은 유연성을 제공합니다. 웹사이트와 자연스럽게 어우러지도록 아이콘과 색상을 조정할 수 있으며, 표시 여부도 조절할 수 있습니다. 예를 들어 사용자가 페이지의 특정 지점에 도달했을 때만 버튼이 나타나도록 디자인할 수 있습니다. 또는 사용자가 스크롤하는 동안 화면에 떠 있는 플로팅 맨 위로 가기 버튼을 워드프레스에 추가할 수도 있습니다.

사용자 정의 버튼을 만들 때의 주요 단점은 기술적인 설정과 테스트입니다. 웹사이트에 맞고 워드프레스 테마와 충돌하지 않는 코드를 작성하는 데는 시간이 걸립니다. 

사용자 정의 버튼 개발에서는 테스트도 핵심입니다. PC, 태블릿, 스마트폰을 포함한 여러 기기에서 버튼의 성능을 테스트할 계획을 세우세요. iOS, Windows, Android와 같은 다양한 플랫폼에서도 버튼을 테스트해 보는 것이 좋습니다.

더 쉬운 노코드 방법: Jform의 맨 위로 가기 위젯 사용하기

플러그인과 사용자 정의 버튼을 대체할 수 있는 또 다른 대안으로 Jform의 맨 위로 가기 위젯이 있습니다. 이는 몇 분 안에 웹사이트에 추가할 수 있는 노코드 솔루션입니다.

플러그인과 달리 Jform의 맨 위로 가기 위젯은 페이지 속도를 저하시키지 않으며 정기적인 업데이트가 필요하지 않습니다. 코딩이 전혀 필요 없으며 워드프레스 테마의 기능에도 영향을 미치지 않습니다. 

또한 Jform 맨 위로 가기 위젯은 완벽하게 사용자 정의할 수 있습니다. 아이콘 스타일, 색상, 크기 및 모서리 반경을 조정할 수 있습니다. 스크롤 시 버튼의 위치와 표시 여부를 변경하는 옵션이 있으며, 모바일 화면을 포함한 모든 기기에서 작동합니다.

Jform 맨 위로 가기 위젯 설치 방법

위젯을 웹사이트에 통합하는 것은 쉽습니다. 먼저 맨 위로 가기 위젯 페이지로 이동한 다음 아래 단계를 따르세요.

1. 툴바의 “Untitled” 필드를 편집하여 위젯에 이름을 지정합니다.
2. 원하는 위치와 스크롤 설정을 입력한 다음 계속(Continue)을 클릭합니다.

• 버튼 위치(Button Position): 왼쪽(Left) 또는 오른쪽(Right)을 선택합니다.
• 라벨 표시(Show Label): 토글하여 활성화하거나 비활성화합니다. 버튼에 표시할 텍스트를 입력합니다.
• 스크롤 후 표시(Show after scrolling): 슬라이더를 사용하여 버튼이 나타나기 전에 사용자가 스크롤해야 하는 픽셀 수를 지정합니다.
• 스크롤 애니메이션(Scroll animation): 부드럽게(Smooth) 또는 즉시(Instant)를 선택합니다.

3. 버튼의 스타일 기본 설정을 입력하고 계속(Continue)을 클릭합니다.

• 버튼 크기(Button size): 슬라이더를 사용하여 버튼의 너비와 높이를 설정합니다.
• 아이콘 크기(Icon size): 슬라이더를 사용하여 화살표 아이콘의 크기를 설정합니다.
• 아이콘(Icon): 버튼에 사용할 화살표 아이콘 스타일을 선택합니다(위로 화살표(Arrow up), 위로 갈매기형 화살표(Chevron up), 또는 굵은 위로 화살표(Bold arrow up)).
• 모서리 반경(Corner radius): 사각 모서리(Square Corners), 둥근 모서리(Rounded Corners) 또는 원형 모서리(Circular Corners)를 선택합니다.
• 버튼 색상(Button Colors): 배경 및 텍스트 색상에 원하는 헥스(hex) 색상 코드를 입력합니다.
• 드롭 섀도(Drop shadow): 토글하여 버튼 아래의 부드러운 그림자를 활성화하거나 비활성화합니다.

4. 표시 규칙을 설정하고 웹사이트에서 무료로 사용해 보기(Try it on your website for free)를 클릭합니다.

• 하단과의 거리(Distance from bottom): 슬라이더를 사용하여 버튼이 하단 가장자리에서 얼마나 떨어져 있는지 정의합니다.
• 측면과의 거리(Distance from side): 슬라이더를 사용하여 버튼이 측면 가장자리에서 얼마나 떨어져 있는지 제어합니다.
• 데스크톱에 표시(Show on desktop): 활성화 또는 비활성화합니다.
• 모바일에 표시(Show on mobile): 활성화 또는 비활성화합니다.

5. 임베드 코드를 복사하여 워드프레스 HTML 편집기에 붙여넣습니다.

버튼을 사용자 정의하는 동안 오른쪽 하단 모서리에 있는 PC 또는 스마트폰 아이콘을 클릭하면 버튼이 어떻게 표시될지 미리 확인할 수 있습니다.

워드프레스 웹사이트에서 Jform 도구를 사용할 때의 장점

전문 웹 디자이너이든 워드프레스 사용 방법을 막 배우기 시작했든 상관없이, Jform에는 웹사이트를 지원하는 유용한 도구가 많이 있습니다.

Jform은 Google, Facebook, Tripadvisor 등의 타사 사이트에서 조직의 리뷰를 표시하도록 사용자 정의할 수 있는 여러 무료 웹사이트 위젯을 제공합니다. 이는 고객 후기를 소개하고 싶지만 워드프레스를 통해 제공되는 유료 플러그인 도구를 사용하는 것이 부담스러운 웹사이트 소유자에게 완벽한 솔루션입니다.

또한 Jform의 맞춤형 워드프레스 양식 임베드 플러그인을 활용할 수도 있습니다. 이를 통해 사이트를 방문하는 사용자로부터 양식 제출물을 수집할 수 있습니다. 연락처 정보, 결제 정보 및 지원서 제출을 포함한 일반적인 사용 사례를 다루는 20,000개 이상의 무료 맞춤형 워드프레스 양식 템플릿을 제공합니다. 단 몇 단계만 거치면 워드프레스에 양식을 임베드할 수 있습니다.

무엇보다도 Jform은 무제한 워드프레스 위젯과 최대 5개의 양식을 지원하는 무료 플랜을 제공합니다. 유료 플랜으로 업그레이드하면 사용할 수 있는 양식의 수가 늘어나고 Jform 브랜딩이 제거되며 추가 저장 공간이 제공됩니다.

워드프레스 워크플로 속도를 늦추지 않고 맨 위로 가기 버튼 추가하기

맨 위로 가기 버튼은 긴 콘텐츠를 스크롤할 때 사용자 경험을 향상시킵니다. 또한 이커머스 페이지와 랜딩 페이지에서 참여도와 전환율을 높이는 데에도 도움이 됩니다. 플러그인이나 사용자 정의 코드를 사용하여 버튼을 추가할 수도 있지만, 가장 쉬운 노코드 솔루션은 Jform의 위젯입니다.

Jform의 맨 위로 가기 위젯이 워드프레스 사이트에 세련된 맨 위로 스크롤 버튼을 어떻게 추가하는지 확인하려면 지금 바로 사용해 보세요.