GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

가격표 디자인 UI 9종 — 연/월 전환·할인율까지 계산해서 보여주는

· Godrich · 9종 · 15분 읽기

랜딩 섹션바닐라 JSSCSS클릭랜딩 페이지

연/월 전환이 바뀔 때마다 플랜마다 가격을 다시 계산해 보여주고, 할인 배지는 원가와 할인가 차이를 직접 구하고, 기업 문의 섹션은 사용량 값으로 예상 비용을 즉석에서 계산하는 가격표 페이지 9종입니다.

플랜 카드 — 연/월 전환에 맞춰 가격을 다시 구해 보여주는 카드 줄01 pricing-plan-cards 비교표 — 플랜끼리 값이 다른 줄만 세어 강조하는 표02 pricing-comparison-table 빌링 토글 — 스위치 위치로 절약 금액을 구해 배지에 얹는 전환03 pricing-billing-toggle 할인 배지 — 정가와 할인가 차이로 퍼센트를 직접 구하는 배지04 pricing-discount-badge 요금 FAQ — 열린 항목 수에 맞춰 목록 높이를 다시 재는 아코디언05 pricing-faq 요금 후기 — 평점 평균을 직접 구해 보여주는 후기 묶음06 pricing-testimonial 기업 문의 CTA — 입력한 사용량으로 예상 비용을 즉석에서 구하는 섹션07 pricing-enterprise-cta 파트너 로고 바 — 화면 폭에 맞춰 보일 개수를 다시 구하는 줄08 pricing-partner-bar 요금 푸터 — 입력한 조건으로 맞는 플랜을 직접 구해 강조하는 추천09 pricing-footer

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

데모

아홉 섹션은 전부 가격·할인율·사용량 같은 숫자 데이터를 받아 화면 값을 그 자리에서 계산합니다. 사람이 건드리지 않아도 정해진 시나리오가 돌면서 연/월 스위치가 넘어가고, 표의 값이 바뀌고, 슬라이더가 움직이는 상황을 반복 재생합니다. 측정은 480×300 무대에서 프레임 24장(움직임은 그 사이 델타 23개로 잡습니다)을 기준으로 했습니다.

실측 한눈에

항목 초점 누적면적(%) 강도평균 움직인프레임(23 기준)
01 플랜 카드 할인율로 월 환산가 재계산 16.259 103.0 18
02 비교표 값이 다른 줄만 세어 강조 29.956 39.6 7
03 빌링 토글 스위치 위치로 절약액 계산 5.264 99.6 10
04 할인 배지 정가·할인가 차이로 퍼센트 계산 1.447 97.3 23
05 요금 FAQ 열린 항목 높이 재측정 34.936 81.3 9
06 요금 후기 평점 평균 직접 계산 19.763 106.7 7
07 기업 문의 CTA 입력 사용량으로 비용 계산 2.287 121.6 8
08 파트너 로고 바 화면 폭으로 표시 개수 계산 8.320 194.6 9
09 요금 푸터 조건으로 맞는 플랜 계산 14.082 89.1 7

면적이 작다고 부실한 건 아니다

05 요금 FAQ 는 패널이 열리면서 목록 전체가 밀리는 구조라 누적면적이 34.94%로 가장 크고, 04 할인 배지는 숫자 몇 글자만 바뀌는 구조라 1.45%로 가장 작습니다. 07 기업 문의 CTA 도 슬라이더 손잡이 하나가 움직이는 정도라 2.29%로 낮은데, 두 항목 다 배지·손잡이처럼 원래 차지하는 면적이 작은 요소라 자연스러운 결과입니다. 04 는 오히려 23/23 프레임 전부에서 카운트다운 숫자가 바뀌어 화면이 쉬는 순간이 없고, 02·06·09 는 시나리오 사이에 값을 유지하고 기다리는 정지 구간이 있어 움직인 프레임이 7로 적게 나옵니다.

가격표 페이지의 해부 — 아홉 섹션이 계산하는 것

가격표 페이지는 흔히 정가를 박아 놓은 정적인 카드 세 장으로 만들어지지만, 이 아홉 섹션은 전부 값 하나를 계산해 그 결과로 표시나 강조를 바꿉니다. 속성 하나를 켜고 끄는 트랜지션이 아니라, 할인율·사용량·평점·화면 폭 같은 숫자를 읽어 다음 화면을 그때그때 다시 정합니다.

계산 한 겹이 하는 일

01 은 플랜별로 다른 할인율을 월 환산가에 곱해 값을 다시 구하고, 03 은 고정 할인율 하나를 12개월치 금액에 곱해 절약액을 만듭니다. 04 는 반대로 정가·할인가 두 숫자에서 할인율을 거꾸로 구하고, 02 는 플랜끼리 값을 대조해 실제로 차이 나는 줄의 개수를 셉니다. 06 은 배열에 담긴 평점을 모아 평균을 내고, 07·09 는 사용자가 입력한 사용량·인원·용량을 단가나 한도와 대조해 결과를 그 자리에서 구합니다. 05·08 은 반대로 화면에 있는 요소의 높이·폭을 측정해 목록 위치와 표시 개수를 정합니다.

아홉 섹션이 공유하는 값

아홉 섹션 모두 플랜이나 조건을 나타내는 숫자 하나(할인율·가격·한도·평점) 를 입력으로 받는다는 점이 같습니다. 01·03 은 이 숫자가 discount 필드이고, 02 는 플랜 사이의 값 배열이며, 07·09 는 사용자가 슬라이더나 입력창으로 직접 채워 넣는 값입니다.

섹션별 코드

아홉 개 섹션에서 계산을 맡는 함수만 추려 놓았습니다. 마크업·스타일 전체는 압축 파일 안에 있습니다.

01플랜 카드 — 연/월 전환에 맞춰 가격을 다시 구해 보여주는 카드 줄

SaaS 요금제 첫 화면에 세 장짜리 카드 줄로 자주 쓰는 형태입니다. 스위치를 연간 쪽으로 넘기면 각 카드의 월 환산가를 플랜별 할인율(15%·20%·25%)을 적용한 값으로 다시 구하고, 숫자가 이전 값에서 새 값까지 600ms 동안 자연스럽게 굴러가듯 바뀝니다.

할인율을 곱한 결과를 이전 숫자에서 새 숫자로 이징한다

세 플랜이 같은 두 함수를 쓰되 monthly·discount 값만 다르게 받아, 12·29·59 카드가 서로 다른 폭으로 숫자가 움직입니다.

  function yearlyMonthlyEq(plan) {
    return Math.round(plan.monthly * (1 - plan.discount));
  }

  function animateValue(el, from, to, duration) {
    if (!el) return;
    if (reduce || from === to) { el.textContent = String(to); return; }
    var start = null;
    function step(ts) {
      if (start === null) start = ts;
      var p = Math.min((ts - start) / duration, 1);
      var eased = 1 - Math.pow(1 - p, 3);
      el.textContent = String(Math.round(from + (to - from) * eased));
      if (p < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }
플랜 카드 — 연/월 전환에 맞춰 가격을 다시 구해 보여주는 카드 줄
새 창에서 열기

01 · 플랜 카드 — 연/월 전환에 맞춰 가격을 다시 구해 보여주는 카드 줄 — 측정 누적면적 16.259% · 움직인 프레임 18/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

requestAnimationFramearia-checkedtranslateX

02비교표 — 플랜끼리 값이 다른 줄만 세어 강조하는 표

기능 비교표에서 플랜마다 값이 같은 줄은 놔두고 실제로 다른 줄만 도드라지게 만드는, 상품 가격표 디자인에서 항목이 많을수록 요긴한 형태입니다. 저장공간·좌석수·지원·API·SSO 다섯 줄을 시나리오마다 대조해 실제로 다른 줄의 개수를 세고, 그 개수에 비례해 강조 배경의 진하기를 올립니다.

차이 난 줄 수를 전체 줄 수로 나눠 강조 진하기를 정한다

다섯 줄이 전부 같은 시나리오에서는 어떤 줄도 강조되지 않고, SSO 한 줄만 갈리면 은은하게, 다섯 줄 전부 갈리면 강조가 가장 진해집니다.

  function apply(scenario) {
    var diffCount = 0;
    ROW_KEYS.forEach(function (key) {
      var values = scenario[key];
      var tr = rowsEl.querySelector('tr[data-row="' + key + '"]');
      if (!tr) return;
      var cells = tr.querySelectorAll('.v');
      cells.forEach(function (cell, i) { cell.textContent = values[i]; });
      var differs = !allEqual(values);
      if (differs) diffCount += 1;
      tr.classList.toggle('is-diff', differs);
      tr.style.setProperty('--diff-alpha', differs ? String(.12 + (diffCount / ROW_KEYS.length) * .35) : '0');
    });
    chip.textContent = '차이 나는 줄 ' + diffCount + '/' + ROW_KEYS.length;
  }
비교표 — 플랜끼리 값이 다른 줄만 세어 강조하는 표
새 창에서 열기

02 · 비교표 — 플랜끼리 값이 다른 줄만 세어 강조하는 표 — 측정 누적면적 29.956% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

--diff-alphaquerySelectorAllscope="row"

03빌링 토글 — 스위치 위치로 절약 금액을 구해 배지에 얹는 전환

요금제 페이지 상단에서 연간·월간을 고르는 스위치입니다. role="switch" 버튼이 연간 쪽으로 넘어가면 월간 가격에 12개월과 할인율 20%를 곱해 한 해 동안 아낀 금액을 그 자리에서 구해 배지 문구에 채우고, 다시 월간으로 돌아가면 배지를 감춥니다.

월간 가격 × 12 × 할인율로 절약액을 구한다

월 29 플랜이 연간으로 넘어가면 29×12×0.2 를 반올림한 "연간 70 절약"이 뜨고, 49 플랜은 같은 계산으로 118 절약이 뜹니다.

  function apply(step) {
    priceNum.textContent = String(step.monthly);
    toggle.setAttribute('aria-checked', step.yearly ? 'true' : 'false');
    modeMonthly.classList.toggle('is-active', !step.yearly);
    modeYearly.classList.toggle('is-active', step.yearly);
    if (step.yearly) {
      var savings = Math.round(step.monthly * 12 * DISCOUNT);
      badge.hidden = false;
      badge.textContent = '연간 ' + savings + ' 절약';
    } else {
      badge.hidden = true;
    }
  }
빌링 토글 — 스위치 위치로 절약 금액을 구해 배지에 얹는 전환
새 창에서 열기

03 · 빌링 토글 — 스위치 위치로 절약 금액을 구해 배지에 얹는 전환 — 측정 누적면적 5.264% · 움직인 프레임 10/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

aria-checkedrole="switch":not([hidden])

04할인 배지 — 정가와 할인가 차이로 퍼센트를 직접 구하는 배지

런칭 할인이나 기간 한정 프로모션 가격표에 붙이는 배지입니다. 정가 49와 할인가 32의 차이를 정가로 나눠 할인율(35%)을 직접 구해 배지 문구를 만들고, 12분짜리 마감 시간을 2초 주기로 압축해 돌리면서 남은 시간 비율이 25% 밑으로 떨어지면 배지와 카운트다운 색이 같이 급함 상태로 바뀝니다.

정가·할인가 차이를 정가로 나눠 반올림한다

이 배지는 항목 9종 중 누적면적이 가장 작지만, 앞서 본 대로 23/23 프레임 전부에서 카운트다운 숫자가 바뀌어 계속 살아 있는 화면을 만듭니다.

  var LIST = 49;
  var SALE = 32;
  var pct = Math.round((LIST - SALE) / LIST * 100);
  pctBadge.textContent = pct + '% 할인';

  var LOOP_MS = 2000;
  var TOTAL_SEC = 12 * 60;
  var URGENT_RATIO = .25;

  function format(sec) {
    var m = Math.floor(sec / 60);
    var s = Math.floor(sec % 60);
    return m + ':' + (s < 10 ? '0' + s : String(s));
  }

  function frame(elapsed) {
    var progress = Math.min(elapsed / LOOP_MS, 1);
    var remainSec = TOTAL_SEC * (1 - progress);
    countdown.textContent = format(remainSec) + ' 남아';
    var urgent = (remainSec / TOTAL_SEC) < URGENT_RATIO;
    pctBadge.classList.toggle('is-urgent', urgent);
    countdown.classList.toggle('is-urgent', urgent);
    if (progress >= 1) return LOOP_MS;
    return null;
  }
할인 배지 — 정가와 할인가 차이로 퍼센트를 직접 구하는 배지
새 창에서 열기

04 · 할인 배지 — 정가와 할인가 차이로 퍼센트를 직접 구하는 배지 — 측정 누적면적 1.447% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

requestAnimationFrameMath.flooraria-live

05요금 FAQ — 열린 항목 수에 맞춰 목록 높이를 다시 재는 아코디언

요금제 페이지 FAQ 섹션이나 결제 안내 자주 묻는 질문에 쓰는 형태입니다. 항목을 열고 닫을 때마다 열린 항목들의 실제 높이를 다시 합산해 목록 전체 높이를 구하고, 그 값만큼 아래 항목들의 자리가 부드럽게 옮겨집니다.

grid-template-rows 를 잠깐 풀어 실제 높이를 먼저 재 둔다

패널이 접힌 채로는 scrollHeight 가 0 근처로 잡히므로, 시작할 때 한 번씩 각 패널을 강제로 펼쳐 실제 콘텐츠 높이를 캐시해 두고 이후에는 이 캐시 값만 더합니다.

  var NATURAL_HEIGHTS = items.map(function (item) {
    var panel = item.querySelector('.a');
    if (!panel) return 0;
    // grid-template-rows 를 잠깐 auto 로 풀어 전환·클래스와 무관하게 콘텐츠의 실제 높이를 잰다.
    var prevTransition = panel.style.transition;
    panel.style.transition = 'none';
    panel.style.gridTemplateRows = 'auto';
    var h = panel.scrollHeight;
    panel.style.gridTemplateRows = '0px';
    void panel.offsetHeight; // 0px 을 실제로 반영(플러시)해야 다음 전환이 이 값에서 시작한다
    panel.style.transition = prevTransition;
    return h;
  });

  function measureAndReport() {
    var total = 0;
    items.forEach(function (item, i) {
      if (item.classList.contains('is-open')) total += NATURAL_HEIGHTS[i];
    });
    chip.textContent = '목록 높이 ' + total + 'px';
  }
요금 FAQ — 열린 항목 수에 맞춰 목록 높이를 다시 재는 아코디언
새 창에서 열기

05 · 요금 FAQ — 열린 항목 수에 맞춰 목록 높이를 다시 재는 아코디언 — 측정 누적면적 34.936% · 움직인 프레임 9/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

grid-template-rowsscrollHeightaria-expanded

06요금 후기 — 평점 평균을 직접 구해 보여주는 후기 묶음

요금제 페이지 신뢰 섹션이나 고객 후기 묶음 카드에 쓰는 형태입니다. 후기마다 매긴 평점을 모아 평균을 직접 구해 큰 숫자로 보여주고, 후기 글은 -webkit-line-clamp 로 3줄(좁은 화면에서는 2줄)까지만 보이게 자른 뒤 각 카드의 실제 렌더링 높이를 재서 세 카드가 전부 가장 큰 카드 높이에 맞춰집니다.

평점 합을 개수로 나눠 큰 숫자로, 세 카드 중 최대 높이로 맞춘다

세 묶음을 돌리면 평균은 각각 4.7·4.3·4.7 로 바뀌고, requestAnimationFrame 한 번으로 세 카드의 scrollHeight 중 가장 큰 값을 재 전부 같은 minHeight 로 맞춥니다.

  function average(reviews) {
    var sum = reviews.reduce(function (acc, r) { return acc + r.rating; }, 0);
    return sum / reviews.length;
  }

  function apply(set) {
    avgNum.textContent = average(set.reviews).toFixed(1);
    avgCount.textContent = String(set.count);
    set.reviews.forEach(function (r, i) {
      quotes[i].textContent = '“' + r.text + '”';
      whos[i].textContent = r.who + ' · ' + r.rating + '★';
    });
    requestAnimationFrame(function () {
      var maxH = 0;
      cards.forEach(function (card) { maxH = Math.max(maxH, card.scrollHeight); });
      cards.forEach(function (card) { card.style.minHeight = maxH + 'px'; });
      chip.textContent = '카드 높이 ' + maxH + 'px';
    });
  }
요금 후기 — 평점 평균을 직접 구해 보여주는 후기 묶음
새 창에서 열기

06 · 요금 후기 — 평점 평균을 직접 구해 보여주는 후기 묶음 — 측정 누적면적 19.763% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

requestAnimationFramescrollHeightline-clamp

07기업 문의 CTA — 입력한 사용량으로 예상 비용을 즉석에서 구하는 섹션

기업용 요금제 상담 섹션이나 대량 사용 견적 CTA에 쓰는 형태입니다. role="slider" 손잡이로 예상 사용량을 입력하면 그 값을 단가에 곱해 예상 월 비용을 즉석에서 구해 보여주고, 값이 기준을 넘으면 문구 자체가 상담 안내로 바뀝니다.

단가를 곱한 값이 기준을 넘으면 문구 자체를 바꾼다

슬라이더가 800이면 기본요금 19,000원에 800×18원을 더한 33,400원이 뜨고, 1,200처럼 기준(1,000)을 넘는 값에서는 계산 대신 "영업팀에 문의해 주세요"로 문구가 바뀝니다.

  function apply(usage) {
    var pct = usage / MAX_USAGE;
    var trackWidth = track.clientWidth;
    var knobWidth = knob.offsetWidth || 16;
    var knobLeft = pct * (trackWidth - knobWidth);
    knob.style.left = knobLeft + 'px';
    fill.style.width = (pct * 100) + '%';
    knob.setAttribute('aria-valuenow', String(usage));
    usageNum.textContent = String(usage);

    if (usage > THRESHOLD) {
      estimate.textContent = '영업팀에 문의해 주세요';
      estimate.classList.add('is-contact');
    } else {
      var won = BASE + usage * RATE;
      estimate.textContent = '예상 요금 ' + won.toLocaleString('ko-KR') + '원';
      estimate.classList.remove('is-contact');
    }
  }
기업 문의 CTA — 입력한 사용량으로 예상 비용을 즉석에서 구하는 섹션
새 창에서 열기

07 · 기업 문의 CTA — 입력한 사용량으로 예상 비용을 즉석에서 구하는 섹션 — 측정 누적면적 2.287% · 움직인 프레임 8/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

aria-valuenowclientWidthrole="slider"

08파트너 로고 바 — 화면 폭에 맞춰 보일 개수를 다시 구하는 줄

협력사·결제사 로고 줄이나 신뢰 배지 나열에 쓰는 형태입니다. 화면 폭을 로고 폭과 여백으로 나눠 한 줄에 몇 개까지 들어가는지 구하고, 넘치는 로고는 자동으로 숨긴 뒤 폭이 바뀌면 이 개수를 다시 구해 배치를 고칩니다.

폭을 로고 폭과 여백으로 나눠 표시 개수를 구한다

로고 사이 여백은 8px($sp-2)로 고정해 두고, 뷰포트 폭이 220·320·420px 로 바뀔 때마다 이 여백을 포함한 나눗셈으로 몇 개까지 보일지 다시 구합니다.

  function apply(width) {
    viewport.style.width = width + 'px';
    var itemWidth = items[0].offsetWidth || 80;
    var fitCount = Math.max(1, Math.floor((width + GAP) / (itemWidth + GAP)));
    fitCount = Math.min(fitCount, items.length);
    items.forEach(function (item, i) {
      item.style.display = i < fitCount ? '' : 'none';
    });
    chip.textContent = fitCount + '개 표시 중';
  }
파트너 로고 바 — 화면 폭에 맞춰 보일 개수를 다시 구하는 줄
새 창에서 열기

08 · 파트너 로고 바 — 화면 폭에 맞춰 보일 개수를 다시 구하는 줄 — 측정 누적면적 8.32% · 움직인 프레임 9/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

querySelectorAlloffsetWidthtext-overflow

09요금 푸터 — 입력한 조건으로 맞는 플랜을 직접 구해 강조하는 추천

요금제 페이지 하단 추천 섹션이나 플랜 자동 추천 위젯에 쓰는 형태입니다. 인원수나 용량 같은 조건을 입력하면 그 값이 각 플랜의 한도를 넘는지 순서대로 대조해 맞는 플랜을 직접 구하고, 그 칸만 테두리와 배지로 강조합니다.

조건을 플랜 한도와 순서대로 대조해 첫 일치를 고른다

인원 3명·용량 20GB 조건이면 좌석 한도 1명인 Basic 은 걸러지고 좌석 10명·용량 50GB인 Pro 가 골라지며, 인원 15명·용량 80GB 조건은 Pro 의 좌석 한도(10명)를 넘어 Team 으로 넘어갑니다.

  function findMatch(need) {
    for (var i = 0; i < LIMITS.length; i++) {
      if (LIMITS[i].seats >= need.headcount && LIMITS[i].storageGb >= need.storage) return LIMITS[i].name;
    }
    return LIMITS[LIMITS.length - 1].name;
  }

  function apply(need) {
    headcountEl.textContent = String(need.headcount);
    storageEl.textContent = String(need.storage);
    var match = findMatch(need);
    planEls.forEach(function (el) {
      el.classList.toggle('is-match', el.getAttribute('data-name') === match);
    });
    chip.textContent = '추천 플랜 ' + match;
  }
요금 푸터 — 입력한 조건으로 맞는 플랜을 직접 구해 강조하는 추천
새 창에서 열기

09 · 요금 푸터 — 입력한 조건으로 맞는 플랜을 직접 구해 강조하는 추천 — 측정 누적면적 14.082% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

querySelectorAllgrid-template-columnsscale(1.05)

가격표 페이지를 새로 짜는 팀이 이 아홉 개를 찾는 이유

구독 서비스의 가격표 페이지를 새로 만들거나 손보는 팀이 가장 먼저 막히는 지점은 01 처럼 연/월 전환 버튼을 눌렀을 때 숫자가 순간적으로 바뀌는 계산입니다. 월 요금과 연 요금을 각각 하드코딩해 두면 요금제가 하나만 추가돼도 두 배의 값을 손으로 맞춰야 합니다.

할인 이벤트를 진행하는 마케팅팀은 04 의 할인 배지처럼 정가와 할인가 차이를 자동으로 계산해 퍼센트로 보여주는 장치를 특히 자주 찾습니다. 할인율을 담당자가 직접 계산해 텍스트로 박아 넣으면, 프로모션이 바뀔 때마다 숫자가 틀릴 위험이 남기 때문입니다.

사용량 기반 요금제를 파는 B2B 팀에서는 07 기업 문의 CTA 처럼 입력한 사용량으로 예상 비용을 즉석에서 보여주는 섹션이 상담 전환율에 바로 영향을 줍니다. 영업팀이 매번 견적을 따로 계산해 보내는 대신, 방문자가 스스로 대략의 비용을 가늠하게 하는 것이 이 섹션의 역할입니다.

할인율이 음수로 뒤집히면 배지 계산이 어떻게 깨지는가

세 지점 모두 값의 범위를 미리 정해 두지 않으면 계산 자체는 돌아가되 화면에 어색한 결과를 그대로 보여줍니다.

할인율이 음수가 되는 경우

04 의 계산은 정가에서 할인가를 뺀 값을 정가로 나누기만 하므로, 할인가를 정가보다 높게 잘못 입력하면 퍼센트가 음수로 나와 배지에 "-12% 할인"처럼 어색한 문구가 뜰 수 있습니다. 정가·할인가 두 값의 대소관계를 먼저 확인하는 절차가 계산 앞에 있어야 합니다.

사용량 자릿수가 폭증하는 경우

07 은 usage에 RATE 를 곱해 그대로 더하기 때문에, 슬라이더 상한을 지우고 훨씬 큰 값을 넘기면 toLocaleString 이 콤마만 늘려 큰 자릿수를 그대로 보여주다 카드 폭을 밀어낼 수 있습니다. gdcg4wsb 안 코드에는 이 상한을 조정하는 자리가 그대로 남아 있어, 실제 요금 체계에 맞게 THRESHOLD와 MAX_USAGE 값만 바꾸면 됩니다.

후기가 하나도 없는 경우

06 의 average 함수는 reviews.length 로 나누는데, 배열이 빈 상태로 넘어가면 0으로 나눠 평균이 NaN 이 됩니다. 후기 묶음을 실제 데이터에 연결할 때는 배열이 비었을 때 평균 대신 "후기 준비 중" 같은 문구로 갈아끼우는 예외 처리를 계산 앞에 추가해야 합니다.

reduced-motion 을 반영하면 달라지는 세 가지 변형

계산에 들어가는 상수 하나만 바꿔도 화면이 주는 느낌이 크게 갈립니다.

이름 바꾼 값 느낌
할인 배지 급함 기준 04 URGENT_RATIO .25 → .5 .25는 남은 시간이 전체의 4분의 1 밑으로 떨어져야 배지·카운트다운이 급함 상태로 바뀌어 대부분 차분하게 흘러가지만, .5로 올리면 절반이 남은 시점부터 급함 상태가 시작돼 화면이 더 오래 붉게 보이는 대신 정말 급한 순간의 긴장감은 옅어진다
기업 문의 상담 전환 기준 07 THRESHOLD 1000 → 500 1000은 어지간한 사용량까지 견적을 그대로 보여줘 이탈이 적지만 저사용량 잠재 고객까지 견적에 머무르게 하고, 500으로 낮추면 상담 전환이 더 이른 시점에 걸려 영업팀 접점이 늘지만 계산 결과를 보고 싶은 사용자를 일찍 끊는다
비교표 강조 진하기 계수 02 --diff-alpha .12+.35 → .06+.20 .12+.35는 한 줄만 달라도 바로 눈에 띄게 물들고 다섯 줄이 전부 다르면 진하게 물들어 차이를 강하게 드러내지만, .06+.20으로 낮추면 전체가 옅어져 표가 차분해지는 대신 한 줄만 다른 경우는 거의 안 보일 수 있다

접근성 — 계산은 남기고 애니메이션만 끈다

아홉 섹션은 prefers-reduced-motion: reduce 값을 읽으면 예시 시나리오를 자동으로 돌리는 setInterval 호출 자체를 걸지 않고, 첫 상태 하나만 계산해 고정합니다. 04 의 카운트다운은 애니메이션이 꺼져도 남은 시간 문구는 그대로 보여주고 rAF 루프만 멈추며, 03 빌링 토글의 절약 배지 계산도 애니메이션이 꺼지면 첫 상태(월간, 배지 숨김)만 고정해 보여줄 뿐 절약액을 구하는 계산 자체가 사라지지는 않습니다. aria-checked·aria-live·aria-expanded 속성은 애니메이션 여부와 무관하게 항상 실제 상태를 반영합니다.

숫자가 배치를 바꾸는 곳 — 할인율·사용량·후기 평점

가격표 디자인 양식을 만들 때 이 세 축(할인율·사용량·후기 평점)을 데이터로 다루면, 플랜 구성이 바뀌어도 표시 로직을 다시 짤 필요가 없어집니다.

할인율이 바꾸는 것

01·03·04 는 전부 할인율 하나에서 표시가 갈립니다. 01 은 플랜마다 다른 할인율(15~25%)을 월 환산가에 곱하고, 03 은 같은 20%를 월×12 에 곱해 절약액 문구를 만들며, 04 는 반대로 정가·할인가 두 숫자에서 할인율(35%)을 거꾸로 구합니다.

사용량이 바꾸는 것

07 은 슬라이더로 입력한 사용량이 예상 비용과 문구 자체를 바꾸고, 09 는 입력한 인원수·용량이 맞는 플랜 칸을 바꿉니다. 두 섹션 다 값이 기준(threshold·좌석·용량 한도)을 넘는 순간 결과가 계단식으로 바뀝니다.

후기 평점이 바꾸는 것

06 은 후기 배열의 평점만 바뀌면 큰 숫자(평균)와 카드 높이가 같이 다시 계산됩니다. 평점은 화면에 매겨진 값을 그대로 모을 뿐이라 후기가 추가되거나 빠지면 평균도 자동으로 따라 움직입니다.

가격 페이지에 붙이기 전 자주 확인하는 질문

가격표 디자인 양식만 그대로 복사해서 붙여도 동작하나요?

네, 항목마다 나온 코드는 압축 파일 안 전체 마크업·스타일과 함께 있어 그대로 붙이면 데모와 같은 계산이 돌아갑니다. 다만 플랜 이름·가격·한도 같은 숫자는 예시 값이므로 실제 요금 체계에 맞게 상수 부분만 바꿔야 합니다.

이 아홉 섹션을 전부 한 페이지에 써야 하나요?

아닙니다. 01·02·03 만으로도 플랜 비교와 결제 주기 전환은 끝나고, 07·09 는 기업용 요금제가 없는 서비스라면 빼도 됩니다. 09 종은 각자 독립된 계산이라 필요한 섹션만 골라 붙일 수 있습니다.

실제 결제 시스템과 연결하려면 무엇을 더해야 하나요?

이 데모는 화면 표시 계산만 담당하므로, 실제 결제로 이어지려면 버튼 클릭 시 결제 페이지나 결제 API를 호출하는 코드를 따로 붙여야 합니다. 여기 있는 할인율·절약액·예상 비용 계산은 그 결제 흐름 앞단에서 사용자에게 숫자를 미리 보여주는 역할까지만 합니다.

더 읽을거리

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.