손끝의 의식: Apple 스타일 버튼 체계

버튼은 페이지에서 유일하게 “눌리는” 것

그 전까지 이 사이트의 버튼은 모두 텍스트 링크였다: 파란 글자 한 줄, 셰브론 하나. 기능은 했다——하지만 손끝이 닿는 그 순간, 아무 일도 일어나지 않았다.

Apple의 철학은 이렇다: 누를 수 있는 모든 것은 의식을 받을 자격이 있다.

세 개의 곡선, 하나의 체계

체계는 세 가지 결정뿐이다:

• 980px 필 라운드——Apple.com의 상징적인 숫자. 24px도 999px도 아니고, 형태 자체를 녹여버릴 만큼 큰 숫자
• #0071e3 스토어 블루——솔리드 필은 가장 중요한 단 하나의 동작에만 주어진다
• iOS 스프링 커브 cubic-bezier(0.32, 0.72, 0, 1)——시트부터 키보드까지 공유되는, 시스템급 이징 하나의 서명

눌렀을 때의 반동: 하나의 공학적 양보

진짜 이야기는 손맛이다. 누르면 버튼이 0.96로 줄어들고, 놓으면 튕겨 돌아온다——transform: scale 한 줄이면 될 것 같은 이야기.

하지만 이 사이트는 GSAP로 매그네틱 호버를 구현하고, 그것은 인라인 transform을 기록한다. CSS transform을 얹으면 두 채널이 전쟁을 시작한다.

해법은 독립 변환 속성이다: scale 속성과 transform 속성은 브라우저 안에서 서로 다른 합성 채널을 가며 절대 서로를 덮지 않는다. scale: 0.96 한 줄로, 자석의 이동과 눌림의 반동이 동시에 성립한다.

고급스러움은 때로 얼마나 많은 코드를 썼는지가 아니라, 시작하지 않은 전쟁에서 온다.

동근 버튼의 부드러운 빛

연락처 섹션의 원형 GitHub 버튼은 이 사이트 최초의 구도를 유지한 채, Apple Watch 크론 대우만 더했다: 호버하면 창백한 흰 고리가 퍼지고, 파란 물안개가 뜨고, 아이콘이 두 픽셀 떠오른다.

구도는 불변, 숨결이 더해졌다.

군규 하나

버튼 체계에는 정확히 네 가지 변형만 있다——솔리드 필, 글래스 필, 링크, 아이콘. 페이지의 모든 새 인터랙션은 이 넷 중 하나에서 자라난다. 다섯 번째는 절대 발명하지 않는다.