[Framer-X] 프로토타이핑 화면 녹화하는 방법

Kyuho Lee
3 min readMar 2, 2020

How to record the screen of Framer-X prototyping

https://www.pexels.com/photo/blur-business-coffee-commerce-273222/

프로토타이핑 결과 화면을 녹화하는하는 것은 기본적인 기능이라고 생각한다. 따라서 시장에 나와있는 많은 툴들이 화면 녹화 기능을 포함하고 있다.

그런데 Framer-X는 이전 Classic 부터 이 기능을 제공하지 않고 있다. 물론 나와 같이 다른 사람들도 아래와 같이 이 기능을 요청하고 있는 상태이다.

언제 Framer에서 이 기능을 넣어 줄지는 모르겠지만, 그 전까지 내가 하는 방법을 소개하고자 한다.

Quicktime Screen Recording

동영상으로 recording을 할 때 사용한다. 맥북에 기본으로 설치되어 있는 Quicktime으로 화면을 녹화한다. 녹화할 영역을 드래그해서 잡아야 하므로 좀 귀찮을 수 있다. 하지만 무료라서 좋다.

GIF Brewery by Gfycat

GIF로 recording을 할 때 사용한다. 많은 디자이너들이 이 툴을 사용해서 본인들의 작업을 인터넷에 올리고 있다.

Android Studio Record a video

조금 난이도가 있고 귀찮은 방법이긴 한데 제일 정확한다. Prototype결과를 Web Preview로 export 해서 Android 폰으로 구동한 뒤 Android Studio의 Recording기능을 이용해서 동영상을 만든다. 물론 Android Studio 대신 폰에 이미 설치한 다른 앱을 이용해서 녹화할 수도 있다.

https://developer.android.com/studio/debug/am-video

자 그럼 Framer가 해당 기능을 빨리 넣기를 기다리자.

--

--