누르면 대답하는 방식

버튼을 눌렀을 때 앱이 반응하는 방식에는 무엇이 있나요? 시각 피드백, 햅틱, 낙관적 업데이트, 로딩 버튼, 확인 대신 되돌리기가 있으며 모든 누름에 100ms 안에 반응을 보여 줍니다.

사용자가 한 행동에 앱이 대답하는 방식입니다. 화면·진동·소리 중 무엇으로, 얼마나 크게 대답할지 정합니다.

이름과 미리보기

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

시각 피드백
Visual feedback
색이나 모양 변화로 알림
햅틱
Haptic feedback
짧은 진동. 성공·경고·선택 등 종류가 나뉨
낙관적 업데이트
Optimistic UI
서버 응답 전에 결과를 먼저 보여 주고, 실패하면 되돌림
로딩 버튼
Loading button
누른 버튼 안에서 진행을 표시하고 중복 클릭을 막음
확인 대신 되돌리기
Undo instead of confirm
"정말 지울까요?" 대신 지운 뒤 되돌리기를 제공

이렇게 씁니다

모든 누름에는 100ms 안에 어떤 반응이든 보여 줍니다. 반응이 없으면 다시 누릅니다.
좋아요·저장처럼 실패가 드문 동작은 낙관적 업데이트로 바로 반영합니다.
햅틱은 스위치 전환, 새로고침 완료, 결제 성공처럼 상태가 확정되는 순간에만 씁니다.
AI에게 코드를 맡길 때 이 이름들을 쓰면 "누르면 반응 좀 주세요"보다 훨씬 정확하게 구현됩니다.

복사해서 쓰는 프롬프트

좋아요 버튼

좋아요 버튼을 낙관적 업데이트(Optimistic UI)로 만들어 줘.
- 누르는 즉시 하트를 채우고 숫자 +1. 아이콘은 scale 1 → 1.2 → 1 (250ms).
- 서버 요청이 실패하면 원래대로 되돌리고 "좋아요를 반영하지 못했습니다" 토스트.
- 모바일에서는 성공 시 가벼운 햅틱(light impact) 1회.
- 연타해도 요청은 한 번만 나가게.

참고한 게시물: @davidm_ai