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

고객 후기 디자인 패턴 9종, 신뢰를 보여 주는

· Godrich · 9종 · 13분 읽기

랜딩 섹션페이지 템플릿바닐라 JS랜딩 페이지CTA 버튼결제·쇼핑

고객 후기 디자인은 다른 사람이 남긴 평가를 화면에 얹어, 망설이는 방문자를 마지막으로 안심시키는 섹션입니다. 아홉 가지는 후기 카드·별점·고객사 목록을 HTML 과 CSS 만으로 지어서 옮겨 붙이면 그대로 움직입니다.

자동 순환 후기 캐러셀01 proof-carousel-autoplay 높이 다른 인용 그리드02 proof-masonry-quote-grid 대형 인용과 아바타 전환03 proof-single-quote-avatar-swipe 별점 분포 요약 바04 proof-rating-distribution-bars 로고 띠 마퀴05 proof-logo-marquee-band 전후 수치 뒤집기 카드06 proof-before-after-flip 영상 후기 썸네일 그리드07 proof-video-thumb-grid 짧은 글 카드 월08 proof-tweet-card-wall 신뢰 수치 밴드09 proof-trust-metrics-band

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

아홉 개는 상품 후기 디자인의 화려함 순서가 아니라 후기가 쌓여 가는 순서입니다. 후기가 서너 개뿐일 때는 한 자리에서 돌아가는 캐러셀(01)로 시작하고, 수가 불어나면 높이를 맞추지 않고 벽돌처럼 쌓습니다(02). 한 사람을 크게 세워 말을 주고 싶을 때는 대형 인용과 얼굴 고르기(03)이, 문장보다 숫자가 설득할 때는 별점 분포 바(04)가 맞습니다. 누가 쓰는지가 증거일 때 로고 띠(05)가 흐르고, 도입 전후를 비교할 땐 뒤집기 카드(06)가, 얼굴과 목소리가 있다면 영상 썸네일(07)이, 짧은 반응이 모였다면 카드 월(08)이 제 몫을 합니다. 마지막 신뢰 수치 밴드(09)는 가격표 곁에서 한 번 더 받칩니다. 아홉 개 모두 잉크 #1c1b22 · 크림 #fbf7ef · 민트 #6ee7d7 을 바탕으로 짜서 둘셋을 섞어도 색이 어긋나지 않습니다. 이 증언 벽이 여는 장과 마주 보는 자리는 히어로 섹션 패턴이 잡아 주고, 문장 하나를 크게 뽑아 내는 일만 따로 파면 인용구 디자인이 그 축입니다.

01자동 순환 후기 캐러셀

고객 리뷰 디자인에서 무엇이 보이나

후기 카드 석 장이 한 자리를 차례로 지나가고, 아래 점이 지나는 카드에 맞춰 알약으로 넓어집니다. 오른쪽 버튼을 누르면 순환이 선 자리에서 멈춥니다.

자동 순환 후기 캐러셀
새 창에서 열기

01 · 자동 순환 후기 캐러셀 — 측정 누적면적 8.115% · 움직인 프레임 6/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

translateXanimation-play-statearia-live

코드에서 볼 곳

후기가 서너 개뿐인 랜딩 중간 띠에 씁니다.

// animation 단축은 delay 를 0 으로 리셋하므로 낱개 속성으로 쓴다
.pc.is-demo .pc__card {
  animation-name: pcSlide;
  animation-duration: $duration;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
// t=0 에서 1번은 8%(막 섰다) · 2번은 74.667%(오른쪽 대기) · 3번은 41.333%(막 나갔다)
.pc.is-demo .pc__card--1 { animation-delay: -.16s; }
.pc.is-demo .pc__card--2 { animation-delay: -1.4933s; }
.pc.is-demo .pc__card--3 { animation-delay: -.8267s; }

// 정지 버튼 — 순환을 그 자리에 세운다
.pc.is-paused .pc__card,
.pc.is-paused .pc__pip { animation-play-state: paused; }

@keyframes pcSlide {
  0%      { transform: translateX(100%); }
  8%      { transform: translateX(0); }
  33.33%  { transform: translateX(0); }
  41.33%  { transform: translateX(-100%); }
  70%     { transform: translateX(-100%); }
  70.01%  { transform: translateX(100%); }
  100%    { transform: translateX(100%); }
}

02높이 다른 인용 그리드

화면에서 일어나는 일

길이가 제각각인 후기 다섯 장이 높이를 맞추지 않은 채 두 열에 쌓이고, 차례로 한 장씩 들렸다 앉습니다. 마우스를 얹거나 키보드 초점이 닿으면 자동 순번이 멈추고 확대만 남습니다.

높이 다른 인용 그리드
새 창에서 열기

02 · 높이 다른 인용 그리드 — 측정 누적면적 29.035% · 움직인 프레임 14/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

grid-rowscale:focus-visible

코드 읽는 법

후기 수가 많은 제품 페이지나 후기 모음 페이지에 씁니다.

.qm {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  // 잘게 쪼갠 행 — 카드마다 span 수로 제각각인 높이를 벽돌처럼 쌓는다.
  // 행 사이 gap 을 0 으로 둔다: gap 은 8px 행 "마다" 열리므로 그대로 두면
  // span 12 가 96px 가 아니라 96+gap*11 로 부풀어 무대를 넘친다 (실측)
  grid-auto-rows: 8px;
  grid-auto-flow: row dense;
  column-gap: $sp-2;
  row-gap: 0;
  width: clamp(288px, 94vw, 420px);
  margin: 0;
}

// 다섯 장의 span — 왼열 3장(12+9+9=30행) · 오른열 2장(14+12=26행).
// 1줄 카드 9행(72px) · 2줄 12행(96px) · 3줄 14행(112px) = 내용+테두리 올림
.qm__card--1 { grid-row: span 12; }
.qm__card--2 { grid-row: span 14; }
.qm__card--3 { grid-row: span 9; }
.qm__card--4 { grid-row: span 12; }
.qm__card--5 { grid-row: span 9; }

03대형 인용과 아바타 전환

어떤 움직임인가

큰 인용문 아래 얼굴 네 개가 늘어서고, 고른 얼굴이 바뀌는 순간 인용문과 이름줄이 한 프레임에 통째로 갈립니다. 동시에 검은 링이 옆 칸으로 미끄러져 정지 장면 사이를 채웁니다.

대형 인용과 아바타 전환
새 창에서 열기

03 · 대형 인용과 아바타 전환 — 측정 누적면적 15.302% · 움직인 프레임 20/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

steps(1, end)translateXaria-pressed

어디를 바꾸면 되나

대표 고객 한 명을 크게 세우는 기업 소개 섹션에 씁니다.

// 아바타 넷 — 균등 격자. 칸 사이 간격은 칸 안 여백으로 준다(gap 을 두면
// 링의 100% 이동이 칸 폭과 어긋난다). 레일 폭 = 칸 넷 → 1fr 이 칸 폭과 정확히 같다
.qs__rail {
  --i: 0; // 링이 있는 칸 — JS 가 링 자신에 세팅한다
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: calc(4 * var(--cell));
}

// 링 — 첫 칸을 채우는 격자 항목. 자기 폭 = 칸 폭이므로
// translateX(calc(var(--i) * 100%)) 가 정확히 칸 단위 이동이 된다 (짐작한 px 아님)
.qs__ring {
  grid-row: 1;
  grid-column: 1;
  border: 3px solid $pf-ink;
  border-radius: 50%;
  pointer-events: none;
  transform: translateX(calc(var(--i) * 100%));
  transition: transform $dur-base $easing;
}

04별점 분포 요약 바

무엇이 보이나

5점부터 1점까지 다섯 줄의 막대가 0.16초 간격으로 차례로 차오르고, 옆의 평균 점수는 4.1 에서 4.7 로, 후기 개수는 812개에서 1,509개로 한 칸씩 갈립니다. 줄을 누르면 그 별점만 강조됩니다.

별점 분포 요약 바
새 창에서 열기

04 · 별점 분포 요약 바 — 측정 누적면적 1.737% · 움직인 프레임 14/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

scaleXgrid-areaaria-label

코드에서 볼 곳

쇼핑몰 상품 상세의 별점 요약이나 앱 스토어형 평점 블록에 씁니다.

.rd__row--5 { --p: .68; }
.rd__row--4 { --p: .21; }
.rd__row--3 { --p: .07; }
.rd__row--2 { --p: .03; }
.rd__row--1 { --p: .01; }

.rd__track { display: grid; }
.rd__bg, .rd__fill {
  grid-area: 1 / 1;
  height: 8px;
  border-radius: $r-pill;
}
.rd__bg { background: rgba(28, 27, 34, .12); }
.rd__fill {
  background: $color;
  transform: scaleX(var(--p));
  transform-origin: left center;
}

// 차오른 막대는 끝까지 남긴다 — 한 바퀴 안에서 비웠다 채우면 poster 가 빈 막대를 고른다.
// 되감기는 루프 경계(24프레임의 마지막 장은 95.8% 지점)에서 한 번에 일어난다
@keyframes rdFill {
  0%        { transform: scaleX(0); }
  46%, 100% { transform: scaleX(var(--p)); }
}

05로고 띠 마퀴

화면에서 일어나는 일

「500곳이 넘는 팀이 쓰고 있습니다」 라는 문구 아래 도형 마크 여덟 개가 한 줄로 끝없이 흐릅니다. 띠 양 끝은 무대 색으로 녹아 마크가 갑자기 잘리지 않고, 마크는 온라인 서점·사진 스튜디오 같은 일반 명사에 원·삼각형 도형을 얹은 것이라 그대로 써도 됩니다.

로고 띠 마퀴
새 창에서 열기

05 · 로고 띠 마퀴 — 측정 누적면적 4.272% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

translateXmargin-rightmask-image

코드 읽는 법

도입 고객사 띠나 파트너 소개 줄에 씁니다.

// BD15 — 트랙에는 flex gap 을 주지 않는다. 16개 사이 gap 은 15개뿐이라
// translateX(-50%) 가 gap 절반만큼 모자라 한 바퀴마다 튄다.
// margin-right 는 마지막 항목에도 붙으므로 트랙 폭 = (항목폭 + 24px) × 16,
// 즉 절반이 정확히 마크 한 벌이다
.lm__mark {
  display: inline-flex;
  align-items: center;
  gap: $sp-2;
  flex: 0 0 auto;
  margin-right: $sp-6;
  padding: $sp-1;
  border-radius: $r-sm;
  color: $pf-stone;
  font-weight: 600; font-size: 12px; line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

@keyframes lmRun {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

06전후 수치 뒤집기 카드

어떤 움직임인가

도입 전 수치(34시간 · 18% · 3.4점)가 적힌 카드를 누르면 입체적으로 뒤집혀 도입 후 수치(2시간 · 41% · 4.7점)와 개선 문구(17배 빨라짐 · 2.3배 늘어남 · 1.3점 오름)이 나옵니다. 미리보기에서는 옆모습 없이 앞뒤가 한 프레임에 갈립니다.

전후 수치 뒤집기 카드
새 창에서 열기

06 · 전후 수치 뒤집기 카드 — 측정 누적면적 28.828% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

rotateYbackface-visibilityaria-pressed

어디를 바꾸면 되나

성과 수치를 전후로 비교하는 사례 섹션에 씁니다.

// 3D 플립의 회전면 폭은 |cos θ| 라 프레임당 면적 변화율이 |sin θ| — 90° 부근이 언제나 최대다.
// 그대로 두면 poster 로 뽑히는 "가장 크게 달라진 장" 이 늘 모서리뷰(선 한 줄)가 된다.
// 그래서 미리보기 루프의 뒤집기만 steps(1, end) 컷으로 앞면 → 뒷면 → 앞면 을 갈아 끼우고,
// 사람이 누르는 실제 동작은 위의 transition: transform 그대로 부드럽게 둔다.
// 컷만 쓰면 움직인 프레임이 두세 장으로 떨어지므로 아래 막대(scaleX)와 배지(translateY) 가
// 중간 프레임을 채운다 — 둘 다 transform 이라 반투명 유령이 생기지 않는다.
// animation 단축은 delay 를 0 으로 리셋하므로 낱개 속성으로 쓴다
.ba.is-demo .ba__inner {
  animation-name: baFlip;
  animation-duration: $duration;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-delay: var(--d, 0s);
  animation-fill-mode: backwards;
  transition: none;
}

// 복귀는 80% 에 끝난다 — 24프레임의 마지막 장은 2초의 95.8% 지점이다
@keyframes baFlip {
  0%, 29%   { transform: rotateY(0deg); }
  30%, 79%  { transform: rotateY(180deg); }
  80%, 100% { transform: rotateY(0deg); }
}

07영상 후기 썸네일 그리드

무엇이 보이나

재생 표시가 얹힌 썸네일 넉 장이 나란히 서다가, 고른 한 장이 옆 칸을 밀어내며 넓어지고, 늘 보이는 이름 아래에서 한마디가 왼쪽부터 드러납니다.

영상 후기 썸네일 그리드
새 창에서 열기

07 · 영상 후기 썸네일 그리드 — 측정 누적면적 35.518% · 움직인 프레임 14/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

grid-template-columnsaria-expandedclip-path

코드에서 볼 곳

영상 인터뷰가 있는 후기 섹션에 씁니다.

// 폭 변화를 **뒤로 몰고**(키프레임 안 이징) 닫힘은 길고 고르게 편다.
// poster 는 앞 장과 가장 크게 달라진 장이라, 이렇게 해야 「다 펼쳐지고 한마디까지 나온 장」이
// 대표가 된다 — 닫힘이 더 급하면 「글자는 없고 칸만 줄어드는 장」이 이긴다 (실측 2026-09-12)
@keyframes vgCols {
  0%, 6%    { grid-template-columns: 1fr 1fr 1fr 1fr; animation-timing-function: cubic-bezier(.7, 0, .9, .3); }
  33%, 66%  { grid-template-columns: 2.2fr .6fr .6fr .6fr; animation-timing-function: linear; }
  90%, 100% { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
// 복귀는 90% 안에 끝낸다 — 24프레임의 마지막 장은 95.8% 지점이다
// 위프는 한 눈금 안에 끝낸다 — 24프레임 눈금은 4.1667% 간격이라, 30~54% 처럼 길게 끌면
// 한마디가 낱말 중간에서 잘린 장이 여러 장 생기고 그중 하나가 대표 이미지로 뽑힌다
// (실측 2026-09-12: 33.3% 장이 「주문서 흐름이 사」 에서 끊긴 채 poster 가 됐다).
// 0.2ms 폭이라 사실상 컷이지만 steps() 가 아니므로 clip-path 값이 정상 보간된다
@keyframes vgWipe {
  0%, 33%      { clip-path: inset(0 100% 0 0); }
  33.01%, 66%  { clip-path: inset(0 0 0 0); }
  66.01%, 100% { clip-path: inset(0 100% 0 0); }
}

08짧은 글 카드 월

화면에서 일어나는 일

한마디 카드 석 장이 어두운 바탕 위 서로 다른 높이에서 떠오르고, 한 장의 테두리 빛이 보라에서 민트와 틸을 지나 한 바퀴 돌며, 다른 한 장은 네온 테두리가 밝아졌다 어두워집니다.

짧은 글 카드 월
새 창에서 열기

08 · 짧은 글 카드 월 — 측정 누적면적 26.323% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

@propertyconic-gradienttranslateY

코드 읽는 법

SNS 반응을 모아 보여 주는 어두운 톤 섹션에 씁니다.

// 오로라 각도 — inherits:false 로 등록하면 그 요소 자신의 값이어야 한다.
// 그래서 트랙·부모가 아니라 카드 A 자신에 건다
@property --pw-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

// 카드 A — 오로라 그라디언트 테두리. 안쪽 면은 padding-box, 도는 빛은 border-box
.pw__card--a {
  border: 2px solid transparent;
  background:
    linear-gradient($pf-slate, $pf-slate) padding-box,
    conic-gradient(from var(--pw-angle), $pf-violet, $pf-mint, $pf-teal, $pf-violet) border-box;
}

@keyframes pwSpin {
  from { --pw-angle: 0deg; }
  to   { --pw-angle: 360deg; }
}

09신뢰 수치 밴드

어떤 움직임인가

쓰는 팀 수와 평균 평점, 첫 응답 시간 세 칸이 마지막 값(1,509곳 · 4.7 · 12분)까지 한 칸씩 올라가고, 아래 인증 배지가 도장처럼 차례로 찍힙니다. 다시 세기 단추를 누르면 같은 카운트업이 한 번만 돌고 멈춥니다.

신뢰 수치 밴드
새 창에서 열기

09 · 신뢰 수치 밴드 — 측정 누적면적 7.978% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

steps(1, end)grid-areaanimation-fill-mode

어디를 바꾸면 되나

가격표 위아래의 신뢰 보강 띠에 씁니다.

@keyframes tbSlot1 { 0% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes tbSlot2 { 0% { opacity: 0; } 22% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes tbSlot3 { 0% { opacity: 0; } 44% { opacity: 1; } 66%, 100% { opacity: 0; } }
// 마지막 값은 66% 에 도착해 끝까지 유지한다 — 24프레임의 마지막 장은 95.8% 지점이다
@keyframes tbSlot4 { 0% { opacity: 0; } 66%, 100% { opacity: 1; } }

// 도장처럼 내려찍힌다 — 마지막 배지도 지연 .36s 를 더해 40% 안에 앉는다
@keyframes tbStamp {
  0%        { transform: translateY(-8px) scale(.6); opacity: 0; }
  5%        { transform: translateY(-4px) scale(.82); opacity: 1; }
  14%       { transform: translateY(0) scale(1.08); opacity: 1; }
  22%, 100% { transform: translateY(0) scale(1); opacity: 1; }
}

// 다시 세기 — 같은 키프레임을 한 번만 돌리고 최종 상태에서 멈춘다
.tb.is-count .tb__n,
.tb.is-count .tb__badge {
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

어디서 깨지는가 — 함정

가장 먼저 무너진 것은 3D 뒤집기의 대표 이미지였습니다. 회전한 면의 보이는 폭은 |cos θ| 를 따르므로 프레임마다 변하는 면적은 |sin θ| 이고, 그래서 90° 부근에서 변화가 언제나 가장 큽니다. 등속이든 튕기는 곡선이든 프레임 간 차이가 가장 큰 장은 모서리가 정면으로 선 선 한 줄 뷰라서 24프레임 중 그 장이 대표로 뽑혔습니다. 그래서 미리보기 루프의 뒤집기만 steps(1, end) 컷으로 갈아 끼우고 실제 클릭은 부드러운 전환을 그대로 뒀습니다. 컷만 쓰면 움직이는 프레임이 두세 장으로 줄어들어, 카드 밑 진행 막대와 배지의 움직임이 중간 프레임을 채웁니다.

두 번째는 마퀴의 이음매입니다. Playwright 로 트랙의 실제 폭을 재니 1858px, 그 절반은 929px, 마크 여덟 개 한 벌은 928.75px이었습니다(getBoundingClientRect().width 에 margin-right 를 더한 합). 애니메이션 시계를 0% 와 100% 에 놓고 찍은 두 장의 픽셀 최대 차이는 0 — 한 바퀴를 돌아도 한 칸 어긋나지 않는다는 증거입니다. flex 의 gap 을 쓰면 마크 열여섯 개 사이 간격은 열다섯 개뿐이라 -50% 이동이 간격 절반만큼 모자라고, 그 모자람이 2초마다 한 번씩 튑니다. 이 데모의 측정에서 움직임이 잡힌 프레임은 24장 중 23장으로, 등속 흐름이 쉬지 않고 이어진다는 뜻이기도 합니다.

세 번째는 낱말 중간에서 잘린 대표 이미지입니다. 24프레임 샘플은 4.1667% 간격이라, 한마디가 펼쳐지는 위프를 30~54% 로 길게 끌면 글자가 잘린 장이 여러 장 생깁니다. 실제로 「주문서 흐름이 사」에서 끊긴 33.3% 장이 대표로 뽑혔습니다. 위프를 한 눈금 안(33% 에서 33.01%)으로 줄이고 칸 폭 변화를 키프레임 안 이징으로 뒤로 몰며 닫힘을 길게 펴니 「다 펼쳐지고 한마디까지 나온 장」이 대표가 되었습니다.

네 번째는 루프에서는 안 보이고 클릭에서만 보인 겹침입니다. 인용 넉 장과 이름줄 넉 장을 같은 grid-area: 1 / 1 칸에 포갰더니, 두 줄짜리 인용을 고른 순간 이름줄이 마지막 줄 위에 겹쳤습니다. 모든 게이트가 보는 것은 자동 순환 상태(.is-demo)뿐이라 아무것도 잡지 못했고, 그 상태를 뗀 Playwright 스냅샷에서 처음 드러났습니다. 인용은 1행, 이름줄은 2행으로 갈라 해결했습니다.

마지막으로 캐러셀의 복제 문제입니다. 흔한 무한 캐러셀은 첫 카드를 복제해 뒤에 붙이는데, 여기서는 카드 석 장을 같은 칸에 포개고 음수 animation-delay(-0.16s · -0.8267s · -1.4933s)로 3분의 1 주기씩 어긋나게 돌립니다. 자리를 되돌리는 순간은 70% 지점인데 카드가 창 밖에 있어 화면에는 보이지 않으므로, 복제본도 점프도 필요 없습니다. 09 처럼 수치를 날마다 갱신하는 증거는 시간이 흐르면 기록 관리 문제로 바뀌는데, 그 기간을 잔디 격자로 보여 주는 답이 습관 트래커 UI에 있습니다.

접근성

글자색은 눈으로 고르지 않고 WCAG 2.1 상대 휘도 공식으로 계산해 골랐습니다. 아래 표의 마지막 네 줄이 이 팔레트에서 글자로 쓰지 않기로 한 조합입니다.

앞 뒤 실측 대비 본문 기준 4.5:1
잉크 #1c1b22 흰색 #ffffff 17.08:1 통과
크림 #fbf7ef 잉크 #1c1b22 15.99:1 통과
크림 #fbf7ef 슬레이트 #242230 14.6:1 통과
잉크 #1c1b22 앰버 #ffd23f 11.83:1 통과
민트 #6ee7d7 잉크 #1c1b22 11.45:1 통과
민트 #6ee7d7 슬레이트 #242230 10.45:1 통과
스톤 #565062 크림 #fbf7ef 7.23:1 통과
보라 #5b3df5 흰색 #ffffff 6.12:1 통과
틸 #0b7269 흰색 #ffffff 5.79:1 통과
잉크 #1c1b22 오렌지 #ff4d1f 5.15:1 통과
오렌지 #ff4d1f 크림 #fbf7ef 3.1:1 미달 — 도형에만
흰 글자 #ffffff 오렌지 #ff4d1f 3.32:1 미달 — 쓰지 않는다
보라 #5b3df5 슬레이트 #242230 2.55:1 미달 — 테두리 빛에만
흰 글자 #ffffff 앰버 #ffd23f 1.44:1 미달 — 쓰지 않는다

이 기준을 통과한 조합으로만 지은 아홉 벌이 암호 zip 안에 들어 있고, 여는 암호는 2htnhppu 입니다. 움직임을 덜어 달라는 설정(prefers-reduced-motion: reduce)에서는 아홉 개 모두 연출만 끄고 정보는 그대로 둡니다. 01 은 첫 카드가 서 있는 채 멈추고 활성 점도 차 있는 채 남습니다. 02 는 다섯 장이 제자리에 쌓인 채 보입니다. 03 은 첫 인용과 이름, 첫 얼굴이 그대로 나타납니다. 04 는 막대가 최종 비율로 차 있고 숫자는 4.7 과 1,509개로 고정됩니다. 05 는 한 줄에 여덟 개가 다 안 들어가므로 두 줄로 접혀 마크 전부를 보여 주고 양 끝 흐림도 거둡니다. 06 은 눌렀을 때 뒤집히는 상태가 즉시 갈리는 것으로 남습니다. 07 은 네 칸이 고른 폭으로 서고 눌렀을 때만 넓어집니다. 08 은 떠오름과 오로라, 네온 숨쉼이 멈추고 테두리는 그대로입니다. 09 는 최종 수치 세 칸과 배지 셋이 다 찬 상태로 섭니다.

화면 낭독기 쪽에서 데모에 넣어 둔 장치는 다음과 같습니다. 01 은 자동으로 바뀌는 창에 aria-live="off" 를 붙여 화면 낭독기가 세 카드를 계속 읽어 대지 않게 했고, 정지 버튼은 aria-pressed 로 눌림 상태를 알립니다. 별점은 01 · 04 모두 role="img" 와 aria-label(「5점 만점에 4.7점」, 「후기 1,509개」, 「5점 후기가 68퍼센트」) 로 숫자로 전달합니다. 03 의 얼굴 버튼은 aria-pressed, 인용 몸통은 aria-live="polite" 로, 얼굴을 고르면 한 번만 읽힙니다. 06 의 뒤집기 카드도 aria-pressed 로 앞뒤를 알립니다. 07 의 썸네일 버튼은 aria-expanded 로 펼침 상태를 알립니다. 키보드로 접근했을 때의 초점 링은 아홉 개 각자 무대에서 보이는 색으로 지정했습니다(:focus-visible).

브라우저 지원은 두 곳만 짚습니다. 07 처럼 칸 배분 자체를 전환하는 것은 caniuse 실측 기준 Chrome 107+ · Firefox 66+ · Safari 16.0+ 부터이고(MDN 의 grid-template-columns 문서), 08 의 @property 는 Chrome 85+ · Firefox 128+ · Safari 16.4+ 부터입니다(MDN 의 @property 문서). 05 의 mask-image 는 표준 표기를 지원하지만 그래도 -webkit-mask-image 를 함께 적었습니다(MDN 의 mask-image 문서). 대비의 기준은 W3C 의 최소 명도 대비 해설을 따랐습니다. 페이지 끝을 신뢰로 닫는 방법이 더 필요하면 푸터 디자인 패턴 9종으로, 09 밴드를 얹을 자리는 요금제 인터랙션 9종으로 이어집니다. 소개에 이 사이트가 코드를 어떻게 검증하는지 적어 두었습니다.

FAQ

고객 후기 콘텐츠가 세 개밖에 없는데 뭘 쓰나요?

01 캐러셀이 정확히 그 상황을 위해 있습니다. 석 장을 한 자리에서 돌리는 구조라 카드가 적을수록 오히려 어울립니다. 두 개뿐이라면 03 대형 인용으로 한 사람씩 크게 세우는 편이 낫고, 문장이 짧다면 08 카드 월로 모을 수도 있습니다. 증언이 쌓인 뒤 그 보답을 손님에게 돌려줄 차례라면 쿠폰 디자인이 도장부터 돌림판까지를 이어 받습니다.

가짜 후기를 넣어도 되나요?

안 됩니다. 이 데모의 문구도 실제 인용이 아니라 온라인 서점, 동네 빵집 같은 일반 명사로 지은 예시이고, 로고도 원과 삼각형 도형으로 만들었습니다. 실제 서비스에 얹을 때는 받은 평가를 그대로 쓰고, 09 의 인증 배지처럼 실존 기관을 암시하는 표시는 실제 인증이 있을 때만 넣어야 합니다.

자동으로 움직이는 후기 섹션은 괜찮은가요?

두 가지만 지키면 괜찮습니다. 멈춤 버튼(01)이나 포인터를 올리면 멈추는 식(02) 중 하나는 반드시 두고, 화면 낭독기에는 조용해야 합니다. 01 이 창에 aria-live="off" 를 붙인 이유가 그것입니다. 움직임을 덜어 달라는 설정에서는 아홉 개 모두 연출만 꺼집니다.

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

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