파스텔 톤 디자인 랜딩 UI 키트, 캔디 색 섹션 9개

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

파스텔 톤 디자인은 크림색 바탕 위에 버블검 핑크·피치·레몬·민트·라벤더의 연한 색을 얹고, 그림자까지 회색 대신 같은 계열의 파스텔로 그려 사탕처럼 말랑하고 상큼하게 보이게 만드는 스타일입니다.

핀터레스트에 스크린샷으로만 저장해 두던 이 화면을 실제로 만든 원페이지로 아래에 그대로 올렸습니다. 내비게이션에서 푸터까지 스크롤하면서 전체 인상부터 확인해 보세요.

위 화면을 이루는 부품 아홉 개를 하나씩 떼어 격자에 다시 늘어놓았습니다. 방문자가 처음 화면을 열 때 눈길이 가는 차례 — 시선을 끌기, 둘러보기, 가격 확인, 신뢰, 행동 유도, 가입 — 그 순서 그대로입니다. 그중 넷(그라디언트 안개 히어로·캔디 아이콘 목록·캔디 그라디언트 CTA 밴드·스캘럽 가장자리 푸터)은 그림자의 색을 회색에서 파스텔로 바꾸는 것만으로 분위기가 통째로 바뀐다는 이 스타일의 핵심을 애니메이션으로 직접 보여줍니다.

01 hero-candy 02 nav-candy 03 card-grid-candy 04 feature-list-candy 05 pricing-candy 06 testimonial-candy 07 cta-band-candy 08 footer-candy 09 buttons-inputs-candy

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

01 그라디언트 안개 히어로
02 젤리 인디케이터 내비
03 스티커 배지 카드 격자
04 캔디 아이콘 목록
05 마카롱 요금제
06 말풍선 후기
07 캔디 그라디언트 CTA 밴드
08 스캘럽 가장자리 푸터
09 말랑한 버튼·인풋

이 키트 전체의 색은 일곱 개로 끝납니다. 글자는 항상 맨 아래 베리 잉크 하나로 고정하는 것이 읽히는 파스텔의 조건입니다.

역할	색	쓰는 곳
크림	`#fff6f0`	페이지 바탕 전체
버블검 핑크	`#ffb9cf`	주인공 색 — CTA·배지·강조
피치	`#ffd2b8`	카드·말풍선 아바타
레몬	`#ffe9a3`	카드·요금제
민트	`#b5e8d2`	내비 인디케이터·입력창 링
라벤더	`#cdbcf2`	카드·그라디언트 중간색
베리 잉크	`#55395e`	모든 글자 (대비 5.7~9.2:1)

01그라디언트 안개 히어로

크림 바탕 위에 핑크·피치·라벤더 세 색의 흐릿한 원이 안개처럼 떠다니고, 그 앞의 흰 카드가 살짝 들썩입니다. 그림자가 회색이 아니라 핑크색이라는 점이 이 스타일의 첫 신호입니다.

3색 그라디언트 원색 그림자radius 16

<div class="relative mx-auto max-w-xl flex flex-col items-start gap-4
            rounded-candy bg-white p-10 shadow-candy-pink">
  <p class="text-xs font-bold uppercase tracking-widest text-berry/70">Pudding</p>
  <h1 class="text-4xl font-bold">말랑한 게 좋아</h1>
  <button class="rounded-pill bg-white px-6 py-3 text-sm font-bold
                 shadow-candy-berry">무료로 시작</button>
</div>

02젤리 인디케이터 내비

활성 탭을 알려주는 민트색 알약이 옆칸으로 옮겨 갈 때 가로로 살짝 늘어났다가 도착하며 통통하게 줄어듭니다. 젤리를 젓가락으로 집었을 때의 그 탄력을 scaleY 한 줄로 냅니다.

scaleY 스쿼시translateX 25%radius pill

<div class="relative flex flex-1 rounded-pill bg-cream/60 p-1">
  <span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-mint
               shadow-candy-mint"></span>
  <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">홈</span>
</div>

03스티커 배지 카드 격자

카드마다 라벤더·레몬·피치·민트 저마다 다른 파스텔 바탕에 같은 색으로 물든 그림자를 얹고, 모서리에는 점선 테두리 스티커 배지가 붙습니다. 네 카드가 시작 시각을 어긋내 순서대로 들썩입니다.

색별 그림자점선 스티커 배지2열→1열

<div class="relative flex min-h-32 flex-col justify-end gap-2
            rounded-candy bg-lavender p-5 shadow-candy-lavender">
  <span class="absolute -top-2 right-4 rounded-pill border-2 border-dashed
               border-white bg-white px-3 py-1 text-[11px] font-bold
               shadow-candy-pink">NEW</span>
  <p class="text-sm font-bold">귀여운 템플릿</p>
</div>

04캔디 아이콘 목록

행마다 흰 알약 카드가 있고 그 안의 동그란 아이콘이 repeating-conic-gradient로 그린 단단한 사탕 무늬입니다. 아이콘마다 시작 시각을 어긋내 놓으면 사탕이 각자 다른 박자로 통통 튑니다.

radial 사탕 무늬어긋난 바운스radius pill

<li class="flex items-center gap-3 rounded-pill bg-white p-2 pr-5
           shadow-candy-mint">
  <span class="h-9 w-9 shrink-0 rounded-full shadow-inner"
        style="background:repeating-conic-gradient(#ffb9cf 0deg 45deg,
               #ffd2b8 45deg 90deg)"></span>
  <span class="text-sm font-semibold">끌어다 놓기</span>
</li>

05마카롱 요금제

세 요금제를 민트·버블검 핑크·레몬 마카롱처럼 각각 다른 파스텔로 두고, 추천 플랜만 그라디언트 테두리와 인기 배지를 얹어 살짝 크고 통통거립니다. 표 없이 색만으로 어느 플랜이 주인공인지 보입니다.

그라디언트 링살짝 큰 추천 플랜wiggle 애니메이션

<div class="relative flex-[1.2] rounded-candy p-1 shadow-candy-pink"
     style="background:linear-gradient(135deg,#ffb9cf,#cdbcf2)">
  <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-pill
               bg-white px-3 py-1 text-[11px] font-bold shadow-candy-pink">인기</span>
  <div class="flex flex-col gap-1 rounded-candy p-6 text-center"
       style="background:#ffd9e6">
    <p class="text-sm font-bold">버블</p>
  </div>
</div>

06말풍선 후기

후기는 꼬리가 달린 둥근 말풍선에 담고, 옆의 아바타는 사탕 무늬 동그라미입니다. 말풍선이 젤리처럼 세로로 살짝 눌렸다 펴지기를 반복해 페이지 전체가 말랑해 보입니다.

꼬리 말풍선캔디 아바타squish 루프

<figure class="flex items-start gap-4">
  <span class="h-14 w-14 shrink-0 rounded-full shadow-candy-pink"
        style="background:repeating-conic-gradient(#ffd2b8 0deg 60deg,
               #ffe9a3 60deg 120deg)"></span>
  <div class="relative flex-1 rounded-candy bg-white p-5 shadow-candy-pink">
    <span class="absolute left-[-8px] top-3 h-4 w-4 rotate-45
                 rounded-sm bg-white"></span>
    <p class="text-sm font-bold">이 사이트 진짜 귀여워요</p>
  </div>
</figure>

07캔디 그라디언트 CTA 밴드

밴드 하나에 핑크에서 라벤더, 민트로 지나가는 캔디 그라디언트를 깔고 그 위치가 천천히 흐릅니다. 흰 버튼은 살짝 가라앉았다가 제자리로 튀어 오르기를 되풀이합니다.

background-position 흐름press 버튼radius pill

<div class="relative overflow-hidden rounded-candy px-10 py-14
            shadow-candy-lavender"
     style="background:linear-gradient(90deg,#ffb9cf,#cdbcf2,#b5e8d2,
            #cdbcf2,#ffb9cf);background-size:300% 100%">
  <h3 class="text-3xl font-bold">지금 달콤하게 시작하기</h3>
  <button class="rounded-pill bg-white px-8 py-3 text-sm font-bold
                 shadow-candy-berry">시작하기</button>
</div>

08스캘럽 가장자리 푸터

푸터의 윗변을 반원이 죽 이어진 스캘럽 무늬로 띄우는데, 반원 하나하나를 그리는 요소 없이 배경 반복 하나로 그립니다. 안의 칸들은 연보라·연분홍·연초록으로 나뉘고 별이 반짝입니다.

repeating 반원 가장자리3열→1열반짝임 점

.scallop {
  height: 13px;
  background-image: radial-gradient(circle at 50% 100%,
    #f0eaf9 0 64%, transparent 66%);
  background-size: 26px 13px;
  background-repeat: repeat-x;
}

09말랑한 버튼·인풋

버튼은 눌릴 때 몸이 살짝 눌리고 핑크색 그림자도 함께 얕아져 손맛이 나고, 입력창은 포커스를 받으면 민트색 링이 부드럽게 퍼집니다. 파스텔 키트의 손맛을 하나로 묶은 항목입니다.

눌림·그림자 동시 감소focus 링 확산radius 12

<button class="rounded-control bg-white px-6 py-3 text-sm font-bold
               shadow-candy-pink">저장하기</button>
<input class="w-full rounded-control bg-white px-4 py-3 text-sm
              shadow-candy-mint" type="email"
       placeholder="이메일을 적어보세요">

tailwind.config 커스텀

파스텔 일곱 색과 색 그림자 여섯 종을 이 한 곳에 적어 두면 원페이지와 부품 아홉 개가 전부 같은 색 규칙을 따라갑니다. 색 그림자를 매번 새로 쓰지 않고 shadow-candy-* 이름으로 부릅니다.

theme: {
  extend: {
    colors: {
      cream: "#fff6f0", bubble: "#ffb9cf", peach: "#ffd2b8",
      lemon: "#ffe9a3", mint: "#b5e8d2", lavender: "#cdbcf2",
      berry: "#55395e",
    },
    borderRadius: { candy: "24px", control: "12px", pill: "999px" },
    boxShadow: {
      "candy-pink": "0 10px 24px rgba(255,185,207,.55)",
      "candy-mint": "0 10px 24px rgba(181,232,210,.85)",
      "candy-berry": "0 8px 18px rgba(85,57,94,.28)",
    },
  },
},

바이브코딩 프롬프트

config 를 프로젝트에 넣은 뒤 Claude Code·Cursor 에 건네는 말은 아래가 전부입니다. 규칙이 다섯 줄로 끝나는 이유는 config 가 색과 그림자를 이미 정해 두기 때문입니다. 지시문 전문은 zip 의 prompt.md 에 담겨 있습니다.

배경을 cream(#fff6f0) 하나로 통일한다. 카드마다 bubble·peach·lemon·mint·lavender
중 하나를 준다. 그림자는 회색이 아니라 카드와 같은 계열 파스텔 그림자
(shadow-candy-*)를 쓴다. 글자는 항상 berry(#55395e)다 — 파스텔 위 파스텔 글자는
대비가 안 나 안 읽힌다. 모서리는 rounded-candy 또는 rounded-pill 로 통일한다.

이 지시문을 page/index.html 로 실제로 구현해 1280px 화면 전체를 찍은 것이 아래 그림입니다.

어디서 깨지는가 — 함정

첫 번째로 실제로 겪은 것은 내비 인디케이터의 미세한 밀림이었습니다. 알약 폭을 트랙의 4분의 1에서 좌측 여백 4px를 뺀 calc(25% - 4px)로 두고 translateX(100%)로 옮겼는데, 퍼센트 이동은 그 요소 자기 폭을 기준으로 계산되기 때문에 한 칸 이동마다 4px씩 모자라 세 칸을 지날 때는 12px나 앞 칸에 걸쳐 보였습니다. 렌더된 화면을 확대해 보고서야 알았고, 이동량을 calc(100% + 4px)씩 보정해 맞췄습니다.

두 번째는 푸터의 움직임이 사실상 안 보였던 문제였습니다. 별 두 개만 12px 크기로 깜빡이게 두고 움직임을 측정했더니 화면이 바뀐 면적이 0.12%로, 정지 화면과 구분이 안 됐습니다. 세 칸이 순서대로 들썩이는 물결을 더하고 나서야 6.91%로 올라갔습니다. 세 번째는 그라디언트의 이음새입니다. CTA 밴드처럼 그라디언트를 흐르게 할 때 양 끝 색을 다르게 두면 background-position이 한 바퀴 돌아오는 지점에서 색이 튑니다. 양 끝을 같은 색(핑크)으로 두고 background-size: 300%로 늘려 놓아야 이음매 없이 계속 흐릅니다. 이 세 가지를 다 보정한 완성본을, 이 비밀번호 42smbkak이 걸린 zip을 받아 그대로 열어 확인할 수 있습니다.

아홉 개 데모 전부 MDN prefers-reduced-motion 문서가 정의한 미디어 쿼리를 감지하면 동작을 멈추고 각 요소를 애니메이션이 시작되기 전의 정지 상태(카드는 들썩이기 전 위치, 버튼은 눌리기 전 상태)로 되돌려 고정합니다. 동작을 줄인 방문자에게는 안개가 흐르거나 사탕이 튀는 애니메이션이 안 보이는 대신, 카드·버튼·입력창 자체는 그대로 남아 정보가 빠지지 않습니다.

접근성

파스텔 스타일의 가장 흔한 실패는 글자 대비입니다. 흰 글자를 버블검 핑크(#ffb9cf) 위에 올리면 대비가 1.6:1로 WCAG 2.1 최소 대비 기준인 4.5:1에 크게 못 미칩니다. 이 편은 그래서 글자를 전부 짙은 베리 잉크(#55395e)로 고정했습니다. 크림 바탕에서 9.2:1, 이 팔레트에서 가장 어두운 파스텔인 라벤더 위에서도 5.7:1로 본문 기준을 통과합니다. 파스텔은 표면과 장식의 몫이지 글자의 몫이 아닙니다. 색 그림자는 MDN box-shadow 문서가 안내하는 문법 그대로 쓰되 투명도를 0.28~0.9로 낮춰 그림자가 테두리 역할을 대신하지 않게 했고, 키보드 초점은 색 그림자에 의존하지 않고 :focus-visible 아웃라인을 베리 잉크로 별도 그렸습니다.

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

FAQ

파스텔 캔디와 클레이모피즘은 뭐가 다른가요?

클레이모피즘은 카드가 찰흙처럼 부풀어 오른 입체감이 주인공이라 두꺼운 테두리와 안쪽 그림자로 덩어리를 만듭니다. 파스텔 캔디는 평평한 표면에 색과 그림자의 색으로 분위기를 냅니다. 입체감을 과하게 살리면 클레이가 되고, 색만 남기면 캔디가 됩니다.

어두운 브랜드인데 이 스타일을 쓸 수 있나요?

쓸 수 있지만 파스텔 일곱 색을 그대로 가져가면 브랜드와 부딪힙니다. 크림 바탕과 베리 잉크 구조는 유지하고 카드 색만 브랜드 색의 톤을 낮춘 파스텔로 바꾸면 어두운 브랜드에서도 어울립니다. 그림자도 같은 계열로 맞추는 것이 규칙입니다.

글자 크기가 작아지면 어떻게 되나요?

대비 4.5:1은 본문 크기 기준이고, 18px보다 큰 굵은 글자는 3:1만 통과하면 됩니다. 이 키트의 베리 잉크는 어떤 파스텔 위에서든 최소 5.7:1이므로 크기를 줄여도 본문 기준을 유지합니다. 반대로 연한 파스텔 글자는 크기를 키워도 통과하지 못하니 쓰지 않는 것이 정답입니다.