【사건】
Opus 4.8 출시로 'Design Engineering (디자인 엔지니어링)'이 단숨에 주류화되어 화제😳 4.8에서는 다음과 같은 것들이 가능해졌습니다👇

・커서 위치와 요소 중심 사이의 거리를 매 프레임 (frame) 획득
・120px 이내로 들어오면 거리에 따라 스케일 (scale) 변화
・hover (호버)와 같은 ON/OFF가 아니라, 연속적으로 변화
・구현은 pointermove + getBoundingClientRect 가 중심

즉,
버튼에 '닿으면 변하는' 것이 아니라,
버튼에 '가까워진 시점에서 반응하는' UI가 된다.

이 차이는 상당히 크다.
기존의 UI는,
hover (호버)한 순간에 상태가 전환될 뿐이었다.
하지만 이 패턴은,
화면상의 요소가 마치 물체처럼,
사용자의 움직임에 맞춰 '기척'으로 반응한다.
Vercel, Linear, Arc 계열의 기분 좋은 UI는,
이런 세밀한 인터랙션 (interaction)의 축적으로 만들어진다.

그리고 지금까지는,
이런 구현은 디자이너 혼자서는 어려웠다.
하지만 Opus 4.8 같은 모델이 등장하면서,
'디자인할 수 있는 사람'이 그대로 코드까지 다룰 수 있는 시대에 들어서기 시작하고 있다.
디자이너, 프론트엔드 (front-end), LP 제작을 하고 있는 사람은,
이 흐름을 놓칠 이유가 없다.

이것은 단순한 잔재주로서의 hover (호버) 연출이 아니다.

'외형을 만드는 디자인'에서,
'움직임까지 설계하는 디자인'으로의 변화.
Design Engineering (디자인 엔지니어링), 제대로 오고 있다.

코드는 이것👇
onpointermove = e =>
document.querySelectorAll(".dock>*").forEach(el => {
const r = el.getBoundingClientRect();
const t = Math.max(
0,
1 - Math.abs(e.clientX - r.x - r.width / 2) / 120
);
https://t.co/6H3lTc9WNS.scale = 1 + t * .5;
});

그리고,
'Claude Code 진화가 너무 빨라서, 솔직히 따라가질 못하겠어...'
라고 느끼는 분들에게.
그 감각은 매우 정상입니다.
최근 들어서만 해도,
・/simplify → /code-review
・Plugins (플러그인)
・권한 관리 부근
・리뷰 설계
・Hooks (훅스)
・Subagents (서브에이전트)

등, 사상 수준에서 상당히 변하고 있다.

다만, 이 변화를 따라갈 수 있느냐에 따라,
반년 뒤의 생산성이 상당히 달라질 것이라고 생각한다.
그러므로,
'나중에 따라잡으면 되지'보다는,
최소한이라도 지금 따라가는 것이 좋다.
그래서 이번에, 지난주 Claude Code 업데이트를,
모두 아래 기사에서 정리했습니다👇 꼭 이것으로 따라잡으시길 바랍니다.