개발 slecs

정상가 취소선으로 가치 강조하는 앵커 프라이싱

목차

이번에 페이월의 정가 표시와 특가 배지를 구현했다. 사실 단순한 UI 변경처럼 보이지만, 뒤에는 꽤 신중한 설계 결정들이 숨어 있다.

앵커 프라이싱의 심리학

"앵커 프라이싱"은 가격 심리학의 고전이다. 소비자는 절대적 가격보다는 상대적 가격을 비교하는 경향이 있다. 고가의 기준선(정상가)을 먼저 제시하면, 그 다음 특가가 얼마나 매력적인지 더 강하게 느껴진다는 원리다. "정상 $20, 오늘만 $3"이라는 표현이 단순히 "$3에 판다"는 것보다 가치감을 높일 수 있다는 뜻이다. 수십 년 동안의 소비심리 연구가 증명한 패턴인데, 이커머스나 미디어 페이월에서는 거의 표준 기법이다.

우리 서비스도 이 원칙을 적용했다. 실제로 판매하는 가격($3)은 변하지 않았지만, 정상가를 명시하고 취소선으로 표현함으로써 "할인받는 기분"을 강화하려고 했다. "오늘만" 배지는 시간 제한의 희소성을 더해서 지금 당장 구매 결정을 유도하는 심리 효과까지 노린 것이다.

표시 전용과 결제의 엄격한 분리

이 기능의 핵심은 "표시 전용"이라는 명확한 스코프다. 정상가 $20과 "오늘만" 배지는 순전히 UI 계층에서만 존재한다. 실제 결제 로직(polar.ts)이나 백엔드 가격 계산은 여전히 $3을 기준으로 동작한다.

이렇게 분리한 이유는 간단하다. 첫째, 버그의 여지를 줄인다. 정가와 특가 로직이 섞여 있으면 "정상가로 결제됐다", "특가가 적용 안 됐다" 같은 처리 오류가 생길 수 있다. 둘째, 감사(audit) 추적이 명확해진다. 결제 기록에는 항상 $3만 남으므로 나중에 추적이 간단하다. 셋째, 마케팅 정책이 바뀔 때 결제 로직은 건드릴 필요가 없다. "오늘만 배지를 내일부터 없앤다"는 요구가 나와도, UI 계층만 수정하면 된다.

// reading-panel.tsx (UI 계층)
const displayPrice = {
  normal: "$20",      // 시각적 앵커
  discounted: "$3",   // 실제 판매가
  showDiscount: true,
  badge: "오늘만"
}

// polar.ts (결제 계층)
const chargeAmount = 300  // $3 = 300 cents, 항상 동일

파일 역할과 구현 범위

페이월 페이지(page.tsx)와 읽기 패널(reading-panel.tsx)은 UI 렌더링을 담당하고, polar.ts는 결제 처리 게이트웨이다. 이번 변경은 전자 두 파일에만 영향을 줬고, 결제 로직은 건드리지 않았다. 이게 설계의 신호인데, UI와 비즈니스 로직의 경계가 잘 지켜졌다는 뜻이다.

만약 "정상가도 선택 가능하게 하자"는 요구사항이 생긴다면? 그때는 polar.ts를 수정해야 하겠지만, 지금 단계에서는 불필요한 복잡도를 추가할 이유가 없다. "표시 전용"이라는 결정이 그 경계를 명확하게 지켜주는 것이다.

팀 코드 리뷰 관점

이 PR을 리뷰할 때 체크한 포인트들:

  • UI에서 보여주는 가격과 실제 결제 금액이 다르면, 그 차이가 코드에 명시적으로 드러나야 한다 (예: displayPrice vs chargeAmount)
  • "오늘만" 배지처럼 시간 기반 UI는 실제로는 항상 표시되는 버그가 생기기 쉽다. 테스트할 때 특별히 주의해야 함
  • 마케팅팀의 요구사항 변화(배지 끄기, 정상가 변경 등)를 UI 계층만으로 대응할 수 있으면 유지보수성이 훨씬 좋다

회고

이번 작업은 단순한 UI 변경처럼 보이지만, 실제로는 가격 심리학, 컴플라이언스(실제 판매가와 표시가의 차이 처리), 유지보수성(UI ↔ 결제 분리) 같은 여러 레이어가 맞물려 있다. 특히 "표시 전용이라는 정책을 코드로 어떻게 명확하게 전달할 것인가"가 중요했다. 6개월 뒤 누군가가 이 코드를 볼 때, "왜 정상가와 특가를 나눠놨나요?"라는 질문이 나올 텐데, 코드 구조 자체가 그 의도를 이야기해야 한다.

또한 "UI와 결제를 분리한다"는 원칙은 이번 기능에만 국한되지 않는다. 앞으로 프로모션, 한정 할인, 기간 제한 배지, A/B 테스트 같은 것들이 추가될 때도 같은 패턴을 적용할 수 있다. 하나의 패턴이 정해지면, 그 다음부터는 더 빠르고 안전하게 유사 기능을 구현할 수 있다.

🛒 이 글과 어울리는 추천 상품

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.

이어보기

댓글 0

첫 댓글 달아줘.