기능 비하인드:

Figma는 프로토타입을 실제 기기에서 사용하는 경험에 가깝게 만들기 위해 모바일·태블릿·워치용 인라인 디바이스 프레임을 에디터 안에 도입했다. 사용자는 프레젠테이션 화면으로 이동하지 않고도 디자인 옆에서 기기 프레임을 배치·이동·크기 조절하며 프로토타입을 확인할 수 있다. 이 기능은 다양한 기기 형태를 반영하면서도 자연스러운 상호작용과 협업 중심의 디자인 프로세스를 유지하는 것을 목표로 개발됐다.

프로토타이핑을 현실에 가깝게 만드는 이유

• 실제 기기를 손에 들고 화면과 플로우를 확인하면 제품이 실제로 어떻게 작동하는지 더 잘 이해할 수 있다.
• 프로토타입은 개발 전에 사용성 문제, 설계의 빈틈, 개선 기회를 발견하게 해준다.
• Figma는 2023년 Config에서 실시간으로 프로토타입을 확인하는 인라인 프리뷰를 선보였고, 이후 기기 프레임까지 에디터 내부로 확장했다.
• 프레젠테이션 뷰로 이동하지 않아도 디자인 작업과 실제 기기 맥락 확인을 동시에 할 수 있게 된 것이 핵심이다.

협업을 기반으로 한 기능 설계

• Figma는 기존 프레젠테이션 뷰에서 제공하던 다양한 기기 프리셋이 인기가 높다는 점에 주목했다.
• 이를 에디터 안으로 가져와 디자인 옆에서 휴대폰, 태블릿, 워치 프레임을 사용할 수 있도록 했다.
• 제품 디자이너, 엔지니어, 제품 관리자, 마케팅 담당자와 사용자 커뮤니티의 의견을 함께 반영했다.
• 개발 과정에서 세운 핵심 원칙은 다음과 같다.
  • 디자인 작업 흐름에 자연스럽게 통합할 것
  • 다양한 실제 기기를 현실적으로 표현할 것
  • 기기의 상호작용 영역을 직관적으로 설계할 것
• 목표는 단순한 정적 이미지가 아니라, 사용자가 잡고 이동하고 크기를 조절할 수 있는 반응형 기기를 에디터 안에 구현하는 것이었다.

다양한 기기 형태의 표현

• 인라인 프리뷰 공간의 제약 때문에 초기 대상은 개인용 컴퓨터보다 상대적으로 작은 모바일, 태블릿, 워치로 한정했다.
• 기기마다 화면 비율과 외형이 다르므로 하나의 고정된 프레임으로는 다양한 사용 환경을 표현하기 어렵다.
• 스마트폰의 카메라와 센서를 수용하기 위해 화면 일부가 파인 노치(notch) 같은 요소도 고려해야 했다.
• 화면뿐 아니라 기기 외곽, 모서리, 센서 영역 등 실제 사용 경험을 구성하는 시각적 요소를 함께 재현해야 했다.

자연스러운 크기 조절과 상호작용

• 인라인 디바이스 프레임은 디자인 요소처럼 에디터 안에서 이동하고 크기를 조절할 수 있어야 했다.
• 특히 워치처럼 외형이 작고 복잡한 기기는 어느 영역을 드래그하거나 조작할 수 있게 할지 결정하기 어려웠다.
• 프레임의 상호작용 가능한 영역, 즉 히트 타깃을 명확하고 직관적으로 설계하는 것이 중요한 과제였다.
• 기기마다 형태가 다르더라도 사용자가 별도의 학습 없이 동일한 방식으로 조작할 수 있도록 상호작용 규칙을 정리해야 했다.

프로토타이핑 기능 전반의 개선

• 인라인 디바이스 프레임과 함께 여러 프로토타이핑 개선 사항도 제공됐다.
• 연결선을 복사·붙여넣기해 인터랙션을 빠르게 복제할 수 있다.
• 플로우를 빠르게 삭제하는 기능이 추가됐다.
• 로컬 변수가 포함된 요소를 새 파일로 쉽게 가져올 수 있는 고급 기능도 제공됐다.
• 주요 사용 사례에서 로딩 스피너가 나타나는 시간이 22% 줄어 성능도 개선됐다.

실무에서는 모바일·태블릿·워치 화면을 설계할 때 인라인 디바이스 프레임을 활용해 디자인과 실제 사용 맥락을 동시에 검토하는 것이 유용하다. 특히 기기별 화면 비율, 노치, 워치의 작은 터치 영역처럼 실제 환경에서 발생하는 문제를 개발 전에 확인하는 데 적합하다.