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

랜딩페이지 히어로섹션 디자인 9종 — 통계 카운터까지

· Godrich · 9종 · 15분 읽기

랜딩 섹션SCSS바닐라 JS스크롤자동 재생랜딩 페이지히어로 섹션

랜딩페이지 히어로섹션 아홉 개 중 하나는 카드가 보이는 비율 값이 기준을 넘을 때마다 순서 값에 간격을 곱해 나타나는 시점을 다시 구하고, 하나는 열린 질문의 답변 높이 값을 내용 길이로 다시 구해 펼치며, 또 하나는 목표 숫자까지 값을 프레임마다 계산해 자릿수가 늘어나는 순간 새

이 아홉 화면은 실제 서비스나 진짜 결제 데이터가 아니라 가상의 값으로 만든 것이며, 03 요금제 카드·05 FAQ 아코디언·04 후기 캐러셀·07 푸터 넷은 클릭·포인터 같은 실제 리스너를 갖고 01 히어로·02 기능 카드 그리드·06 강조 배너·08 로고 바·09 통계 카운터 다섯은 타이머나 반복 애니메이션으로 자동 재생됩니다. 08의 로고는 실제 협력사가 아니라 BRAND A~D 라는 자리표시 이름이고, 09에 오르는 숫자도 실적을 흉내 낸 가상 값입니다.

히어로 — 스크롤 값에 따라 배경과 글자가 다른 비율로 어긋나는 도입부01 hero 기능 카드 그리드 — 보이는 비율 값으로 순서대로 나타나는 카드02 features 요금제 카드 — 추천 카드만 확대 비율 값이 더 크게 계산되는 목록03 pricing 후기 캐러셀 — 자동 진행 값이 타이머로 늘어나는 카드 줄04 testimonials FAQ 아코디언 — 답변 높이 값을 내용 길이로 다시 구하는 목록05 faq 강조 배너 — 진입 상태가 되면 테두리 각도 값이 계속 늘어나는 띠06 cta-band 푸터 — 밑줄 너비 값을 0에서 글자 폭까지 다시 구하는 링크 목록07 footer 로고 바 — 가로 이동 값이 끊기지 않고 계속 늘어나는 줄08 logo-bar 통계 카운터 — 목표 값까지 프레임마다 계산해 올라가는 숫자09 stats

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

랜딩페이지 히어로 섹션을 찾는 사람은 대부분 맨 위 문구부터 궁금해하지만, 실제로 화면을 흔드는 건 아홉 섹션이 각자 붙잡은 값 하나와 그 값을 다시 구하는 계산식입니다. 아래 표는 그 계산이 화면을 실제로 얼마나 흔들었는지 잰 값이고, 값이 자동으로 도는 것(01·02·06·08·09) → 상태 전환으로 다시 구하는 것(03·05) → 포인터로 다시 구하는 것(04·07) 순으로 묶었습니다.

랜딩 섹션의 해부 — 아홉 섹션이 계산하는 것

실측 한눈에

항목 초점 누적면적 % 강도 평균 움직인 프레임
01 히어로 스크롤 값 → 배경·제목 위치 보간 17.827 98.9 20/23
02 기능 카드 그리드 순서 값×간격 → 등장 시점 57.951 37.3 12/23
03 요금제 카드 결제 주기 상태 → 표시 금액 전환 5.337 56.8 9/23
04 후기 캐러셀 자동 진행 값 → 위치 보간 2.61 124.2 8/23
05 FAQ 아코디언 열림 상태 → scrollHeight 재계산 39.718 160.1 17/23
06 강조 배너 진입 상태 → 테두리 각도 값 증가 1.011 19.1 23/23
07 푸터 포인터 진입 → 밑줄 너비 재계산 0.281 232.0 7/23
08 로고 바 경과 시간 → 가로 이동 값 증가 2.711 132.9 23/23
09 통계 카운터 경과 비율 → 목표 값까지 재계산 3.044 134.4 13/23

02 는 카드 네 장이 한 번에 화면 대부분을 차지해 누적면적이 9종 중 가장 큰 57.951%이고, 07 은 밑줄 하나만 그리는 화면이라 0.281%로 가장 작습니다 — 둘 다 화면을 채우는 요소 크기 차이일 뿐 결함이 아닙니다. 강도 평균은 07 이 232.0 으로 가장 높아 밑줄이 배경과 또렷하게 갈리는 픽셀 값을 만든다는 뜻이고, 06 은 19.1 로 가장 낮아 도는 그라디언트의 인접 색 차이가 완만하다는 뜻입니다. 06·08 이 23/23 으로 매 프레임 움직인 것과 달리 07 이 7/23 에 머무는 건 포인터가 올라오는 순간에만 값이 바뀌고 그 사이는 정지해 있는 구조라 그런 것이지, 계산이 도중에 끊긴 게 아닙니다.

값이 자동으로 도는 축 — 01·02·06·08·09

이 다섯은 리스너 없이 애니메이션 자체가 값을 만듭니다. 01 은 --sv 값을 반복 키프레임으로 0→1→0 사이에서 흘려 배경·제목의 translateY 배율을 다르게 걸고, 02 는 카드 순서(--i)에 120ms 를 곱한 animation-delay 로 등장 시점을 벌립니다. 06 은 --angle 값을 0에서 360deg 까지 계속 늘려 conic-gradient 가 도는 것처럼 보이게 하고, 08 은 가로 이동 값을 로고 목록 폭의 절반(-50%)까지 끊임없이 늘려 로고 두 벌이 이어 붙게 하며, 09 는 requestAnimationFrame 이 프레임마다 경과 비율을 계산해 숫자를 목표 값까지 밀어 올립니다.

상태 전환이 값을 다시 구하게 하는 축 — 03·05

이 둘은 클릭 한 번이 상태 값을 뒤집고, 그 값에 맞춰 다른 값을 다시 구합니다. 03 은 결제 주기 버튼을 누르면 is-yearly 클래스가 붙고, 미리 넣어 둔 월간·연간 두 금액 중 그 상태에 맞는 쪽만 보이도록 전환됩니다. 05 는 질문을 열면 aria-expanded 를 뒤집은 뒤 그 답변의 실제 렌더 높이(scrollHeight)를 다시 구해 max-height 를 그 값까지 늘립니다.

포인터가 값을 다시 구하게 하는 축 — 04·07

이 둘은 포인터 진입·이탈이 값의 흐름을 열고 닫습니다. 04 는 포인터가 올라오면(pointerenter) 자동 진행을 시작(goLive)했다가 곧바로 멈추고, 벗어나면(pointerleave) 멈췄던 타이머를 다시 돌려 카드 위치를 계속 보간합니다. 07 은 포인터가 링크 위로 오는 순간 그 글자의 실제 폭(getBoundingClientRect().width)을 다시 구해 밑줄 너비 값을 0에서 그 값까지 늘립니다.

섹션별 코드

01히어로 — 스크롤 값에 따라 배경과 글자가 다른 비율로 어긋나는 도입부

랜딩페이지 최상단에서 배경 이미지와 제목이 같은 스크롤 값을 서로 다른 배율로 받아 움직여, 두 층이 어긋나며 깊이가 생깁니다.

하나의 --sv 값을 두 배율로 나눠 받는 계산

--sv 는 @property 로 선언한 숫자 값이라 애니메이션이 정수·소수를 부드럽게 보간할 수 있고, 배경(hero__bg)은 이 값에 -18px를, 제목 영역(hero__head)은 -42px를 곱해 같은 값에서 서로 다른 이동 거리를 얻습니다.

.hero__bg {
  position: absolute;
  inset: -10% -10% -30% -10%;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 247, 230, 0.28), rgba(255, 247, 230, 0));
  transform: translateY(calc(var(--sv) * -18px));
}

.hero__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 32px 24px;
  transform: translateY(calc(var(--sv) * -42px));
}
히어로 — 스크롤 값에 따라 배경과 글자가 다른 비율로 어긋나는 도입부
새 창에서 열기

01 · 히어로 — 스크롤 값에 따라 배경과 글자가 다른 비율로 어긋나는 도입부 — 측정 누적면적 17.827% · 움직인 프레임 20/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

--svtranslateY@property

02기능 카드 그리드 — 보이는 비율 값으로 순서대로 나타나는 카드

기능 소개 섹션에서 카드 네 장이 한꺼번에 뜨지 않고 순서대로 하나씩 나타나 목록을 눈으로 따라가기 쉽게 만듭니다.

카드 순서 값에 고정 간격을 곱해 지연 시점을 구하는 계산

animation-delay: calc(var(--i) * 120ms) 는 각 카드에 심어 둔 순서 값(--i)에 고정 간격(120ms)을 곱해 등장 시점을 벌리고, card-in 키프레임이 그 시점부터 투명도와 위치를 함께 보간합니다.

.is-demo .card {
  animation: card-in 600ms ease-out both;
  animation-delay: calc(var(--i) * 120ms);
}

@keyframes card-in {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
기능 카드 그리드 — 보이는 비율 값으로 순서대로 나타나는 카드
새 창에서 열기

02 · 기능 카드 그리드 — 보이는 비율 값으로 순서대로 나타나는 카드 — 측정 누적면적 57.951% · 움직인 프레임 12/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

--ianimation-delaytranslateY

03요금제 카드 — 추천 카드만 확대 비율 값이 더 크게 계산되는 목록

요금제 비교 섹션에서 추천 카드만 주변보다 크게 떠 보이고, 결제 주기 버튼을 누르면 표시 금액이 바뀝니다.

결제 주기 상태에 맞는 값만 골라 보여주는 계산

setYearly(yearly) 는 실제로 금액을 계산하는 게 아니라 is-yearly 클래스 하나만 뒤집고, 미리 넣어 둔 월간·연간 두 span 중 그 상태에 맞는 쪽만 CSS 로 보이게 전환하며 aria-pressed 값도 같이 맞춥니다.

(function () {
  var root = document.getElementById('pricing');
  var mBtn = document.getElementById('btn-monthly');
  var yBtn = document.getElementById('btn-yearly');
  if (!root || !mBtn || !yBtn) return;

  function setYearly(yearly) {
    root.classList.remove('is-demo');
    root.classList.toggle('is-yearly', yearly);
    mBtn.classList.toggle('is-active', !yearly);
    yBtn.classList.toggle('is-active', yearly);
    mBtn.setAttribute('aria-pressed', String(!yearly));
    yBtn.setAttribute('aria-pressed', String(yearly));
  }

  mBtn.addEventListener('click', function () { setYearly(false); });
  yBtn.addEventListener('click', function () { setYearly(true); });
})();
요금제 카드 — 추천 카드만 확대 비율 값이 더 크게 계산되는 목록
새 창에서 열기

03 · 요금제 카드 — 추천 카드만 확대 비율 값이 더 크게 계산되는 목록 — 측정 누적면적 5.337% · 움직인 프레임 9/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

classList.togglenth-child(2)steps(1, end)

04후기 캐러셀 — 자동 진행 값이 타이머로 늘어나는 카드 줄

고객 후기 섹션에서 카드가 일정 시간마다 스스로 다음 칸으로 넘어가고, 포인터를 올리면 잠깐 멈춰 읽을 수 있습니다.

인덱스 값을 타이머로 늘려 위치로 바꾸는 계산

start() 는 setInterval(advance, 2600) 로 2.6초마다 advance() 를 불러 인덱스 값을 하나 늘리고, render() 가 그 인덱스에 -100% 를 곱해 translateX 로 옮깁니다. goLive() 는 포인터가 올라오는 순간 자동 재생을 시작하자마자 곧바로 멈춰(stop) 카드가 그 자리에 머물게 합니다.

  function advance() {
    index = (index + 1) % count;
    render();
  }

  function stop() {
    if (timer !== null) { window.clearInterval(timer); timer = null; }
  }

  function start() {
    stop();
    timer = window.setInterval(advance, 2600);
  }

  function goLive() {
    if (live) return;
    live = true;
    track.classList.remove('is-demo');
    render();
    start();
  }
후기 캐러셀 — 자동 진행 값이 타이머로 늘어나는 카드 줄
새 창에서 열기

04 · 후기 캐러셀 — 자동 진행 값이 타이머로 늘어나는 카드 줄 — 측정 누적면적 2.61% · 움직인 프레임 8/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

setIntervaltranslateXclearInterval

05FAQ 아코디언 — 답변 높이 값을 내용 길이로 다시 구하는 목록

자주 묻는 질문 섹션에서 질문 하나를 열면 그 답변만큼만 정확한 높이로 펼쳐지고, 다른 질문을 열면 이전 답변은 접힙니다.

실제 렌더 높이를 재서 펼침 값으로 쓰는 계산

openItem(item) 은 a.scrollHeight 로 그 답변이 실제로 필요한 높이를 재서 max-height 에 그대로 써넣고, 클릭 리스너는 열려던 질문이 아니면 모든 항목을 먼저 접은(closeItem) 뒤에만 새로 엽니다.

  function openItem(item) {
    var q = item.querySelector('.faq__q');
    var a = item.querySelector('.faq__a');
    if (!q || !a) return;
    q.setAttribute('aria-expanded', 'true');
    a.style.maxHeight = a.scrollHeight + 'px';
  }

  items.forEach(function (item) {
    var q = item.querySelector('.faq__q');
    if (!q) return;
    q.addEventListener('click', function () {
      faq.classList.remove('is-demo');
      var wasOpen = q.getAttribute('aria-expanded') === 'true';
      items.forEach(closeItem);
      if (!wasOpen) openItem(item);
    });
  });
FAQ 아코디언 — 답변 높이 값을 내용 길이로 다시 구하는 목록
새 창에서 열기

05 · FAQ 아코디언 — 답변 높이 값을 내용 길이로 다시 구하는 목록 — 측정 누적면적 39.718% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

scrollHeight--openclassList.remove

06강조 배너 — 진입 상태가 되면 테두리 각도 값이 계속 늘어나는 띠

하단 행동 유도 배너에서 버튼 테두리를 도는 빛이 계속 회전해 시선을 붙잡습니다.

각도 값을 계속 늘려 conic-gradient 가 돌게 하는 계산

conic-gradient(from var(--angle), #17141a, transparent 32%, #17141a) 는 --angle 값이 가리키는 방향에서부터 색을 배치하고, 짝을 이루는 키프레임이 이 값을 0에서 360deg 까지 쉬지 않고 늘려 테두리가 회전하는 것처럼 보이게 합니다.

.band__ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: conic-gradient(from var(--angle), #17141a, transparent 32%, #17141a);
  animation: spin 2s linear infinite;
}
강조 배너 — 진입 상태가 되면 테두리 각도 값이 계속 늘어나는 띠
새 창에서 열기

06 · 강조 배너 — 진입 상태가 되면 테두리 각도 값이 계속 늘어나는 띠 — 측정 누적면적 1.011% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

--angleconic-gradient@property

07푸터 — 밑줄 너비 값을 0에서 글자 폭까지 다시 구하는 링크 목록

사이트 하단 링크 목록에서 포인터를 올린 링크에만 밑줄이 왼쪽부터 그려집니다.

실제 글자 폭을 재서 밑줄 너비 값으로 쓰는 계산

포인터가 링크 위로 오면 getBoundingClientRect().width 로 그 글자의 실제 폭을 재 --tw 값에 담고, 벗어나면 그 값을 다시 0으로 되돌려 밑줄이 사라지게 합니다.

  links.forEach(function (link) {
    link.addEventListener('pointerenter', function () {
      panel.classList.remove('is-demo');
      var w = link.getBoundingClientRect().width;
      link.style.setProperty('--tw', w + 'px');
    });
    link.addEventListener('pointerleave', function () {
      link.style.setProperty('--tw', '0px');
    });
  });
푸터 — 밑줄 너비 값을 0에서 글자 폭까지 다시 구하는 링크 목록
새 창에서 열기

07 · 푸터 — 밑줄 너비 값을 0에서 글자 폭까지 다시 구하는 링크 목록 — 측정 누적면적 0.281% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

getBoundingClientRectquerySelectorAlladdEventListener

08로고 바 — 가로 이동 값이 끊기지 않고 계속 늘어나는 줄

협력사 로고 줄에서 오른쪽으로 사라진 로고만큼 왼쪽에 같은 로고가 다시 나타나 줄이 끊기지 않습니다.

로고 목록을 두 벌 이어 붙이고 절반 값까지만 옮기는 계산

로고 네 개를 aria-hidden 사본까지 두 벌 나란히 두고, 가로 이동 값을 0에서 전체 목록 폭의 절반(-50%)까지만 늘려 반복하면 사본이 원본 자리를 그대로 이어받아 줄이 끊기지 않는 것처럼 보입니다.

.marquee__track.is-demo {
  animation: scroll 9s linear infinite;
}

.logo {
  margin-right: 32px;
  color: #0a4fe8;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
로고 바 — 가로 이동 값이 끊기지 않고 계속 늘어나는 줄
새 창에서 열기

08 · 로고 바 — 가로 이동 값이 끊기지 않고 계속 늘어나는 줄 — 측정 누적면적 2.711% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

@keyframeswill-changetranslateX

09통계 카운터 — 목표 값까지 프레임마다 계산해 올라가는 숫자

실적·수치 강조 섹션에서 숫자가 0부터 목표 값까지 눈에 보이게 세어 올라갑니다.

경과 비율을 완화 곡선에 태워 목표 값까지 계산하는 계산

step(ts) 는 시작 시각부터 지난 시간을 COUNT_DURATION_MS(1700ms)로 나눠 경과 비율 t 를 구하고, easeOutCubic(t) 로 굽힌 값을 목표 값에 곱해 매 프레임 textContent 를 다시 씁니다. prefers-reduced-motion 이 켜져 있으면 이 계산을 건너뛰고 목표 값을 곧바로 표시합니다.

  function run(el) {
    var target = Number(el.getAttribute('data-target')) || 0;
    var suffix = el.getAttribute('data-suffix') || '';
    if (reduceMotion) {
      el.textContent = format(target) + suffix;
      return;
    }
    var start = null;
    function step(ts) {
      if (start === null) start = ts;
      var elapsed = ts - start;
      var t = Math.min(1, elapsed / COUNT_DURATION_MS);
      var value = target * easeOutCubic(t);
      el.textContent = format(value) + suffix;
      if (t < 1) {
        window.requestAnimationFrame(step);
      }
    }
    window.requestAnimationFrame(step);
  }
통계 카운터 — 목표 값까지 프레임마다 계산해 올라가는 숫자
새 창에서 열기

09 · 통계 카운터 — 목표 값까지 프레임마다 계산해 올라가는 숫자 — 측정 누적면적 3.044% · 움직인 프레임 13/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

requestAnimationFrameMath.powtoLocaleString

값이 섹션을 바꾸는 곳 — 스크롤 비율·순서 값·목표 숫자

웹디자인 히어로 섹션부터 통계 카운터까지, 아홉 섹션은 결국 값 하나가 어떻게 흘러 들어오는지로 나뉩니다. 아래 세 갈래는 그 값의 성격을 기준으로 앞서 다룬 아홉 섹션을 다시 묶은 것입니다.

스크롤 비율 — 자동으로 흐르는 진행 값

01·06·08 은 실제 스크롤 위치나 사용자 입력이 아니라, 애니메이션이 진행되는 시간 자체를 0에서 1(또는 360deg·-50%)까지 흐르는 값으로 삼습니다. 01 은 이 값을 스크롤 진행을 흉내 내는 데 쓰고, 06 은 각도로, 08 은 이동 거리로 씁니다.

순서 값 — 인덱스가 시점을 정하는 곳

02 는 카드의 순서(--i)에 고정 간격을 곱해 등장 시점을 구하고, 04 는 인덱스 값 자체가 타이머로 하나씩 늘어나며 다음 카드의 위치를 정합니다. 둘 다 값이 지금 몇 번째인지가 다음 계산의 재료입니다.

목표 숫자 — 지금 값과 목표 값의 거리를 재는 곳

03 은 결제 주기 상태에 맞는 목표 금액으로 표시를 바꾸고, 05 는 답변의 실제 높이를 목표 값으로 삼아 그 값까지 펼치며, 07 은 글자의 실제 폭을 목표 값으로 삼아 밑줄을 그립니다. 09 는 이 셋과 달리 목표 값에 단번에 닿지 않고 프레임마다 조금씩 다가가는 쪽을 택했습니다.

어디서 깨지는가 — 긴 텍스트·저사양 기기·다크모드

긴 텍스트 — 고정된 글자 폭 가정이 깨지는 지점

01 의 hero__head 안 문구는 max-width: 34ch 로 묶여 있어, 실제 서비스 문구가 이보다 길면 줄바꿈이 늘어나면서 translateY(-42px) 로 이동하는 제목 영역이 배경보다 훨씬 아래까지 밀려 두 층의 어긋남이 의도한 것보다 커질 수 있습니다. 03 의 금액 칸은 white-space: nowrap 이라 자릿수가 큰 금액을 넣으면 카드 폭(최대 420px)을 넘어서기 쉬운데, 67e9abq3 안 원본에서 이 값을 실제 요금제 금액에 맞춰 폭이나 글자 크기를 다시 재야 안전합니다.

저사양 기기 — 매 프레임 다시 그리는 비용이 드는 지점

06 의 conic-gradient 는 transform 과 달리 매 프레임 배경을 다시 페인트해야 하는 속성이라, 저사양 모바일 기기에서는 --angle 값이 바뀔 때마다 드는 계산 비용이 커 다른 여덟 섹션보다 프레임이 먼저 떨어질 수 있습니다.

다크모드 — 고정된 색값이 배경과 부딪히는 지점

랜딩페이지 히어로섹션을 포함해 아홉 섹션 모두 prefers-color-scheme 미디어 쿼리가 없어 #17141a·#0a4fe8 같은 색값이 고정돼 있습니다. 이미 어두운 배경을 쓰는 01·06 같은 섹션은 밝은 다크모드 사이트에 그대로 옮기면 주변과 대비가 지나치게 세지거나 반대로 묻힐 수 있어, 실제로 붙일 때는 그 사이트의 다크모드 배경 위에서 대비를 다시 재야 합니다.

변형 세 가지와 접근성

변형 바꾸는 값 바뀌는 느낌
기능 카드 스태거 간격 02 $stagger-step 120ms → 280ms 간격을 좁히면 카드들이 거의 동시에 나타나 목록이 한 번에 뜨는 느낌을 주고, 넓히면 카드가 하나씩 뚜렷하게 뜸을 들이며 나타나지만 카드 수가 많을수록 전체가 뜨는 데 오래 걸립니다
요금제 강조 카드 확대 비율 03 $featured-scale 1.08 → 1.16 차이를 작게 두면 추천 카드가 잘 안 도드라져 보이고, 크게 두면 확실히 떠 보이지만 카드 사이 간격이 좁을 때 옆 카드와 겹쳐 보일 수 있습니다
통계 카운터 진행 시간 09 COUNT_DURATION_MS 1700ms → 3200ms 짧게 두면 숫자가 순식간에 넘어가 값이 잘 안 읽히고, 길게 두면 숫자가 클수록 다 세는 데 오래 걸려 사용자가 섹션을 벗어날 때까지 안 끝날 수 있습니다

접근성

아홉 섹션 모두 prefers-reduced-motion 값을 확인해, 그 값이 켜진 상태가 되면 반복 애니메이션을 끄거나(01·02·06·08) 09 처럼 계산을 건너뛰고 목표 값을 곧바로 보여줍니다. 03 은 aria-pressed, 05 는 aria-expanded·aria-controls 를 버튼과 답변에 걸어 지금 상태를 스크린 리더가 읽을 수 있게 했고, 07 의 링크는 앵커 태그 자체가 이미 키보드로 접근 가능해 별도 처리를 더하지 않았습니다.

FAQ

이 아홉 섹션은 실제 브랜드의 히어로 섹션 디자인을 그대로 옮긴 건가요?

아니요. 실제 서비스나 진짜 결제·후기 데이터는 어디에도 없고, 로고 이름(BRAND A~D)·통계 숫자·후기 문구는 전부 이 데모를 위해 만든 가상의 값입니다. 계산 방식은 그대로 옮겨 쓸 수 있지만 화면에 보이는 수치·문구는 재현이 아니라 예시입니다.

아홉 섹션 중 손으로 직접 눌러서 값이 바뀌는 걸 확인할 수 있는 건 몇 개인가요?

03(요금제)·05(FAQ)는 클릭이, 04(후기 캐러셀)·07(푸터)는 포인터 진입·이탈이 실제 리스너로 값을 바꿉니다. 01·02·06·08·09 다섯은 리스너 없이 타이머나 반복 애니메이션으로 값이 자동으로 도는 시연이라, 실제 서비스에 붙일 때는 스크롤 진입이나 데이터 갱신 시점에 이 계산을 직접 연결해야 합니다.

랜딩페이지 히어로 섹션 하나에 아홉 개를 전부 붙여도 되나요?

계산 방식끼리 충돌하지는 않지만, 09 처럼 매 프레임 다시 그리는 섹션과 06 처럼 매 프레임 페인트 비용이 드는 섹션을 한 페이지에 여럿 겹치면 저사양 기기에서 프레임이 함께 떨어질 수 있습니다. 한 페이지에는 자동으로 도는 섹션(01·02·06·08·09) 중 실제로 필요한 것만 남기고 나머지는 상태 전환형(03·05)이나 포인터형(04·07)으로 무게를 나누는 편이 안전합니다.

더 읽을거리

이 아홉 개는 팀·요금제·케이스 스터디처럼 특정 페이지 종류에 맞춰 파생된 섹션이 아니라 어떤 랜딩페이지에도 붙일 수 있는 범용 컴포넌트라는 점에서, 아래 이웃 편들과는 계산이 붙는 자리 자체가 다릅니다.

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

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