입력 반응: 키패드와 입력칸

입력칸과 PIN 키패드는 어떤 반응을 보여 줘야 하나요? 누르는 순간 100ms 안에 눌림 반응을 보이고, 틀리면 흔들림과 함께 무엇이 틀렸는지 글로 알려 주며, 검사는 칸을 벗어날 때 시작합니다.

입력은 눌렸는지, 맞았는지를 바로 보여 줘야 합니다. 반응이 늦으면 같은 키를 두 번 누릅니다.

이름과 미리보기

미리보기를 누르면 멈추고, 다시 누르면 재생합니다.

눌림 반응
Press feedback
누르는 순간 살짝 작아지거나 색이 바뀜
점 채움
PIN dot fill
비밀번호 자리 점이 하나씩 채워짐
흔들림
Shake on error
틀리면 입력칸이 좌우로 짧게 흔들림
플로팅 라벨
Floating label
칸 안의 라벨이 입력을 시작하면 위로 올라가 작아짐
실시간 검사
Inline validation
입력 중 바로 아래에 맞음·틀림 표시

이렇게 씁니다

눌림 반응은 손을 떼기 전, 누르는 순간에 보여 줍니다(100ms 이내).
틀렸을 때 흔들림만 주지 말고 무엇이 틀렸는지 글로 같이 보여 줍니다. 흔들림만으로는 화면 읽기 프로그램 사용자에게 전달되지 않습니다.
실시간 검사는 칸을 벗어날 때 시작합니다. 첫 글자부터 빨간 오류를 띄우면 혼나는 기분이 듭니다.
숫자 배열을 섞는 보안 키패드는 보안 요구가 있을 때만 씁니다. 사용하기는 확실히 불편해집니다.

복사해서 쓰는 프롬프트

6자리 PIN

6자리 PIN 입력 화면을 만들어 줘.
- 숫자 키를 누르는 순간 눌림 반응(Press feedback): scale 0.94, 100ms.
- 위쪽 점 6개가 하나씩 채워지는 점 채움(PIN dot fill).
- 틀리면 점 줄이 흔들림(Shake on error) 300ms 뒤 비우고, 아래에 "비밀번호가 맞지 않습니다 (남은 횟수 4회)" 표시.
- 키 크기는 최소 48px.

가입 폼 입력칸

회원가입 폼의 입력칸을 만들어 줘.
- 플로팅 라벨(Floating label): 입력을 시작하면 라벨이 위로 올라가 작아짐, 150ms.
- 실시간 검사(Inline validation)는 칸을 벗어날 때 시작. 틀리면 칸 아래에 이유를 한 줄로.
- 맞게 고치면 오류 문구는 바로 사라지게.

참고한 게시물: @ui_motion_prompts, @ui_motion_prompts