전환되는 요금 섹션은 정렬(레이아웃)·추천 강조(컬러)·CTA(버튼)·명확한 카피·결제주기 토글이 한 화면에서 맞물린 합작입니다. Findable은 가격을 단정하지 않고 ‘맞춤 견적’으로 정직하게 표기하되, 포함 범위와 추천 신호로 사용자가 스스로 고를 수 있게 설계합니다.
요약
- 요금 섹션은 한 사람의 솜씨가 아니라 레이아웃·컬러·버튼·카피의 합작이다.
- 세 플랜을 나란히 두고 가운데를 강조하면, 사용자는 그것을 기준점(앵커)으로 삼는다.
- 월간/연간 토글은 ‘내 상황의 금액’을 사용자가 직접 계산하게 만든다.
- 가격을 단정하지 못할 땐 숨기지 말고 ‘맞춤 견적’과 포함 범위로 정직하게 적는다.
요금 섹션 앞에서 사람들은 가장 솔직해집니다. 여기까지 스크롤했다는 건 ‘살 마음이 생겼다’는 신호죠. 그런데 이 화면을 한 명이 다 만든다고 생각하면 오해입니다. 정렬을 맞추는 사람, 색으로 시선을 끄는 사람, 버튼을 깎는 사람, 문장을 고르는 사람이 각자의 일을 하고, 그게 한 화면에서 어긋나지 않을 때에야 사용자가 결정을 내립니다. 우리는 이걸 ‘합작’이라고 부릅니다.
그래서, 직접 토글해 보세요
설명보다 빠릅니다. 아래 위젯에서 월간/연간을 눌러 보고, 가운데 추천 플랜이 어떻게 다르게 보이는지 느껴 보세요. (가격은 맞춤 견적이라 숫자 대신 ‘무엇이 포함되는지’를 보여줍니다.)
요금 섹션 (토글+추천 강조)
월/연 토글, 추천 플랜 강조. (가격은 맞춤 견적)
- 베스포크 1~5p
- 기본 SEO·스키마
- 멀티페이지
- GEO/AEO 풀스택
- 운영 동행
왜 세 개를 나란히 놓을까 — 앵커링의 힘
선택지가 하나면 ‘살까 말까’지만, 세 개가 나란히 있으면 ‘이 중 무엇을’로 질문이 바뀝니다. 가운데 플랜을 살짝 키우고 색으로 강조하면, 사용자는 그것을 무의식의 기준점(앵커)으로 삼고 양옆을 그에 견줍니다. 이건 속임수가 아니라 ‘비교를 도와주는 정렬’입니다 — 가운데 플랜이 실제로 더 많은 사람에게 맞을 때에 한해 강조해야 정직합니다.
추천 플랜은 ‘신호’지 ‘강요’가 아닙니다
위 위젯에서 가운데 ‘그로스’만 테두리와 색이 다릅니다. 이건 “이게 인기 있다/대부분에게 맞다”는 신호입니다. 다만 강조는 거기까지여야 합니다. 다른 플랜의 버튼을 일부러 흐리게 만들거나, 옆 플랜의 단점을 과장하면 그 순간 신뢰가 깨집니다. 우리는 추천을 ‘보여주되 막지 않는다’를 원칙으로 둡니다.
월간/연간 토글 — 가격표 두 개를 하나로
같은 서비스라도 결제 주기에 따라 체감 금액이 다릅니다. 토글을 누르면 연간일 때 ‘2개월 무료’ 같은 혜택이 같은 자리에서 드러나도록 설계합니다(위 위젯에서 ‘연간’을 눌러 보세요). 사용자가 직접 주기를 바꿔 보는 행동 자체가, 더 긴 약정을 스스로 검토하게 만듭니다. 두 장의 가격표를 만드는 대신 토글 하나로 끝냅니다.
CTA 버튼 — 마지막 0.2초
여기까지 와서 버튼이 밋밋하면 사람은 ‘나중에’를 누릅니다. 우리는 각 카드의 행동 버튼을 또렷한 라벨(‘견적 문의’·‘상담’)과 가벼운 인터랙션으로 마무리합니다. 버튼 자체를 어떻게 깎는지는 따로 정리해 뒀습니다. 핵심은 ‘무엇이 일어나는지’를 라벨이 말하게 하는 것 — ‘확인’이 아니라 ‘견적 문의’입니다.
카피 — 가격은 단정하지 않고, 차이는 분명히
맞춤 제작은 범위가 넓어 숫자를 못 박으면 오히려 신뢰를 잃습니다. 그래서 우리는 가격 자리에 ‘맞춤 견적’을 정직하게 쓰고, 대신 각 플랜에 무엇이 포함되는지를 한눈에 적습니다(베스포크 페이지 수, SEO·스키마, GEO/AEO 풀스택, 운영 동행 등). 사용자는 ‘얼마인가’보다 ‘무엇이 다른가’를 먼저 이해하고, 마지막 금액은 상담으로 잇습니다. 숨기는 게 아니라, 정직하게 잇는 구조입니다.
한 축만 약해도 사용자는 멈춥니다
정렬이 완벽해도 추천이 안 보이면 고민이 길어지고, 색이 예뻐도 카피가 모호하면 의심이 생기고, 다 좋아도 버튼이 밋밋하면 손이 안 갑니다. 그래서 요금 섹션은 누구 한 명의 작품일 수 없습니다. 네 축이 같은 의도로 모일 때, 비로소 사용자가 ‘고릅니다’.
합작 분해 — 누가 무엇을 했나
저는 요금 위젯을 만들 때 네 축이 ‘각자 무엇을 책임지는지’부터 칸으로 나눕니다.
| 담당 | 이 모듈에서 한 일 |
|---|---|
| 레이아웃 | 스타터·그로스·스케일 세 카드를 비교 가능하게 나란히 정렬하고, 가운데 ‘그로스’를 키워 기준점(앵커)으로 |
| 컬러 | 추천 카드(feat)만 테두리·색을 달리해 ‘여기를 보라’는 신호 — 다른 카드를 흐리게 하지 않아 강요가 아닌 신호로 |
| 버튼 | 각 카드 행동 버튼을 ‘견적 문의’·‘상담’ 같은 또렷한 라벨로(‘확인’ 금지), b-shine 인터랙션으로 마지막 클릭 |
| 카피·토글 | 가격 자리에 ‘맞춤 견적’을 정직하게, 포함 범위로 차이를 설명. 월/연 토글로 ‘2개월 무료’가 같은 자리에 드러나게 |
한 축만 약해도 사용자는 ‘나중에’를 누른다는 걸, 저는 표로 늘 확인합니다.
그리고 저는 이 요금 한 모듈에 들어간 기술을 칩으로 펼쳐 둡니다 — 가격은 단정하지 않되 설계는 촘촘히.
정렬·강조·CTA·카피·토글이 한 화면에서 맞물리도록 고른 도구들입니다.
이 작품에 들어간 기술
위 위젯 하나에 우리 팀의 네 가지 일이 겹쳐 있습니다. 각 축을 따로 깊게 정리해 뒀습니다.
- 레이아웃 — 세 카드를 비교 가능하게 정렬하고 추천을 키우는 법: 레이아웃 담당자의 노트
- 컬러 — 색 하나로 ‘여기를 보라’를 만드는 강조 설계: 컬러 담당자의 노트
- 버튼 — 마지막 클릭을 만드는 CTA 인터랙션: 버튼 담당자의 노트
- 카피 — 오해 없이, 단정 없이 차이를 말하는 문장: 카피는 이렇게 씁니다
| 항목 | 막 만든 가격표 | 설계된 요금 섹션 |
|---|---|---|
| 이해 | 표만 빽빽 → 뭐가 다른지 모름 | 포함 범위로 차이가 한눈에 |
| 선택 | 추천 없음 → 고민만 길어짐 | 가운데 강조로 기준점 제공 |
| 전환 | 밋밋한 버튼·모호한 카피 | 또렷한 CTA·토글로 행동 유도 |
요금 섹션 하나를 이렇게 보는 팀이, 사이트 전체를 만듭니다
요금 섹션은 사용자가 지갑을 여는 화면입니다. 그 한 화면을 네 사람이 합작으로 다루는 팀이라면, 첫 화면부터 마지막 폼까지 같은 태도로 만듭니다. 당신의 요금 섹션, 어떻게 설계해 드릴까요?
요금 섹션에 가격을 꼭 숫자로 적어야 하나요?
추천 플랜을 강조하면 정말 선택이 몰리나요?
월간/연간 토글은 왜 넣나요?
요금 섹션은 디자이너 한 명이 만들면 되지 않나요?
가격을 숨기면 문의가 더 오지 않나요?
가격을 보여주는 법 — 정직한 표기의 합작
단정 없이 차이를 말하는 요금 설계.
레이아웃 담당자의 노트
비교 가능한 정렬과 강조의 기술.
버튼 담당자의 노트
마지막 클릭을 만드는 CTA 8종.
이 글의 요금 위젯은 이 페이지에서 실제로 동작하는 코드입니다(외부 라이브러리 0). 본문의 가격은 어떤 금액도 단정하지 않으며 ‘맞춤 견적’이 실제 표기 방식입니다. 앵커링·전환에 관한 설명은 일반 원칙이며 특정 성과를 보장하지 않습니다. 날조된 사례·수치는 사용하지 않았습니다.