먼저 본 숫자가 다음 가격 판단의 기준점이 됩니다.
<div class="price"><span class="eyebrow">REFERENCE PRICE</span><div class="anchor">$120</div><div class="rule"></div><span class="eyebrow">TODAY'S OFFER</span><div class="offer">$79</div><span class="save">SAVE $41</span></div>.price{position:relative;width:min(72%,350px);padding:clamp(12px,3vmin,30px);background:var(--surface);border:2px solid var(--fg);box-shadow:clamp(5px,1.5vmin,14px) clamp(5px,1.5vmin,14px) 0 var(--accent);text-align:center}.eyebrow{font:800 clamp(8px,1.6vmin,12px)/1 sans-serif;letter-spacing:.13em;color:var(--muted)}.anchor{font:900 clamp(28px,8vmin,74px)/1 sans-serif;letter-spacing:-.06em;animation:anchor 4s ease-in-out infinite}.rule{height:2px;background:var(--line);margin:clamp(5px,1.5vmin,12px) 0}.offer{font:900 clamp(34px,10vmin,94px)/1 sans-serif;color:var(--accent);letter-spacing:-.06em;animation:offer 4s ease-in-out infinite}.save{display:inline-block;background:var(--accent);color:white;padding:.35em .7em;font:900 clamp(8px,1.6vmin,13px)/1 sans-serif;transform:rotate(-5deg);animation:offer 4s ease-in-out infinite}@keyframes anchor{0%,8%{opacity:0;transform:translateY(8px)}20%,100%{opacity:1;transform:none}}@keyframes offer{0%,40%{opacity:0;transform:scale(.82)}55%,88%{opacity:1;transform:scale(1)}100%{opacity:0}}앵커링은 처음 제시된 정보가 뒤이은 판단에 영향을 주는 인지 편향입니다. 높은 기준 가격을 본 뒤에는 같은 판매 가격도 상대적으로 낮게 느껴질 수 있습니다.
데모는 기준 가격이 먼저 나타나고 실제 가격이 나중에 강조되는 순서를 보여줍니다. 비교 실험에서는 가격 자체뿐 아니라 제시 순서와 기준 가격의 신뢰성을 함께 통제해야 합니다.
근거 없는 원래 가격을 만들어 할인처럼 보이게 하면 고객 신뢰를 해칩니다. 실제로 판매된 가격과 조건을 명확히 표시하세요.
요금제나 프로모션의 비교 순서를 설계할 때 사용하되, 기준 가격의 사실 여부를 검증하세요.