스퀘어스페이스에 커스텀 버튼을 추가하는 방법

콜투액션(CTA) 버튼은 랜딩 페이지에서 가장 가치 있는 요소입니다. 결제 페이지나 문의 양식, 또는 다운로드 가능한 리소스로 방문자를 유도하려면 방문자가 반드시 이 버튼을 클릭해야 하기 때문입니다. 고유한 색상, 아이콘, 또는 호버 효과 등을 사용하여 주변 섹션과 눈에 띄게 대비되는 버튼은 배경과 섞이는 버튼보다 눈에 띄게 더 나은 클릭률을 얻습니다.

스퀘어스페이스(Squarespace)에는 기본 ‘버튼 블록’이 있지만, 버튼 자체를 선택하여 스타일을 지정하는 대신 전체 ‘사이트 스타일 패널’에서 스타일을 지정해야 합니다. 버튼은 기본(primary), 보조(secondary), 3차(tertiary)의 세 가지 유형으로 제공됩니다. 각 유형은 사이트 전체에 동일하게 스타일이 적용되므로 총 세 가지의 버튼 디자인만 사용할 수 있습니다. 기본 버튼의 스타일을 다시 지정하면 모든 기본 버튼에 적용되며, 이는 보조 및 3차 유형에도 동일하게 적용됩니다. 설정 자체도 제한적이어서 아이콘, 호버 효과 또는 그라디언트에 대한 옵션이 없습니다.

사이트의 다른 모든 버튼을 변경하지 않고 특정 버튼에만 고유한 디자인을 적용하는 데는 두 가지 방법이 있습니다. 맞춤형 CSS를 작성하거나 구매하여 ‘사용자 지정 CSS 패널’에 붙여넣어 해당 특정 블록을 지정하거나, 무료로 제공되는 호스팅된 위젯을 사용해 시각적 빌더에서 버튼 스타일을 지정하고 임베드 코드를 ‘코드 블록’에 붙여넣을 수 있습니다.

CSS를 직접 작성하거나 개발자에게 비용을 지불하지 않고도 스퀘어스페이스에 맞춤형 CTA 버튼을 추가하고자 하는 스퀘어스페이스 사이트 소유자, 마케터 또는 디자이너라면, 이 가이드가 두 가지 방법을 모두 사용하여 스퀘어스페이스에서 버튼을 추가하는 방법을 단계별로 안내해 드릴 것입니다. 먼저 CSS 방법을 살펴본 다음 위젯을 활용하는 방법을 알아보겠습니다.

옵션 1: 맞춤형 CSS 스니펫과 기본 블록 사용하기

스퀘어스페이스 페이지에서 독특한 버튼 디자인을 얻는 표준적인 방법은 기본 버튼 블록을 추가한 다음 사용자 지정 CSS로 해당 스타일을 덮어쓰는 것입니다. 스퀘어스페이스에는 이를 위한 ‘사용자 지정 CSS 패널’이 있으며, ID를 통해 단일 블록을 지정하면 해당 유형의 모든 버튼이 아닌 하나의 버튼에만 변경 사항이 유지됩니다.

맞춤형 CSS를 사용하여 스퀘어스페이스에서 버튼을 추가하는 방법은 다음과 같습니다.

1. 편집기에서 페이지를 열고 버튼을 추가하려는 섹션 위로 마우스를 가져간 다음, **블록 추가**를 클릭하고 **버튼**을 선택합니다.

2. **연필 아이콘**을 클릭하거나 버튼을 두 번 클릭하여 텍스트와 링크를 설정합니다. 기본, 보조 또는 3차를 선택한 다음 왼쪽 상단의 **저장**을 클릭합니다.

3. 다음으로 블록 ID를 찾습니다. 스퀘어스페이스 페이지의 모든 블록에는 고유한 ID가 있으며, CSS 앞에 이를 지정하면 해당 유형의 모든 버튼에 적용되는 것이 아니라 해당 버튼 하나에만 변경 사항이 제한됩니다. 브라우저에서 페이지를 검사하여 블록을 마우스 오른쪽 버튼으로 클릭하고 **검사**를 선택하거나, 무료 스퀘어스페이스 ID 찾기 브라우저 확장 프로그램을 사용하여 찾을 수 있습니다. 

4. 편집기 외부에서 사이드바의 **웹사이트**로 이동하여 **페이지**, **사용자 지정 코드**를 차례로 클릭한 다음 **사용자 지정 CSS**를 선택합니다.

5. 규칙을 작성하고 저장합니다. 해당 블록 ID를 지정한 다음 **저장**을 클릭하세요. 스퀘어스페이스의 자체 스타일은 꽤 구체적이므로, 작성한 스타일이 적용되려면 종종 **!important**를 추가해야 할 수도 있습니다. 저장하고 나면 사이트의 다른 모든 버튼은 그대로 유지되면서 해당 버튼 하나만 원하는 모양으로 표시됩니다.

타겟팅을 잘못하는 것은 가장 흔하게 발생하는 문제입니다. 블록 ID가 앞에 없는 상태로 “.sqs-block-button-element”에 대해 작성된 스니펫은 헤더 CTA 및 결제 버튼을 포함하여 사이트의 모든 기본 버튼 스타일을 다시 지정하기 때문입니다. 또 다른 일반적인 문제는 모바일에서의 표시 방식입니다. 데스크톱에서는 제대로 보이는 고정 너비나 큰 글꼴 크기가 휴대전화 화면에서는 버튼을 밀어내거나 텍스트를 한 글자씩 끊어지게 만들 수 있습니다.

스니펫은 비교적 쉽게 찾을 수 있으며 스퀘어스페이스 디자이너들이 자신의 블로그에 무료로 많이 공개합니다. 하지만 더 정교한 호버 및 애니메이션 효과는 유료 애드온으로 판매되는 경향이 있습니다. 어느 쪽이든 사이트 전체에 영향을 미치는 패널에 직접 작성하지 않은 코드를 붙여넣는 것이므로, 무언가 잘못되었을 때 디버깅하는 것은 온전히 여러분의 몫이 됩니다.

옵션 2: 무료 맞춤형 버튼 위젯 추가하기(권장)

별도의 도구에서 버튼을 제작하는 것은 스퀘어스페이스에서 맞춤형 CSS를 대체할 수 있는 훌륭한 방법입니다. 기본 버튼의 스타일을 덮어쓰는 대신 페이지에 새로운 버튼을 배치하는 방식이기 때문입니다. 이 방법에서는 시각적 빌더에서 버튼을 설정하고, 임베드 코드를 복사하여 페이지의 ‘코드 블록’에 붙여넣게 됩니다.

시작하기 전에 스퀘어스페이스 요금제를 확인하세요. 코드 블록에 임베드 코드를 추가하는 것은 코어(Core) 요금제 이상에서만 지원되는 프리미엄 기능입니다. 기본 요금제에서는 코드가 블록에 남아 있기는 하지만 작동하지 않습니다.

어떤 위젯을 선택할지 고민된다면, 스퀘어스페이스용 무료 버튼 위젯인 Jform의 버튼 위젯(Button Widget)을 추천합니다. 이 위젯은 기본 블록보다 더 많은 시각적 제어 기능을 제공합니다. 배경, 텍스트 및 호버 색상을 독립적으로 사용자 지정하고, 라벨 앞뒤에 아이콘을 추가할 수 있으며, 모서리 반경, 높이, 패딩, 텍스트 크기 및 그림자를 조정할 수 있습니다. 

위젯을 사용하여 스퀘어스페이스에서 버튼을 추가하는 방법은 다음과 같습니다.

1. Jform 워크스페이스 페이지에서 **만들기(Create)**를 클릭하고 **웹사이트 위젯(Website Widget)**을 선택한 후 “버튼(Button)”을 검색하고 **위젯 사용(Use Widget)**을 클릭합니다.

2. **일반(General) 탭**에서 웹페이지 열기, 이메일 작성 시작, WhatsApp 채팅 열기 등 버튼의 기능을 선택한 다음 링크 URL과 버튼 라벨을 입력합니다. 색상, 아이콘 및 모양을 설정하려면 **스타일(Style) 탭**으로 전환하고, 버튼을 인라인으로 할지 플로팅으로 할지, 데스크톱, 모바일 또는 둘 다에 표시할지 선택하려면 **레이아웃(Layout) 탭**으로 전환하세요.

3. **게시(Publish)**를 클릭한 다음, 임베드(Embed) 섹션에서 **코드 복사(Copy Code)**를 클릭합니다. 

4. **스퀘어스페이스 편집기**에서 **블록 추가**를 클릭하고 **코드**를 선택한 다음, 블록 모드를 **HTML**로 설정하고 자리 표시자 텍스트를 삭제한 후 코드를 붙여넣고 **저장**을 클릭합니다.

버튼의 스타일이 사용자 지정 CSS 패널이 아닌 Jform에서 지정되기 때문에 전역 사이트 스타일과 충돌하지 않으며, 변경 사항이 사이트의 다른 버튼에 영향을 미치지 않습니다. 다른 색상이나 라벨을 테스트할 때도 블록 ID를 찾고 스니펫을 다시 작성할 필요 없이 위젯만 편집하면 됩니다.

스마트한 서버리스 위젯으로 스퀘어스페이스 사이트 업그레이드하기

마케터, 사이트 소유자 또는 디자이너로서 여러분의 시간은 매우 소중합니다. 단 하나의 CTA 버튼을 사이트의 다른 부분과 다르게 보이게 하려고 블록 ID를 추적하는 데 시간을 낭비할 수는 없습니다. 버튼 위젯을 사용하면 이 문제를 단 몇 분 만에 해결할 수 있으며, 나중에 사용자 지정 CSS 패널을 다시 건드리지 않고도 스타일을 변경할 수 있습니다.

버튼은 코드 스니펫이나 유료 플러그인 없이도 스퀘어스페이스 페이지에 추가할 수 있는 여러 요소 중 하나일 뿐입니다. Jform의 무료 웹사이트 위젯 디렉터리에는 다음을 포함하여 150개 이상의 다양한 옵션이 있습니다.

• 출시 또는 등록 마감일을 위한 카운트다운 타이머. 정적인 버튼으로는 만들 수 없는 긴장감과 몰입감을 조성합니다.
• 가입 제안을 위한 팝업. 유료 플러그인이 있어야만 실행할 수 있었던 기능을 대체할 수 있습니다.
• 최신 게시물을 페이지에 유지해 주는 소셜 피드. 이 기능을 통해 가끔씩만 업데이트하는 사이트라도 항상 최신 상태인 것처럼 보이게 할 수 있습니다.

각각의 위젯은 버튼과 동일한 방식으로 코드 블록을 통해 임베드됩니다. 즉, 페이지에 요소를 하나 더 추가할 때마다 스니펫이나 플러그인을 새로 구매할 필요가 없다는 의미입니다.

아직 웹사이트를 제작 중이거나 리뉴얼을 계획하고 있다면, 개발자 없이 나중에 어떤 요소를 추가할 수 있는지 알아두는 것이 좋습니다. Jotform-스퀘어스페이스 연동 기능은 동일한 방식으로 사이트에 양식을 임베드하므로, 사용자를 가입 페이지로 유도하는 버튼이 정보를 수집하는 양식으로 자연스럽게 이어질 수 있습니다.

스퀘어스페이스에서 어떤 콜투액션 대안을 선택하든, 페이지의 다른 모든 요소와 똑같아 보이는 버튼보다 눈에 띄는 버튼 하나가 훨씬 더 가치 있습니다. 위젯은 클릭을 유도하는 더 빠르고 저렴한 방법일 뿐입니다.