기능 비하인드: (새 탭에서 열림)

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

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

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

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

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

다양한 기기 형태의 표현

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

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

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

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

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

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