스마트 애니메이트와 같은 주요
Figma는 사용자 요청이 많았던 고급 프로토타이핑 기능으로 **Smart Animate**와 **Drag**를 출시했다. Smart Animate는 유사한 객체를 자동으로 애니메이션화하고, Drag는 사용자의 손가락 드래그에 따라 전환을 제어한다. 기능 설계 과정에서는 사용자 피드백을 수집하고 다양한 사례에서 공통 패턴을 도출한 뒤, 기존 Figma 기능과 자연스럽게 통합하는 데 초점을 맞췄다. ## 사용자 불편에서 출발한 기능 설계 - Figma는 인앱 NPS 설문과 고객 지원 피드백을 통해 프로토타이핑 관련 요구를 지속적으로 수집했다. - 사용자들이 원한 것은 복잡한 애니메이션보다는 다음과 같은 일상적인 인터랙션이었다. - 드롭다운 메뉴 - 버튼 호버 효과 - 팝업의 부드러운 등장과 전환 - 탭 전환 - 화면 간 자동 애니메이션 - 드래그·슬라이드 기반 전환 - NPS 점수 자체보다, 사용자가 실제로 겪는 불편과 원하는 작업 방식을 파악할 수 있는 개방형 피드백 채널이라는 점에 의미를 뒀다. - 초기 피드백을 제공한 사용자 중 일부는 Smart Animate의 첫 베타 사용자로 참여했다. ## 다양한 사례에서 공통 패턴 도출 - 특정 사례 하나만 기준으로 기능을 설계하면 활용 범위가 제한될 수 있으므로, 고객 사례와 일상적인 인터랙티브 인터페이스를 폭넓게 조사했다. - 그 결과 첫 출시에서 지원할 핵심 패턴을 두 가지로 정리했다. ### 화면은 유지되고 객체만 변하는 경우 - 사용자는 같은 화면에 머물지만 특정 객체가 나타나거나 사라지거나 형태를 바꾼다. - 예시는 다음과 같다. - 동영상에 마우스를 올렸을 때 재생 바가 나타나는 경우 - 내비게이션 항목에 마우스를 올렸을 때 드롭다운이 펼쳐지는 경우 - 객체를 스와이프해 제거하면 뒤의 콘텐츠가 나타나는 경우 ### 일부 UI는 고정되고 주요 콘텐츠가 바뀌는 경우 - 탭 내비게이션처럼 일부 요소는 고정된 채 화면 대부분의 콘텐츠가 전환된다. - 콘텐츠를 좌우로 드래그하면 콘텐츠가 이동하고, 탭 표시기는 반대 방향으로 움직이는 등 더 복잡한 애니메이션을 구현할 수 있다. ## Figma에 맞는 방식으로 통합 - Figma는 유사한 문제를 해결한 다른 도구들을 참고하되, 새로운 기능이 기존 프로토타이핑 기능과 자연스럽게 연결되어 “Figma답게” 느껴지도록 설계했다. - 이를 위해 기존 기능도 다시 검토했다. 특히 객체와 레이어를 자동으로 연결해 애니메이션하는 기본 동작을 개선했다. - Smart Animate는 별도의 복잡한 설정 없이도 가능한 한 자동으로 작동하도록 설계됐다. - 레이어의 자동 이름 지정 및 변경 방식을 수정해, 다음 조건이 맞는 객체들이 서로 대응되도록 했다. - 레이어 계층 구조 - 레이어 이름 - 객체의 순서 - 이러한 기준으로 대응되는 레이어는 화면 전환 시 자동으로 애니메이션된다. - 겉보기에는 단순한 레이어 이름 개선처럼 보이지만, 기존 동작과 새 기능을 안정적으로 연결하기 위해 많은 설계와 구현 작업이 필요했다. ## Smart Animate와 Drag의 역할 - **Smart Animate** - 서로 대응되는 유사 객체를 자동으로 찾아 전환 애니메이션을 적용한다. - 기존 전환 기능을 개선하고, 드롭다운·탭·호버·화면 전환 등 다양한 인터랙션을 표현할 수 있게 한다. - **Drag** - 사용자의 손가락이나 포인터 드래그를 전환의 입력으로 사용한다. - 단순히 클릭하면 전환되는 프로토타입보다 실제 앱의 제스처에 가까운 상호작용을 구현할 수 있다. Figma의 접근 방식은 기능을 많이 추가하는 데 그치지 않고, 실제 사용자 불편을 수집한 뒤 공통 패턴으로 추상화하고 기존 작업 흐름에 자연스럽게 녹여내는 것이었다. 유사한 전환을 만들 때는 레이어의 이름·계층·순서를 일관되게 관리하고, Smart Animate와 Drag를 활용하면 별도 도구 없이도 개발자에게 전달할 수 있는 인터랙션 프로토타입을 만들 수 있다.
원문 읽기(새 탭에서 열림)