요금제 페이지 디자인: 비교부터 선택까지 명확하게

요금제 페이지는 방문자가 세 가지를 이해하도록 도와야 합니다. 자신의 업무에 어떤 요금제가 맞는지, 무엇을 기준으로 비용이 청구되는지, 선택하면 다음에 무엇을 하게 되는지입니다. 카드가 아무리 보기 좋아도 과금 단위가 빠져 있거나 비교표의 같은 행이 열마다 다른 뜻이라면 선택하기 어렵습니다. 특정 요금제를 시각적으로 강조하기 전에 이 질문부터 해결해야 합니다.

Pixso에서 요금제 페이지를 디자인할 때는 요금제 카드, 세부 설명, 다음 화면을 하나의 선택 과정으로 살펴보세요. 방문자가 요금제를 고른 뒤에야 조건을 다시 해석하게 만들어서는 안 됩니다.

구매자가 판단해야 할 것부터 정리하기

일정 관리 서비스 Northstar를 디자인 예제로 살펴보겠습니다. 알렉스는 일정을 편집하는 동료 네 명과 보기만 하는 동료 두 명이 사용할 요금제를 고르고 있습니다. 중요한 것은 어느 열에 기능이 가장 많이 적혀 있느냐가 아닙니다. 팀이 함께 일정을 관리할 수 있는지, 누가 유료 편집자 좌석을 필요로 하는지, 관리 기능에 관한 요구가 선택에 어떤 영향을 주는지가 핵심입니다.

Northstar에는 Solo, Team, Business 요금제가 있습니다. Solo는 개인 편집자를 위한 요금제입니다. Team에서는 일정을 공유하고 보기 전용으로 참여할 수 있습니다. Business는 조직 전체의 관리와 영업팀을 통한 구매 절차에 대응합니다. 개인 업무, 공동 업무, 조직 차원의 요구라는 차이를 중심으로 페이지를 구성하면 비교 기준이 분명해집니다.

각 요금제 이름 아래에 대상 사용자를 짧게 설명하세요. “가능성을 펼쳐보세요”보다는 “공유 일정을 함께 관리하는 팀을 위한 요금제”가 선택에 도움이 됩니다. 장식용 배지는 보조적으로 사용합니다. “추천”이라는 표시에는 공동 편집처럼 구체적인 이유가 있어야 합니다. 강조한 요금제가 모든 사람에게 가장 적합하다는 인상을 주어서는 안 됩니다.

가격 옆에 과금 단위를 표시하기

단위가 없는 가격은 방문자에게 추측을 맡기는 것과 같습니다. 1인당 가격인지, 편집자당 가격인지, 워크스페이스당 가격인지, 계정 전체의 월 요금인지 알 수 있어야 합니다. 단위는 툴팁이나 멀리 떨어진 각주가 아니라 금액 바로 옆에 표시하세요. 최소 구매 수량 때문에 실제 비용이 달라진다면 그 조건도 함께 설명해야 합니다.

이 예제에서 Northstar의 Team 요금제는 편집자 수를 기준으로 과금합니다. 따라서 알렉스에게는 유료 편집자 좌석 네 개가 필요하며, 보기 전용 참여자 두 명은 이 예제의 규칙상 편집자 좌석 수에 포함되지 않습니다. 선택한 요금제의 요약 화면에서도 이 차이를 다시 보여줘야 합니다. 모든 참여자를 단순히 “사용자”라고 부르면 구매 조건을 이해하기 어려워집니다.

좌석 수를 바꿀 수 있다면 해당 총액을 갱신하고 과금 단위도 계속 보여주세요. 일부 팀원이 보기 전용 사용자라면 입력란의 “팀 규모”라는 이름은 모호합니다. “편집자 좌석 수”라고 쓰면 구매하는 수량이 명확해집니다. 보기 전용으로 초대한 사람이 나중에 편집자가 되었을 때 어떻게 되는지도 별도로 설명하세요. 역할 이름 속에 비용 변화를 숨겨서는 안 됩니다.

월 환산 금액과 실제 결제 조건 구분하기

월 환산 금액과 매월 결제하는 금액은 같은 조건이 아닙니다. 연간 결제를 선택했을 때 월 환산 금액을 보여준다면 바로 옆에 “연간 결제”라고 표시하고, 방문자가 실제로 결제하기로 동의하는 연간 총액도 함께 보여주세요. 작은 “/월” 표기만으로 모든 조건을 설명하려 해서는 안 됩니다.

결제 주기 선택은 요금제 비교 영역 가까이에 두고 현재 선택 상태를 명확하게 표시합니다. 월간에서 연간으로 전환하면 영향을 받는 모든 가격과 결제 설명을 함께 갱신해야 합니다. 이때 좌석 수나 요금제를 알리지 않고 바꾸면 안 됩니다. 다음 화면에서 추가 비용이 적용된다면 결제 전에 보여주세요. 안내용 예상 금액을 최종 청구 금액처럼 보이게 해서는 안 됩니다.

절약 금액이나 할인율을 제시할 때는 비교 기준이 명확해야 합니다. 어떤 월간 조건과 연간 조건을 비교하는지 설명하고, 좌석 수 등 수량도 같게 맞추세요. 근거가 보이지 않는 할인율은 얼마를 어떤 기간에 대해 내는지라는 더 중요한 질문을 가릴 수 있습니다.

같은 기능을 같은 기준으로 비교하기

비교표는 카드에서 짧게 설명하기 어려운 질문을 해결해야 합니다. 요금제를 실제로 구분하는 기능부터 정리하세요. 한 행에는 한 가지 의미만 담고 모든 열에서 같은 용어를 사용합니다.

Northstar 비교 항목	Solo	Team	Business
주요 용도	개인 일정 관리	팀이 함께 사용하는 일정 관리	조직 전체의 일정 관리
편집	개인 편집자	구매한 편집자 좌석 사용	조직과 협의한 편집 권한 적용
보기 전용 동료	공유 워크스페이스에 참여하지 않음	편집 권한 없이 참여 가능	협의한 접근 권한에 따라 관리
관리 기능	개인 설정	워크스페이스 관리	조직 전체 관리
다음 단계	개인 워크스페이스 시작	좌석 수와 결제 조건 확인	조직의 요구 사항 상담

알렉스의 팀에는 공유 일정이 필요하므로 Solo는 제외할 수 있습니다. Team은 앞서 정한 편집 및 보기 요구를 충족합니다. Business는 조직에 추가 관리 기능이나 별도 구매 방식이 필요할 때 검토하면 됩니다. 체크 표시가 가장 많은 열을 고르는 것이 아니라 업무에 맞는 이유로 선택하는 과정입니다.

하나의 대시 기호로 “미포함”과 “해당 없음”을 모두 나타내지 마세요. 선택에 영향을 주는 차이라면 말로 적어야 합니다. 마찬가지로 “고급 지원”도 무엇이 달라지는지 설명하지 않으면 비교 기준이 되기 어렵습니다. 모든 요금제에 같은 기본 기능이 포함된다면 긴 표의 모든 열에 반복하기보다 공통 제공 사항으로 한 번 묶어 보여주세요.

버튼을 누른 뒤의 결과 알려주기

버튼 문구는 다음 단계를 설명해야 합니다. Northstar의 Team 카드가 좌석 수와 결제 조건 확인 화면으로 이어진다면 “Team 선택”이라고 쓸 수 있습니다. Business 카드가 문의 양식을 연다면 “영업팀에 문의”가 맞습니다. 둘 다 “시작하기”라고 쓰면 방문자가 알아야 할 차이가 가려집니다.

체험을 시작하는 버튼에는 실제 서비스 조건을 기준으로 선택에 영향을 주는 정보를 설명하세요. 결제 정보가 필요한지, 체험 기간이 끝나면 어떻게 되는지 등이 해당합니다. 다른 회사의 체험 혜택을 그대로 가져오지 마세요. 무료 요금제가 있다면 그 요금제를 시작하는 것과 유료 요금제를 일정 기간 체험하는 것을 구분해야 합니다.

선택한 요금제, 결제 주기, 좌석 수는 다음 화면으로 그대로 이어져야 합니다. 확정하기 전에는 수정할 수 있어야 합니다. 요금제 페이지로 돌아왔다는 이유만으로 연간 결제가 월간 결제로 바뀌거나 방금 입력한 수량이 사라져서는 안 됩니다.

모바일에서도 비교하기 쉽게 구성하기

요금제 카드를 세로로 쌓으면 각각 읽기는 쉽지만 서로 비교하기는 어려워집니다. 선택에 필요한 정보를 읽는 곳마다 요금제 이름과 가격 단위를 가까이 보여주세요. 공유 일정 항목까지 내려왔을 때도 지금 어느 요금제를 보고 있는지 알 수 있어야 합니다.

좁은 화면의 구조는 비교해야 하는 내용에 맞춰 선택합니다. 짧은 몇 개의 행으로 요금제를 구분할 수 있다면 간결한 표가 적합할 수 있습니다. 더 긴 비교에서는 비교할 요금제를 직접 선택하게 할 수도 있습니다. 이 경우에도 선택한 요금제 이름이 명확하게 보여야 합니다. 데스크톱의 세 열을 글자가 읽히지 않을 정도로 압축하지 마세요.

세부 내용을 접어두더라도 중요한 조건은 남겨야 합니다. 기능에 관한 추가 설명은 펼치기 영역에 넣을 수 있지만 결제 주기나 필수 최소 좌석 수를 그 안에 숨기면 안 됩니다. 카드 높이를 고정하기 전에 긴 요금제 이름과 번역된 문구를 넣어 확인하세요. 카드 모양을 똑같이 맞추는 것보다 조건을 빠짐없이 읽을 수 있게 하는 것이 중요합니다.

선택 상태와 포커스 구분하기

결제 주기 선택에는 알아보기 쉬운 선택 상태가 필요하며, 어느 옵션에 키보드 포커스가 있는지도 보여야 합니다. 방문자는 “연간이 선택되어 있다”와 “지금 이 컨트롤을 실행하면 월간으로 바뀐다”를 구분할 수 있어야 합니다. 색상만으로 이 차이를 전달하는 것은 충분하지 않습니다.

구현할 때는 요금제 제목, 표 머리글, 링크에도 의미에 맞는 구조가 필요합니다. 같은 문구의 버튼이 반복된다면 어느 요금제의 버튼인지 구분할 수 있는 맥락을 제공하세요. 좌석 수 변경으로 총액이 갱신된다면 입력할 때마다 수량 입력란에서 포커스를 빼앗지 않으면서 결과를 어떻게 전달할지 개발자와 정해야 합니다.

텍스트를 확대하고 화면을 좁힌 상태에서도 페이지를 살펴보세요. 고정 버튼 영역이 가격 설명을 가려서는 안 되며, 키보드 사용자가 비교표 안에서 빠져나오지 못하는 상황도 없어야 합니다. 디자인 파일에서 검토하는 데 그치지 말고 구현된 페이지에서도 이러한 동작을 테스트해야 합니다.

Pixso에서 선택 과정 전체 검토하기

Pixso에서 Northstar의 요금제 비교 화면과 Team을 선택한 뒤의 요약 화면을 나란히 만드세요. 각 프레임에서 요금제 이름, 편집자 좌석 규칙, 결제 주기를 동일하게 유지합니다. 데스크톱 카드를 단순히 줄이는 대신 알렉스에게 필요한 정보를 유지하는 좁은 화면 버전도 추가하세요.

요금제 설명을 먼저 해주지 말고 검토자에게 알렉스의 편집자 네 명과 보기 전용 참여자 두 명을 위한 요금제를 골라달라고 요청하세요. 선택한 이유를 들어본 뒤 무엇을 몇 개 구매하는지, 어떤 결제 주기가 적용되는지, 버튼을 누르면 무엇이 일어나는지 물어보세요. Team을 골랐더라도 여섯 명 모두 유료 편집자 좌석이 필요하다고 이해했다면 아직 설명을 고쳐야 합니다.

개인 일정 관리자와 중앙 집중식 관리가 필요한 조직이라는 조건으로도 반복해보세요. 세 경우를 모두 강조된 카드로 유도하는 것이 목표는 아닙니다. 각자에게 적합한 경로를 이해하게 하고, 그 이해가 실제 가입이나 구매 과정까지 이어지게 하는 것이 목표입니다.

Pixso에서 명확한 요금제 비교 화면 만들기