블로그

커스텀 CSS 없이 반응형 스퀘어스페이스 가격표 만드는 방법

마지막 업데이트 날짜: 
커스텀 CSS 없이 반응형 스퀘어스페이스 가격표 만드는 방법

요금표를 사용하면 고객은 자신이 지불하는 금액에 대해 어떤 서비스를 받을 수 있는지 쉽게 확인할 수 있습니다. 이는 SaaS 요금제, 에이전시 패키지, 멤버십 또는 구독 중 어떤 것을 판매하든 중요합니다. 실제로 2024년 Zuora/Harris Poll 연구에 따르면, 미국 성인의 80%가 정기 결제 제품의 구매 및 결제 방식에 대한 유연성이 “중요하다”, “매우 중요하다” 또는 “절대적으로 필수적이다”라고 답했습니다.

하지만 스퀘어스페이스에는 기존의 행과 열로 구성된 표를 위한 기본 블록이 포함되어 있지 않습니다. 텍스트, 버튼, 플루이드 엔진(Fluid Engine)을 사용하여 직접 스퀘어스페이스 요금표를 만들 수는 있지만, 데스크톱과 모바일 레이아웃에 맞게 각각 따로 작업해야 합니다. 

두 가지 다른 화면 크기에 맞춰 3개의 요금제 카드를 일일이 수동으로 배치하는 데 귀중한 시간을 허비하고 싶지 않다면, 훨씬 덜 수고스러운 방법을 알려드리겠습니다.

옵션 1: 기본 스퀘어스페이스 레이아웃 블록을 사용하여 표 만들기

스퀘어스페이스에는 이미 요금제(Pricing Plan) 블록이 있으므로, 판매하는 항목에 따라 처음부터 요금표를 만들 필요가 없을 수도 있습니다. 이 블록은 회원 전용 사이트, 강의, 동영상, 유료 블로그를 포함한 멤버십 및 제한된 콘텐츠를 위한 요금제에서 유용하게 작동합니다. 

무료, 일회성, 할부 또는 정기 결제 이용권을 제공할 수 있으며, 여러 요금제 블록을 나란히 배치하여 비교할 수 있게 만들 수 있습니다.

스퀘어스페이스 레이아웃 블록을 사용하여 표 만들기

이것이 여러분이 판매하는 서비스에 해당한다면 설정 방법은 다음과 같습니다.

  1. 요금제 생성: 제품(Products)에서 판매할 콘텐츠나 멤버십을 생성한 다음 가격 및 액세스 규칙을 추가합니다. 조건에 맞는 콘텐츠를 하나로 묶는 요금제를 만들 수도 있습니다.
  2. 요금제 블록 추가: 페이지를 편집하고 블록 추가(+)를 클릭한 다음 요금제(Pricing Plan)를 고르고, 앞서 생성한 요금제를 선택합니다.
  3. 요금제 스타일 지정: 디자인(Design)에서 제목, 설명, 가격, 혜택, 버튼을 표시할지 여부를 선택합니다. 여러 요금제를 나란히 배치하려면 블록을 더 추가하세요.
스퀘어스페이스 디지털 제품 요금제 블록 스타일 지정

하지만 문제점은 스퀘어스페이스의 요금제(Pricing Plan) 블록이 자사의 멤버십 및 제한된 콘텐츠 기능에 종속되어 있다는 것입니다. 이 방식은 SaaS 등급, 에이전시 패키지, 프리랜서 리테이너 계약 또는 기타 서비스를 비교하는 표에는 적합하지 않습니다.

스퀘어스페이스 디지털 제품 요금제 블록 스타일 적용

이러한 경우 기본적으로 사용할 수 있는 차선책은 플루이드 엔진(Fluid Engine)입니다. 이 기능을 사용하면 개별 텍스트 및 버튼 블록으로 각 요금제 등급을 만든 다음, 이를 열(column)로 정렬할 수 있습니다. 그러나 데스크톱과 모바일에 대해 각각 따로 작업해야 하는 번거로움이 있습니다. 

스퀘어스페이스의 자체 문서에 따르면, 이 요금제 블록은 요금제, 패키지 또는 서비스를 위한 범용 비교 표를 만들기 위한 것이 아니라 제한된 콘텐츠에 대한 접근 권한을 판매하기 위해 존재한다고 명시되어 있습니다.

독립 개발자가 만든 스퀘어스페이스 전용 요금표 플러그인을 구매할 수도 있습니다. 예를 들어, Will Myers는 사이트 당 25달러에 3가지 사전 설정 스타일과 스퀘어스페이스 7.1을 지원하는 플러그인을 판매합니다. 하지만 스퀘어스페이스의 공식 확장 프로그램(Extensions) 마켓플레이스의 일부도 아니고 공식 스퀘어스페이스 연동 기능도 아니기 때문에 추천하지 않습니다.

Pro Tip

웹사이트 구축에 대한 더 깊은 통찰력을 얻으려면 웹사이트 만드는 방법 문서를 확인해 보세요.

옵션 2: 무료 맞춤형 요금표 위젯 추가하기

여러 카드를 나란히 배열하는 대신 비교 표를 원하신다면 Jform의 요금표 위젯을 사용해 보세요.

Jform 요금표 웹사이트 위젯 랜딩 페이지

시각적 빌더를 사용하면 월간 및 연간 요금표를 추가하고, 요금제와 기능을 편집하며, 각 CTA(콜투액션) 링크를 필요한 곳으로 연결할 수 있습니다. 또한 카드, 캐러셀 또는 전체 비교 레이아웃 중에서 선택할 수 있습니다. 

추천하는 요금제 등급에 인기(Popular) 라벨을 표시하거나 할인 및 이전 가격을 추가할 수도 있습니다. 색상, 타이포그래피, 버튼, 열 너비 및 모바일 동작을 원하는 대로 제어하는 것도 가능합니다. 

표 추가 버튼이 있는 Jform 웹사이트 위젯 요금표 위젯 빌더 요금표 섹션

빠르고 간편하게 시작해 보세요. 

  1. 요금표 만들기: 요금제, 가격, 기능, 설명 및 CTA 링크를 추가합니다. 여러 개의 표(예: 월간 및 연간 가격)를 생성하여 방문자가 이리저리 전환하며 볼 수 있도록 설정할 수 있습니다.
  2. 레이아웃 선택 및 스타일 지정: 모던 그리드(Modern Grid), 콤팩트 칼럼(Compact Columns), 클래식 비교(Classic Comparison), 카드 캐러셀(Card Carousel)과 같은 사전 설정 디자인을 선택한 다음, 스퀘어스페이스 사이트에 어울리도록 디자인을 조정합니다. 
  3. 스퀘어스페이스에 삽입하기: 웹사이트에서 무료로 사용해 보기(Try It on Your Website for Free)를 클릭하고 생성된 삽입 코드를 복사한 다음, 스퀘어스페이스 페이지를 열고 코드(Code) 블록을 추가합니다. 코드를 HTML로 붙여넣고 소스 표시(Display Source)가 꺼져 있는지 확인한 후, 페이지를 저장하고 미리 봅니다.
커스텀 CSS 없이 반응형 스퀘어스페이스 가격표 만드는 방법 Image-1

Jform은 요금표를 하나의 삽입 요소로 처리하므로 스퀘어스페이스는 이를 표시하기만 하면 됩니다. 또한 현재로서는 위젯에 대한 정기 결제 비용이 없습니다. Jform 웹사이트 위젯은 2027년까지 무료입니다.

위젯 라이브러리를 둘러보는 동안…

요금표에서 멈추지 마세요. Jform 웹사이트 위젯을 사용하여 다음과 같은 다양한 기능을 추가할 수 있습니다.

  • 가격, 청구, 취소, 기능 및 온보딩 관련 질문을 위한 FAQ 위젯
  • 방문자가 구글에서 리뷰를 찾게 하는 대신, 결정을 내리는 곳 바로 옆에 소셜 프루프(Social Proof)를 배치할 수 있는 Google 리뷰 위젯
  • 뉴스레터 가입, 할인, 데모, 출시 공지 또는 이탈 방지 제안을 위한 팝업 위젯

요금표가 제 역할을 다한 후에는 Jform의 스퀘어스페이스 연동을 통해 웹사이트에 삽입된 등록 또는 결제 양식으로 다음 단계를 매끄럽게 이어갈 수 있습니다.

스퀘어스페이스 요금표 FAQ

예, 하지만 스퀘어스페이스에는 범용으로 사용할 수 있는 기본 표 블록이 없습니다. 플루이드 엔진으로 열을 구성하거나, 코드 블록에 HTML 표를 추가하거나, 타사 위젯을 사용하여 스퀘어스페이스에 요금표를 삽입할 수 있습니다.

스퀘어스페이스에서 반응형 요금표를 원하신다면, Jform의 요금표 위젯을 사용하여 개별 블록을 유지하고 모바일 포맷을 신경 쓰는 수고를 덜 수 있습니다.

많은 소규모 비즈니스와 서비스 브랜드에게는 그렇습니다. 2026년 8월 기준, W3Techs의 보고서에 따르면 스퀘어스페이스는 전체 웹사이트의 2.4%를 구동하며 콘텐츠 관리 시스템(CMS) 시장의 3.5%를 차지하고 있습니다.

자세한 CMS 비교는 스퀘어스페이스 vs 워드프레스: 어느 CMS가 더 나을까요? 기사를 확인해 보세요.

정답은 스퀘어스페이스가 제공하지 못하는 기능이 무엇인지에 따라 다릅니다. 유일한 문제점이 스퀘어스페이스의 맞춤형 요금표라면, 전체 사이트를 이전하는 것은 현실적이지 않습니다. 

Jform과 같은 스퀘어스페이스용 무료 요금표 위젯을 사용하면 사이트를 다시 구축할 필요 없이 부족한 비교표를 추가할 수 있습니다. 이는 웹사이트 빌더의 대안이라기보다는 스퀘어스페이스 요금표 앱의 대안으로 작동합니다.

이 기사는 딱딱한 레이아웃 블록과 씨름하거나 타사 플러그인의 정기 결제 비용을 지불하지 않고도 전환율이 높은 요금표를 원하는 스퀘어스페이스 사이트 소유자, 프리랜서, 에이전시 및 SaaS 스타트업을 위해 작성되었습니다.

코멘트 보내기:

Jform Avatar
이 사이트는 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

Podo Comment 첫 번째 댓글을 남겨주세요.