Figma - 인터랙티브 컴포넌트

최근에 피그마에 인터랙티브 컴포넌트란 기능이 추가되었는데요. 꽤 오래전에 베타 테스트를 진행해서 사용해봤지만, 베타인 이유도 있고, 프로젝트 중간에 적용하는 건 리스크가 많아서 적극적으로 사용해보지는 않았습니다. 빨리 정식 버전에 추가되기를 기다리다가 이번에 정식으로 지원하게 되어서 포스트를 남겨봅니다.

 

디자인 시스템에 친숙한 디자이너에게는 혁신적인 기능이라고 생각합니다. 기존에는 인터랙티브한 장면을 만들기 위해서는 그에 대응되는 경우의 수 혹은 화면(프레임)을 모두 만들어야 돼서 리소스 소모도 심하고 관리 측면에서도 힘든 부분이 많았습니다. 하지만 인터랙티브 컴포넌트를 통해서는 하나의 화면만 있어도 인터랙티브 한 컴포넌트 구현이 가능합니다. 개발에 친숙한 디자이너 시라면 DOM과 Virtual DOM의 차이와 비슷하다고 생각하시면 편합니다. 아래의 예제에서 상단은 프로젝트 화면이고, 하단은 실제로 인터랙션 가능한 프로토타입입니다.

 

 

 

실제로 사용하다보니 버그가 좀 있는 편입니다. 약간만 복잡해져도 의도하지 않은 인터랙션이 나오는데 컴포넌트를 좀 간단하게 만드는 게 당장의 해결책으로 보입니다. 인터랙티브 컴포넌트 기능을 사용하기 위해서는 컴포넌트 활용이나 관리 능력이 중요해 보입니다. 마지막으로 새롭고 강력한 기능이지만 웹 혹은 앱에서 용도에 맞는 인터랙션이 중요하다는 걸 항상 염두해주시고 작업하시면 좋을 거 같습니다.