spring-animations

2 개의 포스트

figma

어려운 문제는 여전히 어렵다 (새 탭에서 열림)

Figma의 디자이너 출신 제품 관리자 Nikolas Klein은 7년간 프로토타이핑 도구를 만들어 온 경험을 돌아보며, AI가 도구와 작업 방식을 빠르게 바꾸더라도 어려운 문제 자체는 여전히 어렵다고 말한다. AI는 새로운 도구일 뿐이며, 복잡한 문제를 정의하고 반복적으로 해결하는 과정에는 여전히 인간의 판단과 협업이 필요하다는 것이 글의 결론이다. ### 프로토타이핑 도구를 만드는 일 - 저자는 Figma에서 인턴으로 시작해 디자이너로 일한 뒤 제품 관리자가 되었다. - 약 7년 동안 인터랙티브 프로토타이핑 도구를 만드는 일을 담당했다. - 프로토타이핑은 단순히 화면을 그리는 작업이 아니라, 아이디어를 실제 상호작용으로 구현하고 검증하는 과정이다. - 애니메이션, 여러 디자인을 동시에 편집하는 기능, 디자인과 코드를 결합하는 기능 등은 모두 복잡한 문제를 단계적으로 해결한 결과다. ### AI가 바꾼 도구와 커진 불확실성 - AI의 등장으로 디자인과 프로토타이핑 작업의 속도와 방식이 크게 달라졌다. - 기존에는 사람이 직접 만들고 수정하던 작업을 AI가 생성하거나 보조할 수 있게 되었다. - 그러나 새로운 도구가 생겼다고 해서 무엇을 만들어야 하는지, 어떤 경험이 좋은지, 문제가 실제로 해결되었는지가 자동으로 결정되지는 않는다. - AI는 생산성을 높일 수 있지만, 오히려 디자이너가 자신의 역할과 미래의 작업 방식을 다시 질문하게 만든다. ### AI는 만능 해결책이 아니라 또 하나의 도구 - 글은 AI를 기존의 디자인 도구와 완전히 단절된 혁신이라기보다, 도구 상자에 추가된 새로운 도구로 바라본다. - 중요한 것은 AI를 사용하는 것 자체가 아니라 어떤 문제에 어떻게 적용할지 판단하는 능력이다. - AI가 아이디어나 결과물을 빠르게 만들어도, 결과의 품질과 적합성을 평가하고 방향을 정하는 일은 사람에게 남는다. - 생성 속도가 빨라질수록 문제 정의, 선택, 수정, 검증의 중요성이 오히려 커진다. ### 어려운 문제에는 반복과 판단이 필요하다 - 복잡한 디자인 문제는 한 번의 생성이나 명령으로 해결되지 않는다. - 실제 작업에는 아이디어를 만들고, 시도하고, 실패한 부분을 발견하고, 다시 수정하는 반복 과정이 포함된다. - 인터랙션과 애니메이션처럼 사용자의 감각과 맥락이 중요한 영역에서는 물리 법칙이나 기술 구현뿐 아니라 “어떤 느낌을 전달해야 하는가”에 대한 판단도 필요하다. - AI가 일부 과정을 자동화해도 문제의 본질을 이해하고 적절한 결과를 선택하는 어려움은 사라지지 않는다. ### 디자이너와 엔지니어의 협업 - 복잡한 제품을 만들려면 디자인 감각과 기술적 구현 능력이 함께 필요하다. - 디자이너와 엔지니어는 각자의 전문성을 바탕으로 아이디어를 현실적인 제품으로 발전시킨다. - AI 역시 독립적인 대체자라기보다 사람이 사고하고 협업하는 과정에 참여하는 파트너로 묘사된다. - 좋은 결과는 특정 도구 하나보다 사람, 기술, 반복적인 협업이 결합될 때 만들어진다. ### 변하지 않는 일의 본질 - 도구는 빠르게 바뀌지만 사용자를 이해하고 문제를 정의하는 일은 여전히 어렵다. - 무엇을 만들지 결정하고, 결과가 실제로 유용한지 판단하며, 세부적인 경험을 다듬는 책임은 계속 사람에게 있다. - 따라서 AI 시대의 디자이너와 제품 담당자에게 필요한 역량은 도구 사용법만이 아니라 문제를 바라보는 관점과 판단력이다. AI는 작업을 더 빠르게 만들 수 있지만, 좋은 제품을 만들기 위한 탐구와 검증까지 대신하지는 않는다. 새로운 도구를 적극적으로 활용하되, 문제 정의와 인간의 판단, 디자이너·엔지니어 간 협업을 중심에 두는 것이 현실적인 접근이다.

figma

피그마가 스프링 (새 탭에서 열림)

Figma는 베지어 곡선 대신 물리 법칙을 기반으로 한 스프링 애니메이션을 도입해 더 자연스럽고 직관적인 움직임을 구현했다. 질량, 강성, 감쇠라는 물리적 매개변수로 움직임을 계산하면 오버슈트와 감속을 자연스럽게 표현할 수 있다. 다만 디자이너가 물리 상수를 직접 조정하기는 어렵기 때문에, 실제 제품에서는 이 값을 UI 속도·탄성·오버슈트 같은 직관적인 개념으로 다루는 것이 중요하다. ## 스프링 애니메이션이 필요한 이유 - 기존 Figma의 주요 방식은 베지어 애니메이션이었다. - 베지어 곡선은 시작과 종료 시점의 움직임을 세밀하게 지정할 수 있지만 다음 문제가 발생할 수 있다. - 물체가 갑자기 가속하는 것처럼 보임 - 이동 방향이 부자연스럽게 바뀜 - 속도가 아무 이유 없이 증가하는 느낌을 줌 - 정지 시점이 어색해짐 - 스프링 애니메이션은 이동 경로를 직접 그리는 대신, 물리적 속성을 지정하고 그 결과로 움직임을 계산한다. - 이를 통해 다음과 같은 자연스러운 효과를 만들 수 있다. - 무게감 있는 UI 요소의 움직임 - 적절한 오버슈트가 있는 팝업 - 부드럽게 감속하는 화면 전환 - FigJam의 이모트나 하이파이브처럼 생동감 있는 인터랙션 ## 질량·강성·감쇠로 움직임 정의하기 스프링 애니메이션은 세 가지 주요 변수로 구성된다. - **질량(Mass, m)** - 물체가 무거울수록 같은 힘으로 가속하기 어렵다. - 뉴턴의 운동 법칙으로 `F = m × a`로 표현된다. - 질량을 높이면 일반적으로 애니메이션이 더 느리고 묵직해진다. - **강성(Stiffness, k)** - 스프링이 원래 위치로 돌아가려는 힘의 정도다. - 스프링을 많이 당길수록 더 강하게 저항한다. - 훅의 법칙은 `F = -k × x`로 표현된다. - 강성이 높으면 목표 위치로 빠르게 복귀하고, 움직임이 더 민첩해진다. - **감쇠(Damping, b)** - 마찰처럼 움직임을 줄여 물체가 멈추도록 만드는 저항이다. - 속도가 빠를수록 더 큰 저항을 받으며 `F = -b × v`로 표현된다. - 감쇠가 높으면 흔들림과 오버슈트가 줄어들고 더 차분하게 멈춘다. - 세 변수의 조합에 따라 애니메이션은 부드럽거나, 빠르거나, 튀거나, 느린 형태로 달라진다. ## 물리 공식에서 코드로 - 스프링 애니메이션은 이미 정립된 물리 공식을 활용하므로, 이론을 코드로 옮기는 과정 자체는 안정적이다. - Figma는 개발 과정에서 **WebKit SpringSolver**를 활용했다. - 이 솔버에 질량, 강성, 감쇠 값을 입력하면 특정 시간의 위치 값 `x`를 계산할 수 있다. - 결과적으로 시간에 따른 위치를 구해 UI 요소를 애니메이션할 수 있다. ## 물리 매개변수와 디자이너의 언어 사이의 간극 - 질량·강성·감쇠는 정확한 물리 모델이지만, 디자이너가 애니메이션을 조정할 때 사용하는 표현과는 다르다. - 디자이너는 보통 다음과 같이 생각한다. - 더 빠르게 - 더 느리게 - 더 탄력 있게 - 더 많이 튀게 - 오버슈트를 줄이게 - 예를 들어 애니메이션을 느리게 만들 때 질량을 높일 수 있지만, 강성과 감쇠도 속도에 영향을 주므로 단순히 한 변수만 바꾸면 원하는 결과가 나오지 않을 수 있다. - 따라서 세 물리 변수 사이의 상호작용을 고려해 조정해야 한다. - Figma는 디자이너가 물리 공식을 직접 이해하지 않아도 자연스러운 결과를 만들 수 있도록, 세 변수를 한곳에서 조정하는 전용 도구를 개발하려 했다. ## 실용적인 결론 스프링 애니메이션은 이동 경로를 수작업으로 설계하기보다 물리적 규칙을 적용해 자연스러운 움직임을 얻는 방식이다. 구현 시에는 WebKit SpringSolver 같은 검증된 솔버를 활용하고, 사용자 인터페이스에서는 질량·강성·감쇠 대신 속도·탄성·오버슈트처럼 이해하기 쉬운 추상화를 제공하는 것이 효과적이다.