스프링 토글 스위치
노브가 살짝 지나쳤다 돌아오는 스프링 이징이 핵심. 밋밋한 ease와 손맛 차이가 크다. 상태 색 전환도 함께.
AI에게 이렇게“iOS처럼 통통 튀는 스프링 느낌의 토글 스위치 만들어줘. 오버슈트 이징으로.”
핵심 코드좋아요 파티클 버스트
하트가 스프링으로 팽창하며 색 점 6~8개가 사방으로 튄다. 점마다 CSS 변수(--dx,--dy)로 방향만 다르게 주면 keyframes 하나로 끝.
AI에게 이렇게“트위터 좋아요처럼 하트 누르면 색 파티클이 사방으로 터지는 버스트 효과 만들어줘.”
핵심 코드머티리얼 리플
클릭한 지점에 반투명 원을 만들어 커지며 사라지게 한다. 구글 머티리얼 디자인의 시그니처. 좌표는 e.offsetX/Y.
“버튼 클릭한 위치에서 물결이 퍼지는 머티리얼 리플 효과 넣어줘.”
핵심 코드플로팅 라벨 입력창
포커스되면 플레이스홀더가 위로 떠올라 라벨이 된다. 자리 절약 + 맥락 유지. :focus와 ‘값 있음’ 상태 둘 다에 적용해야 한다.
“입력창 포커스하면 플레이스홀더가 위로 떠올라 작은 라벨이 되는 플로팅 라벨 만들어줘.”
핵심 코드별점 순차 채우기
선택한 별까지 왼쪽부터 시차를 두고 노랗게 팝. 채워질 때 살짝 커졌다 돌아오면(스프링) 손맛이 산다.
AI에게 이렇게“별점 클릭하면 그 별까지 순서대로 통통 튀며 노랗게 채워지게 해줘.”
핵심 코드체크박스 선 그리기
체크 표시가 펜으로 긋듯 그려진다. SVG 선 길이만큼 dasharray를 주고 offset을 0으로. 상자 팝(scale)과 함께.
AI에게 이렇게“체크박스 선택하면 체크 표시가 손으로 긋는 것처럼 그려지게 해줘. stroke-dashoffset으로.”
핵심 코드스쿼시 & 스트레치 버튼
디즈니 애니메이션 12원칙의 squash & stretch. 눌리면 납작해졌다(가로↑세로↓) 튀어오르며 원상복귀. 가로세로를 따로 스케일하는 게 포인트.
AI에게 이렇게“버튼 누르면 젤리처럼 납작해졌다가 튀어오르는 스쿼시 앤 스트레치 효과 넣어줘.”
핵심 코드알림 벨 흔들림 + 배지 팝
벨이 위쪽 고정점 기준으로 점점 작아지는 진폭으로 흔들리고(감쇠 진동), 빨간 배지가 스프링으로 튀어나온다. transform-origin이 핵심.
AI에게 이렇게“새 알림 오면 종이 딸랑딸랑 흔들리고 빨간 숫자 배지가 통 튀어나오게 해줘.”
핵심 코드카피 버튼 상태 피드백
누르면 아이콘이 체크로 몰프되고 문구가 ‘복사됨!’으로 2초간 바뀌었다 복귀. ‘동작이 성공했다’는 확신을 주는 최소 비용의 피드백.
AI에게 이렇게“복사 버튼 누르면 클립보드에 복사되고 아이콘이 체크로 바뀌며 ‘복사됨!’ 표시 후 원래대로 돌아오게 해줘.”
핵심 코드