고급스러움은 세부에 산다: 세 개의 마이크로 인터랙션

큰 효과는 누구나 만든다, 세부가 격을 가른다

히어로의 거대한 타이포, 파티클 행성, 스크롤 내러티브——그것은 무대다. 하지만 관객이 퇴장하며 기억하는 것은, 종종 복도의 조명이다.

이날 세 개의 마이크로 인터랙션을 만들었다. 어느 곳도 눈에 띄지 않는 자리였고, 기준은 한 문장이었다: 만약 Apple이라면, 신경 쓸까?

하나: 숫자는 굴러서 와야 한다

연락처 섹션의 8+ REPOS · 214+ STARS · 25+ FOLLOWERS 줄은, 그 전까지 정적 텍스트였다. 이제 뷰포트로 스크롤되어 들어올 때, 세 숫자가 0에서 각자의 종착점까지 굴러간다——1.4초, power3 커브. Apple 키노트 성적 페이지와 같은 연출.

공학적으로 품위 있는 세부가 하나 있다: 숫자는 먼저 진짜 값으로 렌더링되고, 뷰포트에 들어온 뒤에야 0으로 돌아가 굴러가기 시작한다. JS가 죽어도, 네트워크가 느려도, 모션 감소여도——숫자는 항상 완전하다. 애니메이션은 증분이지, 의존성이 아니다.

둘: 입력 필드에는 헤일로가 필요하다

검색창이 포커스되면: 보더는 머리카락 같은 회색에서 파란색으로 스프링하고, 주위에 4px의 옅은 파란 헤일로가 퍼지며, 돋보기가 켜지고 살짝 커진다.

iOS 입력 언어의 본질은 사용자에게 말하는 것이다: 지금, 당신은 여기 있다. 캐럿이 시선의 집이고, 헤일로는 집의 현판이다.

셋: 태그에는 무게가 있어야 한다

디지털 가든의 태그 필 열: 호버하면 각자 2픽셀 떠오르고, 보더와 채움이 옅은 파란색으로 물든다. 아주 작은 이동이지만, 손끝은 그것이 자신을 “받아줬다”는 것을 느낀다.

마무리 군규 하나

마이크로 인터랙션의 예산은 2픽셀과 0.3초다. 넘으면 퍼포먼스고, 넘지 않아야 응답이다.