AI 분석
마스킹된 카드 번호를 눈 버튼으로 공개하면 버튼이 복사 아이콘으로 바뀌고 진행 링이 도는 입력 필드 인터랙션이다.
밝은 회백색 배경 중앙에 둥근 모서리의 단일 입력 필드가 놓이고 오른쪽 끝에 정사각형 아이콘 버튼이 붙는다. 굵은 산세리프 숫자가 네 자리씩 묶여 있으며, 기본 상태는 연보라 배경의 보라색 눈 아이콘이고 활성 상태는 연녹색 배경의 초록 복사 아이콘으로 색이 전환된다. 공개 시 가려진 자리 숫자가 흐린 회색에서 진한 색으로 순차적으로 페이드인되고, 복사 버튼 테두리를 따라 초록 진행 링이 그려지며 다시 마스킹될 때까지의 시간을 보여준다. 민감 정보를 보여주고 복사하는 흐름을 하나의 컴포넌트에 담은 핀테크 결제 UI의 마이크로 인터랙션 참고로 유용하다.
minimal · light-mode
claude-opus-5-5 · 2026-10-16 17:48 · 신뢰도 0.75
