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

케이스 스터디 사이트 UI 9종 — 성과 수치까지 계산해 보여주는

· Godrich · 9종 · 15분 읽기

랜딩 섹션바닐라 JSSCSS스크롤랜딩 페이지

화면에 들어오는 순간 성과 수치가 매 프레임 다시 구해지며 카운트업되고, 사례마다 계산한 임팩트 점수로 그리드 타일 크기가 정해지며, 인용문 길이에 맞춰 폰트 크기가 거꾸로 구해지는 사례 연구 페이지 섹션 9종입니다.

사례 히어로 — 성과 수치를 매 프레임 다시 구해 카운트업하는 상단01 case-hero 스토리 그리드 — 임팩트 점수를 직접 구해 타일 크기를 정하는 그리드02 case-story-grid 메트릭 하이라이트 — 이전·이후 비율을 직접 나눠 구하는 강조 카드03 case-metric-highlight 인용 블록 — 글자 길이로 폰트 크기를 거꾸로 구하는 인용 카드04 case-quote-block 업종 탭 — 전환마다 업종별 개수를 다시 세는 탭05 case-industry-tabs 비디오 카드 — 노출 비율로 재생을, 스크롤량으로 위치를 구하는 카드06 case-video-card 관련 CTA — 공통 태그 수로 관련도를 직접 구하는 추천07 case-related-cta 로고 바 — 개수에 비례해 속도를 다시 구해 루프 시간을 맞추는 바08 case-logo-bar 사례 푸터 — 지금까지 본 사례들의 평균을 직접 구하는 요약 배지09 case-footer

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

데모

아홉 섹션은 사례(스토리)의 성과 수치·태그·인용문 같은 데이터를 계산해 그 결과로 화면을 채웁니다. 05 업종 탭과 06 비디오 카드만 실제 클릭·스크롤에 반응하고, 나머지 일곱 개는 정해진 시나리오가 자동으로 돌며 값이 바뀌는 과정을 반복 재생합니다. 측정 무대는 480×300, 캡처는 24장이며 실제 움직임은 그 사이 간격 23개로 셉니다.

실측 한눈에

항목 초점 누적면적(%) 강도평균 움직인프레임(23 기준)
01 사례 히어로 목표값까지 카운트업 재계산 6.476 165.7 17
02 스토리 그리드 임팩트 점수로 타일 크기 재계산 52.497 46.9 7
03 메트릭 하이라이트 전후 비율로 게이지 재계산 2.328 128.3 17
04 인용 블록 글자 길이로 폰트 크기 역산 7.081 77.7 10
05 업종 탭 전환마다 업종별 개수 재계산 2.14 143.3 9
06 비디오 카드 노출 비율로 재생 여부 재계산 31.472 103.1 23
07 관련 CTA 공통 태그 수로 관련도 재계산 18.349 59.7 8
08 로고 바 로고 개수로 루프 시간 재계산 3.005 130.8 23
09 사례 푸터 누적 평균 재계산 0.79 108.2 8

면적이 작아도 계산이 쉬는 건 아니다

03 메트릭 하이라이트(2.328%)·05 업종 탭(2.14%)·08 로고 바(3.005%)·09 사례 푸터(0.79%)는 게이지·밑줄·마퀴 줄·통계 숫자처럼 원래 차지하는 면적이 작은 요소라 누적면적이 낮게 나오는 게 자연스러운 결과입니다. 그중 08은 로고 줄 자체는 얇지만 23/23 프레임 내내 흐르고 있어 화면이 쉬는 순간이 없고, 02 스토리 그리드(52.497%)와 07 관련 CTA(18.349%)는 오히려 면적은 크면서도 시나리오가 바뀐 뒤 다음 전환까지 값을 유지하는 정지 구간이 있어 움직인 프레임이 각각 7·8로 적게 나옵니다.

사례 연구 페이지의 해부 — 아홉 섹션이 계산하는 것

사례 연구 페이지는 흔히 로고·인용문·성과 수치를 정적 텍스트로 박아 두지만, 이 아홉 섹션은 그 값 하나를 계산해 표시나 배치를 다시 정합니다. 속성을 켜고 끄는 트랜지션이 아니라 카운트업 목표값·정규화 점수·역산한 폰트 크기처럼 숫자를 다시 구하는 계산이 매번 화면을 채웁니다.

아홉 섹션이 각자 구하는 값

01은 목표 성과 수치를 프레임마다 0부터 다시 구하고, 02는 사례별 성과를 서로 비교해 임팩트 점수로 정규화하며, 03은 전후 두 숫자의 비율을 나눠 게이지 값을 만듭니다. 04는 인용문 글자 수로 폰트 크기를 거꾸로 풀고, 05는 전환마다 업종별 개수와 밑줄 위치를 다시 재며, 06은 뷰포트에 걸친 비율로 재생 여부와 진행 프레임을 정합니다. 07은 태그 겹침 수로 관련도 점수를 매기고, 08은 로고 총 폭을 재 루프 시간을 계산하며, 09는 지금까지 본 값의 누적합과 누적건수만으로 평균을 갱신합니다.

아홉 섹션이 공유하는 조건

아홉 섹션 모두 사례 하나(또는 사례 묶음)의 수치·태그·글자 수 같은 데이터 하나를 입력으로 받는다는 점이 같습니다. 01·03은 그 사례의 목표·전후 값이고, 02·07은 사례들 사이의 상대 비교이며, 05·08은 화면에 있는 요소의 실제 렌더 값(개수·폭)을 다시 잰 결과입니다.

섹션별 코드

아홉 섹션 각각에서 계산 부분만 골라 담았고, 전체 마크업과 스타일시트는 압축 파일 안에 들어 있습니다.

01사례 히어로 — 성과 수치를 매 프레임 다시 구해 카운트업하는 상단

에이전시 사례 연구 페이지 최상단에서 클라이언트 성과 하이라이트로 자주 쓰는 형태입니다. 화면에 들어오는 순간부터 핵심 성과 수치를 0에서 목표값까지 매 프레임 다시 구해 자연스럽게 올라가는 숫자로 보여주고, 자릿수가 늘어나는 순간도 값에 맞춰 폭을 다시 잽니다.

자릿수가 늘어나는 순간마다 canvas로 폭을 다시 재는 계산

숫자가 두 자리에서 세 자리로 넘어가는 순간에만 measureText로 실제 렌더 폭을 재 --num-w 변수를 갱신해, 다음 문자가 밀리지 않고 자리에 맞춰 넓어집니다.

  var measureCv = document.createElement('canvas');
  var measureCtx = measureCv.getContext('2d');

  function measureWidth(text, px) {
    if (!measureCtx) return text.length * px * 0.62;
    measureCtx.font = '700 ' + px + 'px -apple-system, "Segoe UI", sans-serif';
    return measureCtx.measureText(text).width;
  }

  var lastDigits = -1;

  function applyValue(v) {
    numEl.textContent = String(v);
    var digits = String(v).length;
    if (digits !== lastDigits) {
      lastDigits = digits;
      var px = parseFloat(getComputedStyle(numEl).fontSize) || 44;
      var w = measureWidth(String(v), px);
      wrapEl.style.setProperty('--num-w', Math.ceil(w) + 'px');
    }
  }
사례 히어로 — 성과 수치를 매 프레임 다시 구해 카운트업하는 상단
새 창에서 열기

01 · 사례 히어로 — 성과 수치를 매 프레임 다시 구해 카운트업하는 상단 — 측정 누적면적 6.476% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

getContext('2d')measureTextrequestAnimationFrame

02스토리 그리드 — 임팩트 점수를 직접 구해 타일 크기를 정하는 그리드

사례 연구 목록 페이지나 포트폴리오 그리드 섹션에서 여러 사례를 한눈에 비교하는 형태입니다. 사례마다 적어 둔 성과 수치의 크기를 서로 비교해 임팩트 점수를 직접 구하고, 점수가 큰 사례일수록 타일이 더 넓은 자리를 차지하도록 그리드 배치를 다시 정합니다.

정규화한 값에 거듭제곱을 걸어 등급을 나누는 계산

이번 데이터셋의 최댓값으로 각 사례 값을 0~1로 정규화한 뒤 IMPACT_WEIGHT 거듭제곱을 적용해, 점수 구간마다 grid-column·grid-row span과 글자 크기를 다시 정합니다.

  function apply(values) {
    var max = Math.max.apply(null, values);
    tiles.forEach(function (tile, i) {
      var value = values[i];
      var normalized = max > 0 ? value / max : 0;
      var weighted = Math.pow(normalized, IMPACT_WEIGHT);
      var tier = tierFor(weighted);
      tile.style.gridColumn = 'span ' + tier.col;
      tile.style.gridRow = 'span ' + tier.row;
      tile.dataset.pad = tier.pad;
      tile.dataset.font = tier.font;
      var valEl = tile.querySelector('.tileVal');
      if (valEl) valEl.textContent = String(value);
      if (!reduce) {
        tile.classList.remove('tile--pulse');
        void tile.offsetWidth;
        tile.classList.add('tile--pulse');
      }
    });
  }
스토리 그리드 — 임팩트 점수를 직접 구해 타일 크기를 정하는 그리드
새 창에서 열기

02 · 스토리 그리드 — 임팩트 점수를 직접 구해 타일 크기를 정하는 그리드 — 측정 누적면적 52.497% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

querySelectorAllclassList.addtransform-origin

03메트릭 하이라이트 — 이전·이후 비율을 직접 나눠 구하는 강조 카드

성과 지표 강조 카드나 before/after 수치 배지에서 쓰는 형태입니다. 이전 값과 이후 값의 비율을 직접 나눠 계산해 게이지 바늘의 각도나 막대 길이를 그 비율에 맞춰 구하고, 비율이 클수록 강조 색을 진하게 바꿉니다.

원 둘레를 계산해 stroke-dashoffset을 역산하는 방식

원 둘레(2×π×반지름)를 미리 구해 두고, 전후 비율만큼 채워야 할 길이를 둘레에서 빼는 값으로 dashoffset을 매 사이클 다시 계산합니다.

  function computeRatio(metric) {
    var delta = metric.lowerIsBetter ? (metric.before - metric.after) : (metric.after - metric.before);
    var improvement = delta / metric.before;
    return Math.max(0, Math.min(1, improvement / MAX_IMPROVEMENT));
  }

  function computePercent(metric) {
    var delta = metric.lowerIsBetter ? (metric.before - metric.after) : (metric.after - metric.before);
    return Math.round((delta / metric.before) * 100);
  }

  function applyGauge(ratio) {
    var offset = CIRC * (1 - ratio);
    fill.style.strokeDashoffset = String(offset);
  }
메트릭 하이라이트 — 이전·이후 비율을 직접 나눠 구하는 강조 카드
새 창에서 열기

03 · 메트릭 하이라이트 — 이전·이후 비율을 직접 나눠 구하는 강조 카드 — 측정 누적면적 2.328% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

stroke-dashoffsetrequestAnimationFramefont-variant-numeric

04인용 블록 — 글자 길이로 폰트 크기를 거꾸로 구하는 인용 카드

클라이언트 인용 카드나 후기 강조 섹션에서 쓰는 형태입니다. 인용문의 글자 수를 세어 한 줄에 넘치지 않는 폰트 크기를 거꾸로 구하고, 문장이 길수록 줄 간격도 함께 좁혀 카드 안에 맞춥니다.

이분 탐색으로 목표 폭에 맞는 크기를 찾는 계산

케이스 스터디 예시 인용문마다 길이가 다르므로, 최소·최대 폰트 크기 사이를 14번 이분 탐색하며 canvas로 실제 렌더 폭을 재 목표 폭 안에 들어가는 가장 큰 크기를 찾습니다.

  // 목표 폭 안에 들어가는 가장 큰 글자 크기를 이분 탐색으로 거꾸로 푼다.
  function solveFontSize(text, targetWidth) {
    var lo = MIN_PX, hi = MAX_PX, best = MIN_PX;
    for (var i = 0; i < 14; i++) {
      var mid = (lo + hi) / 2;
      var w = widthAt(text, mid);
      if (w <= targetWidth - TOLERANCE) {
        best = mid;
        lo = mid;
      } else {
        hi = mid;
      }
    }
    return best;
  }
인용 블록 — 글자 길이로 폰트 크기를 거꾸로 구하는 인용 카드
새 창에서 열기

04 · 인용 블록 — 글자 길이로 폰트 크기를 거꾸로 구하는 인용 카드 — 측정 누적면적 7.081% · 움직인 프레임 10/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

getContext('2d')measureTextclassList.add

05업종 탭 — 전환마다 업종별 개수를 다시 세는 탭

업종별 사례 필터 탭이나 카테고리 전환 내비게이션에서 쓰는 형태입니다. 탭을 눌러 업종을 옮기면 그 업종에 속한 사례 개수를 다시 세어 배지 숫자를 갱신하고, 밑줄의 위치와 너비를 선택된 탭의 실제 너비로 다시 구해 옮깁니다.

실제 렌더 폭을 재서 밑줄을 옮기는 계산

밑줄 좌표를 미리 정해 두지 않고 getBoundingClientRect로 눌린 탭의 실제 위치와 폭을 매번 재 translateX·scaleX로 옮기므로, 탭 글자 수가 바뀌어도 밑줄이 어긋나지 않습니다.

  function measureAndMove(idx) {
    var btn = buttons[idx];
    var wrapRect = tabsEl.getBoundingClientRect();
    var btnRect = btn.getBoundingClientRect();
    var x = btnRect.left - wrapRect.left;
    var w = btnRect.width;
    underlineEl.style.transform = 'translateX(' + x.toFixed(2) + 'px) scaleX(' + w.toFixed(2) + ')';
  }

  function selectTab(idx) {
    current = idx;
    buttons.forEach(function (b, i) {
      b.setAttribute('aria-selected', i === idx ? 'true' : 'false');
    });
    var tab = TABS[idx];
    var percent = Math.round((tab.count / TOTAL) * 100);
    countNumEl.textContent = String(tab.count);
    countLabelEl.textContent = '개 ' + tab.label + ' 사례 · 전체 ' + TOTAL + '개 중 ' + percent + '%';
    measureAndMove(idx);
  }
업종 탭 — 전환마다 업종별 개수를 다시 세는 탭
새 창에서 열기

05 · 업종 탭 — 전환마다 업종별 개수를 다시 세는 탭 — 측정 누적면적 2.14% · 움직인 프레임 9/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

getBoundingClientRectscaleXtranslateX

06비디오 카드 — 노출 비율로 재생을, 스크롤량으로 위치를 구하는 카드

사례 영상 썸네일 카드나 프로젝트 하이라이트 릴에서 쓰는 형태입니다. 카드가 화면에 걸쳐 있는 비율을 실제로 재서 그 값이 기준을 넘으면 재생 버튼이 눌리도록 활성화하고, 스크롤이 진행된 만큼 미리보기 프레임을 다시 구해 스크롤로 영상을 넘기듯 보여줍니다.

뷰포트에 걸친 비율이 재생 가능 여부와 진행 프레임을 정하는 계산

실제 영상 파일은 없고 시드 난수로 매번 다시 그리는 캔버스 패턴이 미리보기 역할을 하며, 노출 비율이 기준(62%)을 넘을 때만 재생 아이콘이 눌리게 바뀝니다.

  function update(ratio) {
    var percent = Math.round(ratio * 100);
    readyLabel.textContent = '준비율 ' + percent + '%';
    var frameIndex = Math.min(FRAME_COUNT - 1, Math.floor(ratio * (FRAME_COUNT - 1)));
    if (frameIndex !== lastFrame) {
      lastFrame = frameIndex;
      drawFrame(frameIndex);
    }
    if (ratio >= READY_THRESHOLD) {
      playBtn.classList.add('playBtn--ready');
      playBtn.disabled = false;
    } else {
      playBtn.classList.remove('playBtn--ready');
      playBtn.disabled = true;
    }
  }
비디오 카드 — 노출 비율로 재생을, 스크롤량으로 위치를 구하는 카드
새 창에서 열기

06 · 비디오 카드 — 노출 비율로 재생을, 스크롤량으로 위치를 구하는 카드 — 측정 누적면적 31.472% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

IntersectionObserverscrollTopgetContext('2d')

07관련 CTA — 공통 태그 수로 관련도를 직접 구하는 추천

사례 상세 하단 관련 콘텐츠 추천이나 다음 사례 유도 섹션에서 쓰는 형태입니다. 지금 보는 사례와 다른 사례들이 같은 태그를 몇 개나 공유하는지 세어 관련도 점수를 직접 구하고, 점수가 가장 높은 사례부터 추천 카드로 늘어놓습니다.

FLIP 방식으로 순서 변화를 transform만으로 보여주는 계산

케이스 스터디 양식마다 붙은 태그 배열을 서로 대조해 점수를 매긴 뒤, 이동 전 위치를 먼저 기록하고 DOM을 다시 쌓은 다음 이동 후 위치와의 차이만큼 역보정해 transform으로만 되돌립니다.

    if (reduce) return;

    // Last: 이동 후 위치를 재고, Invert: 차이를 계산해 transform 으로 되돌린 뒤 Play: 0 으로 애니메이션.
    CARDS.forEach(function (card) {
      var el = cardEls[card.id];
      var first = firstRects[card.id];
      var last = el.getBoundingClientRect();
      var dx = first.left - last.left;
      var dy = first.top - last.top;
      if (dx === 0 && dy === 0) return;
      el.style.transition = 'none';
      el.style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';
      el.getBoundingClientRect();
      el.style.transition = '';
      requestAnimationFrame(function () {
        el.classList.add('card--flip');
        el.style.transform = '';
      });
      el.addEventListener('transitionend', function handler() {
        el.classList.remove('card--flip');
        el.removeEventListener('transitionend', handler);
      });
    });
관련 CTA — 공통 태그 수로 관련도를 직접 구하는 추천
새 창에서 열기

07 · 관련 CTA — 공통 태그 수로 관련도를 직접 구하는 추천 — 측정 누적면적 18.349% · 움직인 프레임 8/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

getBoundingClientRectclassList.addtranslate(

08로고 바 — 개수에 비례해 속도를 다시 구해 루프 시간을 맞추는 바

클라이언트 로고 마퀴나 협업사 신뢰 바에서 쓰는 형태입니다. 로고 개수를 세어 한 바퀴를 도는 데 걸리는 시간이 항상 같아지도록 흐르는 속도를 그 개수에 비례해 다시 구하고, 로고가 늘어도 줄어도 한 바퀴 재생 시간은 똑같이 유지합니다.

렌더 폭을 기준 폭과 비교해 재생 시간을 구하는 계산

로고 줄의 실제 렌더 폭을 getBoundingClientRect로 재 기준 폭(560px)과 비교한 비율만큼 LOOP_SEC을 곱해 --marquee-duration을 다시 정하고, 그 값을 CSS 애니메이션이 그대로 읽습니다.

  function recompute() {
    var setA = track.querySelectorAll('.logo[data-set="a"]');
    var halfWidth = 0;
    setA.forEach(function (el) {
      var rect = el.getBoundingClientRect();
      var style = getComputedStyle(el);
      halfWidth += rect.width + parseFloat(style.marginRight || '0');
    });
    var duration = LOOP_SEC * (halfWidth / BASE_WIDTH);
    duration = Math.max(MIN_SEC, Math.min(MAX_SEC, duration));
    track.style.setProperty('--marquee-duration', duration.toFixed(2) + 's');
    var pxPerSec = halfWidth / duration;
    speedNote.textContent = '로고 ' + setA.length + '개 · 계산된 한 바퀴 ' + duration.toFixed(1) + '초 · 초당 ' + Math.round(pxPerSec) + 'px';
  }
로고 바 — 개수에 비례해 속도를 다시 구해 루프 시간을 맞추는 바
새 창에서 열기

08 · 로고 바 — 개수에 비례해 속도를 다시 구해 루프 시간을 맞추는 바 — 측정 누적면적 3.005% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

getBoundingClientRecttranslateX--marquee-duration

09사례 푸터 — 지금까지 본 사례들의 평균을 직접 구하는 요약 배지

사례 연구 페이지 하단 요약 섹션이나 CTA 앞 마무리 배지에서 쓰는 형태입니다. 지금까지 살펴본 사례들의 완료 기간이나 성과 수치를 모아 평균을 직접 구해 마지막 배지에 요약으로 보여주고, 새 사례가 더해지면 그 평균을 다시 계산합니다.

전체를 다시 나누지 않고 누적합만 갱신하는 계산

열람 이벤트가 들어올 때마다 누적합(sum)과 누적건수(count)만 갱신해 sum을 count로 나누므로, 사례가 몇 건이 쌓이든 매번 배열 전체를 다시 훑지 않습니다.

  function step() {
    if (idx >= EVENTS.length) idx = 0;
    var value = EVENTS[idx];
    sum += value;
    count += 1;
    idx += 1;

    var average = sum / count;

    countNum.textContent = String(count);
    avgNum.textContent = average.toFixed(1);
    feedNote.textContent = '최근: 임팩트 ' + value + '점 열람';

    if (!reduce) {
      countNum.classList.remove('statNum--bump');
      avgNum.classList.remove('statNum--bump');
      // 리플로우를 강제해 같은 클래스를 다시 걸어도 애니메이션이 재시작되게 한다.
      void countNum.offsetWidth;
      countNum.classList.add('statNum--bump');
      avgNum.classList.add('statNum--bump');
    }
  }
사례 푸터 — 지금까지 본 사례들의 평균을 직접 구하는 요약 배지
새 창에서 열기

09 · 사례 푸터 — 지금까지 본 사례들의 평균을 직접 구하는 요약 배지 — 측정 누적면적 0.79% · 움직인 프레임 8/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

classList.addsetIntervaltransform-origin

이런 화면에서 쓴다 — 케이스 스터디 페이지를 새로 짜는 팀

포트폴리오나 세일즈 페이지에 사례 연구 섹션을 새로 넣는 팀이 이 아홉 섹션을 찾는 이유는 보통 하나입니다. 01 처럼 성과 수치를 카운트업으로 보여주고 싶은데, 숫자가 몇 자리까지 늘어나든 레이아웃이 안 깨지게 하는 계산을 어디서부터 손대야 할지 막막하기 때문입니다.

여러 업종의 사례를 한 페이지에 묶어 보여주는 사람은 05 처럼 탭을 전환할 때마다 업종별 개수를 다시 세어 보여주는 문제를 자주 마주칩니다. 업종이 늘어나거나 사례가 빠질 때도 그 숫자가 항상 맞아야 하는 게 다음 문제입니다.

사례 연구 페이지 맨 아래에 지금까지 본 사례들의 평균 성과를 요약해 보여주고 싶은 사람에게는 09 의 누적합 계산이 곧 그 배지의 전부입니다. 사례를 하나씩 더 볼 때마다 전체를 다시 계산하지 않고 값을 갱신하는 방식이 페이지 성능을 가릅니다.

접근성까지 포함한 변형 세 가지

숫자 하나가 세 섹션 각각에서 카운트업·타일 크기·마퀴 속도로 다르게 드러납니다.

이름 바꾼 값 느낌
히어로 카운트업 이징 지수 01 EASE_POW 2 → 4 지수를 2로 두면 숫자가 거의 일정한 속도로 목표값까지 올라가 차분하지만 임팩트가 약하고, 4로 올리면 초반은 빠르게 튀어 오르다 막판에 급격히 느려져 마지막 자리가 착지하는 느낌이 강해지지만 어지러울 수 있다
스토리 그리드 임팩트 가중치 02 IMPACT_WEIGHT .5 → 1.5 가중치를 .5로 낮추면 점수 차이가 완만해 타일 크기가 고르게 나뉘어 안정적이지만 어떤 사례가 성과가 큰지 눈에 덜 띄고, 1.5로 올리면 점수가 큰 사례의 타일이 확 커져 시선을 확실히 끌지만 작은 타일들이 지나치게 눌려 보인다
로고 바 루프 시간 08 LOOP_SEC 15 → 30 한 바퀴를 15초로 맞추면 로고가 빠르게 지나가 짧은 체류에도 여러 클라이언트를 다 보여주지만 읽기엔 바쁘고, 30초로 늘리면 로고 하나하나를 여유 있게 읽을 수 있지만 전체를 다 보려면 오래 머물러야 한다

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

아홉 섹션은 prefers-reduced-motion을 읽으면 예시 시나리오를 자동으로 돌리는 setInterval 호출 자체를 걸지 않고, 첫 상태 하나만 계산해 고정합니다. 01 히어로의 카운트업은 애니메이션이 꺼지면 rAF 루프 없이 목표값을 바로 표시하고, 06 비디오 카드는 자동 스크롤 시뮬레이션만 멈출 뿐 실제 스크롤에 따른 노출 비율 계산은 그대로 동작합니다. aria-selected·aria-label 같은 속성은 애니메이션 여부와 무관하게 항상 실제 상태를 반영합니다.

빈 인용문과 0건 업종에서 무엇이 먼저 깨지는가

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

인용문이 비어 있는 경우

04의 widthAt은 빈 문자열의 렌더 폭을 0으로 재므로, 이분 탐색은 항상 목표 폭 안에 들어간다고 판단해 폰트 크기를 최댓값(20px)까지 그대로 키웁니다. 결과적으로 인용문 없이 큰 글자 자리만 비어 있고 인용자 표기만 남는 카드가 되므로, 인용문이 없는 사례는 이 카드 대신 다른 레이아웃으로 건너뛰는 처리가 앞단에 있어야 합니다.

업종 사례가 0건인 경우

05의 TOTAL은 로드 시점에 TABS 배열의 count를 모두 더해 한 번만 구하므로, 특정 업종의 count를 0으로 바꿔도 탭 자체는 눌리고 밑줄도 정상적으로 옮겨집니다. 다만 배지에는 "0개 ○○ 사례 · 전체 43개 중 0%"라는 문구가 그대로 나와, 사례가 없다는 뜻을 숫자만으로는 알아채기 어려워 별도의 안내 문구가 필요합니다.

사례 성과가 전부 같거나 0인 경우

02의 normalized는 사례 성과 값이 전부 같으면 그 값 자체가 max와 같아져 모든 값이 1이 되고, max 자체가 0이면 모든 값이 0이 되어 tierFor가 같은 등급만 돌려줍니다. 두 경우 다 타일 크기가 전부 똑같아져 어떤 사례가 더 나은 성과인지 그리드만 보고는 구분할 수 없습니다. h4mdyx3h 안 코드에는 이 정규화 계산과 tierFor 등급 경계가 그대로 남아 있어, 실제 사례 성과 값에 맞게 경곗값만 조정하면 됩니다.

숫자가 배치를 바꾸는 곳 — 임팩트 점수·인용 길이·업종별 개수

사례 연구 페이지 양식을 만들 때 이 세 축(임팩트 점수·인용 길이·업종별 개수)을 데이터로 다루면, 사례 구성이 바뀌어도 표시 로직을 다시 짤 필요가 없어집니다.

임팩트 점수가 바꾸는 것

02는 사례별 성과 값을 이번 데이터셋의 최댓값과 비교해 정규화하고 IMPACT_WEIGHT 거듭제곱을 걸어 임팩트 점수를 만듭니다. 점수가 .75 이상이면 타일이 2×2 칸을 차지하고 .28 밑이면 가장 작은 칸에 머물러, 성과가 큰 사례일수록 눈에 먼저 들어옵니다.

인용 길이가 바꾸는 것

04는 인용문 글자 수가 늘어날수록 이분 탐색으로 찾는 폰트 크기가 작아지고, 목표 폭 계산에 쓰는 배수(2.6배)는 그대로라 짧은 인용문은 크게, 긴 인용문은 작게 나옵니다. 같은 카드 틀 안에서 인용문 길이가 서로 달라도 줄이 어색하게 끊기지 않습니다.

업종별 개수가 바꾸는 것

05는 탭을 옮길 때마다 그 업종에 속한 사례 개수를 전체 합계로 나눠 퍼센트 배지를 다시 구하고, 밑줄 위치도 선택된 탭의 실제 렌더 폭으로 다시 잽니다. 업종별 사례 수가 바뀌어도 코드를 고칠 필요 없이 TABS 배열의 count 값만 바꾸면 배지와 퍼센트가 따라 움직입니다.

사례 연구 섹션을 쓰기 전 자주 나오는 질문

케이스 스터디 목차 순서대로 아홉 섹션을 전부 한 페이지에 둬야 하나요?

아닙니다. 01·02·03만으로도 히어로와 성과 요약은 끝나고, 06·07처럼 영상이나 추천 콘텐츠가 없는 사례 페이지라면 빼도 됩니다. 아홉 종은 각자 독립된 계산이라 필요한 섹션만 골라 붙일 수 있습니다.

빈 인용문이나 0건 업종처럼 데이터가 부족할 때는 어떻게 하나요?

위 함정 절에서 다룬 대로 계산 자체는 끝까지 돌지만 결과가 어색해질 수 있어, 인용문이 없는 사례는 04 대신 다른 카드로 건너뛰고 업종 count가 0이면 탭 자체를 숨기거나 안내 문구로 바꾸는 처리를 앞단에 추가하는 편이 안전합니다.

실제 방문자 데이터와 연결하려면 무엇을 더해야 하나요?

이 데모는 화면 표시 계산만 담당하므로, 실제 사례 데이터베이스와 연결하려면 TARGET·DATASETS·CARDS 같은 배열을 서버에서 받아온 값으로 채워 넣는 코드만 더하면 됩니다. 계산 로직 자체는 값이 바뀌어도 그대로 재사용할 수 있습니다.

더 읽을거리

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

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