saas 랜딩페이지 신뢰감 디자인 키트, 클린 섹션 9개

2026-09-11 · Godrich · 9종 · 10분 읽기

saas 랜딩페이지 디자인은 흰색과 오프화이트 두 톤 배경 위에 파란색 브랜드 컬러 하나만 얹고, 그림자는 회색 계열로 얕게, 모서리는 절제된 반경으로 통일해 화려하지 않으면서도 진지해 보이게 만드는 스타일입니다.

핀터레스트에 저장해 둔 스트라이프·리니어 같은 화면을 실제로 만든 원페이지로 아래에 그대로 올렸습니다. 위쪽 내비부터 맨 아래 푸터까지 눌러 보면서 색이 정말 파란색 하나뿐인지 직접 세어 보세요.

저 원페이지를 만든 부품 아홉 개를 각각 뜯어내 아래 격자에 따로 늘어놓았습니다. 방문자 시선이 실제로 움직이는 차례 — 눈길 끌기, 기능 둘러보기, 가격 확인, 신뢰, 행동 유도 — 를 그대로 따랐습니다. 색은 파란색 하나뿐이고 나머지는 전부 흰색·회색이라는 것이 이 키트 전체의 원칙입니다.

01 hero-trust

02 nav-trust

03 card-grid-trust

04 feature-list-trust

09 buttons-inputs-trust

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

01 소프트 그리드 히어로
02 언더라인 내비
03 아이콘 카드 격자
04 체크 기능 목록
05 심플 요금제
06 로고 신뢰 후기
07 솔리드 CTA 밴드
08 미니멀 4열 푸터
09 클린 버튼·인풋

기업 웹사이트 디자인에 쓰는 이 키트의 색은 여덟 개로 끝납니다. 브랜드 컬러를 작은 글자에 직접 쓰지 않는 것이 읽히는 신뢰감의 조건입니다. 같은 design 기둥에서 색 수를 늘려 과일처럼 쨍하게 간 쪽이 시트러스 컬러 랜딩 키트이고, 종이를 오려 층을 쌓은 쪽이 종이 질감 랜딩 키트입니다.

역할	색	쓰는 곳
오프화이트	`#f7f9fc`	페이지 바탕
블루 틴트	`#eaf1ff`	카드 격자 무대·아이콘 배경
그레이 틴트	`#f1f5f9`	내비·로고 무대
민트 틴트	`#eaf6f1`	체크 아이콘·인풋 무대
브랜드 블루	`#2f6df6`	버튼·아이콘·테두리·강조
블루 딥	`#1d4ed8`	CTA 밴드 배경·버튼 눌림
슬레이트	`#475569`	보조 글자
잉크	`#17141a`	제목·본문 글자

01소프트 그리드 히어로

b2b 랜딩페이지에서 무엇이 보이나

오프화이트 배경 위에 아주 옅은 점 격자가 깔리고, 그 앞의 흰 카드가 완만하게 위아래로 떠오릅니다.

<main class="stage">
  <section class="herotrust">
    <span class="herotrust__badge" 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="M216 56v56c0 96-88 120-88 120s-88-24-88-120V56a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8" opacity=".2"/><path d="M208 40H48a16 16 0 0 0-16 16v56c0 52.72 25.52 84.67 46.93 102.19c23.06 18.86 46 25.26 47 25.53a8 8 0 0 0 4.2 0c1-.27 23.91-6.67 47-25.53C198.48 196.67 224 164.72 224 112V56a16 16 0 0 0-16-16m0 72c0 37.07-13.66 67.16-40.6 89.42a129.3 129.3 0 0 1-39.4 22.2a128.3 128.3 0 0 1-38.92-21.81C61.82 179.51 48 149.3 48 112V56h160ZM82.34 141.66a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32l-56 56a8 8 0 0 1-11.32 0Z"/></g></svg>
    </span>
    <div class="herotrust__card">
      <p class="herotrust__eyebrow">Trusted by teams</p>
      <h1 class="herotrust__title">더 빠르고 안전한 시작</h1>
      <p class="herotrust__desc">신뢰가 필요한 팀을 위한 SaaS 랜딩</p>
      <button class="herotrust__cta" type="button">무료로 시작</button>
    </div>
  </section>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;   // 카드가 한 번 뜨고 가라앉는 주기
$easing: $ease-out;     // 통통 튀지 않는 절제된 곡선
$color: $subject-blue;  // 유일한 브랜드 컬러

// 신뢰감 팔레트 — 흰색·오프화이트 바탕에 파란색 하나만 강조. 카드류는 잉크 대비 4.5:1 이상(접근성 섹션 참고), 그림자는 회색 계열로 얕게
$trust-offwhite: #f7f9fc;
$trust-ink:      $subject-ink;
$trust-slate:    #475569;
$trust-blue:     $subject-blue;

@include stage($trust-offwhite);

// 점 격자 배경 — 정적 장식. 애니메이션 대상이 아니다
.stage {
  background-image: radial-gradient(circle, rgba($trust-ink, .08) 1px, transparent 1px);
  background-size: 20px 20px;
}

.herotrust {
  position: relative;
  width: clamp(220px, 76vw, 340px);
}
.herotrust__badge {
  position: absolute;
  top: -16px;
  right: 12px;
  width: clamp(28px, 8vw, 36px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: $trust-blue;
  color: $stage-paper;
  box-shadow: 0 8px 16px rgba($trust-blue, .35);
  font-size: clamp(14px, 4vw, 18px);
  animation: badgeFloat $duration $easing infinite;
}
.herotrust__card {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: $sp-2;
  padding: $sp-5;
  border-radius: $r-card;
  background: $stage-paper;
  box-shadow: 0 14px 28px rgba($trust-ink, .1);
  animation: cardBob $duration $easing infinite;
}
.herotrust__eyebrow {
  margin: 0;
  color: $trust-blue;
  font-weight: 700; font-size: clamp(10px, 2.6vw, 12px); line-height: 1;
  font-family: inherit;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.herotrust__title {
  margin: 0;
  color: $trust-ink;
  font-weight: 700; font-size: clamp(18px, 4.6vw, 24px); line-height: 1.25;
  font-family: inherit;
}
.herotrust__desc {
  margin: 0;
  color: $trust-slate;
  font-weight: 500; font-size: clamp(12px, 2.8vw, 14px); line-height: 1.4;
  font-family: inherit;
}
.herotrust__cta {
  margin-top: $sp-1;
  border: 0;
  border-radius: $r-pill;
  background: $trust-blue;
  color: $stage-paper;
  padding: $sp-2 $sp-5;
  font-weight: 700; font-size: clamp(12px, 2.8vw, 14px); line-height: 1;
  font-family: inherit;
  box-shadow: 0 8px 18px rgba($trust-blue, .3);
}
.herotrust__cta:focus-visible {
  outline: 3px solid $trust-blue;
  outline-offset: 2px;
}

// 데모: 카드가 완만하게 떠올랐다 가라앉고(큰 피사체라 누적면적을 확보), 배지는 다른 위상으로 살짝 흔들린다
@keyframes cardBob {
  0%, 100% { transform: translateY(0); box-shadow: 0 14px 28px rgba($trust-ink, .1); }
  50%      { transform: translateY(-9px); box-shadow: 0 20px 32px rgba($trust-ink, .07); }
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(6px) scale(1.06); }
}

@media (max-width: 340px), (max-height: 220px) {
  .herotrust__card { padding: $sp-3 $sp-4; gap: $sp-1; }
  .herotrust__eyebrow { display: none; }
  .herotrust__title { font-size: 15px; line-height: 1.15; }
  .herotrust__desc { display: none; }
  .herotrust__cta { padding: $sp-1 $sp-4; margin-top: 0; }
  .herotrust__badge { width: 22px; top: -8px; right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .herotrust__badge, .herotrust__card { animation: none !important; transform: none; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #f7f9fc;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.stage {
  background-image: radial-gradient(circle, rgba(23, 20, 26, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
}

.herotrust {
  position: relative;
  width: clamp(220px, 76vw, 340px);
}

.herotrust__badge {
  position: absolute;
  top: -16px;
  right: 12px;
  width: clamp(28px, 8vw, 36px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2f6df6;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(47, 109, 246, 0.35);
  font-size: clamp(14px, 4vw, 18px);
  animation: badgeFloat 2s ease-out infinite;
}

.herotrust__card {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(23, 20, 26, 0.1);
  animation: cardBob 2s ease-out infinite;
}

.herotrust__eyebrow {
  margin: 0;
  color: #2f6df6;
  font-weight: 700;
  font-size: clamp(10px, 2.6vw, 12px);
  line-height: 1;
  font-family: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.herotrust__title {
  margin: 0;
  color: #17141a;
  font-weight: 700;
  font-size: clamp(18px, 4.6vw, 24px);
  line-height: 1.25;
  font-family: inherit;
}

.herotrust__desc {
  margin: 0;
  color: #475569;
  font-weight: 500;
  font-size: clamp(12px, 2.8vw, 14px);
  line-height: 1.4;
  font-family: inherit;
}

.herotrust__cta {
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  background: #2f6df6;
  color: #ffffff;
  padding: 8px 20px;
  font-weight: 700;
  font-size: clamp(12px, 2.8vw, 14px);
  line-height: 1;
  font-family: inherit;
  box-shadow: 0 8px 18px rgba(47, 109, 246, 0.3);
}

.herotrust__cta:focus-visible {
  outline: 3px solid #2f6df6;
  outline-offset: 2px;
}

@keyframes cardBob {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 14px 28px rgba(23, 20, 26, 0.1);
  }
  50% {
    transform: translateY(-9px);
    box-shadow: 0 20px 32px rgba(23, 20, 26, 0.07);
  }
}
@keyframes badgeFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(6px) scale(1.06);
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .herotrust__card {
    padding: 12px 16px;
    gap: 4px;
  }
  .herotrust__eyebrow {
    display: none;
  }
  .herotrust__title {
    font-size: 15px;
    line-height: 1.15;
  }
  .herotrust__desc {
    display: none;
  }
  .herotrust__cta {
    padding: 4px 16px;
    margin-top: 0;
  }
  .herotrust__badge {
    width: 22px;
    top: -8px;
    right: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .herotrust__badge, .herotrust__card {
    animation: none !important;
    transform: none;
  }
}

import type { CSSProperties } from "react";
import styles from "./HeroTrust.module.scss";

export type HeroTrustProps = {
  eyebrow?: string;
  title?: string;
  desc?: string;
  cta?: string;
  /** 한 주기(기본 2000ms) */
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function HeroTrust({
  eyebrow = "Trusted by teams",
  title = "더 빠르고 안전한 시작",
  desc = "신뢰가 필요한 팀을 위한 SaaS 랜딩",
  cta = "무료로 시작",
  duration = 2000,
  easing = "ease-out",
  color = "#2f6df6",
}: HeroTrustProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <section className={styles.herotrust} style={vars}>
      <span className={styles.badge} 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="M216 56v56c0 96-88 120-88 120s-88-24-88-120V56a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8" opacity=".2"/><path d="M208 40H48a16 16 0 0 0-16 16v56c0 52.72 25.52 84.67 46.93 102.19c23.06 18.86 46 25.26 47 25.53a8 8 0 0 0 4.2 0c1-.27 23.91-6.67 47-25.53C198.48 196.67 224 164.72 224 112V56a16 16 0 0 0-16-16m0 72c0 37.07-13.66 67.16-40.6 89.42a129.3 129.3 0 0 1-39.4 22.2a128.3 128.3 0 0 1-38.92-21.81C61.82 179.51 48 149.3 48 112V56h160ZM82.34 141.66a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32l-56 56a8 8 0 0 1-11.32 0Z"/></g></svg>
      </span>
      <div className={styles.card}>
        <p className={styles.eyebrow}>{eyebrow}</p>
        <h1 className={styles.title}>{title}</h1>
        <p className={styles.desc}>{desc}</p>
        <button type="button" className={styles.cta}>{cta}</button>
      </div>
    </section>
  );
}

새 창에서 열기

01 · 소프트 그리드 히어로 — 측정 누적면적 11.469% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

점 격자 배경중립 그림자radius 16

코드에서 볼 곳

그림자는 회색 계열로 얕게, 강조는 파란 배지 하나로만 줍니다.

<section class="dotgrid relative overflow-hidden rounded-card py-20">
  <div class="relative mx-auto flex max-w-xl flex-col items-start gap-4
              rounded-card bg-white p-10 shadow-soft">
    <p class="text-xs font-bold uppercase tracking-widest text-brand">Trusted by teams</p>
    <h1 class="text-4xl font-bold leading-tight">신뢰가 필요한 팀을 위한 SaaS 랜딩</h1>
    <button class="rounded-pill bg-brand px-6 py-3 text-sm font-bold text-white shadow-brand">무료로 시작</button>
  </div>
</section>

02언더라인 내비

화면에서 일어나는 일

메뉴 글자 아래로 파란 밑줄 하나가 활성 탭을 따라 옆칸으로 미끄러져 이동합니다.

<main class="stage">
  <nav class="navtrust">
    <span class="navtrust__highlight" aria-hidden="true"></span>
    <span class="navtrust__tab">홈</span>
    <span class="navtrust__tab">기능</span>
    <span class="navtrust__tab">요금제</span>
    <span class="navtrust__underline" aria-hidden="true"></span>
  </nav>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: 3s;          // 세 칸을 도는 한 바퀴 — 2s 로프($dur-loop)보다 정거장이 많아 별도 토큰(합치지 않는다, blog-design 규칙 2)
$easing: $ease-out;
$color: $subject-blue;

$trust-graytint: #f1f5f9;
$trust-ink:      $subject-ink;
$trust-blue:     $subject-blue;

@include stage($trust-graytint);

// 탭 3개 — 폭을 고정(flex:0 0 auto)해 인디케이터 translateX 이동량과 어긋나지 않는다 (BD19). 320px 안에 들어가도록 전체 폭을 284px 로 미리 잡는다
$tab-w: 92px;
$tab-h: 48px;
$underline-w: 28px;
$underline-offset: 32px; // ($tab-w - $underline-w) / 2, 나눗셈 없이 상수로

.navtrust {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: $tab-w * 3 + $sp-2;
  height: $tab-h;
  padding: 0 $sp-1;
  border-radius: $r-pill;
  background: $stage-paper;
  box-shadow: 0 10px 22px rgba($trust-ink, .08);
}
.navtrust__highlight {
  position: absolute;
  left: $sp-1;
  top: 2px;
  width: $tab-w - 4px;
  height: $tab-h - 4px;
  border-radius: $r-control;
  background: rgba($trust-blue, .14);
  animation: slideTab $duration $easing infinite;
}
.navtrust__tab {
  position: relative;
  z-index: 1;
  flex: 0 0 $tab-w;
  text-align: center;
  color: $trust-ink;
  font-weight: 600; font-size: clamp(11px, 3vw, 13px); line-height: 1;
  font-family: inherit;
}
.navtrust__underline {
  position: absolute;
  bottom: -$sp-2;
  left: 0;
  width: $underline-w;
  height: 3px;
  border-radius: $r-xs;
  background: $trust-blue;
  transform: translateX($underline-offset);
  animation: slideUnderline $duration $easing infinite;
}

// 데모: 하이라이트 블록(넓은 면적)과 밑줄(얇은 신호선)이 같은 박자로 세 칸을 순서대로 돈다
@keyframes slideTab {
  0%, 22%  { transform: translateX(0); }
  33%, 55% { transform: translateX($tab-w); }
  66%, 88% { transform: translateX($tab-w * 2); }
  100%     { transform: translateX(0); }
}
@keyframes slideUnderline {
  0%, 22%  { transform: translateX($underline-offset); }
  33%, 55% { transform: translateX($tab-w + $underline-offset); }
  66%, 88% { transform: translateX($tab-w * 2 + $underline-offset); }
  100%     { transform: translateX($underline-offset); }
}

@media (prefers-reduced-motion: reduce) {
  .navtrust__highlight, .navtrust__underline { animation: none !important; }
  .navtrust__highlight { transform: translateX(0); }
  .navtrust__underline { transform: translateX($underline-offset); }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #f1f5f9;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.navtrust {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 284px;
  height: 48px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(23, 20, 26, 0.08);
}

.navtrust__highlight {
  position: absolute;
  left: 4px;
  top: 2px;
  width: 88px;
  height: 44px;
  border-radius: 12px;
  background: rgba(47, 109, 246, 0.14);
  animation: slideTab 3s ease-out infinite;
}

.navtrust__tab {
  position: relative;
  z-index: 1;
  flex: 0 0 92px;
  text-align: center;
  color: #17141a;
  font-weight: 600;
  font-size: clamp(11px, 3vw, 13px);
  line-height: 1;
  font-family: inherit;
}

.navtrust__underline {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 28px;
  height: 3px;
  border-radius: 4px;
  background: #2f6df6;
  transform: translateX(32px);
  animation: slideUnderline 3s ease-out infinite;
}

@keyframes slideTab {
  0%, 22% {
    transform: translateX(0);
  }
  33%, 55% {
    transform: translateX(92px);
  }
  66%, 88% {
    transform: translateX(184px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideUnderline {
  0%, 22% {
    transform: translateX(32px);
  }
  33%, 55% {
    transform: translateX(124px);
  }
  66%, 88% {
    transform: translateX(216px);
  }
  100% {
    transform: translateX(32px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .navtrust__highlight, .navtrust__underline {
    animation: none !important;
  }
  .navtrust__highlight {
    transform: translateX(0);
  }
  .navtrust__underline {
    transform: translateX(32px);
  }
}

import type { CSSProperties } from "react";
import styles from "./NavTrust.module.scss";

export type NavTrustProps = {
  tabs?: string[];
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function NavTrust({
  tabs = ["홈", "기능", "요금제"],
  duration = 3000,
  easing = "ease-out",
  color = "#2f6df6",
}: NavTrustProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  return (
    <nav className={styles.navtrust} style={vars}>
      <span className={styles.highlight} aria-hidden="true" />
      {tabs.map((t) => (
        <span key={t} className={styles.tab}>{t}</span>
      ))}
      <span className={styles.underline} aria-hidden="true" />
    </nav>
  );
}

새 창에서 열기

02 · 언더라인 내비 — 측정 누적면적 8.271% · 움직인 프레임 9/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

translateX 이동slideUnderlineradius pill

코드 읽는 법

실제 데모에서는 밑줄과 함께 옅은 파란 하이라이트 블록도 같은 박자로 움직여, 얇은 선 하나만으로는 잘 안 보이는 이동을 눈에 띄게 만듭니다.

<nav class="mx-auto flex max-w-5xl items-center gap-6 rounded-pill bg-white px-5 py-3 shadow-soft-sm">
  <span class="relative whitespace-nowrap text-xs font-semibold pb-1
               after:absolute after:-bottom-[13px] after:left-0
               after:h-[3px] after:w-full after:rounded-control after:bg-brand">홈</span>
  <span class="whitespace-nowrap text-xs font-semibold text-slate">기능</span>
</nav>

03아이콘 카드 격자

어떤 움직임인가

흰 카드 네 장이 아주 얕은 그림자만 진 채 격자에 놓이고, 카드 안 아이콘을 담은 파란 원이 시작 시각을 어긋내 순서대로 살짝 커지며 배경색이 진해집니다.

<main class="stage">
  <div class="cardgrid">
    <div class="cardgrid__card cardgrid__card--a">
      <span class="cardgrid__icon" 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="M216 56v56c0 96-88 120-88 120s-88-24-88-120V56a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8" opacity=".2"/><path d="M208 40H48a16 16 0 0 0-16 16v56c0 52.72 25.52 84.67 46.93 102.19c23.06 18.86 46 25.26 47 25.53a8 8 0 0 0 4.2 0c1-.27 23.91-6.67 47-25.53C198.48 196.67 224 164.72 224 112V56a16 16 0 0 0-16-16m0 72c0 37.07-13.66 67.16-40.6 89.42a129.3 129.3 0 0 1-39.4 22.2a128.3 128.3 0 0 1-38.92-21.81C61.82 179.51 48 149.3 48 112V56h160ZM82.34 141.66a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32l-56 56a8 8 0 0 1-11.32 0Z"/></g></svg></span>
      <p class="cardgrid__label">보안</p>
    </div>
    <div class="cardgrid__card cardgrid__card--b">
      <span class="cardgrid__icon" 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="m96 240l16-80l-64-24L160 16l-16 80l64 24Z" opacity=".2"/><path d="M215.79 118.17a8 8 0 0 0-5-5.66L153.18 90.9l14.66-73.33a8 8 0 0 0-13.69-7l-112 120a8 8 0 0 0 3 13l57.63 21.61l-14.62 73.25a8 8 0 0 0 13.69 7l112-120a8 8 0 0 0 1.94-7.26M109.37 214l10.47-52.38a8 8 0 0 0-5-9.06L62 132.71l84.62-90.66l-10.46 52.38a8 8 0 0 0 5 9.06l52.8 19.8Z"/></g></svg></span>
      <p class="cardgrid__label">속도</p>
    </div>
    <div class="cardgrid__card cardgrid__card--c">
      <span class="cardgrid__icon" 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="M224 64v144H32V48h176a16 16 0 0 1 16 16" opacity=".2"/><path d="M232 208a8 8 0 0 1-8 8H32a8 8 0 0 1-8-8V48a8 8 0 0 1 16 0v108.69l50.34-50.35a8 8 0 0 1 11.32 0L128 132.69L180.69 80H160a8 8 0 0 1 0-16h40a8 8 0 0 1 8 8v40a8 8 0 0 1-16 0V91.31l-58.34 58.35a8 8 0 0 1-11.32 0L96 123.31l-56 56V200h184a8 8 0 0 1 8 8"/></g></svg></span>
      <p class="cardgrid__label">성장</p>
    </div>
    <div class="cardgrid__card cardgrid__card--d">
      <span class="cardgrid__icon" 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="M208 88H48a8 8 0 0 0-8 8v112a8 8 0 0 0 8 8h160a8 8 0 0 0 8-8V96a8 8 0 0 0-8-8m-80 72a20 20 0 1 1 20-20a20 20 0 0 1-20 20" opacity=".2"/><path d="M208 80h-32V56a48 48 0 0 0-96 0v24H48a16 16 0 0 0-16 16v112a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16M96 56a32 32 0 0 1 64 0v24H96Zm112 152H48V96h160zm-80-96a28 28 0 0 0-8 54.83V184a8 8 0 0 0 16 0v-17.17a28 28 0 0 0-8-54.83m0 40a12 12 0 1 1 12-12a12 12 0 0 1-12 12"/></g></svg></span>
      <p class="cardgrid__label">보안 인증</p>
    </div>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;
$easing: $ease-out;
$color: $subject-blue;

$trust-bluetint: #eaf1ff;
$trust-ink:      $subject-ink;
$trust-blue:     $subject-blue;

@include stage($trust-bluetint);

.cardgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: $sp-2;
  width: 200px;
}
.cardgrid__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: $sp-1;
  padding: $sp-2;
  border-radius: $r-card;
  background: $stage-paper;
  box-shadow: 0 8px 16px rgba($trust-ink, .08);
  animation: cardLift $duration $easing infinite;
}
.cardgrid__card--a { animation-delay: 0s; }
.cardgrid__card--b { animation-delay: $duration * -0.75; }
.cardgrid__card--c { animation-delay: $duration * -0.5; }
.cardgrid__card--d { animation-delay: $duration * -0.25; }

.cardgrid__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba($trust-blue, .14);
  color: $trust-blue;
  font-size: 18px;
  animation: iconScale $duration $easing infinite;
}
.cardgrid__card--a .cardgrid__icon { animation-delay: 0s; }
.cardgrid__card--b .cardgrid__icon { animation-delay: $duration * -0.75; }
.cardgrid__card--c .cardgrid__icon { animation-delay: $duration * -0.5; }
.cardgrid__card--d .cardgrid__icon { animation-delay: $duration * -0.25; }

.cardgrid__label {
  margin: 0;
  color: $trust-ink;
  font-weight: 600; font-size: 12px; line-height: 1.2;
  font-family: inherit;
}

// 데모: 카드 네 장이 시작 시각을 어긋내 순서대로 살짝 뜨고(호버 시 들리는 느낌), 아이콘 원은 배경이 진해지며 함께 커진다
@keyframes cardLift {
  0%, 60%, 100% { transform: translateY(0); box-shadow: 0 8px 16px rgba(23, 20, 26, .08); }
  20%           { transform: translateY(-5px); box-shadow: 0 14px 22px rgba(23, 20, 26, .12); }
}
@keyframes iconScale {
  0%, 60%, 100% { transform: scale(1); background: rgba(47, 109, 246, .14); }
  20%           { transform: scale(1.12); background: rgba(47, 109, 246, .22); }
}

@media (max-width: 340px), (max-height: 220px) {
  .cardgrid { width: 176px; gap: $sp-1; }
  .cardgrid__card { padding: $sp-1; }
  .cardgrid__icon { width: 28px; height: 28px; font-size: 14px; }
  .cardgrid__label { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cardgrid__card, .cardgrid__icon { animation: none !important; transform: none; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #eaf1ff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.cardgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 200px;
}

.cardgrid__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(23, 20, 26, 0.08);
  animation: cardLift 2s ease-out infinite;
}

.cardgrid__card--a {
  animation-delay: 0s;
}

.cardgrid__card--b {
  animation-delay: -1.5s;
}

.cardgrid__card--c {
  animation-delay: -1s;
}

.cardgrid__card--d {
  animation-delay: -0.5s;
}

.cardgrid__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(47, 109, 246, 0.14);
  color: #2f6df6;
  font-size: 18px;
  animation: iconScale 2s ease-out infinite;
}

.cardgrid__card--a .cardgrid__icon {
  animation-delay: 0s;
}

.cardgrid__card--b .cardgrid__icon {
  animation-delay: -1.5s;
}

.cardgrid__card--c .cardgrid__icon {
  animation-delay: -1s;
}

.cardgrid__card--d .cardgrid__icon {
  animation-delay: -0.5s;
}

.cardgrid__label {
  margin: 0;
  color: #17141a;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  font-family: inherit;
}

@keyframes cardLift {
  0%, 60%, 100% {
    transform: translateY(0);
    box-shadow: 0 8px 16px rgba(23, 20, 26, 0.08);
  }
  20% {
    transform: translateY(-5px);
    box-shadow: 0 14px 22px rgba(23, 20, 26, 0.12);
  }
}
@keyframes iconScale {
  0%, 60%, 100% {
    transform: scale(1);
    background: rgba(47, 109, 246, 0.14);
  }
  20% {
    transform: scale(1.12);
    background: rgba(47, 109, 246, 0.22);
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .cardgrid {
    width: 176px;
    gap: 4px;
  }
  .cardgrid__card {
    padding: 4px;
  }
  .cardgrid__icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .cardgrid__label {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cardgrid__card, .cardgrid__icon {
    animation: none !important;
    transform: none;
  }
}

import type { CSSProperties, ReactNode } from "react";
import styles from "./CardGridTrust.module.scss";

type Item = { label: string; icon: ReactNode };

export type CardGridTrustProps = {
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

const ICONS: Item[] = [
  {
    label: "보안",
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M216 56v56c0 96-88 120-88 120s-88-24-88-120V56a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8" opacity=".2"/><path d="M208 40H48a16 16 0 0 0-16 16v56c0 52.72 25.52 84.67 46.93 102.19c23.06 18.86 46 25.26 47 25.53a8 8 0 0 0 4.2 0c1-.27 23.91-6.67 47-25.53C198.48 196.67 224 164.72 224 112V56a16 16 0 0 0-16-16m0 72c0 37.07-13.66 67.16-40.6 89.42a129.3 129.3 0 0 1-39.4 22.2a128.3 128.3 0 0 1-38.92-21.81C61.82 179.51 48 149.3 48 112V56h160ZM82.34 141.66a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32l-56 56a8 8 0 0 1-11.32 0Z"/></g></svg>
    ),
  },
  {
    label: "속도",
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="m96 240l16-80l-64-24L160 16l-16 80l64 24Z" opacity=".2"/><path d="M215.79 118.17a8 8 0 0 0-5-5.66L153.18 90.9l14.66-73.33a8 8 0 0 0-13.69-7l-112 120a8 8 0 0 0 3 13l57.63 21.61l-14.62 73.25a8 8 0 0 0 13.69 7l112-120a8 8 0 0 0 1.94-7.26M109.37 214l10.47-52.38a8 8 0 0 0-5-9.06L62 132.71l84.62-90.66l-10.46 52.38a8 8 0 0 0 5 9.06l52.8 19.8Z"/></g></svg>
    ),
  },
  {
    label: "성장",
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M224 64v144H32V48h176a16 16 0 0 1 16 16" opacity=".2"/><path d="M232 208a8 8 0 0 1-8 8H32a8 8 0 0 1-8-8V48a8 8 0 0 1 16 0v108.69l50.34-50.35a8 8 0 0 1 11.32 0L128 132.69L180.69 80H160a8 8 0 0 1 0-16h40a8 8 0 0 1 8 8v40a8 8 0 0 1-16 0V91.31l-58.34 58.35a8 8 0 0 1-11.32 0L96 123.31l-56 56V200h184a8 8 0 0 1 8 8"/></g></svg>
    ),
  },
  {
    label: "보안 인증",
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M208 88H48a8 8 0 0 0-8 8v112a8 8 0 0 0 8 8h160a8 8 0 0 0 8-8V96a8 8 0 0 0-8-8m-80 72a20 20 0 1 1 20-20a20 20 0 0 1-20 20" opacity=".2"/><path d="M208 80h-32V56a48 48 0 0 0-96 0v24H48a16 16 0 0 0-16 16v112a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16M96 56a32 32 0 0 1 64 0v24H96Zm112 152H48V96h160zm-80-96a28 28 0 0 0-8 54.83V184a8 8 0 0 0 16 0v-17.17a28 28 0 0 0-8-54.83m0 40a12 12 0 1 1 12-12a12 12 0 0 1-12 12"/></g></svg>
    ),
  },
];

export default function CardGridTrust({ duration = 2000, easing = "ease-out", color = "#2f6df6" }: CardGridTrustProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  const delays = ["a", "b", "c", "d"] as const;
  return (
    <div className={styles.grid} style={vars}>
      {ICONS.map((it, i) => (
        <div key={it.label} className={`${styles.card} ${styles[delays[i]]}`}>
          <span className={`${styles.icon} ${styles[delays[i]]}`}>{it.icon}</span>
          <p className={styles.label}>{it.label}</p>
        </div>
      ))}
    </div>
  );
}

새 창에서 열기

03 · 아이콘 카드 격자 — 측정 누적면적 7.384% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

단일 브랜드 컬러scale 호버2열→1열

어디를 바꾸면 되나

색은 전부 같은 파란색 하나입니다.

<div class="flex flex-col items-start gap-3 rounded-card bg-white p-5 shadow-soft-sm">
  <span class="grid h-9 w-9 place-items-center rounded-full bg-bluetint text-brand">
    <svg><!-- ph:shield-check-duotone --></svg>
  </span>
  <p class="text-sm font-bold">보안</p>
</div>

04체크 기능 목록

무엇이 보이나

행마다 민트 배경 원 안에 파란 체크가 그려지고, 목록이 화면에 들어올 때 위에서부터 순서대로 미끄러져 나타났다 사라지기를 반복합니다.

<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 포함 · 비밀번호 보기

두 막대 체크순차 슬라이드인radius pill

코드에서 볼 곳

체크는 손으로 그린 도형이 아니라 Phosphor Duotone 세트의 실제 체크 아이콘입니다.

<li class="flex items-center gap-3 rounded-pill bg-white px-5 py-3 shadow-soft-sm">
  <span class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-mint text-brand">
    <svg><!-- ph:check-duotone --></svg>
  </span>
  <span class="text-sm font-semibold">무제한 팀원 초대</span>
</li>

05심플 요금제

화면에서 일어나는 일

세 요금제를 전부 같은 흰 카드로 두되 추천 플랜만 얇은 파란 테두리와 살짝 짙은 그림자를 얹어 구분합니다.

<main class="stage">
  <div class="pricing">
    <div class="pricing__card">
      <p class="pricing__name">스타터</p>
      <p class="pricing__price">₩0</p>
    </div>
    <div class="pricing__card pricing__card--pro">
      <span class="pricing__badge">추천</span>
      <p class="pricing__name">프로</p>
      <p class="pricing__price">₩29,000</p>
    </div>
    <div class="pricing__card">
      <p class="pricing__name">기업용</p>
      <p class="pricing__price">문의</p>
    </div>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;
$easing: $ease-out;
$color: $subject-blue;

$trust-offwhite: #f7f9fc;
$trust-ink:      $subject-ink;
$trust-slate:    #475569;
$trust-blue:     $subject-blue;

@include stage($trust-offwhite);

.pricing {
  display: flex;
  align-items: center;
  gap: $sp-2;
}
.pricing__card {
  position: relative;
  box-sizing: border-box;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-1;
  padding: $sp-3 $sp-2;
  border-radius: $r-card;
  border: 1px solid #e2e8f0;
  background: $stage-paper;
  box-shadow: 0 6px 12px rgba($trust-ink, .05);
  text-align: center;
}
.pricing__card--pro {
  width: 100px;
  padding: $sp-4 $sp-2;
  border: 2px solid $trust-blue;
  box-shadow: 0 16px 26px rgba($trust-blue, .18);
  animation: proLift $duration $easing infinite;
}
.pricing__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: $r-pill;
  background: $trust-blue;
  color: $stage-paper;
  padding: $sp-1 $sp-2;
  font-weight: 700; font-size: 10px; line-height: 1.6;
  font-family: inherit;
  animation: badgePulse $duration $easing infinite;
}
.pricing__name {
  margin: 0;
  color: $trust-ink;
  font-weight: 700; font-size: 12px; line-height: 1.2;
  font-family: inherit;
}
.pricing__price {
  margin: 0;
  color: $trust-slate;
  font-weight: 600; font-size: 13px; line-height: 1.2;
  font-family: inherit;
}

// 데모: 추천 플랜만 배지가 숨 쉬듯 살짝 커졌다 작아지고, 카드 전체도 아주 완만하게 떠오른다 — 화려한 색 대신 테두리·그림자 차이가 위계를 만든다
@keyframes proLift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes badgePulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.1); }
}

@media (max-width: 340px), (max-height: 220px) {
  .pricing { gap: $sp-1; }
  .pricing__card { width: 76px; padding: $sp-2 $sp-1; }
  .pricing__card--pro { width: 82px; padding: $sp-3 $sp-1; }
  .pricing__name { font-size: 10px; }
  .pricing__price { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing__card--pro, .pricing__badge { animation: none !important; transform: none; }
  .pricing__badge { transform: translateX(-50%); }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #f7f9fc;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.pricing {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pricing__card {
  position: relative;
  box-sizing: border-box;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.05);
  text-align: center;
}

.pricing__card--pro {
  width: 100px;
  padding: 16px 8px;
  border: 2px solid #2f6df6;
  box-shadow: 0 16px 26px rgba(47, 109, 246, 0.18);
  animation: proLift 2s ease-out infinite;
}

.pricing__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #2f6df6;
  color: #ffffff;
  padding: 4px 8px;
  font-weight: 700;
  font-size: 10px;
  line-height: 1.6;
  font-family: inherit;
  animation: badgePulse 2s ease-out infinite;
}

.pricing__name {
  margin: 0;
  color: #17141a;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  font-family: inherit;
}

.pricing__price {
  margin: 0;
  color: #475569;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  font-family: inherit;
}

@keyframes proLift {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes badgePulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.1);
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .pricing {
    gap: 4px;
  }
  .pricing__card {
    width: 76px;
    padding: 8px 4px;
  }
  .pricing__card--pro {
    width: 82px;
    padding: 12px 4px;
  }
  .pricing__name {
    font-size: 10px;
  }
  .pricing__price {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pricing__card--pro, .pricing__badge {
    animation: none !important;
    transform: none;
  }
  .pricing__badge {
    transform: translateX(-50%);
  }
}

import type { CSSProperties } from "react";
import styles from "./PricingTrust.module.scss";

export type PricingTrustProps = {
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function PricingTrust({ duration = 2000, easing = "ease-out", color = "#2f6df6" }: PricingTrustProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  return (
    <div className={styles.pricing} style={vars}>
      <div className={styles.card}>
        <p className={styles.name}>스타터</p>
        <p className={styles.price}>₩0</p>
      </div>
      <div className={`${styles.card} ${styles.pro}`}>
        <span className={styles.badge}>추천</span>
        <p className={styles.name}>프로</p>
        <p className={styles.price}>₩29,000</p>
      </div>
      <div className={styles.card}>
        <p className={styles.name}>기업용</p>
        <p className={styles.price}>문의</p>
      </div>
    </div>
  );
}

새 창에서 열기

05 · 심플 요금제 — 측정 누적면적 2.276% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

테두리 위계그림자 깊이차radius card

코드 읽는 법

화려한 배경색 대신 테두리 굵기와 그림자 깊이만으로 위계를 만드는 것이 이 스타일의 핵심입니다.

<div class="relative flex-1 max-w-[240px] rounded-card border-2 border-brand
            bg-white p-6 text-center shadow-brand">
  <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-pill
               bg-brand px-3 py-1 text-[11px] font-bold text-white">추천</span>
  <p class="text-sm font-bold">프로</p>
</div>

06로고 신뢰 후기

어떤 움직임인가

후기 카드 위로 회색 로고 칩 여섯 개가 원본과 복제본을 이어 붙여 이음새 없이 무한히 옆으로 흘러가며, 이 서비스를 쓰는 회사들을 보여줍니다.

<main class="stage">
  <div class="logotrust">
    <figure class="logotrust__quote">
      <blockquote>"온보딩이 하루 만에 끝났습니다"</blockquote>
      <figcaption>— 니임버스 · 운영팀장</figcaption>
    </figure>
    <div class="logotrust__viewport">
      <div class="logotrust__track" aria-hidden="true">
        <span class="logotrust__chip">Nimbus</span>
        <span class="logotrust__chip">Ledger</span>
        <span class="logotrust__chip">Northwind</span>
        <span class="logotrust__chip">Vertex</span>
        <span class="logotrust__chip">Harborline</span>
        <span class="logotrust__chip">Anchorpay</span>
        <span class="logotrust__chip">Nimbus</span>
        <span class="logotrust__chip">Ledger</span>
        <span class="logotrust__chip">Northwind</span>
        <span class="logotrust__chip">Vertex</span>
        <span class="logotrust__chip">Harborline</span>
        <span class="logotrust__chip">Anchorpay</span>
      </div>
    </div>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: 6s;    // 열두 칩(원본6+복제6)이 한 바퀴 도는 시간 — $dur-loop 보다 길어야 흐름이 자연스럽다(합치지 않는다, 규칙2)
$easing: linear;
$color: $subject-blue;

$trust-graytint: #f1f5f9;
$trust-ink:      $subject-ink;
$trust-slate:    #475569;
$trust-blue:     $subject-blue;

@include stage($trust-graytint);

.logotrust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-4;
  width: 320px;
}
.logotrust__quote {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  padding: $sp-3 $sp-4;
  border-radius: $r-card;
  background: $stage-paper;
  box-shadow: 0 8px 18px rgba($trust-ink, .07);
  text-align: center;
}
.logotrust__quote blockquote {
  margin: 0 0 $sp-1;
  color: $trust-ink;
  font-weight: 700; font-size: 13px; line-height: 1.4;
  font-family: inherit;
}
.logotrust__quote figcaption {
  color: $trust-slate;
  font-weight: 500; font-size: 11px; line-height: 1.3;
  font-family: inherit;
}
.logotrust__viewport {
  width: 100%;
  overflow: hidden;
}
.logotrust__track {
  display: flex;
  width: max-content;
  animation: scrollLogos $duration $easing infinite;
}
.logotrust__chip {
  flex: 0 0 auto;
  margin-right: $sp-3;
  border-radius: $r-pill;
  background: $stage-paper;
  color: $trust-slate;
  padding: $sp-1 $sp-4;
  font-weight: 700; font-size: 12px; line-height: 1.6;
  font-family: inherit;
  box-shadow: 0 4px 10px rgba($trust-ink, .06);
}
.logotrust__chip:hover {
  color: $trust-blue;
  box-shadow: 0 6px 14px rgba($trust-blue, .18);
}

// 데모: 원본 6개 + 복제 6개를 이어 붙여 -50% 만큼 옮기면 이음새 없이 무한히 흐른다. 간격은 flex gap 대신 margin-right(BD15)
@keyframes scrollLogos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 340px), (max-height: 220px) {
  .logotrust { width: 260px; gap: $sp-2; }
  .logotrust__quote { padding: $sp-2 $sp-3; }
  .logotrust__quote blockquote { font-size: 11px; }
  .logotrust__chip { padding: 4px $sp-3; font-size: 11px; margin-right: $sp-2; }
}

@media (prefers-reduced-motion: reduce) {
  .logotrust__track { animation: none !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #f1f5f9;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.logotrust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 320px;
}

.logotrust__quote {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(23, 20, 26, 0.07);
  text-align: center;
}

.logotrust__quote blockquote {
  margin: 0 0 4px;
  color: #17141a;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  font-family: inherit;
}

.logotrust__quote figcaption {
  color: #475569;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
  font-family: inherit;
}

.logotrust__viewport {
  width: 100%;
  overflow: hidden;
}

.logotrust__track {
  display: flex;
  width: max-content;
  animation: scrollLogos 6s linear infinite;
}

.logotrust__chip {
  flex: 0 0 auto;
  margin-right: 12px;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  padding: 4px 16px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.6;
  font-family: inherit;
  box-shadow: 0 4px 10px rgba(23, 20, 26, 0.06);
}

.logotrust__chip:hover {
  color: #2f6df6;
  box-shadow: 0 6px 14px rgba(47, 109, 246, 0.18);
}

@keyframes scrollLogos {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .logotrust {
    width: 260px;
    gap: 8px;
  }
  .logotrust__quote {
    padding: 8px 12px;
  }
  .logotrust__quote blockquote {
    font-size: 11px;
  }
  .logotrust__chip {
    padding: 4px 12px;
    font-size: 11px;
    margin-right: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .logotrust__track {
    animation: none !important;
  }
}

import type { CSSProperties } from "react";
import styles from "./LogoTrust.module.scss";

export type LogoTrustProps = {
  quote?: string;
  author?: string;
  logos?: string[];
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function LogoTrust({
  quote = '"온보딩이 하루 만에 끝났습니다"',
  author = "— 니임버스 · 운영팀장",
  logos = ["Nimbus", "Ledger", "Northwind", "Vertex", "Harborline", "Anchorpay"],
  duration = 6000,
  easing = "linear",
  color = "#2f6df6",
}: LogoTrustProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  const doubled = [...logos, ...logos];
  return (
    <div className={styles.wrap} style={vars}>
      <figure className={styles.quote}>
        <blockquote>{quote}</blockquote>
        <figcaption>{author}</figcaption>
      </figure>
      <div className={styles.viewport}>
        <div className={styles.track} aria-hidden="true">
          {doubled.map((name, i) => (
            <span key={`${name}-${i}`} className={styles.chip}>{name}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

새 창에서 열기

06 · 로고 신뢰 후기 — 측정 누적면적 5.942% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

무한 로고 마퀴grayscale 호버 해제margin-right 간격

어디를 바꾸면 되나

마우스를 올린 칩만 파란색으로 돌아와 눈길을 받습니다.

<div class="track flex w-max" style="animation: scrollLogos 6s linear infinite">
  <span class="mr-3 shrink-0 rounded-pill bg-white px-5 py-2 text-xs
               font-bold text-slate shadow-soft-sm">Nimbus</span>
  <!-- 원본 6개 다음 복제본 6개를 그대로 이어 붙인다 -->
</div>

07솔리드 CTA 밴드

무엇이 보이나

밴드 배경을 그라디언트 없이 브랜드 파란색 단색으로 채우고, 안의 흰 버튼만 눌렸다가 떠오르기를 반복합니다.

<main class="stage">
  <section class="ctaband">
    <h2 class="ctaband__title">지금 무료로 시작하세요</h2>
    <p class="ctaband__desc">신용카드 없이 14일 체험</p>
    <button class="ctaband__btn" type="button">데모 신청</button>
  </section>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;
$easing: $ease-out;
$color: $subject-blue;

$trust-bluetint: #eaf1ff;
$trust-blue-deep: #7386ba;

@include stage($trust-bluetint);

.ctaband {
  box-sizing: border-box;
  width: clamp(240px, 82vw, 340px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-2;
  padding: $sp-6 $sp-4;
  border-radius: $r-card;
  background: $trust-blue-deep;
  text-align: center;
  box-shadow: 0 16px 30px rgba($trust-blue-deep, .32);
}
.ctaband__title {
  margin: 0;
  color: $stage-paper;
  font-weight: 700; font-size: clamp(16px, 4.4vw, 21px); line-height: 1.3;
  font-family: inherit;
}
.ctaband__desc {
  margin: 0;
  color: rgba($stage-paper, .82);
  font-weight: 500; font-size: clamp(11px, 2.8vw, 13px); line-height: 1.4;
  font-family: inherit;
}
.ctaband__btn {
  margin-top: $sp-1;
  border: 0;
  border-radius: $r-pill;
  background: $stage-paper;
  color: $trust-blue-deep;
  padding: $sp-2 $sp-6;
  font-weight: 700; font-size: clamp(12px, 2.8vw, 14px); line-height: 1;
  font-family: inherit;
  box-shadow: 0 6px 14px rgba(23, 20, 26, .18);
  animation: btnLift $duration $easing infinite;
}
.ctaband__btn:focus-visible {
  outline: 3px solid $stage-paper;
  outline-offset: 2px;
}

// 데모: 흰 버튼만 눌렸다 떠오르기를 반복한다 — 배경은 그라디언트 없이 진한 파란 단색 그대로 고정
@keyframes btnLift {
  0%, 100% { transform: translateY(0); box-shadow: 0 6px 14px rgba(23, 20, 26, .18); }
  50%      { transform: translateY(-4px); box-shadow: 0 12px 22px rgba(23, 20, 26, .24); }
}

@media (max-width: 340px), (max-height: 220px) {
  .ctaband { padding: $sp-4 $sp-3; gap: $sp-1; }
  .ctaband__desc { display: none; }
  .ctaband__btn { padding: $sp-1 $sp-4; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ctaband__btn { animation: none !important; transform: none; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #eaf1ff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.ctaband {
  box-sizing: border-box;
  width: clamp(240px, 82vw, 340px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  border-radius: 16px;
  background: #7386ba;
  text-align: center;
  box-shadow: 0 16px 30px rgba(115, 134, 186, 0.32);
}

.ctaband__title {
  margin: 0;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(16px, 4.4vw, 21px);
  line-height: 1.3;
  font-family: inherit;
}

.ctaband__desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  font-size: clamp(11px, 2.8vw, 13px);
  line-height: 1.4;
  font-family: inherit;
}

.ctaband__btn {
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #7386ba;
  padding: 8px 24px;
  font-weight: 700;
  font-size: clamp(12px, 2.8vw, 14px);
  line-height: 1;
  font-family: inherit;
  box-shadow: 0 6px 14px rgba(23, 20, 26, 0.18);
  animation: btnLift 2s ease-out infinite;
}

.ctaband__btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

@keyframes btnLift {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(23, 20, 26, 0.18);
  }
  50% {
    transform: translateY(-4px);
    box-shadow: 0 12px 22px rgba(23, 20, 26, 0.24);
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .ctaband {
    padding: 16px 12px;
    gap: 4px;
  }
  .ctaband__desc {
    display: none;
  }
  .ctaband__btn {
    padding: 4px 16px;
    margin-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ctaband__btn {
    animation: none !important;
    transform: none;
  }
}

import type { CSSProperties } from "react";
import styles from "./CtaBandTrust.module.scss";

export type CtaBandTrustProps = {
  title?: string;
  desc?: string;
  cta?: string;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function CtaBandTrust({
  title = "지금 무료로 시작하세요",
  desc = "신용카드 없이 14일 체험",
  cta = "데모 신청",
  duration = 2000,
  easing = "ease-out",
  color = "#1d4ed8",
}: CtaBandTrustProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  return (
    <section className={styles.band} style={vars}>
      <h2 className={styles.title}>{title}</h2>
      <p className={styles.desc}>{desc}</p>
      <button type="button" className={styles.btn}>{cta}</button>
    </section>
  );
}

새 창에서 열기

07 · 솔리드 CTA 밴드 — 측정 누적면적 1.019% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

단색 배경버튼 lift 호버radius pill

코드에서 볼 곳

색을 하나로 줄이는 것이 이 스타일의 절제입니다.

<div class="rounded-card bg-brand-deep px-10 py-14 shadow-brand-deep text-center">
  <h2 class="text-3xl font-bold text-white">지금 무료로 시작하세요</h2>
  <button class="mt-4 rounded-pill bg-white px-8 py-3 text-sm font-bold text-brand-deep">데모 신청</button>
</div>

08미니멀 4열 푸터

화면에서 일어나는 일

옅은 회색 구분선 하나 위에 4열 링크 목록을 놓고, 소셜 아이콘 원은 마우스를 올리면(데모에서는 순서대로 자동으로) 배경이 파랗게 채워지며 살짝 커집니다.

<main class="stage">
  <footer class="footertrust">
    <div class="footertrust__rule" aria-hidden="true"></div>
    <div class="footertrust__cols">
      <div class="footertrust__col"><p>제품</p><p>기능</p></div>
      <div class="footertrust__col"><p>회사</p><p>소개</p></div>
      <div class="footertrust__col"><p>도움말</p><p>문의</p></div>
    </div>
    <div class="footertrust__social">
      <span class="footertrust__icon footertrust__icon--1" 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="m240 72l-32 32c-4.26 66.84-60.08 120-128 120c-32 0-40-12-40-12s32-12 48-36c0 0-55.15-32-47.22-120c0 0 39.66 40 87.22 48V88c0-22 18-40.27 40-40a40.74 40.74 0 0 1 36.67 24Z" opacity=".2"/><path d="M247.39 68.94A8 8 0 0 0 240 64h-30.43a48.65 48.65 0 0 0-41.47-24a46.87 46.87 0 0 0-33.74 13.7A47.87 47.87 0 0 0 120 88v6.09C79.74 83.47 46.81 50.72 46.46 50.37a8 8 0 0 0-13.65 4.92c-4.3 47.79 9.57 79.77 22 98.18a111 111 0 0 0 21.89 24.2c-15.27 17.53-39.25 26.74-39.5 26.84a8 8 0 0 0-3.85 11.93c.74 1.12 3.75 5.05 11.08 8.72C53.51 229.7 65.48 232 80 232c70.68 0 129.72-54.42 135.76-124.44l29.9-29.9a8 8 0 0 0 1.73-8.72m-45 29.41a8 8 0 0 0-2.32 5.14C196 166.58 143.28 216 80 216c-10.56 0-18-1.4-23.22-3.08c11.52-6.25 27.56-17 37.88-32.48a8 8 0 0 0-2.61-11.34c-.13-.08-12.86-7.74-24.48-25.29C54.54 124.11 48 100.38 48 73.09c16 13 45.25 33.18 78.69 38.8A8 8 0 0 0 136 104V88a32 32 0 0 1 9.6-22.92A30.9 30.9 0 0 1 167.9 56c12.66.16 24.49 7.88 29.44 19.21a8 8 0 0 0 7.33 4.79h16Z"/></g></svg></span>
      <span class="footertrust__icon footertrust__icon--2" 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="M224 40v176a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8V40a8 8 0 0 1 8-8h176a8 8 0 0 1 8 8" opacity=".2"/><path d="M216 24H40a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V40a16 16 0 0 0-16-16m0 192H40V40h176zM96 112v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0m88 28v36a8 8 0 0 1-16 0v-36a20 20 0 0 0-40 0v36a8 8 0 0 1-16 0v-64a8 8 0 0 1 15.79-1.78A36 36 0 0 1 184 140m-84-56a12 12 0 1 1-12-12a12 12 0 0 1 12 12"/></g></svg></span>
      <span class="footertrust__icon footertrust__icon--3" 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="M208 104v8a48 48 0 0 1-48 48h-24a32 32 0 0 1 32 32v40h-64v-40a32 32 0 0 1 32-32h-24a48 48 0 0 1-48-48v-8a49.3 49.3 0 0 1 8.51-27.3A51.92 51.92 0 0 1 76 32a52 52 0 0 1 43.83 24h32.34A52 52 0 0 1 196 32a51.92 51.92 0 0 1 3.49 44.7A49.3 49.3 0 0 1 208 104" opacity=".2"/><path d="M208.3 75.68A59.74 59.74 0 0 0 202.93 28a8 8 0 0 0-6.93-4a59.75 59.75 0 0 0-48 24h-24a59.75 59.75 0 0 0-48-24a8 8 0 0 0-6.93 4a59.78 59.78 0 0 0-5.38 47.68A58.14 58.14 0 0 0 56 104v8a56.06 56.06 0 0 0 48.44 55.47A39.8 39.8 0 0 0 96 192v8H72a24 24 0 0 1-24-24a40 40 0 0 0-40-40a8 8 0 0 0 0 16a24 24 0 0 1 24 24a40 40 0 0 0 40 40h24v16a8 8 0 0 0 16 0v-40a24 24 0 0 1 48 0v40a8 8 0 0 0 16 0v-40a39.8 39.8 0 0 0-8.44-24.53A56.06 56.06 0 0 0 216 112v-8a58 58 0 0 0-7.7-28.32M200 112a40 40 0 0 1-40 40h-48a40 40 0 0 1-40-40v-8a41.74 41.74 0 0 1 6.9-22.48a8 8 0 0 0 1.1-7.69a43.8 43.8 0 0 1 .79-33.58a43.88 43.88 0 0 1 32.32 20.06a8 8 0 0 0 6.71 3.69h32.35a8 8 0 0 0 6.74-3.69a43.87 43.87 0 0 1 32.32-20.06a43.8 43.8 0 0 1 .77 33.58a8.09 8.09 0 0 0 1 7.65a41.76 41.76 0 0 1 7 22.52Z"/></g></svg></span>
    </div>
  </footer>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;
$easing: $ease-out;
$color: $subject-blue;

$trust-offwhite: #f7f9fc;
$trust-ink:      $subject-ink;
$trust-slate:    #475569;
$trust-blue:     $subject-blue;

@include stage($trust-offwhite);

.footertrust {
  box-sizing: border-box;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: $sp-3;
}
.footertrust__rule {
  height: 1px;
  background: #e2e8f0;
}
.footertrust__cols {
  display: flex;
  justify-content: space-between;
  gap: $sp-2;
}
.footertrust__col p {
  margin: 0 0 $sp-1;
  color: $trust-slate;
  font-weight: 600; font-size: 11px; line-height: 1.5;
  font-family: inherit;
}
.footertrust__col p:first-child { color: $trust-ink; font-weight: 700; }
.footertrust__social {
  display: flex;
  gap: $sp-4;
}
.footertrust__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e2e8f0;
  color: $trust-slate;
  font-size: 18px;
  animation: iconFill $duration $easing infinite;
}
.footertrust__icon--1 { animation-delay: 0s; }
.footertrust__icon--2 { animation-delay: $duration * -0.66; }
.footertrust__icon--3 { animation-delay: $duration * -0.33; }

// 데모: 소셜 아이콘 원이 순서대로 파랗게 채워지며 커졌다 돌아온다. 장식은 구분선 하나뿐이다
@keyframes iconFill {
  0%, 60%, 100% { transform: translateY(0) scale(1); background: #e2e8f0; color: #475569; }
  20%           { transform: translateY(-5px) scale(1.35); background: $trust-blue; color: #ffffff; }
}

@media (max-width: 340px), (max-height: 220px) {
  .footertrust { width: 264px; gap: $sp-2; }
  .footertrust__icon { width: 32px; height: 32px; font-size: 14px; }
  .footertrust__social { gap: $sp-3; }
}

@media (prefers-reduced-motion: reduce) {
  .footertrust__icon { animation: none !important; transform: none; background: #e2e8f0; color: #475569; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #f7f9fc;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.footertrust {
  box-sizing: border-box;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footertrust__rule {
  height: 1px;
  background: #e2e8f0;
}

.footertrust__cols {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.footertrust__col p {
  margin: 0 0 4px;
  color: #475569;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.5;
  font-family: inherit;
}

.footertrust__col p:first-child {
  color: #17141a;
  font-weight: 700;
}

.footertrust__social {
  display: flex;
  gap: 16px;
}

.footertrust__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 18px;
  animation: iconFill 2s ease-out infinite;
}

.footertrust__icon--1 {
  animation-delay: 0s;
}

.footertrust__icon--2 {
  animation-delay: -1.32s;
}

.footertrust__icon--3 {
  animation-delay: -0.66s;
}

@keyframes iconFill {
  0%, 60%, 100% {
    transform: translateY(0) scale(1);
    background: #e2e8f0;
    color: #475569;
  }
  20% {
    transform: translateY(-5px) scale(1.35);
    background: #2f6df6;
    color: #ffffff;
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .footertrust {
    width: 264px;
    gap: 8px;
  }
  .footertrust__icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .footertrust__social {
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .footertrust__icon {
    animation: none !important;
    transform: none;
    background: #e2e8f0;
    color: #475569;
  }
}

import type { CSSProperties } from "react";
import styles from "./FooterTrust.module.scss";

export type FooterTrustProps = {
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

const ICONS = [
  <svg key="tw" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="m240 72l-32 32c-4.26 66.84-60.08 120-128 120c-32 0-40-12-40-12s32-12 48-36c0 0-55.15-32-47.22-120c0 0 39.66 40 87.22 48V88c0-22 18-40.27 40-40a40.74 40.74 0 0 1 36.67 24Z" opacity=".2"/><path d="M247.39 68.94A8 8 0 0 0 240 64h-30.43a48.65 48.65 0 0 0-41.47-24a46.87 46.87 0 0 0-33.74 13.7A47.87 47.87 0 0 0 120 88v6.09C79.74 83.47 46.81 50.72 46.46 50.37a8 8 0 0 0-13.65 4.92c-4.3 47.79 9.57 79.77 22 98.18a111 111 0 0 0 21.89 24.2c-15.27 17.53-39.25 26.74-39.5 26.84a8 8 0 0 0-3.85 11.93c.74 1.12 3.75 5.05 11.08 8.72C53.51 229.7 65.48 232 80 232c70.68 0 129.72-54.42 135.76-124.44l29.9-29.9a8 8 0 0 0 1.73-8.72m-45 29.41a8 8 0 0 0-2.32 5.14C196 166.58 143.28 216 80 216c-10.56 0-18-1.4-23.22-3.08c11.52-6.25 27.56-17 37.88-32.48a8 8 0 0 0-2.61-11.34c-.13-.08-12.86-7.74-24.48-25.29C54.54 124.11 48 100.38 48 73.09c16 13 45.25 33.18 78.69 38.8A8 8 0 0 0 136 104V88a32 32 0 0 1 9.6-22.92A30.9 30.9 0 0 1 167.9 56c12.66.16 24.49 7.88 29.44 19.21a8 8 0 0 0 7.33 4.79h16Z"/></g></svg>,
  <svg key="li" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M224 40v176a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8V40a8 8 0 0 1 8-8h176a8 8 0 0 1 8 8" opacity=".2"/><path d="M216 24H40a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V40a16 16 0 0 0-16-16m0 192H40V40h176zM96 112v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0m88 28v36a8 8 0 0 1-16 0v-36a20 20 0 0 0-40 0v36a8 8 0 0 1-16 0v-64a8 8 0 0 1 15.79-1.78A36 36 0 0 1 184 140m-84-56a12 12 0 1 1-12-12a12 12 0 0 1 12 12"/></g></svg>,
  <svg key="gh" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M208 104v8a48 48 0 0 1-48 48h-24a32 32 0 0 1 32 32v40h-64v-40a32 32 0 0 1 32-32h-24a48 48 0 0 1-48-48v-8a49.3 49.3 0 0 1 8.51-27.3A51.92 51.92 0 0 1 76 32a52 52 0 0 1 43.83 24h32.34A52 52 0 0 1 196 32a51.92 51.92 0 0 1 3.49 44.7A49.3 49.3 0 0 1 208 104" opacity=".2"/><path d="M208.3 75.68A59.74 59.74 0 0 0 202.93 28a8 8 0 0 0-6.93-4a59.75 59.75 0 0 0-48 24h-24a59.75 59.75 0 0 0-48-24a8 8 0 0 0-6.93 4a59.78 59.78 0 0 0-5.38 47.68A58.14 58.14 0 0 0 56 104v8a56.06 56.06 0 0 0 48.44 55.47A39.8 39.8 0 0 0 96 192v8H72a24 24 0 0 1-24-24a40 40 0 0 0-40-40a8 8 0 0 0 0 16a24 24 0 0 1 24 24a40 40 0 0 0 40 40h24v16a8 8 0 0 0 16 0v-40a24 24 0 0 1 48 0v40a8 8 0 0 0 16 0v-40a39.8 39.8 0 0 0-8.44-24.53A56.06 56.06 0 0 0 216 112v-8a58 58 0 0 0-7.7-28.32M200 112a40 40 0 0 1-40 40h-48a40 40 0 0 1-40-40v-8a41.74 41.74 0 0 1 6.9-22.48a8 8 0 0 0 1.1-7.69a43.8 43.8 0 0 1 .79-33.58a43.88 43.88 0 0 1 32.32 20.06a8 8 0 0 0 6.71 3.69h32.35a8 8 0 0 0 6.74-3.69a43.87 43.87 0 0 1 32.32-20.06a43.8 43.8 0 0 1 .77 33.58a8.09 8.09 0 0 0 1 7.65a41.76 41.76 0 0 1 7 22.52Z"/></g></svg>,
];

export default function FooterTrust({ duration = 2000, easing = "ease-out", color = "#2f6df6" }: FooterTrustProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  const cols = [
    { h: "제품", items: ["기능"] },
    { h: "회사", items: ["소개"] },
    { h: "도움말", items: ["문의"] },
  ];
  const delays = [0, -1320, -660];
  return (
    <footer className={styles.footer} style={vars}>
      <div className={styles.rule} aria-hidden="true" />
      <div className={styles.cols}>
        {cols.map((c) => (
          <div key={c.h} className={styles.col}>
            <p>{c.h}</p>
            {c.items.map((it) => <p key={it}>{it}</p>)}
          </div>
        ))}
      </div>
      <div className={styles.social}>
        {ICONS.map((icon, i) => (
          <span key={i} className={styles.icon} style={{ animationDelay: `${delays[i]}ms` }} aria-hidden="true">
            {icon}
          </span>
        ))}
      </div>
    </footer>
  );
}

새 창에서 열기

08 · 미니멀 4열 푸터 — 측정 누적면적 4.968% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

단일 구분선아이콘 배경 채움4열→1열

코드 읽는 법

장식은 구분선 하나뿐입니다.

<div class="grid h-9 w-9 place-items-center rounded-full bg-graytint text-slate
            transition hover:bg-brand hover:text-white">
  <svg><!-- ph:twitter-logo-duotone --></svg>
</div>

09클린 버튼·인풋

어떤 움직임인가

버튼은 마우스를 올리면 배경이 짙어지며 1px 위로 떠오르고, 입력창은 포커스를 받으면 얇은 회색 테두리가 파란 두 겹 링으로 부드럽게 바뀝니다.

<main class="stage">
  <div class="controls">
    <label class="controls__field">
      <span class="controls__label">이메일</span>
      <input class="controls__input" type="text" placeholder="[email protected]">
    </label>
    <button class="controls__btn" type="button">계속하기</button>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;
$easing: $ease-out;
$color: $subject-blue;

$trust-mint:  #eaf6f1;
$trust-ink:   $subject-ink;
$trust-slate: #475569;
$trust-blue:  $subject-blue;
$trust-blue-deep: #7386ba;

@include stage($trust-mint);

.controls {
  box-sizing: border-box;
  width: clamp(220px, 78vw, 280px);
  display: flex;
  flex-direction: column;
  gap: $sp-4;
}
.controls__field {
  display: flex;
  flex-direction: column;
  gap: $sp-1;
}
.controls__label {
  color: $trust-slate;
  font-weight: 600; font-size: 11px; line-height: 1.4;
  font-family: inherit;
}
.controls__input {
  box-sizing: border-box;
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border-radius: $r-sm;
  background: $stage-paper;
  color: $trust-ink;
  padding: $sp-2 $sp-3;
  font-weight: 500; font-size: 13px; line-height: 1.4;
  font-family: inherit;
  outline: none;
  animation: ringPulse $duration $easing infinite;
}
.controls__input::placeholder {
  color: $trust-slate;
  opacity: .65;
}
.controls__btn {
  border: 0;
  border-radius: $r-control;
  background: $trust-blue;
  color: $stage-paper;
  padding: $sp-2 $sp-5;
  font-weight: 700; font-size: 13px; line-height: 1;
  font-family: inherit;
  box-shadow: 0 6px 14px rgba($trust-blue, .28);
  animation: btnDarken $duration $easing infinite;
}

// 데모: 입력창은 포커스를 받은 것처럼 얇은 테두리가 두 겹 파란 링으로 부드럽게 퍼졌다 가라앉고, 버튼은 배경이 살짝 짙어지며 1px 떠오른다
@keyframes ringPulse {
  0%, 60%, 100% { border-color: #e2e8f0; box-shadow: none; }
  25%           { border-color: $trust-blue; box-shadow: 0 0 0 4px rgba(47, 109, 246, .18); }
}
@keyframes btnDarken {
  0%, 60%, 100% { transform: translateY(0); background: $trust-blue; box-shadow: 0 6px 14px rgba(47, 109, 246, .28); }
  25%           { transform: translateY(-1px); background: #7386ba; box-shadow: 0 10px 18px rgba(29, 78, 216, .34); }
}

@media (max-width: 340px), (max-height: 220px) {
  .controls { gap: $sp-2; }
  .controls__input { padding: $sp-1 $sp-2; }
  .controls__btn { padding: $sp-1 $sp-4; }
}

@media (prefers-reduced-motion: reduce) {
  .controls__input, .controls__btn { animation: none !important; transform: none; }
  .controls__input { border-color: #e2e8f0; box-shadow: none; }
  .controls__btn { background: $trust-blue; }
}

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);
}

.controls {
  box-sizing: border-box;
  width: clamp(220px, 78vw, 280px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.controls__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.controls__label {
  color: #475569;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  font-family: inherit;
}

.controls__input {
  box-sizing: border-box;
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #17141a;
  padding: 8px 12px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  font-family: inherit;
  outline: none;
  animation: ringPulse 2s ease-out infinite;
}

.controls__input::placeholder {
  color: #475569;
  opacity: 0.65;
}

.controls__btn {
  border: 0;
  border-radius: 12px;
  background: #2f6df6;
  color: #ffffff;
  padding: 8px 20px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
  box-shadow: 0 6px 14px rgba(47, 109, 246, 0.28);
  animation: btnDarken 2s ease-out infinite;
}

@keyframes ringPulse {
  0%, 60%, 100% {
    border-color: #e2e8f0;
    box-shadow: none;
  }
  25% {
    border-color: #2f6df6;
    box-shadow: 0 0 0 4px rgba(47, 109, 246, 0.18);
  }
}
@keyframes btnDarken {
  0%, 60%, 100% {
    transform: translateY(0);
    background: #2f6df6;
    box-shadow: 0 6px 14px rgba(47, 109, 246, 0.28);
  }
  25% {
    transform: translateY(-1px);
    background: #7386ba;
    box-shadow: 0 10px 18px rgba(29, 78, 216, 0.34);
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .controls {
    gap: 8px;
  }
  .controls__input {
    padding: 4px 8px;
  }
  .controls__btn {
    padding: 4px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .controls__input, .controls__btn {
    animation: none !important;
    transform: none;
  }
  .controls__input {
    border-color: #e2e8f0;
    box-shadow: none;
  }
  .controls__btn {
    background: #2f6df6;
  }
}

import type { CSSProperties } from "react";
import styles from "./ButtonsInputsTrust.module.scss";

export type ButtonsInputsTrustProps = {
  label?: string;
  placeholder?: string;
  cta?: string;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function ButtonsInputsTrust({
  label = "이메일",
  placeholder = "[email protected]",
  cta = "계속하기",
  duration = 2000,
  easing = "ease-out",
  color = "#2f6df6",
}: ButtonsInputsTrustProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  return (
    <div className={styles.controls} style={vars}>
      <label className={styles.field}>
        <span className={styles.label}>{label}</span>
        <input className={styles.input} type="text" placeholder={placeholder} />
      </label>
      <button type="button" className={styles.btn}>{cta}</button>
    </div>
  );
}

새 창에서 열기

09 · 클린 버튼·인풋 — 측정 누적면적 10.641% · 움직인 프레임 12/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

1px lift 호버focus 2중 링radius 12

어디를 바꾸면 되나

신뢰 키트의 손맛을 하나로 묶은 항목입니다.

<input class="w-full rounded-control border border-border bg-white px-4 py-3
              text-sm outline-none focus:border-brand
              focus:ring-4 focus:ring-brand/20" placeholder="[email protected]">
<button class="rounded-control bg-brand px-6 py-3 text-sm font-bold text-white
               shadow-brand hover:bg-brand-deep hover:-translate-y-px">계속하기</button>

tailwind.config 커스텀

배경 두 톤과 브랜드 블루 하나, 그림자 네 종(회색 shadow-soft·shadow-soft-sm 둘, 브랜드 블루가 섞인 shadow-brand·shadow-brand-deep 둘)을 이 한 곳에 적어 두면 원페이지와 부품 아홉 개가 전부 같은 절제를 따라갑니다. 히어로 CTA·프로 요금제 카드·CTA 밴드·버튼처럼 강조가 필요한 자리에만 브랜드 그림자를 쓰고 나머지는 회색 그림자로 남깁니다.

theme: {
  extend: {
    colors: {
      offwhite: "#f7f9fc", bluetint: "#eaf1ff", graytint: "#f1f5f9", mint: "#eaf6f1",
      ink: "#17141a", slate: "#475569", brand: "#2f6df6", "brand-deep": "#1d4ed8",
      border: "#e2e8f0",
    },
    borderRadius: { card: "16px", control: "12px", pill: "999px" },
    boxShadow: {
      soft: "0 14px 28px rgba(23,20,26,.08)",
      "soft-sm": "0 8px 16px rgba(23,20,26,.07)",
      brand: "0 10px 22px rgba(47,109,246,.28)",
      "brand-deep": "0 16px 30px rgba(29,78,216,.32)",
    },
  },
},

바이브코딩 프롬프트

위 설정을 프로젝트에 심었다면, Claude Code나 Cursor에 넘길 지시는 아래 한 덩어리로 끝납니다. 규칙이 열 줄인 이유는 캔디·시트러스 계열과 정반대로 "무엇을 안 쓰는지"를 못박아야 하기 때문입니다. 줄이지 않은 원문은 zip 안의 prompt.md 에 들어 있습니다.

배경은 흰색과 offwhite(#f7f9fc) 두 톤만 쓴다. 브랜드 컬러는 brand(#2f6df6) 하나뿐이고
카드는 전부 흰색이다. 그림자는 회색 계열(shadow-soft)로 얕게만 쓰고 색 그림자는 쓰지
않는다. 글자는 ink 또는 slate 고정, brand 를 작은 글자 색으로 쓰지 않는다. 위계는
테두리·그림자 깊이로 만들고 카드 배경색을 바꾸지 않는다.

이 지시를 page/index.html 에 그대로 적용한 뒤 1280px 뷰포트로 전체 페이지를 스크린샷한 결과가 아래 그림입니다.

어디서 깨지는가 — 함정

가장 먼저 겪은 것은 내비 인디케이터의 이동량이었습니다. 처음에는 얇은 밑줄(3px)만 옮겼는데, 렌더된 gif를 눈으로 보니 480×300 무대에서는 잘 보여도 이동 자체가 시각적으로 약해 "움직이는지 모르겠다"는 인상이었습니다. 실측해 보니 밑줄 하나만으로는 누적 변화 면적이 작아서, 탭 너비만큼 넓은 옅은 파란 하이라이트 블록을 밑줄과 같은 박자로 함께 옮기고 나서야 이동이 눈에 들어왔습니다.

두 번째는 화면 폭입니다. 처음 내비 탭 3개를 각각 108px로 두고 좌우 여백까지 더하니 전체 폭이 332px가 되어, 320px 폰 화면 기준에서 12px가 넘쳤습니다. 탭 폭을 92px로 줄이고 전체를 284px로 맞춘 뒤에야 320×200 렌더에서 가로 넘침이 사라졌습니다. 세 번째는 요금제 카드의 "엔터프라이즈"라는 글자였습니다 — 92px 카드 폭 안에서 이 단어가 "엔터프라이 즈"처럼 단어 중간이 줄바꿈되어 어색했고, "기업용"이라는 세 글자로 바꾸고 나서야 한 줄에 들어왔습니다. 이 절제된 파랑이 메일 본문에서 어디까지 버티는지는 뉴스레터 디자인 9종에서 따로 확인했습니다. 이 세 가지를 다 손본 완성본을, 이 비밀번호 8h4q5uur이 걸린 zip을 받아 그대로 열어 확인할 수 있습니다.

아홉 개 데모 전부 MDN prefers-reduced-motion 문서가 정의한 미디어 쿼리를 감지하면 애니메이션을 멈추고 각 요소를 정지 상태(카드는 뜨기 전 위치, 목록 행은 다 나타난 상태, 인풋 링은 사라진 상태)로 되돌려 고정합니다. 동작을 줄인 방문자에게는 카드가 떠오르거나 로고가 흐르는 움직임이 안 보이는 대신, 카드·버튼·입력창 자체의 정보는 그대로 남습니다.

접근성

이 스타일이 접근성 면에서 파스텔·캔디 계열보다 유리한 이유는 배경이 거의 항상 흰색·오프화이트라 대비 계산이 단순해지기 때문입니다. 실제로 계산해 보면, 잉크(#17141a) 글자는 흰 배경에서 18.24:1, 보조 글자로 쓰는 슬레이트(#475569)는 7.58:1로 WCAG 2.1 최소 대비 기준의 본문 기준(4.5:1)을 여유 있게 넘습니다. 다만 브랜드 블루(#2f6df6)를 흰 배경 위에 글자로 직접 쓰면 대비가 4.53:1로 기준선에 딱 걸쳐 있어, 이 편의 코드는 브랜드 블루를 버튼·아이콘·테두리 같은 큰 면적이나 굵은 강조에만 쓰고 본문 글자 색으로는 절대 쓰지 않았습니다. CTA 밴드처럼 브랜드 블루를 배경으로 쓸 때는 더 짙은 블루 딥(#1d4ed8)을 써서 흰 글자와 6.70:1을 확보했습니다. MDN box-shadow 문서가 안내하는 문법대로 그림자 투명도를 0.07~0.32로 낮춰 테두리 역할을 대신하지 않게 했고, 버튼·입력창의 키보드 초점은 :focus-visible 아웃라인과 두 겹 파란 링으로 별도로 그렸습니다.

신뢰감 있는 SaaS 랜딩 말고 다른 홈페이지 유행이 궁금하면 디자인 트렌드 카테고리를 훑어보시고, 이 블로그가 통째로 뭘 다루는지는 소개 페이지에 정리해 뒀습니다.

FAQ

깔끔한 웹디자인인데 밝은 톤이면 파스텔 캔디처럼 보이지 않나요?

밝기의 원천이 다르기 때문입니다. 파스텔 캔디는 여러 색(핑크·레몬·민트·라벤더)을 카드마다 다르게 써서 밝고 귀엽게 보이고, 이 스타일은 배경을 흰색·오프화이트 두 톤으로 고정하고 브랜드 컬러 하나만 더해 밝으면서도 색 수를 최소화합니다. 색이 많을수록 캐주얼해지고, 색이 적을수록 진지해집니다. 신뢰를 색이 아니라 사람 목소리로 세우는 구간은 고객 후기 디자인 패턴 9종이 맡습니다.

파란색 대신 다른 브랜드 컬러를 써도 되나요?

됩니다. 다만 흰 배경 위 텍스트로 쓸 색이라면 4.5:1 대비를 반드시 계산해야 합니다. 이 편의 블루(#2f6df6)는 4.53:1로 기준선에 걸쳐 있어 본문 글자에는 쓰지 않았는데, 예를 들어 초록이나 보라 계열은 같은 밝기에서 대비가 더 낮게 나올 수 있어 직접 계산 없이 옮기면 안 됩니다.

카드마다 옅은 색 배경을 넣어도 신뢰감 스타일인가요?

카드 표면 자체를 색으로 채우면 이 스타일에서 벗어납니다. 이 키트에서 카드는 항상 흰색이고, 옅은 색은 무대(카드 바깥의 큰 배경 영역)나 아이콘 원 같은 작은 강조 요소에만 씁니다. 카드 배경까지 물들이는 순간 캔디·프루트 계열의 "귀여운 밝음" 쪽으로 넘어갑니다.