Components

Payment Card (3D Flip)

카드 번호를 입력하면 카드 비주얼에 실시간 반영되고, CVC에 포커스하면 카드가 뒷면으로 회전합니다.

TheNoun.

6411••••••••2087

Card Holder

HONG GILDONG

Valid Thru

12/29

CVC

서명

•••

카드를 클릭하거나 CVC에 포커스하면 뒤집힙니다 ⟲

코드 보기

<div class="xcc-card" id="cc">
  <div class="xcc-side xcc-front">칩·브랜드·번호 4그룹·소유자·유효기간</div>
  <div class="xcc-side xcc-back">마그네틱 띠·서명란·CVC 박스</div>
</div>
/* CVC 포커스 → cc.classList.add('flipped') → rotateY(180deg) 0.8s */
<input class="xcc-in" onfocus="flip(true)" onblur="flip(false)">

Variants

이름	설명	미리보기
앞면	칩(금색 그라데이션)·브랜드·번호 4그룹·소유자·유효기간	6411 •••• •••• 2087
뒷면	마그네틱 띠 + 서명란 + CVC 박스 — CVC 포커스 시 회전	123
인식 배지	OCR·카드 인식 완료 시 좌상단 그린 배지	✓ 인식됨
보안 키패드 칸	가운데 2그룹·CVC는 readonly + 커스텀 키패드로만	••••

Guidelines

✓ Do

입력값을 카드 비주얼에 실시간 반영 (번호·소유자·유효기간)
CVC 포커스 → 뒷면 회전, blur → 앞면 복귀
가운데 2그룹은 카드 표면에 • 마스킹으로만 반영 (실서비스는 보안 키패드로 입력)
카드 표면색은 --ac-accent 기반 다크 그라데이션 (위젯 테마 상속)

✕ Don't

실제 카드사 로고·디자인을 흉내내지 않는다
카드 번호를 평문으로 저장·전송하지 않는다
플립 시간을 임의로 바꾸지 않는다 (0.8s 고정)

Specification

속성	토큰/값	비고
`비율`	`1.586 (실제 신용카드 85.6:54)`
`플립`	`rotateY 180° / 0.8s cubic-bezier(0.71,0.03,0.56,0.85)`
`radius`	`16px`
`표면`	`--ac-accent 92%→30% 다크 그라데이션 + 광택`

비교

실물 SoT = component_library_v1.html (.xcc-*) — xapp-02 결제·체크아웃, xapp-15 카드 인식기의 핵심 요소. Payment Card vs Card Selector — 새 카드 등록·입력은 이것, 저장된 카드 고르기는 Card Selector.