Wix에 맨 위로 가기 버튼을 추가하는 방법

인터넷을 어떻게 검색하시나요? 십중팔구는 스마트폰을 사용하실 것입니다. 2026년 7월 기준으로 StatCounter의 보고에 따르면 전 세계 웹 트래픽의 52.57%를 모바일 브라우징이 차지하며 데스크톱의 45.93%를 앞서고 있습니다. 하지만 모바일 브라우징에는 좁은 화면 공간에 긴 페이지가 꽉 차게 들어가는 등의 여러 문제가 있습니다.

시대를 앞서가는 웹 개발자들은 이러한 문제를 완화하기 위해 맨 위로 가기 버튼을 사용해 왔습니다. 하지만 Wix와 같은 서비스에서 직접 웹사이트를 관리하고 있다면, 이러한 중요한 사용성 기능에 익숙하지 않을 수 있습니다.

Watch on youtube

How to Add a Back-to-top Button in Wix

Wix 맨 위로 가기 버튼을 추가하는 것이 꼭 어려운 일은 아닙니다. Wix는 기본 에디터 요소를 사용해 직접 만들기, Wix 앱 마켓에서 앱 설치하기, 무료 스마트 HTML 위젯 삽입하기라는 세 가지 실용적인 방법을 제공합니다. 이 세 가지 옵션을 단계별로 살펴보고, 위젯을 사용하는 방법이 왜 일반적으로 가장 좋은 방법인지 설명해 드리겠습니다.

옵션 1: 기본 Wix 고정 버튼 사용하기

앱이나 코드 없이 Wix 에디터에서 약 2분 만에 직접 맨 위로 가기 버튼을 만들 수 있습니다. 방법은 간단합니다. 화살표나 아이콘 요소를 추가하고, 페이지 맨 위로 링크를 연결한 다음, 방문자가 스크롤할 때 함께 이동하도록 화면에 고정하면 됩니다. Wix는 고객 센터에서 이 작업 과정을 문서화하여 제공하고 있습니다.

1. 요소 추가하기: Wix 에디터에서 요소 추가를 클릭하고 그래픽, 기본 도형을 차례로 연 다음 화살표를 선택하여 페이지로 드래그합니다. 더 브랜드화된 디자인을 원한다면 아이콘 버튼과 벡터 아트를 사용해도 좋습니다.

2. 페이지 맨 위로 링크 연결하기: 요소를 선택하고 링크 아이콘을 클릭한 후, 페이지 상단/하단을 선택합니다. 그런 다음 상단을 선택하고 완료를 클릭합니다.

3. 화면에 고정하기: 요소를 우클릭하고 화면에 고정을 선택합니다. 위치 그리드에서 우측 하단 셀을 선택한 다음, 가로 오프셋과 세로 오프셋 슬라이더를 사용하여 콘텐츠를 가리지 않도록 위치를 미세 조정합니다. 모든 페이지에 표시를 켜서 웹사이트 전체에 나타나게 합니다.

이는 훌륭한 무료 옵션이지만, 버튼이 항상 표시된다는 큰 단점이 있습니다. Wix의 고정된 요소는 스크롤 임계값이 없으므로 방문자가 이미 페이지 맨 위에 있을 때도 화살표가 아무 의미 없이 허공을 가리키며 제자리에 머물러 있게 됩니다. Wix 문서에서는 작은 화면에서는 고정된 요소가 콘텐츠를 가릴 수 있으며, 이로 인해 화면이 복잡해질 수 있다고 경고합니다.

방문자가 스크롤한 후에만 버튼이 나타나게 하려면 플랫폼의 개발자 환경인 Velo by Wix에서 맞춤형 코드를 작성해야 합니다. 여기에는 JavaScript, 이벤트 핸들러, 디버깅 과정이 포함되며, 이는 대부분의 Wix 사용자가 기대했던 노코드(no-code) 환경과는 거리가 멉니다.

이 옵션을 배제하기 전에 다음 두 가지 사항을 참고하시기 바랍니다.

• 모바일의 경우, Wix는 무료 내장 도구를 제공합니다. 모바일 에디터에는 모바일 도구 아래에 전용 맨 위로 가기 버튼이 포함되어 있습니다. 이 버튼은 표준 레이아웃을 사용하고 길이가 1,380픽셀 이상인 페이지에만 나타나며 모바일에서만 작동합니다.
• Wix Studio 사용자는 부분적인 대안이 있습니다. 방문자가 스크롤을 시작한 직후 버튼이 서서히 나타나도록 지연을 둔 입장 애니메이션을 추가하는 방법을 Wix는 제안합니다.

옵션 2: Wix 앱 마켓 확장 프로그램 설치하기

항상 보이는 버튼 문제를 해결하기 위해 많은 Wix 사용자는 앱 마켓으로 가서 “맨 위로 스크롤”과 같은 도구를 검색합니다. 이러한 앱에는 스크롤 깊이 트리거가 포함되어 있어, 방문자가 페이지 아래로 일정 거리만큼 이동할 때까지 버튼이 숨겨져 있으며, 대부분 데스크톱과 모바일에 대한 별도의 설정을 제공합니다.

문제는 원하는 설정이 종종 유료 등급에 포함되어 있다는 것입니다. 가장 눈에 띄는 두 가지 옵션을 비교해 보겠습니다.

Tornado 앱의 경우, 사용자가 가장 변경하고 싶어 할 만한 두 가지 기능인 사용자 지정 아이콘 업로드와 기기별 디스플레이 설정이 Pro 요금제에 포함되어 있습니다. PurpleBear 앱은 설치는 무료지만 3일의 무료 체험 후에는 사용량 기반 청구로 전환됩니다. 두 앱 모두 그 자체로 비싼 편은 아닙니다. 문제는 반복적으로 청구되는 항목이 하나 더 늘어나고, 사이트의 모든 페이지에 타사 스크립트가 로드된다는 점입니다.

1. 앱 마켓 열기: Wix 에디터의 왼쪽 사이드바에서 앱을 클릭한 다음 앱 마켓 방문을 클릭하고 “맨 위로 스크롤”을 검색합니다.

2. 사이트에 앱 추가하기: 앱 목록을 열고 가격 및 플랜 섹션을 검토하여 원하는 기능이 플랜에 포함되어 있는지 확인한 후, 사이트에 추가를 클릭합니다.

3. 버튼 구성하기: 설정을 열고 스크롤 깊이 임계값, 화면 위치, 아이콘 및 기기별 규칙을 설정합니다. 사이트를 게시하고 데스크톱 브라우저와 휴대폰 모두에서 버튼을 테스트해 봅니다.

옵션 3: 무료 맨 위로 가기 위젯 사용하기 (권장)

월간 앱 구독이나 Velo 코드 작성 없이 임계값 기반의 플로팅 버튼을 원한다면, 무료 외부 삽입 코드를 사용하는 것이 가장 좋습니다. Jform 맨 위로 가기 위젯은 바로 이러한 목적을 위해 제작되었습니다. 브라우저에서 버튼을 구성하고 삽입 코드를 복사한 다음, Wix HTML 요소에 붙여넣고 화면에 고정하면 됩니다.

1. 버튼 만들기: 맨 위로 가기 위젯 페이지를 열고 새 웹사이트 위젯 만들기(Create new website widget)를 클릭합니다. 일반(General) 패널에서 아이콘 옆에 텍스트를 표시하려면 레이블 표시(Show label)를 켜고, 버튼이 나타나는 시점을 제어하려면 스크롤 후 표시(Show after scrolling)를 설정하며, 스크롤 애니메이션(Scroll animation)을 선택합니다.

2. 삽입 코드 복사하기: 웹사이트에서 무료로 사용해 보기(Try it on your website for free)를 클릭하고 생성된 코드를 복사합니다.

3. Wix에 삽입하기: Wix 에디터에서 요소 추가를 클릭하고 코드 삽입을 선택한 다음 HTML 삽입을 선택합니다. HTML 필드에 코드를 붙여넣고 업데이트를 클릭합니다. HTML 요소를 마우스 오른쪽 버튼으로 클릭하고 화면에 고정을 선택한 후 우측 하단에 배치합니다. 사이트를 게시하고 데스크톱과 모바일에서 스크롤 동작을 테스트합니다.

이 옵션은 실제 스크롤 임계값, 완벽한 디자인 제어, 그리고 반복적인 비용 부담 없음 등 모든 것을 한 번에 제공합니다. 스크롤 거리를 설정하여 버튼이 유용할 때만 나타나도록 할 수 있습니다. 스타일이 없는 기본값을 그대로 받아들이는 대신 스타일과 화면 위치를 직접 선택할 수 있습니다. 또한 데스크톱, 모바일 또는 두 기기 모두에서 버튼이 표시될지 여부를 제어할 수 있습니다.

이식성이 뛰어나다는 장점도 있습니다. 이것은 Wix 앱이 아니라 삽입 코드 형태이기 때문에 동일한 위젯 구성을 WordPress, Shopify 및 사용자 지정 HTML을 허용하는 모든 사이트에서 사용할 수 있습니다. Wix에서 다른 플랫폼으로 마이그레이션하더라도 버튼을 그대로 가져갈 수 있습니다. 스크린샷이 포함된 전체 설정 과정을 단계별로 확인하려면 웹사이트에 맨 위로 가기 버튼을 추가하는 방법에 대한 가이드를 참조하세요.

스마트한 노코드 위젯으로 Wix 사이트 향상시키기

맨 위로 가기 위젯은 Jform 디렉토리에 있는 150개 이상의 무료 웹사이트 위젯 중 하나이며, 각 설정 방식은 동일합니다. 브라우저에서 구성하고 삽입 코드를 복사한 다음 Wix HTML 요소에 붙여넣기만 하면 됩니다. 앱 구독도, Velo도, 개발자도 필요하지 않으며, 이는 Wix 사이트에서 매우 중요한 부분입니다. 앱 마켓에서 설치할 때마다 다른 스크립트가 추가되고, 종종 월별 요금이 추가되기도 합니다. 위젯을 사용하면 이러한 부담 없이 실질적인 기능을 추가할 수 있으며, 이는 빠르고 쾌적한 사이트를 유지하느냐 그렇지 못하느냐의 차이를 만듭니다.

스크롤이 긴 사이트에서 맨 위로 가기 버튼과 함께 사용하면 좋은 몇 가지 위젯은 다음과 같습니다.

• 접근성 위젯(Accessibility Widget): 방문자가 대비, 텍스트 크기, 간격 및 모션을 조정할 수 있으며 환경설정을 기억합니다.
• FAQ 위젯: 이 검색 가능한 아코디언은 긴 지원 콘텐츠를 컴팩트한 블록으로 접어줍니다.
• 카운트다운 타이머(Countdown Timer): 긴급성이 행동을 유도하는 런칭, 판매 또는 이벤트 등록 페이지에 유용합니다.
• 팝업 위젯(Popup Widget): 전용 팝업 앱을 설치할 필요 없이 뉴스레터 가입, 공지사항 및 이탈 유도(exit offers)에 유용합니다.
• QR 코드 위젯(QR Code Widget): 레스토랑 메뉴, 이벤트 체크인 및 방문자가 액세스하기를 원하는 모든 항목에 유용합니다.

아직 사이트를 구축 중이라면 구조, 템플릿 및 디자인 결정을 다루는 Wix 웹사이트 만들기 가이드를 참고하세요. 리드, 예약 또는 결제를 수집할 준비가 되면 Jform + Wix 연동을 통해 방금 사용한 것과 동일한 HTML 삽입 요소를 사용하여 완전히 사용자 지정된 양식을 삽입할 수 있습니다.

Jform의 무료 위젯 디렉토리를 탐색하여 성능 저하 없이 Wix 사이트에 추가할 수 있는 다른 기능들을 확인해 보세요.