04체크 기능 목록
행마다 옅은 민트 배경 원 안에 파란 체크가 그려지고, 목록이 화면에 들어올 때 위에서부터 순서대로 살짝 아래로 미끄러지며 나타납니다. 체크는 두 막대가 같은 꼭짓점에서 출발하는 진짜 체크 표시입니다.
쓰임기능 목록, 요금제 포함 항목
두 막대 체크순차 슬라이드인radius pill
<main class="stage">
<ul class="featurelist">
<li class="featurelist__row featurelist__row--1">
<span class="featurelist__check" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M232 56v144a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16" opacity=".2"/><path d="m205.66 85.66l-96 96a8 8 0 0 1-11.32 0l-40-40a8 8 0 0 1 11.32-11.32L104 164.69l90.34-90.35a8 8 0 0 1 11.32 11.32"/></g></svg></span>
<span class="featurelist__text">무제한 팀원 초대</span>
</li>
<li class="featurelist__row featurelist__row--2">
<span class="featurelist__check" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M232 56v144a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16" opacity=".2"/><path d="m205.66 85.66l-96 96a8 8 0 0 1-11.32 0l-40-40a8 8 0 0 1 11.32-11.32L104 164.69l90.34-90.35a8 8 0 0 1 11.32 11.32"/></g></svg></span>
<span class="featurelist__text">감사 로그 90일 보관</span>
</li>
<li class="featurelist__row featurelist__row--3">
<span class="featurelist__check" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M232 56v144a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16" opacity=".2"/><path d="m205.66 85.66l-96 96a8 8 0 0 1-11.32 0l-40-40a8 8 0 0 1 11.32-11.32L104 164.69l90.34-90.35a8 8 0 0 1 11.32 11.32"/></g></svg></span>
<span class="featurelist__text">SSO · SAML 연동</span>
</li>
</ul>
</main>@use "../../../../site/static/demo-tokens" as *;
$duration: $dur-loop;
$easing: $ease-out;
$color: $subject-blue;
$trust-mint: #eaf6f1;
$trust-ink: $subject-ink;
$trust-blue: $subject-blue;
@include stage($trust-mint);
.featurelist {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: $sp-2;
width: clamp(220px, 78vw, 300px);
}
.featurelist__row {
box-sizing: border-box;
display: flex;
align-items: center;
gap: $sp-3;
padding: $sp-2 $sp-4;
border-radius: $r-pill;
background: $stage-paper;
box-shadow: 0 8px 16px rgba($trust-ink, .07);
opacity: 0;
animation: rowIn $duration $easing infinite;
}
.featurelist__row--1 { animation-delay: 0s; }
.featurelist__row--2 { animation-delay: $duration * -0.83; }
.featurelist__row--3 { animation-delay: $duration * -0.66; }
.featurelist__check {
display: grid;
place-items: center;
width: 28px;
height: 28px;
flex: 0 0 auto;
border-radius: 50%;
background: $trust-mint;
color: $trust-blue;
font-size: 15px;
}
.featurelist__text {
color: $trust-ink;
font-weight: 600; font-size: 13px; line-height: 1.3;
font-family: inherit;
}
// 데모: 행마다 시작 시각을 어긋내 위에서 아래로 미끄러져 들어오고, 한 바퀴가 끝나면 다시 사라졌다 나타난다
@keyframes rowIn {
0% { opacity: 0; transform: translateY(-10px); }
16%, 82% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10px); }
}
@media (max-width: 340px), (max-height: 220px) {
.featurelist__row { padding: $sp-1 $sp-3; gap: $sp-2; }
.featurelist__check { width: 22px; height: 22px; font-size: 12px; }
.featurelist__text { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
.featurelist__row { animation: none !important; opacity: 1; transform: none; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #eaf6f1;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.featurelist {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
width: clamp(220px, 78vw, 300px);
}
.featurelist__row {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 8px 16px rgba(23, 20, 26, 0.07);
opacity: 0;
animation: rowIn 2s ease-out infinite;
}
.featurelist__row--1 {
animation-delay: 0s;
}
.featurelist__row--2 {
animation-delay: -1.66s;
}
.featurelist__row--3 {
animation-delay: -1.32s;
}
.featurelist__check {
display: grid;
place-items: center;
width: 28px;
height: 28px;
flex: 0 0 auto;
border-radius: 50%;
background: #eaf6f1;
color: #2f6df6;
font-size: 15px;
}
.featurelist__text {
color: #17141a;
font-weight: 600;
font-size: 13px;
line-height: 1.3;
font-family: inherit;
}
@keyframes rowIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
16%, 82% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-10px);
}
}
@media (max-width: 340px), (max-height: 220px) {
.featurelist__row {
padding: 4px 12px;
gap: 8px;
}
.featurelist__check {
width: 22px;
height: 22px;
font-size: 12px;
}
.featurelist__text {
font-size: 11px;
}
}
@media (prefers-reduced-motion: reduce) {
.featurelist__row {
animation: none !important;
opacity: 1;
transform: none;
}
}import type { CSSProperties } from "react";
import styles from "./FeatureListTrust.module.scss";
export type FeatureListTrustProps = {
items?: string[];
duration?: number;
easing?: string;
color?: string;
};
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
const CHECK = (
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M232 56v144a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16" opacity=".2"/><path d="m205.66 85.66l-96 96a8 8 0 0 1-11.32 0l-40-40a8 8 0 0 1 11.32-11.32L104 164.69l90.34-90.35a8 8 0 0 1 11.32 11.32"/></g></svg>
);
export default function FeatureListTrust({
items = ["무제한 팀원 초대", "감사 로그 90일 보관", "SSO · SAML 연동"],
duration = 2000,
easing = "ease-out",
color = "#2f6df6",
}: FeatureListTrustProps) {
const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
const delays = [0, -1660, -1320];
return (
<ul className={styles.list} style={vars}>
{items.map((text, i) => (
<li key={text} className={styles.row} style={{ animationDelay: `${delays[i] ?? 0}ms` }}>
<span className={styles.check} aria-hidden="true">{CHECK}</span>
<span className={styles.text}>{text}</span>
</li>
))}
</ul>
);
}04 체크 기능 목록 — 측정 누적면적 29.301% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · saas 랜딩페이지 신뢰감 디자인 키트, 클린 섹션 9개
이 데모가 속한 글
saas 랜딩페이지 신뢰감 디자인 키트, 클린 섹션 9개saas 랜딩페이지 디자인은 흰색과 오프화이트 두 톤 배경 위에 파란색 브랜드 컬러 하나만 얹고, 그림자는 회색 계열로 얕게, 모서리는 절제된 반경으로 통일해 화려하지 않으면서도 진지해 보이게 만드는 스타일입니다. 이 글의 데모 전부 보기
