NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

기획

SaaS 가격페이지 어떻게 구성할까?

가격 비교 화면이 중요한 이유

(에디터, 재그마스터) 지난해 11월에 발표한 가트너 조사에 따르면 사스(Software as a Service) 시장의 규모가 2020년 올해 1160억 달러(약 140조8천억원)에서 2022년에는 1511억 달러(약 183조4천억원)로 꾸준히 증가할 전망이라고 합니다. 그야말로 SaaS의 시대가 오는 것 같아요. PaaS까지 포함된다면 그 규모는 더욱 커질 수 밖에 없고요. 클라우드와 AI 등의 등장과 발전으로 앞으로의 SaaS는 더 많은 기회를 갖게 되겠지만, 그럼에도 불구하고 변하지 않을 공간이 하나 있다면! 바로 사용자의 상황에 따라 선택 가능한 '사용 플랜'이 아닐까 싶습니다. 서비스가 지닌 다양한 기능을 사용 규모를 가늠해 3-4가지 플랜으로 구성하는 일은 SaaS 기획의 꽃과 다름없기도 하죠. 그래서 오늘은 국,내외 다양한 SaaS의 'Pricingpage - 가격 비교 화면'을 사례 중심으로 정리해보려고 합니다.

(에디터, 동동) SaaS는 점점 더 많이 등장하고 있으며, 다양한 용도로 활용되고 있습니다. 'Pricing Page'는 고객에서 서비스를 최종적으로 어필하는 공간 중 하나입니다. 가격 화면을 구축하기 위해 명확해야 하는 것은 우리 서비스에서 제공할 수 있는 이점과 가격별 기능 표현입니다. 최근 디지털 스티커와 관련된 API Pricing Page를 많이 살펴보며, 느낀 점은 가격 기준 점과 사업의 방향성을 사용자에게 인지시키고 선택까지 쉽게 유도할 수 있는 점이 중요하다는 점입니다.


가격 비교 화면 사례 소개

1.Livechat (한국 채널톡과 같은 맥락의 서비스)


Livechat 가격 비교 화면

'Livechat'은 총 4가지 가격 플랜을 보유하고 있습니다. 플랜 별 가격 정보는 연 결제를 기준으로 보여주고 있으며 월 단위 결제 시 가격도 함께 확인 할 수 있습니다. 플랜 별 일러스트레이션을 활용, 규모를 쉽게 짐작할 수 있게 한 점도 매력적으로 다가옵니다.

2개 이상의 플랜이 있는 경우 가장 중요한 것은 '플랜 간 비교'입니다. 'Livechat'은 저렴한 가격 플랜부터 직접 연락해야 하는 엔터프라이즈 플랜에 따른 기능 차이를 이전 플랜 + @ 형태로 보기 쉽게 정리하고 있습니다. 본인들이 추천하는 플랜도 핵심 컬러로 잘 보여주고 있네요. 이런 추천은 저렴한 모델을 기준으로 고려하지 않고, 추천 플랜으로부터 비교하게 되는 효과를 얻을 수 있습니다.


Livechat 가격 비교 화면 중 이용 고객사 소개

핵심 기능을 플랜에 따라 비교해준 후, 'Livechat'을 사용중인 고객사를 보여줍니다. 보통 'SaaS' 웹사이트에서 이런 고객사는 메인 화면에 배치하는 경우가 많은데요. 가격 비교 화면 내, 핵심 기능과 부가 기능 사이에 배치한 것은 확신을 갖게 하기 위한 목적이 큽니다. 음, 고려해봐야겠어! 라는 생각을 한 다음 어도비, 이케아, 페이팔 등이 쓴다는 것을 본 뒤 오! 한 번 써봐야겠는데! 이케아도 쓰고 있네? 라는 생각으로 이어질 수 있다는 것이죠.


Livechat 가격 비교 화면 중 플랜별 상세 기능표

고객사까지 확인한 뒤, 각 가격 플랜 별 상세 기능을 확인 할 수 있습니다. 사실 세부 기능이나 스펙은 핵심 기능 대비 고려 대상이 아닌 경우가 많기에 이와 같은 분리를 가져가는 경우가 많습니다. 모든 기능을 처음부터 다 보여준다면 확인하기도 전에 지칠 수 있기 때문!

가격 플랜 별 '시작하기' 버튼을 활용했다면 어땠을까하는 아쉬움도 있습니다. 가격 별 설명을 잘 풀어놓고 통합으로 시작하기 버튼을 배치하면 진입한 사람들이 어떤 플랜을 많이 선택하는 지 등을 확인 할 수 없습니다. 추천 플랜에 컬러를 적용했으니 이 플랜을 많이 선택할거야! 와 같은 가설을 검증할 수 없다는 뜻이기도 하죠.

(에디터, 재그마스터의 덧붙임) 플랜 별 '바로 시작하기' 버튼을 제공해주는 것이 중요합니다. 플랜 별 기능과 가격을 모두 확인하고 해당 플랜으로 바로 시작하고 싶은데, '공통 버튼'을 클릭 또는 탭한 후 다시 한 번 플랜을 선택하는 것이 귀찮게 느껴질 수 있기 때문!



2. Octopus (사이트맵 제작 툴)


Octopus 가격 비교 화면

'Octopus'입니다. 사이트맵을 쉽게 만들 수 있도록 도와줍니다. 여기도 'Free, Pro, Team, Agency' 등 총 4개의 플랜이 있습니다. 'Livechat'과 다른 점이 있다면 (1)월/연간 결제 가격을 각각 봐야 한다는 점 (2)플랜 별 시작이 가능한 버튼이 배치되어 있다는 점 (3)추천이 아닌 '인기'플랜을 보여준다는 점입니다. 플랜 별 요약된 특징들 또한 핵심만 담아 간략하게 표현하고 있습니다.


Octopus 가격 비교 화면 중 플랜별 상세 기능표

하단으로는 위와 같이 전체 기능을 한 눈에 보여주고 플랜에 따라 사용 가능, 불가능 여부를 보여주고 있습니다. Livechat이 플랜에 따라 추가되는 기능을 보여준 것과 다른 방법이기도 하죠. 저는 개인적으로 'Octopus'의 방법이 더 좋다고 생각합니다. 사용자가 선택한 플랜이 '어떤 불편'으로 다가올 수 있는지 미리 인지할 수 있기 때문입니다. '이 플랜을 활용하면 커스텀 도메인은 사용할 수 없구나, 있구나' 등으로 직접 비교가 가능하다는 점도 있습니다. 시각적으로 기능 단위의 비교가 더 용이하기도 하고요.


Octopus 가격 비교 화면 중 FAQ

플랜 별 기능과 가격 정보등을 확인한 후 트위터 내 서비스에 대해 언급된 내용과 사용 사례, 자주 묻는 질문 등을 이어 볼 수 있습니다. SaaS는 데모를 지원하지 않는 이상, 앱처럼 내려 받아 바로 사용해볼 수 없다는 '단점'이 존재합니다. 이런 단점을 최대한 보완해줄 수 있는 장치가 필요한데 사용 사례나 자주 묻는 질문 등을 제공해주는 것은 좋은 방법이 될 수 있습니다.

(에디터, 재그마스터의 덧붙임) 최근 'SaaS' 웹페이지 내 자주 보이는 콘텐츠 중 하나는 '사용 사례 또는 고객 사례'입니다. 모두사인, 채널톡, 도도포인트 등도 정기적으로 관련 콘텐츠를 제작, 발행하고 있고요. 가격 비교와 FAQ 등 만으로도 충분히 공감대를 형성할 수 있다면 좋겠지만, 처음 도입하는 서비스를 선뜻 결제까지 이어지게 하는 건 쉬운일이 아니기에! 앞선 과정을 지나 이미 서비스를 잘 활용하고 있는 사례를 보여준다면 허들을 낮추는데 더 많은 도움을 줄 수 있습니다. 우리와 비슷한 분야인데? 우리와 인원이 똑같네? 이렇게 쓰고 있구나! 등의 정보를 제공해줄 수 있다는 것!



3. Mailchimp (뉴스레터 제작, 관리 툴)


mailchimp 가격 비교 화면

00:00 뉴스레터는 국내 서비스인 '스티비'를 활용하고 있지만, '메일침프' 역시 많이 활용되는 SaaS 중 하나입니다. 메일침프가 재미있는 건 일반적으로 좌(무료 또는 최저가 플랜) → 우(엔터프라이즈 또는 최고가 플랜)으로 이어지는 흐름을 역행하고 있다는 점입니다. 가장 비싼 프리미엄 플랜을 먼저 보여주고, 무료 플랜을 마지막에 보여주고 있는데요. 우리가 집을 볼 때 부동산에서 좋은 집을 먼저 보여주는 것과 같은 심리적 효과를 활용하고 있는 것이죠. 보통 좌→우, 상→하로 시선이 이어지기에 이와 같은 배치는 좋은 것을 먼저 보게 하는 효과가 있습니다.


mailchimp 가격 비교 화면 중 예상 가격 계산기

서비스 성격에 따라 플랜은 달라질 수 밖에 없지만 '메일 침프'나 '스티비'와 같은 '뉴스레터 제작, 발송, 관리' 서비스는 '도달 수'가 중요한 기준 중 하나인데요. 플랜 별 기본 요금 외, 메일을 받는 대상이 어느정도 인지 바로 확인, 추가 가격을 확인 할 수 있는 'Calculate your price'도 함께 제공하고 있습니다.


mailchimp 가격 비교 화면 중 플랜별 상세 기능표

플랜에 따른 대표 기능들을 확인한 후, 스크롤을 내리면 위와 같이 앞서 본 내용을 고정된 상태로 확인할 수 있습니다. 세부 기능들을 보면서도 가격과 플랜 선택을 바로 할 수 있죠. 아래까지 도달하거나 다시 위로 돌아갈 필요 없이 언제든 가격 정보를 볼 수 있다는 점은 전환율을 높이는데 도움이 될 수 있습니다. 메일침프 역시 'Octopus'와 동일하게 모든 기능을 써놓고, 플랜에 따라 사용 가능 여부를 직접적으로 보여주고 있습니다.


mailchimp 가격 비교 화면 중 FAQ

가격 비교 화면 마지막에는 자주 묻는 질문이 자리잡고 있는데요. 결제 수단, 플랜 변경 방법 등 플랜 선택 전 궁금할만한 대표적인 내용들이 잘 정리되어 있습니다.

(에디터, 재그마스터의 덧붙임) Swit. Notion 등은 웹페이지 내 결제 또는 회원가입 전 데모를 제공해 미리 체험해볼 수 있는 기회를 제공합니다. 아무리 기능 설명을 잘 하고, 가격 구성을 매력적으로 만들어도 실제 써보는 것과 차이가 있기 때문입니다. 데모를 제공할 수 없는 환경이라면 궁금함을 최소화 하고, 이 정도면 한 번 써볼 수 있겠어! 라는 생각을 이끌어 낼 수 있어야 합니다. 대표적인 방법으로 FAQ를 제공해주는 것이 있으며, 플랜 별 대표 기능을 보여주는 것도 있습니다.



4. Rise (온라인 교육 생성 및 관리 툴)


언택트 시대로 접어들며 온라인 교육과 강연이 활성화되고 있습니다. 국내 오프라인 강연 시 질의 응답 플랫폼으로 자주 사용되는 '이벤터스(Event-us)'도 최근 온라인 행사 사전 등록부터 라이브스트리밍까지 함께 제공해주는 웨비나 서비스를 오픈하는 등 언택트 시대의 서비스 모습을 보여주고 있습니다. 해외에서도 이와 같은 흐름이 이어지고 있는데요. 'Rise'는 기업이 쉽게 도메인에 가입하고 교육 자료를 게시, 구성원을 초대해 학습 및 진도를 분석할 수 있도록 도와줍니다.

Rise 가격 비교 화면

플랜은 서비스 성격에 맞춰 초대 가능한 구성원의 수를 기반으로 구분했습니다. 가격 비교 화면에서는 상단에서 연간 결제와 월간 결제를 스위칭 해 볼 수 있도록 했습니다. 연간 결제 텍스트에 "Save 10%"를 표기해 월 결제 대비 혜택을 강조하고 있는 모습입니다.


Rise 가격 비교 화면

위의 가격표는 월간 결제로 금액을 치환했을 때 보여지는 가격 테이블입니다. 총 금액 하단에 연간 결제로 변경 시 10%의 금액을 절감할 수 있다는 문구를 함께 활용하여 모든 플랜에서 연간 결제 정보를 확인할 수 있도록 구성했습니다. 상단에서와 같이 연간 결제의 이점을 포인트 컬러로 표기했다면 어땠을까 하는 아쉬움도 있습니다.



5. Toggl (시간 관리 서비스)


업무와 스터디 시간을 쉽게 측정할 수 있는 타이머 기능으로 유명한 토글(Toggl)입니다. 토글은 웹, 모바일 앱, 데스크탑 앱, 크롬 확장 프로그램 등 다양한 지원 버전을 제공하고 있는데요. 특히 토글은 테스크를 트래킹 하고 있지 않는 일종의 휴식 시작도 감지가 되기 때문에 프로젝트 관리에도 사용 가능한 서비스입니다.


Toggl 가격 비교 화면

업무와 스터디 시간을 쉽게 측정할 수 있는 타이머 기능으로 유명한 토글(Toggl)입니다. 토글은 웹, 모바일 앱, 데스크탑 앱, 크롬 확장 프로그램 등 다양한 지원 버전을 제공하고 있는데요. 특히 토글은 테스크를 트래킹 하고 있지 않는 일종의 휴식 시작도 감지가 되기 때문에 프로젝트 관리에도 사용 가능한 서비스입니다.

대부분의 서비스가 Starter, Individual 모델을 제일 먼저 제공하는데, 메일침프와 함께 서비스 특성에 맞춰 과감하게 Enterprise 모델을 먼저 보여주는 것이 인상 깊었습니다. 다만, 일러스트의 경우 각 플랜과 어떤 연관성이 있는지 쉽게 알 수 없다는 점은 아쉬웠습니다.


그래서 SaaS 가격 비교 화면은

- 기능이 많다 하더라도, 가격 범위 별 주요 혜택이 무엇인지 요약해서 보여주기
- 추천하는 가격 범위를 보여주기 (추천!)
- 너무 많은 가격을 제공하지 않기
- 자주 묻는 질문 등, 궁금한 점을 페이지 내 확인할 수 있게 하기
- 가격 범위(플랜)에 따라 바로 실행할 수 있는 버튼 배치하기 (A가격으로 시작 등)
- 월, 연 결제 시 달라지는 가격 범위를 쉽게 비교할 수 있게 하기

댓글 0

팁스터

앱/웹 서비스를 구성하는 요소들에 대한 편집자의 생각과 노하우를 정리하는 뉴스레터입니다.

모바일 앱 다운로드, 어떻게 유도할까?

프로덕트

공유기능, 어떻게 활용하면 좋을까?

프로덕트

1:1 문의, 어떻게 활용하면 좋을까?

프로덕트

오디오 콘텐츠 재생 화면은 어떤 모습일까?

프로덕트

회원가입 완료 화면 구성 방법!

프로덕트

또 하나의 네비게이션, 푸터 구성 방법

프로덕트

당황스러운 상황을 해결하는 404 페이지!

프로덕트

점점 다양해지는 선물하기 기능!

프로덕트

서비스와 사용자의 밀당! 권한 요청 살펴보기

프로덕트

동일한 상황, 어울리는 문구는?

프로덕트

앱스토어 스크린샷 구성 방법!

프로덕트

모바일 앱에 적합한 정렬과 필터는?

프로덕트

봄바람 휘날리며~ 건강 관리 서비스 분석

프로덕트

손이 욱신거리지 않는 에디터 없나요?

프로덕트

아쉽지만, 회원탈퇴 프로세스 분석

기획

우리 서비스에 맞는 리스트 UI는?

디자인

아프리카에서 중고차 구매하기

기획

작심 3일 넘길 수 있는 서비스 파헤치기!

프로덕트

프로필 화면 어떻게 구성할까?

기획

검색 화면 어떻게 구성할까?

기획

팝업 화면 어떻게 구성할까?

기획

많은 정보를 담은 지도 UI는 왜 짜증날까?

기획

햄버거 메뉴는 이제 끝물 아닌가요?

기획

알림이 스팸이 되지 않게 하는 방법!

기획

리뷰 많은 서비스가 되는 방법!

기획

구매의 시작, 장바구니 어떻게 구성할까?

기획

통계 기능, 어떻게 구성하면 좋을까?

기획

스마트오더 서비스는 어떻게 구성할까?

기획

FAQ 화면 어떻게 구성할까?

기획

아이콘, 어떻게 활용하면 좋을까?

디자인

온보딩 화면, 어떻게 구성하면 좋을까?

디자인

회원가입과 로그인, 어떻게 구성하면 좋을까?

개발

설정 화면 어떻게 구성할까?

개발

독특한 UI, 어떤 사례가 있을까?

디자인

동일한 제품을 각각의 커머스에서 구매한다면?

개발

빈 화면 어떻게 구성할까?

기획

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.