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

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

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

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

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

이 키트의 색은 여덟 개로 끝납니다. 브랜드 컬러를 작은 글자에 직접 쓰지 않는 것이 읽히는 신뢰감의 조건입니다.

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

01소프트 그리드 히어로

오프화이트 배경 위에 아주 옅은 점 격자가 깔리고, 그 앞의 흰 카드가 완만하게 위아래로 떠오릅니다. 그림자는 회색 계열로 얕게, 강조는 파란 배지 하나로만 줍니다.

<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언더라인 내비

메뉴 글자 아래로 파란 밑줄 하나가 활성 탭을 따라 옆칸으로 미끄러져 이동합니다. 실제 데모에서는 밑줄과 함께 옅은 파란 하이라이트 블록도 같은 박자로 움직여, 얇은 선 하나만으로는 잘 안 보이는 이동을 눈에 띄게 만듭니다.

<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아이콘 카드 격자

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

<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체크 기능 목록

행마다 민트 배경 원 안에 파란 체크가 그려지고, 목록이 화면에 들어올 때 위에서부터 순서대로 미끄러져 나타났다 사라지기를 반복합니다. 체크는 손으로 그린 도형이 아니라 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심플 요금제

세 요금제를 전부 같은 흰 카드로 두되 추천 플랜만 얇은 파란 테두리와 살짝 짙은 그림자를 얹어 구분합니다. 화려한 배경색 대신 테두리 굵기와 그림자 깊이만으로 위계를 만드는 것이 이 스타일의 핵심입니다.

<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로고 신뢰 후기

후기 카드 위로 회색 로고 칩 여섯 개가 원본과 복제본을 이어 붙여 이음새 없이 무한히 옆으로 흘러가며, 이 서비스를 쓰는 회사들을 보여줍니다. 마우스를 올린 칩만 파란색으로 돌아와 눈길을 받습니다.

<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 밴드

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

<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열 링크 목록을 놓고, 소셜 아이콘 원은 마우스를 올리면(데모에서는 순서대로 자동으로) 배경이 파랗게 채워지며 살짝 커집니다. 장식은 구분선 하나뿐입니다.

<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 위로 떠오르고, 입력창은 포커스를 받으면 얇은 회색 테두리가 파란 두 겹 링으로 부드럽게 바뀝니다. 신뢰 키트의 손맛을 하나로 묶은 항목입니다.

<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 카드 폭 안에서 이 단어가 "엔터프라이 즈"처럼 단어 중간이 줄바꿈되어 어색했고, "기업용"이라는 세 글자로 바꾸고 나서야 한 줄에 들어왔습니다. 이 세 가지를 다 손본 완성본을, 이 비밀번호 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

밝은 톤인데 왜 파스텔 캔디처럼 안 보이나요?

밝기의 원천이 다르기 때문입니다. 파스텔 캔디는 여러 색(핑크·레몬·민트·라벤더)을 카드마다 다르게 써서 밝고 귀엽게 보이고, 이 스타일은 배경을 흰색·오프화이트 두 톤으로 고정하고 브랜드 컬러 하나만 더해 밝으면서도 색 수를 최소화합니다. 색이 많을수록 캐주얼해지고, 색이 적을수록 진지해집니다.

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

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

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

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