[Credit Card Form] 입력하면 3D 카드가 뒤집히며 채워지는 결제 폼

제작 과정

한 줄 요약 입력을 보기 좋게 다듬어(4자리 끊기MM/YY) 카드 프리뷰에 실시간 반영하고, CVC를 칠 땐 3D로 카드를 뒤집어 뒷면을 보여줍니다.

이럴 때 필요해요

결제카드 등록 화면에서 입력 형식 실수를 줄이고, 지금 어디를 채우는지 직관적으로 보여주고 싶을 때 씁니다. 숫자를 끊어 보여주고 카드가 반응하면 사용자가 자기 입력을 눈으로 검증할 수 있습니다.

어떻게 동작하나

숫자만 남겨 4자리마다 공백을 넣고, 유효기간은 자동으로 슬래시(MM/YY)를 끼웁니다.
앞자리로 카드 브랜드를 추정합니다(4=Visa, 5=Mastercard, 34/37=Amex) 카드 색과 라벨이 바뀝니다.
CVC 입력칸에 포커스하면 rotateY(180deg)로 카드가 뒤집혀 자기띠와 CVC가 있는 뒷면을 보여줍니다.

핵심은 이거예요

3D 뒤집기는 transform-style: preserve-3d(자식을 3D 공간에 둠)와 backface-visibility: hidden(뒷면 숨김)이 한 쌍입니다. 둘 중 하나만 빠져도 뒷면이 거울처럼 비쳐 보입니다.

놓치기 쉬운 것

Amex는 15자리CVC 4자리라 형식이 다릅니다(이 데모는 단순화).
붙여넣기나 중간 커서 편집 시 포맷 재계산을 신경 써야 합니다.
모션에 민감한 사용자(prefers-reduced-motion)에게는 회전을 생략합니다.

이런 곳에 써요

결제 모달, 구독 결제 화면
카드 등록관리 설정 화면

import type { Metadata } from "next"; import { CreditCardFormDemo } from "./-components/CreditCardFormDemo"; export const metadata: Metadata = { title: "신용카드 입력 폼", description: "입력값이 3D 카드 프리뷰에 실시간 반영되고 CVC 포커스 시 카드가 뒤집히는 결제 폼 데모", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4"> <CreditCardFormDemo /> </main> ); }