스퀘어스페이스에 맞춤 배너 추가하는 방법

연말 세일 프로모션, 신제품 발표, 다가오는 이벤트 홍보 등 어떤 목적이든 프로모션 배너는 웹사이트 트래픽을 유도하는 데 필수적입니다. 효과적인 맞춤 배너는 리치 미디어, 카운트다운 타이머, 강력한 클릭 유도 문구(CTA)를 사용하여 클릭률과 고객 참여도를 높입니다.

스퀘어스페이스(Squarespace) 사용자가 배너를 추가하려면 외부 솔루션이 필요할 수 있습니다. 스퀘어스페이스는 기본 공지 바(announcement bar) 기능을 제공하지만, 이 옵션은 기본 링크가 포함된 한 줄의 텍스트로 제한되며 디스플레이 요구 사항이 까다롭습니다. 플루이드 엔진(Fluid Engine) 편집기를 사용하여 히어로 섹션을 공지 바로 만들 수도 있지만, 배너 특유의 콤팩트하고 역동적인 특성이 부족합니다.

CSS 코드를 직접 작성하지 않고 스퀘어스페이스에 맞춤 배너를 추가하려면 두 가지 옵션이 있습니다. 프리미엄 서드파티 플러그인이나 코드 스니펫을 구매하거나, 무료로 제공되는 가벼운 서버리스 위젯을 사용하는 것입니다.

옵션 1: 프리미엄 스퀘어스페이스 플러그인 또는 사용자 지정 CSS 스니펫 설치하기

많은 사용자가 서드파티 서비스나 코드 제작자에게 맞춤형 플러그인 코드를 구매하여 스퀘어스페이스의 한계를 극복합니다. 사용자 지정 코드를 사용하면 디자인 제한을 우회하고 페이지에 에셋을 수동으로 배치할 수 있습니다. 라이선스를 찾아 구매한 다음, 사용자 지정 페이지 블록에 코드를 추가하거나 코드 삽입(Code Injection) 기능을 사용하여 스퀘어스페이스 사이트에 추가해야 합니다.

필요에 맞는 코드를 찾았다면, 단일 페이지에 추가할지 아니면 사이트의 모든 페이지에 추가할지에 따라 두 가지 방법으로 사이트에 코드를 적용할 수 있습니다. 두 가지 방법은 다음과 같습니다.

전체 사이트

1. 왼쪽 탐색 메뉴에서 Pages(페이지) 탭을 클릭합니다.

2. 메뉴 하단의 **Custom Code(사용자 지정 코드)** 드롭다운을 선택하고 **Code Injection(코드 삽입)**을 클릭합니다.

3. 사이트의 헤더나 푸터에 사용자 지정 코드를 붙여넣습니다.

단일 페이지

1. 페이지를 열고 상단의 **Edit(편집)** 버튼을 클릭합니다.

2. 배너를 추가할 위치에서 **Add Block(블록 추가)**을 클릭합니다.

3. 아래로 스크롤하여 **Code(코드)** 옵션을 클릭합니다.

4. 새 코드 블록을 클릭하고 드롭다운 메뉴에서 코드 유형을 선택한 다음, 블록에 코드를 붙여넣습니다. Save(저장)를 클릭하여 완료합니다.

이 방법의 문제는 프리미엄 코드에 대한 예측 불가능성과 비용입니다. 기본 배너, 카운트다운 타이머 또는 유사한 도구에 25달러 이상을 청구하는 곳도 있습니다.

‘프리미엄(Freemium, 무료와 유료의 결합)’ 옵션도 오해의 소지가 있을 수 있습니다. 이러한 옵션은 스퀘어스페이스가 핵심 인프라를 업데이트할 때 쉽게 오류가 발생하거나, 최적화되지 않았거나 모바일에 친화적이지 않은 에셋으로 인해 사이트 속도를 저하시킬 수 있습니다.

웹사이트 만들기의 효과를 높이기 위해 비용을 지불할 필요는 없습니다. 그렇기 때문에 Jform은 스퀘어스페이스 사용자를 위한 무료 대화형 배너 옵션을 제공합니다.

옵션 2: 무료 대화형 배너 위젯 추가하기(권장)

배너를 원하지만 라이선스, 정기 구독 또는 사용자 지정 코드에 비용을 지불하고 싶지 않다면 신뢰할 수 있는 호스팅 삽입 기능이 가장 좋은 해결책입니다. Jform 배너 위젯을 사용하면 배너를 쉽게 사용자 지정하고 스퀘어스페이스에 직접 붙여넣을 수 있는 고유한 임베드 코드를 생성할 수 있습니다.

유료 스니펫을 대체할 수 있는 이 스퀘어스페이스용 위젯을 사이트에 추가하는 방법은 다음과 같습니다.

1. Jform 배너 위젯 페이지로 이동하여 오른쪽 상단의 Get Started Now(지금 시작하기) 버튼을 클릭해 새 위젯을 엽니다.

2. Widget Properties(위젯 속성) 메뉴를 사용하여 배너를 사용자 지정합니다.

3. 배너가 준비되면 Publish(게시)를 클릭한 다음 Copy Code(코드 복사) 버튼을 클릭하여 임베드 코드를 생성합니다.

그런 다음 다음 단계에 따라 스퀘어스페이스용 프로모션 배너를 사이트 전체 또는 페이지별로 임베드하세요.

전체 사이트

1. 왼쪽 탐색 메뉴에서 Pages(페이지) 탭을 클릭합니다.

2. 메뉴 하단의 Custom Code(사용자 지정 코드) 드롭다운을 선택하고 Code Injection(코드 삽입)을 클릭합니다.

3. 사이트의 헤더나 푸터에 사용자 지정 코드를 붙여넣습니다.

단일 페이지

1. 배너를 추가할 페이지를 열고 상단의 Edit(편집) 버튼을 클릭합니다.

2. 배너를 추가할 위치에서 Add Block(블록 추가)을 클릭합니다.

3. 아래로 스크롤하여 Code(코드) 옵션을 클릭합니다.

4. 새 코드 블록을 클릭하고 드롭다운 메뉴에서 코드 유형을 선택한 다음, 블록에 코드를 붙여넣습니다. Save(저장)를 클릭하여 완료합니다.

Jform은 스퀘어스페이스에 이 무료 배너 위젯을 쉽게 추가할 수 있도록 해줄 뿐만 아니라, 시각적 편집기를 통해 위젯 빌더에서 직접 배너를 무료로 사용자 지정할 수 있도록 지원합니다. 배너의 배경 이미지를 개인화하고, YouTube 또는 Vimeo 동영상을 삽입하고, 대화형 클릭 유도 문안(CTA) 버튼을 추가하고, 카운트다운 타이머를 삽입하고, 디바이스별 가시성을 제어할 수 있습니다. 또한 Jform은 오프 서버 방식이므로 사이트에 배너를 추가해도 스퀘어스페이스의 핵심 업데이트와 충돌하거나 레이아웃이 깨지지 않습니다.

스마트한 서버리스 위젯으로 스퀘어스페이스 사이트 성능 강화하기

Jform과 함께라면 배너 외에도 다양한 옵션을 활용할 수 있습니다. Jform은 전환율을 극대화하고, 웹사이트를 가볍게 유지하며, 불필요한 프리미엄 플러그인 구독을 없애는 데 도움이 되는 다양한 무료 웹사이트 위젯을 제공합니다.

이러한 위젯은 다음과 같은 기능을 포함하여 간단한 임베드 코드만으로 스퀘어스페이스 사이트에 강력한 기능을 추가합니다.

• 고객의 자주 묻는 질문에 답하기 위한 FAQ 위젯
• 고객 만족도를 보여주는 Google 리뷰 위젯
• 다가오는 이벤트나 신제품 출시에 대비한 카운트다운 타이머 위젯
• 더욱 원활한 사용자 상호작용을 위한 맨 위로 이동 위젯
• 메뉴, 문서 등에 쉽게 액세스할 수 있는 QR 코드 위젯

Jotform-스퀘어스페이스 연동을 사용하여 온라인 양식과 스퀘어스페이스 사이트를 원활하게 연결할 수도 있습니다.

홈페이지에 배너를 추가하기 위해 프리미엄 웹사이트 플러그인을 관리하느라 시간과 돈을 낭비하지 마세요. Jform의 무료 서버리스 웹사이트 위젯을 사용하여 웹사이트 환경을 개선하고 중요한 리드를 확보하세요.