버전 관리: Figma Make가 (새 탭에서 열림)

Figma Buzz의 영상 재생 기능은 단순한 재생 버튼 배치만으로 해결하기 어려웠다. Figma의 프로덕트 디자이너 Natasha Tenggoro는 Figma Make를 활용해 영상 위치와 가시성에 따른 재생 UI 동작을 빠르게 프로토타이핑했고, 이를 통해 디자인 의도를 엔지니어링 팀과 구체적으로 공유했다. 처음에는 단일 영상 지원으로 시작했지만, 다중 영상 지원이 가능해지면서 기존 재생 경험을 다시 설계하게 됐다.

영상 재생 UI가 어려웠던 이유

• Figma Buzz에서는 영상 위에 로고, 텍스트, 이미지 등 여러 요소를 겹쳐 배치할 수 있다.
• 따라서 영상 중앙에 고정된 일반적인 재생 버튼은 다른 디자인 요소를 가리거나 작업을 방해할 수 있었다.
• 사용자가 영상을 캔버스 안팎으로 자유롭게 이동할 수 있어 다음과 같은 상태를 고려해야 했다.
  • 영상이 프레임 안에 완전히 있을 때
  • 일부만 프레임 밖으로 나갔을 때
  • 영상 대부분 또는 전체가 프레임 밖에 있을 때
• 영상 크기를 크게 확대하면 재생 컨트롤이 영상과 떨어져 캔버스의 엉뚱한 위치에 표시될 수 있었다.
• 여러 자산을 동시에 보는 그리드 뷰에서는 재생 컨트롤이 다른 자산과 겹칠 가능성도 있었다.

Figma Make를 이용한 빠른 프로토타이핑

• 기존 Figma Design 프레임을 Figma Make에 가져와 이미 구성된 UI를 기반으로 프로토타입을 만들었다.
• 핵심 프롬프트는 다음과 같았다.
  • 고정된 부모 프레임 안팎으로 미디어 프레임을 드래그
  • 부모 영역 밖으로 나간 영상 부분은 잘라내지 않고 20% 불투명도로 표시
  • 재생 UI 배지는 영상의 오른쪽 위에 고정
  • 배지가 부모 프레임 밖으로 나가면 보이도록 위치 조정
  • 영상의 20% 미만만 보이면 배지를 페이드아웃
  • 영상이 다시 보이면 배지를 페이드인
• 실제 동작하는 코드와 인터랙션을 보여줌으로써 엔지니어가 기능의 범위와 구현 가능성을 빠르게 판단할 수 있었다.
• 그 결과 추상적인 디자인 설명이 우선순위가 있는 기능 논의로 전환됐고, 디자인 의도와 개발 비용 사이의 간극을 줄일 수 있었다.

버전 1: 단일 영상 재생

• 대부분의 마케팅 자산이 영상 하나만 포함한다는 점과 촉박한 일정 때문에 초기에는 단일 영상 지원을 선택했다.
• 재생 UI를 캔버스 중앙이 아니라 영상 자체에 연결해 다른 요소를 가리지 않도록 했다.
• 영상의 위치와 부모 프레임과의 관계에 따라 재생 배지의 위치와 표시 여부가 바뀌도록 설계했다.
• 이 접근 방식은 단일 영상에는 적합했지만, 다중 영상 지원이 추가되면서 한계가 드러났다.

다중 영상 지원으로 인한 재설계

• 기술 검토 결과, 출시 일정 안에 하나의 Figma Buzz 자산에서 여러 영상을 지원할 가능성이 생겼다.
• 영상 콜라주처럼 여러 영상이 포함된 자산에서는 두 가지 선택지가 있었다.
  • 각 영상을 개별적으로 클릭해 재생
  • 하나의 버튼으로 모든 영상을 동시에 미리보기
• 팀은 UI가 여러 영상 위에 반복적으로 나타나 디자인을 가리는 문제를 피하기 위해 전체 재생 컨트롤 하나를 선택했다.
• 이 방식은 화면을 더 깔끔하게 유지하면서 자산 전체의 움직임을 한 번에 확인할 수 있는 통합적인 미리보기 경험을 제공한다.
• 다중 영상 지원은 기존의 “영상별 재생 UI” 가정을 바꾸고, 재생 경험을 개별 객체 중심에서 전체 자산 중심으로 전환하게 만들었다.

실용적인 결론

복잡한 인터랙션은 정적인 화면이나 말로 설명하기보다 실제로 작동하는 프로토타입으로 보여주는 편이 효과적이다. 특히 영상 위치, 가시성, 겹침, 다중 객체 재생처럼 상태가 많은 기능에서는 Figma Make를 사용해 초기 단계부터 엣지 케이스를 검증하면 디자인과 개발 간 커뮤니케이션을 빠르게 개선할 수 있다.