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

프로모션 페이지 랜딩 섹션 템플릿 9종

· Godrich · 9종 · 7분 읽기

랜딩 섹션페이지 템플릿CSS만랜딩 페이지CTA 버튼

프로모션 페이지 섹션 템플릿은 카운트다운 히어로부터 신청 폼까지 캠페인 랜딩에 필요한 구성 요소를 통째로 담은 코드 모음입니다. 랜딩 페이지에 바로 붙이는 아홉 개 중 하나는 실제 목표 시각까지 매초 줄어드는 카운트다운을 담았습니다.

카운트다운 히어로01 promo-countdown-hero 비포·애프터02 promo-before-after 핵심 혜택 하이라이트03 promo-feature-highlight 소셜 프루프 띠04 promo-social-proof 할인 가격표05 promo-discount-pricing 마감 임박 배너06 promo-urgency-banner 프로모 FAQ07 promo-faq 신청 폼08 promo-signup-form 프로모 푸터09 promo-footer

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

아홉 개는 인기순이 아니라 방문자가 프로모션 페이지를 훑는 순서대로 놓았습니다. 먼저 마감 시각으로 눈길을 붙잡고(카운트다운 히어로), 달라진 결과를 보여주고(비포·애프터), 핵심 혜택을 하나씩 각인시키고(혜택 하이라이트), 이미 참여한 사람 수로 신뢰를 더하고(소셜 프루프), 할인 폭을 숫자로 보여주고(할인 가격표), 남은 자리로 다시 한 번 재촉하고(마감 배너), 망설임을 없애고(FAQ), 실제로 등록받고(신청 폼), 다음 안내로 이어갑니다(푸터). 담당자 사진·실제 로고 자리는 전부 이 사이트의 먹·파랑·크림 토큰만으로 그린 도형 플레이스홀더라, 사진 파일만 바꿔 끼워도 격자·정렬은 그대로 유지됩니다. 할인 대신 만든 것으로 설득하는 구성이면 프로젝트 쇼케이스 템플릿이 그 배열이고, 값을 내리지 않고 믿음을 쌓는 쪽은 믿음 가는 랜딩 섹션이 맡습니다.

01카운트다운 히어로

프로모션 랜딩 페이지의 첫 화면

히어로 배너 위쪽엔 헤드라인과 부제가, 아래쪽 줄엔 카운트다운과 CTA 버튼이 나란히 놓입니다.

카운트다운 히어로
새 창에서 열기

01 · 카운트다운 히어로 — 측정 누적면적 7.657% · 움직인 프레임 21/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

Date.now()transformaria-pressed

매초 줄어드는 숫자

초 단위 숫자는 실제 목표 시각까지 매초 줄어들며 짧게 넛지되고, CTA 버튼은 누를 때마다 aria-pressed가 실제로 바뀝니다.

var target = Date.now() + ((2 * 24 * 60 * 60) + (14 * 60 * 60) + (36 * 60) + 9) * 1000;
function tick() {
  var diff = Math.max(0, target - Date.now());
  var s = Math.floor(diff / 1000);
  els.d.textContent = pad(Math.floor(s / 86400));
  els.h.textContent = pad(Math.floor((s % 86400) / 3600));
  els.m.textContent = pad(Math.floor((s % 3600) / 60));
  els.s.textContent = pad(s % 60);
}
tick();
setInterval(tick, 1000);

02비포·애프터

두 패널이 크로스페이드된다

비포·애프터 버튼을 클릭하면 두 패널이 실제로 opacity 크로스페이드됩니다.

비포·애프터
새 창에서 열기

02 · 비포·애프터 — 측정 누적면적 41.445% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

opacityclickaria-pressed

대각선 하이라이트는 계속

애프터 패널 위로는 대각선 하이라이트가 계속 스치듯 흐릅니다.

var btns = document.querySelectorAll('.ba__btn');
var panels = document.querySelectorAll('.ba__panel');
btns.forEach(function (btn) {
  btn.addEventListener('click', function () {
    var name = btn.getAttribute('data-panel');
    btns.forEach(function (b) { b.setAttribute('aria-pressed', String(b === btn)); });
    panels.forEach(function (p) { p.classList.toggle('is-active', p.getAttribute('data-panel') === name); });
  });
});

03핵심 혜택 하이라이트

1.6초마다 옮겨가는 스포트라이트

핵심 혜택 세 줄 중 하나를 1.6초마다 스포트라이트가 자동으로 옮겨가며 비춥니다.

핵심 혜택 하이라이트
새 창에서 열기

03 · 핵심 혜택 하이라이트 — 측정 누적면적 9.529% · 움직인 프레임 12/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

translateYsetIntervalgetBoundingClientRect

클릭하면 그 자리로

행을 클릭하거나 Enter를 누르면 그 자리로 실측한 높이만큼 바로 이동합니다.

function go(i) {
  current = i;
  rows.forEach(function (r, idx) {
    var on = idx === i;
    r.classList.toggle('is-active', on);
    r.setAttribute('aria-pressed', String(on));
  });
  var offset = rows[i].getBoundingClientRect().top - rows[0].getBoundingClientRect().top;
  spot.style.transform = 'translateY(' + offset + 'px)';
}

04소셜 프루프 띠

네 개가 은은하게 맥박친다

겹친 아바타 세 개와 "+N" 배지까지 총 네 개가 은은하게 맥박칩니다.

소셜 프루프 띠
새 창에서 열기

04 · 소셜 프루프 띠 — 측정 누적면적 5.21% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

requestAnimationFramecountertransform

0에서 목표값까지

큰 숫자는 페이지를 열자마자 0에서 실제 목표값(2,431)까지 올라갑니다.

var el = document.querySelector('.sp__num');
var target = Number(el.getAttribute('data-target'));
var start = null;
var DUR = 1200;
function frame(ts) {
  if (!start) start = ts;
  var p = Math.min(1, (ts - start) / DUR);
  var eased = 1 - Math.pow(1 - p, 3);
  el.textContent = Math.round(eased * target).toLocaleString('ko-KR');
  if (p < 1) requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

05할인 가격표

스위치가 실제로 바뀐다

연간 결제 스위치를 누르면 aria-checked가 실제로 바뀌면서 월간·연간 가격판이 크로스페이드됩니다.

할인 가격표
새 창에서 열기

05 · 할인 가격표 — 측정 누적면적 0.458% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

role=switchopacityclick

원가에는 취소선이 남는다

원가에는 취소선이 그대로 남습니다.

var sw = document.querySelector('.dp__switch');
var monthly = document.querySelector('.dp__price--monthly');
var yearly = document.querySelector('.dp__price--yearly');
sw.addEventListener('click', function () {
  var on = sw.getAttribute('aria-checked') === 'true';
  sw.setAttribute('aria-checked', String(!on));
  monthly.classList.toggle('is-active', on);
  yearly.classList.toggle('is-active', !on);
});

06마감 임박 배너

진행바는 계속 출렁인다

마감 임박 진행바는 계속 은은하게 출렁입니다.

마감 임박 배너
새 창에서 열기

06 · 마감 임박 배너 — 측정 누적면적 0.192% · 움직인 프레임 21/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

scaleXclickaria-pressed

누르면 문구가 늘어난다

"자세히" 버튼을 누르면 안내 문구가 실제로 늘어납니다.

.ub__fill {
  transform: scaleX(.78);
  transform-origin: left center;
  animation: ub-fill 2.4s $easing infinite;
}
@keyframes ub-fill {
  0%, 100% { transform: scaleX(.78); }
  50%      { transform: scaleX(.92); }
}

07프로모 FAQ

한 항목만 펼쳐진다

질문을 클릭하면 그 항목만 실제로 펼쳐지고 나머지는 접힙니다.

프로모 FAQ
새 창에서 열기

07 · 프로모 FAQ — 측정 누적면적 36.616% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

grid-template-rowsclickaria-expanded

닫힌 화살표는 흔들린다

닫힌 항목의 화살표는 계속 은은하게 흔들립니다. 행사 소개를 스크롤에 실어 장면처럼 넘기고 싶다면 스크롤 스토리텔링 섹션이 그 연출을 맡습니다.

var items = document.querySelectorAll('.pf__item');
items.forEach(function (item) {
  var q = item.querySelector('.pf__q');
  q.addEventListener('click', function () {
    var willOpen = !item.classList.contains('is-open');
    items.forEach(function (i) {
      i.classList.remove('is-open');
      i.querySelector('.pf__q').setAttribute('aria-expanded', 'false');
    });
    if (willOpen) { item.classList.add('is-open'); q.setAttribute('aria-expanded', 'true'); }
  });
});

08신청 폼

정규식으로 형식을 검사한다

이메일을 넣고 신청 버튼을 누르면 정규식으로 실제 형식을 검사합니다.

신청 폼
새 창에서 열기

08 · 신청 폼 — 측정 누적면적 1.704% · 움직인 프레임 11/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

stroke-dashoffset정규식submit

통과와 실패의 신호

통과하면 체크가 그려지고, 틀리면 입력칸이 좌우로 짧게 흔들립니다.

var RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
form.addEventListener('submit', function (e) {
  e.preventDefault();
  if (RE.test(input.value)) {
    btn.classList.remove('is-error');
    btn.classList.add('is-done');
    status.textContent = '신청 완료 — 코드가 곧 도착합니다';
  } else {
    btn.classList.remove('is-done');
    input.classList.remove('shake'); void input.offsetWidth;
    input.classList.add('shake');
    status.textContent = '이메일 형식을 확인해 주세요';
  }
});

09프로모 푸터

링크 목록이 접히고 펼쳐진다

"바로가기"를 누르면 링크 목록이 실제로 접히고 펼쳐집니다.

프로모 푸터
새 창에서 열기

09 · 프로모 푸터 — 측정 누적면적 0.556% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

grid-template-rowsclickaria-expanded

상단 하이라이트 선

상단 얇은 하이라이트 선은 계속 좌우로 스칩니다.

var toggle = document.querySelector('.pt__group-toggle');
var links = document.querySelector('.pt__links-wrap');
toggle.addEventListener('click', function () {
  var open = toggle.getAttribute('aria-expanded') === 'true';
  toggle.setAttribute('aria-expanded', String(!open));
  links.classList.toggle('is-open', !open);
});

어디서 깨지는가 — 함정

글로우가 배경 밑에 깔렸다

아홉 개를 만드는 동안 실제로 같은 계열의 병에 두 번 걸렸습니다. 신청 폼(08) 버튼엔 바깥으로 번지는 글로우 링을 뒀는데, 여기에 overflow: hidden을 걸었더니 글로우가 버튼 자신의 불투명한 파란 배경 밑에 그대로 가려졌습니다. 화면은 멀쩡해 보였지만 측정값은 누적면적 0%였습니다. overflow를 없애고 isolation: isolate로 위치만 가두자 링이 살아났습니다.

하이라이트가 패널과 함께 숨었다

비포·애프터(02)도 비슷했습니다. 처음엔 대각선 하이라이트를 애프터 패널 안에 넣었는데, 그 패널이 기본값으로 opacity 0이라 하이라이트까지 함께 숨어 있었습니다. 패널의 형제로 빼 프레임 맨 위에 항상 그리게 하자 해결됐습니다.

transform 을 둘이 나눠 쓰면

핵심 혜택 하이라이트(03)에서는 다른 종류의 함정을 만났습니다. 스포트라이트 위치를 옮기는 translateY와 장식용 펄스의 scaleX를 같은 요소의 transform에 같이 썼더니, 펄스 keyframe이 매 주기 transform 전체를 새로 써 위치가 0으로 리셋됐습니다. zip 안 코드는 이 문제를 겪은 뒤 위치용 바깥 요소와 펄스용 안쪽 요소 두 겹으로 나눈 최신 버전입니다. 측정 때는 첫 번째 행이 항상 활성 상태라 우연히 드러나지 않았지만, 실제로 다른 행을 클릭하는 순간 바로 보였을 문제였습니다.

마감 시간을 재는 부품이 방문자마다 다르게 보이는 이 문제는 입력 즉시 결과를 돌려주는 커맨드 팔레트 검색 UI에서도 같은 시점 기준 문제로 나타납니다.

접근성

장식만 끄고 상태는 남긴다

아홉 개 전부, zip을 3jnnueud으로 열어 받는 코드 그대로 prefers-reduced-motion: reduce에서 장식 애니메이션을 끄되 상태 자체는 남깁니다 — 카운트다운(01)은 숫자 넛지만 끄고 갱신은 유지하고, 소셜 프루프(04)의 카운트업도 정보이므로 그대로 유지합니다.

역할과 상태 속성

할인 가격표(05)의 스위치는 role="switch"와 aria-checked로, 마감 배너(06)의 진행바는 role="progressbar"와 aria-valuenow로 상태를 전달합니다. 프로모 FAQ(07)와 프로모 푸터(09)는 둘 다 aria-expanded로 펼침 상태를 알리고, 신청 폼(08)의 결과 문구는 role="status"(aria-live="polite")라 스크린 리더가 성공·실패를 바로 읽습니다.

펼침 전환의 문법

펼침 애니메이션에 쓴 grid-template-rows: 0fr → 1fr 전환은 MDN의 grid-template-rows 문서에 나온 표준 트랙 크기 문법을 그대로 씁니다. 다른 랜딩 페이지 템플릿이 궁금하면 정적 템플릿 모음을 함께 보시고, 이 사이트를 만드는 사람 정보는 사이트 소개 페이지에 있습니다.

FAQ

프로모션 페이지 디자인의 카운트다운은 실제로 작동하나요?

네, 실제로 작동합니다. Date.now()로 잰 목표 시각까지 setInterval(1000)으로 매초 다시 계산해 표시합니다. 목표 시각과 초기 표시값만 실제 캠페인 마감 시각으로 바꾸면 그대로 쓸 수 있습니다.

React 버전은 CSS 버전과 동작이 다른가요?

아니요, 동작은 같습니다. 활성 패널·스위치 상태·펼침 여부 같은 값은 useState로 관리하고, 변수 3개(duration·easing·color)는 props로 받아 CSS 변수로 그대로 넘깁니다. 카운트다운(01)의 초 단위 갱신도 useEffect 안에서 같은 setInterval 로직을 씁니다.

신청 폼(08)이 실제로 이메일을 어딘가로 보내나요?

아니요, 데모 자체는 형식 검사와 성공·실패 표시까지만 실제로 동작하고 실제 전송 서버는 연결돼 있지 않습니다. form의 submit 이벤트를 가로채 정규식으로 검사하는 부분까지가 이 템플릿의 역할이고, 실제로 쓸 때는 그 자리에 실제 API 호출만 추가하면 나머지 검증·표시 로직은 그대로 재사용할 수 있습니다.

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

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