뉴모피즘 디자인 랜딩 UI 키트, 그림자 두 겹 섹션 9개

핀터레스트·드리블에 스크린샷으로만 떠돌던 이 스타일을 실제로 만든 원페이지로 아래에 그대로 올렸습니다. 내비게이션에서 푸터까지 스크롤하면서 전체 인상을 먼저 확인하십시오.

위 화면을 이루는 부품 아홉 개를 하나씩 떼어 아래 격자에 다시 늘어놓았습니다. 방문자가 화면을 처음 열 때 실제로 눈길이 가는 차례 — 시선을 끌기, 둘러보기, 가격 확인, 신뢰, 행동 유도, 가입 — 그대로 순서를 잡았습니다. 그중 셋(파묻힌 아이콘 목록·숨쉬는 글로우 CTA 밴드·버튼과 입력창)은 같은 표면 하나가 raised에서 inset으로 그림자 부호만 바뀌어 튀어나온 것도 파인 것도 될 수 있다는 뉴모피즘의 핵심을 애니메이션으로 직접 보여줍니다.

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

• 01 눌린 듯 떠 있는 히어로
• 02 눌린 인디케이터 내비
• 03 돋을새김 카드 격자
• 04 파묻힌 아이콘 목록
• 05 튀어나온 추천 요금제
• 06 소켓 아바타+말풍선
• 07 숨쉬는 글로우 CTA 밴드
• 08 둥근 상단 푸터
• 09 뉴모피즘 버튼·인풋

01눌린 듯 떠 있는 히어로

카드 배경을 무대와 거의 같은 색으로 두고 밝은·어두운 그림자 두 겹만 반대 방향으로 얹어, 색 대비 없이 그림자만으로 카드가 떠 보이게 합니다. 뒤에 흐릿하게 뜬 강조색 원 두 개만 색이 다른 유일한 요소입니다.

<div class="relative mx-auto max-w-xl flex flex-col items-start gap-4
            rounded-neu bg-surface p-10 shadow-neu-raised">
  <p class="text-xs font-bold uppercase text-accent">Neumo</p>
  <h1 class="text-4xl font-extrabold leading-tight">눌린 듯 떠 있는 화면</h1>
  <button class="rounded-pill bg-surface px-6 py-3 text-sm font-bold text-accent
                 shadow-neu-raised">무료로 시작</button>
</div>

02눌린 인디케이터 내비

메뉴 트랙 전체는 안쪽으로 파인 인셋 그림자로 눌려 있고, 그 안에서 활성 탭만 반대로 볼록한 그림자를 얹어 트랙 위로 도드라져 보입니다. 탭 폭을 25%로 두면 translateX(100%) 한 번이 정확히 이웃 칸 하나를 옮깁니다.

<nav class="flex items-center gap-4 rounded-pill bg-surface px-3 py-2
            shadow-neu-raised">
  <div class="relative flex flex-1 rounded-pill bg-surface p-1 shadow-neu-press">
    <span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-surface
                 shadow-neu-raised"></span>
    <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">홈</span>
  </div>
</nav>

03돋을새김 카드 격자

격자의 카드마다 배경과 같은 색 표면을 유지한 채 그림자 깊이와 살짝 떠오르는 정도가 함께 순간적으로 커졌다 잦아들어, 색은 그대로인데 입체감만 오르내립니다. 카드마다 시작 시각을 어긋내면 네 칸이 파도처럼 순서대로 솟아오릅니다.

<div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
  <div class="flex flex-col gap-3 rounded-neu bg-surface p-5 shadow-neu-raised">
    <span class="h-7 w-7 rounded-control bg-accent"></span>
    <p class="text-sm font-semibold">빠른 검색</p>
  </div>
</div>

04파묻힌 아이콘 목록

알약 모양 행은 볼록하게 튀어나와 있고 그 안의 아이콘 칩만 안쪽으로 파묻혀, 한 행 안에서 raised와 inset이 동시에 보입니다. 순백 배경 대신 6%만큼 눌러 둔 캔버스라 두 방향 그림자가 다 보입니다.

<li class="flex items-center gap-3 rounded-pill bg-surface p-2 pr-5
           shadow-neu-raised">
  <span class="h-9 w-9 flex-none rounded-pill bg-surface
               shadow-neu-press"></span>
  <span class="text-sm font-semibold">빠른 시작</span>
</li>

05튀어나온 추천 요금제

일반 플랜은 안쪽으로 파여 있고 추천 플랜만 크게 튀어나온 raised 그림자를 얹어, 표 없이도 그림자 방향만으로 어떤 플랜이 우선인지 보여줍니다. 추천 배지는 카드 테두리 바깥에 반쯤 걸쳐야 아래 글자와 안 겹칩니다.

<div class="relative flex-[1.1] rounded-neu bg-surface p-6 pt-8
            shadow-neu-raised">
  <span class="absolute -top-3 left-6 rounded-pill bg-surface px-3 py-1
               text-xs font-bold text-accent shadow-neu-raised">추천</span>
  <p class="font-bold">프로</p>
</div>

06소켓 아바타+말풍선

아바타는 둥근 소켓에 파묻히듯 안쪽 그림자를 얹고, 옆의 말풍선은 반대로 볼록하게 튀어나와 서로 다른 시각에 떠오릅니다. 두 요소의 애니메이션 시작 시각을 어긋내면 서로 다른 물체처럼 보입니다.

<div class="flex items-center gap-4">
  <span class="h-14 w-14 flex-none rounded-pill bg-surface
               shadow-neu-press"></span>
  <div class="flex-1 rounded-neu bg-surface p-5 shadow-neu-raised">
    <p class="text-sm font-semibold">"손끝에 감기는 느낌이에요"</p>
  </div>
</div>

07숨쉬는 글로우 CTA 밴드

raised 밴드 뒤에 숨은 원형 빛이 숨쉬듯 커졌다 작아지고, 버튼은 그 위에서 눌렸다 돌아오는 동작을 반복합니다. 밴드에는 overflow: hidden을 걸어 빛이 밴드 밖으로 새지 않게 가둡니다.

<div class="relative overflow-hidden rounded-neu bg-surface px-10 py-12
            shadow-neu-raised">
  <span class="absolute -right-16 -top-24 h-64 w-64 rounded-pill
               bg-accent opacity-20 blur-md"></span>
  <h3 class="relative max-w-md text-3xl font-extrabold">지금 팀에 합류시켜 보세요</h3>
</div>

08둥근 상단 푸터

푸터 패널 자체는 raised로 떠오르고, 안의 칸마다 inset 깊이가 서로 다른 박자로 얕아졌다 깊어지는 파도를 만듭니다. 칸마다 옅은 눌림만 주고 구분선은 두지 않아 격자 스타일을 끝까지 끌고 갑니다.

<footer class="grid grid-cols-3 gap-4 rounded-t-neu bg-surface px-4
               pt-8 pb-6 shadow-neu-raised">
  <div class="rounded-control bg-surface p-5 shadow-neu-press">
    <p class="text-xs font-bold uppercase text-ink/50">제품</p>
    <p class="text-sm font-semibold">기능</p>
  </div>
</footer>

09뉴모피즘 버튼·인풋

버튼은 raised에서 inset으로 그림자 부호가 뒤집히며 눌리고, 입력창은 항상 inset인 채로 포커스 시에만 강조 색 링이 더해집니다. 이 항목 하나가 뉴모피즘의 원리 전체를 담고 있습니다 — 같은 표면이 그림자 부호만 바뀌어도 튀어나온 것도 파인 것도 됩니다.

<button class="rounded-control bg-surface px-5 py-3 text-sm font-bold
               text-accent shadow-neu-raised">저장하기</button>
<label class="relative block rounded-control bg-surface p-1
              shadow-neu-press">
  <input class="w-full rounded-control bg-transparent px-4 py-3
                text-sm outline-none" type="text">
</label>

tailwind.config 커스텀

색·반경·그림자를 이 한 곳에만 적어 두면 원페이지와 부품 아홉 개가 전부 같은 표면 색을 따라갑니다. 뉴모피즘 특유의 raised·press 그림자 쌍도 매번 새로 쓰지 않고 shadow-neu-raised·shadow-neu-press 두 이름으로 부릅니다.

theme: {
  extend: {
    colors: {
      surface: "#e0e5ec",
      ink: "#3d4457",
      accent: "#2f6df6",
    },
    borderRadius: {
      neu: "20px",
      control: "12px",
    },
    boxShadow: {
      "neu-raised": "9px 9px 16px rgba(163,177,198,.6), -9px -9px 16px rgba(255,255,255,.6)",
      "neu-press": "inset 6px 6px 10px rgba(163,177,198,.5), inset -6px -6px 10px rgba(255,255,255,.6)",
    },
  },
},

바이브코딩 프롬프트

위 설정 파일을 그대로 프로젝트에 두고, Claude Code나 Cursor에는 아래 지시문만 넘기면 됩니다. 전체 문구는 zip 속 prompt.md에 그대로 들어 있습니다.

카드·버튼·입력창의 배경색을 전부 surface(#e0e5ec) 하나로 통일한다. 색이 아니라
그림자로만 입체감을 낸다. 튀어나와야 할 요소는 shadow-neu-raised, 파여야 할
요소는 shadow-neu-press 를 쓰고, 순백을 배경으로 두지 않는다 — 밝은 쪽 그림자가
갈 곳이 없어 하이라이트가 사라진다. 포커스 상태에는 accent 색 아웃라인을 별도로
그린다.

page/index.html에 이 지시문을 그대로 반영해 렌더링한 화면을 1280px 뷰포트 전체 캡처로 남긴 것이 아래 그림입니다.

어디서 깨지는가 — 함정

맨 처음 실측에서 막힌 지점은 320px짜리 좁은 화면이었습니다. 히어로·요금제·CTA 밴드 세 부품 모두 카드 안쪽 여백을 고정값으로 두었더니 좁은 화면에서 넘쳤고, 그중 요금제는 배지 글자까지 카드 밖으로 밀려났습니다. 여백을 clamp()로 바꾸고 나서야 320px에서도 넘치지 않았습니다.

두 번째로 겪은 문제는 추천 배지의 자리였습니다. 카드 안쪽 여백 안에 배지를 넣자 아래 플랜 이름과 줄이 겹쳐 첫 글자가 가려졌고, 배지 자체를 카드 위 모서리 바깥으로 절반쯤 밀어내고 나서야 글자가 완전히 드러났습니다. 세 번째는 캔버스 밝기 자체였습니다. 순백(#ffffff) 배경에 뉴모피즘을 그대로 적용했더니 밝은 쪽 그림자가 배경보다 밝을 수 없어 하이라이트가 통째로 사라지고 어두운 쪽 그림자만 남아 입체감이 반쪽짜리가 됐는데, 이 비밀번호 juzcd872이 걸린 zip을 받으면 배경을 6%만큼 눌러 둔(순백이 아닌) 캔버스로 고친 버전을 그대로 확인할 수 있습니다.

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

접근성

뉴모피즘은 접근성 비판이 따라다니는 스타일입니다. 표면 색이 배경과 거의 같다 보니 대기 상태에서 버튼·카드의 테두리 대비가 사실상 0에 가까워, WCAG 1.4.11 비텍스트 대비 기준을 사실상 만족하지 못합니다. 그림자만으로 입체감을 표현하는 방식은 저시력·색각이상 사용자에게 "이게 눌리는 버튼인지"부터 안 보일 수 있다는 뜻입니다. 이 편의 데모도 그 한계를 완전히 없애지는 못했지만 두 가지로 줄였습니다 — 글자 자체는 ink(#3d4457)로 배경과 확실히 대비되게 두고, :focus-visible에는 뉴모피즘 문법 밖의 예외로 강조색 아웃라인을 별도로 그려 최소한 키보드 사용자는 초점 위치를 놓치지 않게 했습니다. MDN box-shadow 문서가 안내하는 대로 inset 유무로 볼록·오목을 구분했지만, 실무에서는 이 스타일을 결제 버튼처럼 실패하면 안 되는 요소에는 쓰지 않는 편을 권합니다.

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

FAQ

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

뉴모피즘은 표면 색을 배경과 거의 같게 둬서 그림자만으로 입체감을 내고, 클레이모피즘은 카드 색을 배경과 분명히 다르게 두고 두꺼운 반경까지 더해 대비와 입체감을 동시에 키웁니다. 결과적으로 카드 경계가 눈에 보이는 쪽은 클레이모피즘이라, 버튼 같은 상호작용 요소의 대비를 챙기기엔 그쪽이 한결 수월합니다.

왜 순백이나 순검정 배경에는 안 어울리나요?

밝은 쪽 그림자는 배경보다 밝은 색을 써서 하이라이트처럼 보이는 원리이고 어두운 쪽 그림자는 배경보다 어두운 색을 써서 그늘처럼 보이는 원리인데, 배경이 순백(#ffffff)이면 그보다 밝은 색이, 순검정이면 그보다 어두운 색이 없어 그 방향의 그림자가 사라집니다. 그래서 이 편의 배경도 순백이 아니라 약간 눌러 둔 회색(#e0e5ec)을 씁니다.

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

잘 어울립니다. 다만 라이트 모드 값을 그대로 반전하듯 옮기면 안 되고, 어두운 캔버스에서는 하이라이트 쪽 불투명도를 확 낮추고 그림자 쪽은 오히려 더 짙게 잡아야 표면이 배경 속으로 사라지지 않고 겨우 티가 납니다.