GODRICH

클레이모피즘 랜딩 UI 키트, 통통한 섹션 9개

· Godrich · 9종 · 7분 읽기

디자인 트렌드페이지 템플릿CSS만랜딩 페이지히어로 섹션CTA 버튼

클레이모피즘은 두꺼운 모서리 반경과 밝고 어두운 그림자를 한 면에 같이 얹어, 화면을 손으로 눌러 놓은 찰흙처럼 보이게 하는 디자인 스타일입니다.

핀터레스트·드리블 보드에 계속 다시 올라오는 룩이라, 실제로 만든 원페이지를 아래에 그대로 올렸습니다. 내비게이션에서 푸터까지 쭉 스크롤하면서 전체 인상을 먼저 확인하십시오.

새 창에서 원페이지 열기

이 원페이지를 만드는 데 쓴 조각 아홉 개를 낱개로 분리해 아래 격자에 다시 배열했습니다. 인기순이 아니라 화면을 처음 여는 사람이 실제로 마주치는 순서—시선을 끌기, 둘러보기, 가격 확인, 신뢰, 행동 유도, 가입—를 따라갑니다. 아홉 개 중 세 개(히어로·가격·버튼과 입력창)는 흔한 카드 나열이 아니라 눌림·부유 같은 동작이 붙은 아이디어형입니다.

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

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

01찰흙 도형 히어로

배경에 뜬 유기형 블롭 두 개가 천천히 흔들리고, 헤드라인 카드는 밝은 안쪽 하이라이트와 짙은 바깥 그림자로 눌린 찰흙처럼 붙습니다. 블롭은 border-radius를 퍼센트 여러 개로 섞어 정지 상태에서 만들고, 움직임은 transform만 맡습니다.

blob 부유radius 16이중 그림자
<div class="relative mx-auto max-w-xl flex flex-col items-start gap-4
            rounded-clay bg-white p-10 shadow-clay-raised">
  <p class="text-xs font-bold uppercase text-accent">Claymolt</p>
  <h1 class="text-4xl font-extrabold leading-tight">말랑하게 시작하는 화면</h1>
  <button class="rounded-pill bg-ink px-6 py-3 text-sm font-bold text-cream">
    무료로 시작
  </button>
</div>

02캡슐 내비

메뉴 전체가 알약 모양 캡슐에 담기고, 현재 위치 칩은 안쪽으로 파인 트랙 위에서 옆 칸으로 미끄러집니다. 칩 폭을 25%로 두면 translateX(100%) 한 번이 정확히 이웃 칸 하나를 옮깁니다.

radius 999inset 그림자padding 8px
<nav class="flex items-center gap-4 rounded-pill bg-white/90 px-3 py-2
            shadow-clay-raised">
  <span class="pl-3 font-display font-extrabold text-sm">Claymolt</span>
  <div class="relative flex flex-1 rounded-pill bg-ink/5 p-1 shadow-clay-press">
    <span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-cream
                 shadow-clay-raised"></span>
    <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">홈</span>
  </div>
</nav>

03부풀린 카드

격자의 카드마다 배경에서 볼록 솟아오른 듯 밝은 상단 하이라이트와 짙은 하단 그림자를 동시에 가집니다. 카드마다 애니메이션 시작 시각을 어긋내면 네 칸이 파도처럼 순서대로 부풀어 보입니다.

radius 16hover 승격2열→1열
<div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
  <div class="flex flex-col gap-3 rounded-clay bg-white p-5 shadow-clay-raised">
    <span class="h-7 w-7 rounded-control bg-accent"></span>
    <p class="text-sm font-semibold">빠른 검색</p>
  </div>
</div>

04둥근 아이콘 칩

아이콘마다 둥근 캡슐 칩 안에 얹혀 눌린 스탬프처럼 보이고, 설명 텍스트가 옆으로 붙습니다. 칩 배경에는 안쪽 그림자만 줘서, 튀어나온 카드들 사이에서 유일하게 파묻힌 표면으로 대비를 만듭니다.

radius 999chip 40pxinset 하이라이트
<ul class="flex flex-col gap-3">
  <li class="flex items-center gap-3 rounded-pill bg-white p-2 pr-5
             shadow-clay-raised">
    <span class="h-9 w-9 flex-none rounded-pill bg-accent
                 shadow-clay-press"></span>
    <span class="text-sm font-semibold">빠른 시작</span>
  </li>
</ul>

05통통한 플랜 카드

추천 플랜 카드만 한 단 더 부풀어 커지고, 누르면 살짝 눌렸다 튀는 동작이 붙어 표 없이도 어떤 플랜을 밀고 있는지 바로 보입니다. 배지는 카드 안쪽이 아니라 카드 테두리 바깥 위에 반쯤 걸쳐 얹어야 아래 글자와 겹치지 않습니다.

강조 카드 확대radius 16press 애니메이션
<div class="relative flex-[1.1] rounded-clay bg-white p-6 pt-8
            shadow-clay-raised">
  <span class="absolute -top-3 left-6 rounded-pill bg-accent px-3 py-1
               text-xs font-bold text-cream">추천</span>
  <p class="font-bold">프로</p>
  <p class="mt-1 text-sm text-ink/70">월 12,000원</p>
</div>

06둥근 아바타+말풍선

아바타가 둥근 캡슐 프레임에 파묻히듯 앉고, 말풍선 카드가 찰흙처럼 통통하게 붙습니다. 아바타와 말풍선의 움직임 시작 시각을 살짝 어긋내면 서로 다른 물체처럼 자연스럽게 보입니다.

radius 16아바타 원형꼬리 그림자
<div class="flex items-center gap-4">
  <span class="h-14 w-14 flex-none rounded-pill bg-accent
               shadow-clay-raised"></span>
  <div class="flex-1 rounded-clay bg-white p-5 shadow-clay-raised">
    <p class="text-sm font-semibold">"손끝에 감기는 느낌이에요"</p>
  </div>
</div>

07파스텔 CTA 밴드

가로로 긴 밴드가 배경보다 한 단 떠오른 두꺼운 카드로 앉고, 뒤에 숨은 원형 빛이 천천히 번졌다 가라앉습니다. 카드에는 overflow: hidden을 걸어 빛이 카드 밖으로 새지 않게 가둡니다.

radius 16press 버튼배경 대비
<div class="relative overflow-hidden rounded-clay bg-ink px-10 py-12
            shadow-clay-raised">
  <span class="absolute -right-16 -top-24 h-64 w-64 rounded-pill
               bg-accent opacity-30 blur-sm"></span>
  <h3 class="relative max-w-md text-3xl font-extrabold text-cream">
    지금 팀에 합류시켜 보세요
  </h3>
</div>

08둥근 상단 푸터

푸터 상단 모서리가 크게 둥글게 말려 위쪽 콘텐츠를 부드럽게 감싸듯 얹힙니다. 링크 묶음 칸마다 옅은 배경만 주고 구분선은 두지 않아, 격자 스타일을 페이지 끝까지 끌고 갑니다.

상단 radius 16칸 배경 대비4열→2열
<footer class="grid grid-cols-3 gap-4 rounded-t-clay bg-white/70 px-4
               pt-8 pb-6 shadow-clay-raised">
  <div class="rounded-control bg-ink/[.04] p-5">
    <p class="text-xs font-bold uppercase text-ink/50">제품</p>
    <p class="text-sm font-semibold">기능</p>
  </div>
</footer>

09찰흙 버튼·인풋

버튼은 누르면 그림자가 안으로 뒤집혀 실제로 눌리는 촉감을 주고, 입력창은 포커스 시 테두리가 밝은 안쪽 글로우로 바뀝니다. 두 요소 모두 모서리 반경을 카드보다 한 단 작은 값으로 맞춰 화면 안에서 크기 위계가 느껴지게 합니다.

press 반전radius 12focus glow
<form class="flex gap-3 rounded-clay bg-white p-6 shadow-clay-raised">
  <label class="relative flex-1 rounded-control bg-cream
                shadow-clay-press">
    <input class="w-full rounded-control bg-transparent px-4 py-3
                  text-sm outline-none" type="email"
           placeholder="이메일 주소">
  </label>
  <button class="rounded-control bg-accent px-5 py-3 text-sm font-bold
                 text-cream shadow-clay-raised">가입하기</button>
</form>

tailwind.config 커스텀

색·반경·그림자를 이 한 곳에만 적어 두면 원페이지와 부품 아홉 개가 전부 같은 값을 따라갑니다. 클레이 특유의 이중 그림자도 매번 새로 쓰지 않고 shadow-clay-raised 하나로 부릅니다.

theme: {
  extend: {
    colors: {
      cream: "#fff7e6",
      ink: "#17141a",
      accent: "#2f6df6",
    },
    borderRadius: {
      clay: "16px",
      control: "12px",
      pill: "999px",
    },
    boxShadow: {
      "clay-raised": "8px 8px 16px rgba(23,20,26,.28), -8px -8px 16px rgba(255,255,255,.5)",
      "clay-press": "inset 4px 4px 8px rgba(23,20,26,.28), inset -4px -4px 8px rgba(255,255,255,.5)",
    },
    spacing: {
      gutter: "16px",
    },
  },
},

바이브코딩 프롬프트

위 설정을 프로젝트에 붙여 넣은 다음, Claude Code나 Cursor에는 아래처럼 짧게 지시만 주면 됩니다. 프롬프트 전문은 zip 안 prompt.md 파일에 있습니다.

카드·버튼·입력창 모서리는 rounded-clay(16px) 또는 rounded-control(12px)로 통일한다.
그림자는 shadow-clay-raised 하나(어두운 그림자 + 밝은 하이라이트를 함께 그린 것)만 쓰고,
칸마다 진하기를 다르게 만들지 않는다.
눌리는 요소(카드·버튼)에는 shadow-clay-press를 눌림 상태로 준비해 둔다.
배경은 cream 하나로 통일하고, 강조가 필요한 곳에만 accent를 쓴다.

이 지시를 page/index.html에 실제로 넣어 돌린 화면을 1280px 너비로 통째로 캡처한 것이 아래 스크린샷입니다.

결과

어디서 깨지는가 — 함정

가장 먼저 걸린 건 320px 폭이었습니다. 히어로·카드 격자·아이콘 목록 세 부품 모두 블롭 크기와 카드 안쪽 여백을 고정값으로 두었더니 좁은 화면에서 콘텐츠가 정해진 높이를 최대 3px 넘겨 스크롤이 생겼고, 블롭의 위치를 퍼센트로 잡았던 것도 컨테이너 높이가 콘텐츠에 따라 자동으로 정해지는 상황과 맞물려 계산이 꼬였습니다. 블롭 크기와 카드 안쪽 여백을 clamp()로 바꾸고 블롭 위치를 퍼센트 대신 고정 px 오프셋으로 옮기고 나서야 320px에서도 넘치지 않았습니다. 두 번째는 색 대비였습니다. 캡슐 내비게이션의 인디케이터를 먹색으로 칠했더니 마침 먹색인 메뉴 글자와 겹치는 구간에서 글자가 통째로 안 보였는데, 이 비밀번호 y3sdrgr2이 걸린 zip을 받으면 인디케이터를 밝은 크림색으로 바꿔 어떤 글자 위에 있어도 읽히게 고친 버전을 그대로 확인할 수 있습니다.

세 번째 함정은 추천 플랜 카드의 배지 위치입니다. 배지를 카드 안쪽 여백 안에 두면 플랜 이름 글자와 겹쳐 일부 글자가 가려지므로, 배지는 항상 카드 테두리 바깥으로 반쯤 걸치게 띄워야 합니다.

아홉 개 데모 전부 MDN prefers-reduced-motion 문서가 정의한 미디어 쿼리를 감지하면 애니메이션을 끄고 최종 상태(카드는 떠오른 채, 버튼은 눌리기 전 raised 상태)로 고정합니다. 동작 줄이기를 켠 방문자에게는 배경 블롭이나 눌림 효과가 아예 안 보이는 대신, 카드·버튼·입력창 자체는 그대로 남아 정보 손실이 없습니다.

접근성

accent(#2f6df6) 배경 위에 얹는 작은 텍스트는 대비가 낮은 편이라, 배지처럼 크기가 작은 글자는 항상 cream 텍스트를 올리고 큰 제목에만 어두운 배경과 밝은 글자 조합을 씁니다. 카드의 box-shadow는 MDN box-shadow 문서가 안내하는 대로 색상값 뒤에 inset 유무로 볼록/오목을 구분하는데, 두 겹을 동시에 써 볼록한 겉면과 오목한 눌림 상태를 한 속성 안에서 표현했습니다.

벤토 그리드 같은 다른 유행 스타일은 디자인 트렌드 카테고리에서 볼 수 있고, 이 사이트 전체가 뭘 다루는 곳인지는 소개 페이지에 적어 뒀습니다.

FAQ

클레이모피즘과 뉴모피즘은 뭐가 다른가요?

뉴모피즘은 배경과 카드가 거의 같은 색이라 그림자만으로 입체감을 주고, 클레이모피즘은 카드 색을 배경과 분명히 다르게 두고 두꺼운 반경까지 더해 대비와 입체감을 동시에 키웁니다. 그래서 클레이모피즘이 접근성 대비 확보가 상대적으로 더 쉽습니다.

그림자를 두 겹씩 겹치면 느려지지 않나요?

이 편의 아홉 개 데모는 전부 box-shadow 값 자체는 고정해 두고 transform·opacity(09번만 예외로 box-shadow 크로스페이드 추가)만 움직여서, 매 프레임 그림자를 다시 계산하지 않습니다. 카드 수가 아주 많은 화면에서는 그림자 두 겹이 페인트 비용을 조금 늘리므로, 스크롤에 걸리는 카드에는 애니메이션을 넣지 않는 편이 안전합니다.

다크 모드에서도 클레이모피즘이 어울리나요?

어울립니다. 다만 밝은 하이라이트와 어두운 그림자의 진하기를 라이트 모드와 반대로 조정해야 합니다. 어두운 배경 위에서는 밝은 하이라이트의 불투명도를 낮추고 어두운 그림자의 불투명도를 높여야 카드가 배경에 파묻히지 않습니다.

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

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