피그마(Figma)는 기존의 단순한 화면 전환 방식을 넘어, 실제 애플리케이션과 유사하게 동작하는 복잡한 프로토타이핑을 구현하기 위해 내부 엔진을 근본적으로 재설계했습니다. 이번 업데이트의 핵심은 트리거와 액션을 분리하고 변수(Variables)와 조건부 로직을 처리할 수 있는 독립적인 상호작용 엔진을 구축한 것입니다. 이를 통해 디자이너는 수많은 프레임을 복제하지 않고도 고도화된 인터랙션을 효율적으로 관리할 수 있게 되었습니다.

상태 머신에서 동적 상호작용 엔진으로의 전환

과거의 프로토타이핑은 프레임과 프레임을 1:1로 연결하는 유한 상태 머신(Finite State Machine) 방식에 의존하여, 복잡한 로직을 구현하려면 수백 개의 프레임이 필요했습니다.
새로운 엔진은 변수와 표현식을 실시간으로 계산하는 방식으로 동작하며, 고정된 경로가 아닌 현재 데이터 상태에 따라 동적으로 다음 화면을 결정합니다.
이러한 변화는 프로토타입의 유지보수성을 극적으로 높여주며, 디자인 수정 시 발생하던 연쇄적인 링크 끊김 문제를 해결합니다.

트리거와 액션의 구조적 분리

상호작용을 '트리거(Trigger, 언제 일어나는가)'와 '액션(Action, 무엇이 일어나는가)'으로 완전히 분리하여 설계했습니다.
하나의 트리거에 여러 개의 액션을 쌓을 수 있는 '다중 액션(Multiple Actions)' 기능을 도입하여, 클릭 한 번으로 변수를 설정하고 화면을 이동하며 알림을 띄우는 복합적인 동작이 가능해졌습니다.
액션 실행 시 순차적 연산을 보장하여, 이전 액션에서 변경된 변수 값이 다음 조건문(Conditional)에 즉시 반영되도록 로직의 정교함을 더했습니다.

표현식 평가와 성능 최적화

수학적 연산과 불리언(Boolean) 로직을 처리하기 위해 경량화된 표현식 평가 엔진을 구축했습니다.
변수 값이 변경될 때 전체 화면을 다시 그리는 대신, 해당 변수를 참조하는 요소들만 선택적으로 업데이트하는 반응형 렌더링 방식을 채택했습니다.
이를 통해 복잡한 수식이 포함된 프로토타입에서도 초당 60프레임(FPS)의 매끄러운 성능을 유지하며 사용자 경험을 저해하지 않도록 설계했습니다.

효율적인 프로토타이핑을 위한 제언

고급 프로토타이핑 기능을 활용할 때는 모든 상태를 프레임으로 만드려는 습관에서 벗어나야 합니다. 변수와 조건부 로직을 적극적으로 사용하여 프레임 개수를 최소화하고, 하나의 트리거에 여러 액션을 조합하여 실제 제품의 로직을 모사하는 것이 설계 효율성과 성능 측면에서 모두 유리합니다.