Squarespace에 맨 위로 이동 버튼을 추가하는 방법

Squarespace에서 맨 위로 이동 버튼을 추가하는 방법을 적용하면 고객들이 매우 편리해할 것입니다. 하지만 이 기능은 생각보다 조금 복잡합니다. Squarespace에는 기본으로 제공되는 맨 위로 이동 버튼이 없기 때문입니다. 따라서 노코드 위젯이나 약간의 사용자 지정 코드, 또는 앵커 링크를 활용하여 이 문제를 해결해야 합니다.

이 작업은 충분히 투자할 만한 가치가 있습니다. 긴 랜딩 페이지나 심층 블로그 게시물을 읽다 보면 방문자는 긴 스크롤 끝에 페이지 하단에 고립되기 쉽습니다. 특히 요즘 웹 브라우징의 대부분이 이루어지는 모바일 환경에서는 엄지손가락으로 다시 맨 위까지 스크롤해야 할 경우 방문자의 집중력이 금방 흐트러질 수 있습니다. 

맨 위로 이동 버튼은 방문자가 사이트를 이탈하는 대신 계속해서 탐색하도록 돕습니다. 이는 방문자의 참여를 실질적으로 유도하는 웹사이트 제작 방법에 대한 더 큰 전략을 뒷받침하는 작지만 효과적인 탐색 기능 개선입니다.

이 가이드에서는 가장 쉬운 노코드 방식을 먼저 살펴본 다음, 더 세밀한 디자인 제어나 간소화된 내장 옵션을 원하는 분들을 위한 두 가지 대안을 소개합니다.

가장 쉬운 방법: Squarespace용 맨 위로 이동 위젯 사용하기

가장 빠른 옵션은 미리 만들어진 맨 위로 이동 위젯을 찾는 것입니다. 예를 들어, Jform의 맨 위로 이동 위젯(Back to Top Widget)은 단 몇 분 만에 페이지에 버튼을 실시간으로 적용할 수 있는 무료 노코드 도구입니다. 이를 사용하면 CSS나 JavaScript 코드를 단 한 줄도 건드리지 않고 플로팅 버튼을 디자인하고, 임베드 코드를 생성하여 Squarespace에 바로 추가할 수 있습니다.

진행 과정은 다음과 같습니다.

1. 위젯을 맞춤 설정합니다. 위의 링크를 통해 Jform의 위젯 빌더를 열고 매개변수를 조정해 보세요. 아이콘 스타일을 변경하고, 버튼의 크기와 모서리 곡률을 설정하며, 브랜드에 맞게 색상을 선택할 수도 있습니다. 이 위젯을 사용하면 화면에서 버튼 위치를 쉽게 이동하고, 가장자리 여백을 조정하며, 데스크톱 및 모바일 사용자에 대한 표시 여부를 전환할 수 있습니다.

2. 임베드 코드를 가져옵니다. 버튼을 원하는 대로 디자인하면 Jform이 바로 사용할 수 있는 임베드 코드를 생성합니다. 플러그인 설치나 복잡한 설정 단계 없이 간편하게 끝납니다.

3. Squarespace에 붙여넣습니다. 이제 Squarespace 인터페이스를 사용할 차례입니다. 크게 두 가지 옵션이 있습니다.

• 사이트 전체 적용(맨 위로 이동 버튼에 권장): Squarespace 대시보드의 왼쪽 메뉴에서 Pages(페이지)로 이동한 후, 아래로 스크롤하여 Custom Code(사용자 지정 코드) 섹션을 찾고 Code Injection(코드 삽입)을 클릭합니다. Footer(푸터) 필드에 임베드 코드를 붙여넣고 Save(저장)를 클릭하세요. 그러면 모든 페이지에 버튼이 자동으로 표시됩니다. (참고: 사이트 전체 코드 삽입 기능은 비즈니스 플랜 이상에서 사용할 수 있습니다.)

• 단일 페이지에만 적용: 버튼을 배치하려는 페이지를 편집 모드로 열고, +를 클릭하여 블록을 추가한 다음 Code(코드)를 선택합니다. 여기에 임베드 코드를 붙여넣고 저장하세요. 버튼은 해당 페이지에만 나타나지만, 필요한 다른 페이지에서도 이 과정을 반복하여 적용할 수 있습니다.

이것으로 끝입니다. 사이트를 새로고침하면 방문자를 페이지 맨 위로 빠르게 이동시켜 줄 버튼이 나타납니다. 이전에 Squarespace에 양식 추가하기 단계를 따라 해본 적이 있다면, 여기에서의 임베드 과정도 완전히 똑같이 느껴질 것입니다.

이 방법이 가장 손쉬운 해결책으로 꼽히는 몇 가지 실용적인 이유는 다음과 같습니다.

• 자동으로 업데이트됩니다. 다음 달에 색상이나 위치를 변경하기로 결정했다면, 그저 Jform에서 위젯 설정을 편집하기만 하면 됩니다. 그러면 코드를 다시 붙여넣을 필요 없이 실시간 위젯에 변경 사항이 즉시 반영됩니다.
• 공지사항 바, 소셜 피드, 문의하기 버튼 등 필요할 수 있는 다른 무료 웹사이트 위젯들과도 함께 잘 작동합니다. 모두 동일한 임베드 방식을 사용하기 때문입니다.
• 기존 Squarespace 설정과도 매끄럽게 호환됩니다. 양식을 통해 리드를 수집하는 경우, Jform + Squarespace 통합을 활용하면 동일한 임베드 패턴을 사용하여 새로운 양식, 결제 기능 및 리드 캡처를 쉽게 추가할 수 있습니다.

대부분의 Squarespace 사용자에게는 이 정도면 충분합니다. 하지만 픽셀 단위까지 완벽하게 제어하고 싶다면 계속해서 읽어보세요.

대안 방법: 사용자 지정 코드로 Squarespace에 맨 위로 이동 버튼 추가하기

HTML, CSS 및 약간의 JavaScript에 익숙하다면 플로팅 형태의 맨 위로 이동 버튼을 처음부터 직접 만들 수 있습니다. Squarespace는 Code Injection(코드 삽입) 패널, Custom CSS(사용자 지정 CSS) 패널 및 개별 Code Block(코드 블록)을 통해 사용자 지정 코드를 공식적으로 지원합니다.

단, 이 작업에 소요되는 시간을 염두에 두어야 합니다. 버튼 자체에 대해 더 많은 유연성을 가질 수 있지만, 그만큼 더 많은 테스트와 문제 해결 과정을 거쳐야 합니다. 따라서 이 옵션은 일반적으로 매우 구체적인 디자인이 필요한 개발자에게만 적합합니다. 또한 애니메이션, 스크롤 임계값 또는 브레이크포인트 동작을 세밀하게 제어하고 싶을 때도 이 방법을 사용할 수 있습니다.

방법은 다음과 같습니다.

1. 코드가 위치할 곳을 선택합니다. 사이트 전체에 표시되어야 하는 버튼의 경우, Website(웹사이트) → Pages(페이지) → Code Injection(코드 삽입) → Footer(푸터)를 사용하세요. 여기에 추가된 코드는 모든 페이지의 닫는 </body> 태그 바로 앞에 삽입됩니다. 특정 페이지에 일회성 버튼을 추가하려면 Pages(페이지) 패널에서 해당 페이지 위에 마우스를 올리고 톱니바퀴 아이콘을 클릭한 다음, Advanced(고급)를 선택하고 대신 Page Header Code Injection(페이지 헤더 코드 삽입)을 사용하세요.
2. HTML을 추가합니다. 나중에 타겟팅할 수 있도록 ID가 포함된 버튼 요소를 넣으세요. 보통 다음과 같은 형태입니다: <button id=”backToTop” aria-label=”Back to top”>↑ Top</button>. 스크린 리더 접근성을 높이기 위해 aria-label을 반드시 유지하세요.
3. CSS로 스타일을 지정합니다. 이제 CSS로 버튼의 모양과 동작을 편집합니다. 먼저 Custom CSS(사용자 지정 CSS) 패널(Website(웹사이트) → Website Tools(웹사이트 도구) → Custom CSS(사용자 지정 CSS) 아래)을 엽니다. 버튼 위치를 오른쪽 하단에 고정(fixed)으로 설정합니다. 그런 다음 opacity: 0 및 pointer-events: none으로 설정하여 기본적으로 숨깁니다. 또한 .visible과 같은 클래스가 추가될 때 부드럽게 나타나는 전환 효과(transition)를 주는 것이 좋습니다. 마지막으로 콘텐츠보다는 위에, 모달 창보다는 아래에 위치하도록 z-index 값을 충분히 높게 설정하세요.
4. JavaScript 로직을 추가합니다. 스크롤 위치를 감지하는 간단한 스크립트도 필요합니다. 그래야 사용자에게 필요한 순간에만 버튼이 나타납니다. 예를 들어, 방문자가 지정된 임계값(예: 300픽셀)을 지나 스크롤하면 스크립트가 자동으로 .visible 클래스를 추가하여 버튼이 나타나게 됩니다. 사용자가 버튼을 클릭하면 window.scrollTo({ top: 0, behavior: ‘smooth’ })를 호출하여 부드러운 애니메이션과 함께 페이지를 맨 위로 다시 스크롤합니다.

이 방식의 가장 큰 장점은 디자인의 자유도이지만, 대부분의 기업에 꼭 필요한 요소는 아닙니다. 위젯이나 코드 없이 앱을 구축할 수 있는 Jform 앱과 같은 도구는 버튼을 나만의 스타일로 꾸밀 수 있는 충분한 유연성을 제공하며 코딩 시간을 크게 절약해 줍니다. 게다가 Squarespace가 템플릿에 새로운 구조적 변경 사항을 출시할 때마다 코드를 업데이트할 필요가 없습니다.

간단한 해결책: 앵커 링크를 맨 위로 이동 단축키로 사용하기

플로팅 버튼이 굳이 필요하지 않고 긴 섹션 하단에 클릭 가능한 맨 위로 이동 링크만 있으면 되는 경우, Squarespace의 내장 앵커 링크 기능을 사용하면 코드 없이도 작업을 완료할 수 있습니다. Squarespace는 2025년에 Squarespace 7.1의 일부로 이 기능을 추가했습니다. 작동 방식은 다음과 같습니다.

1. 상단 섹션에 앵커를 설정합니다. 맨 위로 이동 단축키를 추가하려는 페이지에서 Edit(편집)를 클릭하세요. 가장 첫 번째 섹션 위에 마우스를 올리고 Edit Section(섹션 편집)을 클릭합니다. 거기에서 섹션 설정 패널 하단에 있는 Anchor Link(앵커 링크) 필드로 스크롤하세요. “top”과 같은 슬러그를 입력하고 복사 아이콘을 클릭하여 URL을 가져옵니다.

2. 원하는 곳에 맨 위로 이동 링크를 추가합니다. 페이지 아래쪽에 버튼 블록을 추가하거나 텍스트 블록을 추가하세요. 텍스트나 버튼을 강조 표시하고 링크 아이콘을 클릭한 다음 앵커 URL을 붙여넣습니다. 방문자가 이를 클릭하면 페이지가 해당 상단 섹션으로 다시 이동합니다.

3. 선택 사항: 스크롤을 부드럽게 만듭니다. 앵커 링크는 사용자를 페이지 맨 위로 즉시 이동시키는데, 이는 부자연스러울 수 있으며 사이트 몰입도를 방해할 수 있습니다. 부드러운 스크롤 애니메이션을 추가하여 이 문제를 해결하세요. Website(웹사이트) → Pages(페이지) → Custom CSS(사용자 지정 CSS)로 이동하여 다음을 추가합니다:

html {

  scroll-behavior: smooth;

}

이 한 줄의 코드로 사이트 전체의 모든 앵커 링크에 부드러운 스크롤이 적용됩니다.

이 방법에는 몇 가지 명확한 한계가 있습니다. 플로팅 형태가 아니기 때문에 방문자는 페이지의 특정 지점(일반적으로 긴 섹션의 끝이나 푸터 근처)에서만 링크를 볼 수 있습니다. 또한 위젯이나 사이트 전체 사용자 지정 코드 버튼처럼 모든 페이지에 자동으로 나타나지도 않습니다. 하지만 단순히 빠른 상단 이동만 필요한 긴 블로그 게시물, 판매 페이지 또는 원페이지 사이트의 경우에는 앵커 링크만으로도 충분한 경우가 많습니다.

참고: 블로그, 이벤트, 포트폴리오 또는 스토어 섹션에서는 앵커 링크가 직접 지원되지 않습니다. 이러한 페이지에서 앵커 링크를 사용하려면 지원되지 않는 섹션 위에 빈 섹션을 추가하고 대신 그곳에 앵커를 연결해야 합니다. 빈 섹션의 설정에서 Fill Screen(화면 채우기)을 끄면 자연스럽게 보이도록 만들 수 있습니다. 그렇지 않으면 페이지 상단에 어색한 여백이 생기게 됩니다.

Squarespace를 복잡하게 만들지 않고 맨 위로 이동 버튼 추가하기

Squarespace를 복잡하게 만들지 않고 이러한 버튼을 추가하는 가장 쉬운 방법을 찾고 있다면, 노코드 위젯이 가장 빠르고 유연한 옵션입니다. 예를 들어, Jform의 맨 위로 이동 위젯을 사용하면 단 한 줄의 코드도 작성하지 않고 디자인, 임베드 및 업데이트를 할 수 있습니다.

사용자 지정 코드는 완벽한 디자인 제어권을 제공하므로 매우 구체적인 시각적 목표가 있는 경우에 유용합니다. 기본 앵커 링크 기능은 괜찮은 대안이지만 제어권이 그만큼 많지는 않습니다. 어떤 것을 선택하든 사이트에 필요한 것에 맞춰 방법을 선택하고 불필요하게 복잡한 작업을 피하세요.

지금 바로 맨 위로 이동 위젯을 사용해 몇 분 만에 세련된 맨 위로 스크롤 버튼을 Squarespace 사이트에 추가해 보세요. 이미 Squarespace 양식을 위해 Jform을 사용하고 있다면 첫 클릭부터 임베드 과정이 친숙하게 느껴질 것입니다.