포폴 / 웹사이트 / 디자인
cityzen.kr 카드 디자인
홈 폴라로이드 카드 뒤집기 인터랙션 설계 과정과 결정 사항.
라이브 데모
카드를 클릭해 뒤집기
디자인 결정 사항
CSS 3D 뒤집기
transform-style: preserve-3d + backface-visibility: hidden으로 앞·뒷면을 각각 배치. 카드 내부(card-inner)를 rotateY(180deg), 씬(scene)을 scale(1.4)로 동시에 전환해 확대+뒤집기 한 번에 처리.
Nanum Pen Script
뒷면 손글씨 질감을 위해 Nanum Pen Script(Google Fonts) 사용. Caveat은 한글 미지원으로 제외. 분류 라벨(15px #b08040)과 본문 노트(16px)에 동일 폰트 적용.
노트 줄 질감
repeating-linear-gradient로 22px 간격 수평선을 본문 텍스트 영역에만 적용. 카드 전체에 적용 시 사진·버튼까지 줄이 겹쳐 어색해져 .pol-flip-note에만 한정.
2레이어 그림자 + 금빛 하단선
뒷면에 가까운 그림자(0 2px 6px)와 먼 그림자(0 10px 32px) 2개 레이어로 입체감 강조. ::after pseudo로 하단 금빛 그라데이션 선(transparent→#c0a060→#e8c878→transparent) 추가.
외부 클릭 원복
앞면 클릭에서 stopPropagation으로 document 이벤트 차단. 뒷면(바로가기 제외) 클릭 시 직접 닫힘. 카드 외부 클릭은 useEffect document listener로 감지해 원복.
사용 기술