프로토타입 영상 뽑아내기
있어빌리티를 위한 각고의 노력들
프로토타이핑 툴 춘추전국시대를 지나, 이제 국내에서는 프레이머와 프로토파이 두 가지 툴이 주류로 정리되는 분위기다. 코딩의 유무가 가장 큰 차이점이기는 하지만, 내가 느끼는 더 큰 차이는 결과물의 포멧이다.
프로토파이의 경우에는 영상으로 내보내기 기능을 자체적으로 제공하고 있지만, 프레이머는 따로 제공하는 기능이 없어서 인터랙션을 영상으로 만들기 위해서는 약간의 수작업이 필요한 상황이다. 심지어 프레이머에서는 이와 관련한 글을 발행하기도 했다.
프로토파이였다면 고민하지 않았을지도 모를 일이지만, 내가 주로 사용하는 툴은 프레이머인 까닭에, 혹시나 나와 같은 고민을 하는 사람들에게 작은 도움이나마 보태고자, 그동안 수차례의 시행착오를 거쳐 완성한 영상화 작업의 프로세스를 소개해 볼까 한다.
기본적인 영상 녹화하기
맥에는 퀵타임이라는 훌륭한 무료 툴이 있다. 화면 녹화가 가능한 덕분에 프레이머 프리뷰 화면을 녹화하고, 불필요한 부분을 잘라주기만 하면 된다.
퀵타임에서 기록과 관련한 기능은 동영상 기록, 오디오 기록, 화면 기록, 이렇게 세가지가 있는데, 그 중에서 ‘화면 기록’ 메뉴를 선택하면 현재 작업중인 화면을 그대로 녹화할 수 있다. (단축키는 ctrl + cmd + N)
전체화면을 녹화하거나, 크롭해서 녹화할 수도 있다. 원하는 장면을 모두 담은 후에는 메뉴바에 있는 녹화 중지 버튼을 클릭하여 종료한다.
편집도 간단하다. ‘편집 > 다듬기’(단축키는 cmd + T)를 선택하고, 아래의 타임라인에서 좌우의 핸들을 통해 원하는 길이만큼 드래그 하면 된다. 아이폰에서 촬영한 영상을 편집하는 것과 같다.
편집을 완료한 이후에 ‘파일 > 다음으로 내보내기’를 선택하면 480p에서부터 4k까지 다양한 해상도로 영상을 내보낼 수 있다. 프로토타입 영상은 주로 프리젠테이션 목적인 관계로 왠만하면 1080p로 내보내는 편이다.
소리와 함께 녹화하기
프로토타입에서 영상이나 음악처럼 소리가 중요한 요소인 경우에는 컴퓨터에서 재생되는 소리까지 함께 녹화해야 할 필요가 있다. 하지만 퀵타임으로 녹화해보면 마이크를 통해 입력되는 외부 소리만 유입될 뿐, 프로토타입에서 재생되는 소리는 들어가지 않는다.
스피커 음량을 최대로 하고 녹화해 본 적도 있는데, 소리가 들어가기는 하지만 도저히 못 들어줄 수준의 품질이었다. 이 고민을 해결해 준 것이 바로 ‘사운드 플라워’ 였다.
사운드 플라워를 다운받은 뒤, 맥의 ‘시스템 환경설정 > 사운드 > 출력’ 탭을 보면 SoundFlower (2ch/64ch)가 생긴 것을 확인할 수 있다.
출력에서 Soundflower (2ch)를 선택한 후, 퀵타임의 새로운 화면 기록에서도 음성 입력 소스로 Soundflower (2ch)를 선택한다.
그러면 아무런 소리도 나지 않는다… 하지만 절대 잘못된 것이 아니다. 당황하지 말고 원하는 장면을 차분히 녹화한 후에, 다시 맥의 시스템 환경설정에서 출력을 원래대로 되돌리면 녹화된 영상에서 소리를 들을 수 있다. 조금 수고스럽지만 이렇게 하면 소리와 함께 화면이 녹화된다.
프로토타입과 실제 사용 장면 동시에 녹화하기
한 번은 이런 적도 있었다. 실제 사용자가 인터랙션하는 장면과 디바이스에 표시되는 장면을 동시에 보여주어야 하는 상황이었다. 프로토타입 화면과 스마트폰 사용 장면을 각각 녹화한 다음 영상 편집을 해야 하나 싶었지만, 너무 번거로워 보였다.
이번에도 애플이 제공하는 무료 툴을 활용해 보았다. 이번에는 아이폰과 퀵타임과 포토부스가 필요하다. 아이폰과 맥을 usb 케이블로 연결하고 아이폰에서 프로토타입을 띄운 다음, 퀵타임에서 ‘동영상 기록’을 선택한다. 처음에 본인의 얼굴이 모니터 한가득 나와도 당황하지 말자. 영상 입력 소스로 아이폰을 선택하면 된다.
아이폰이 연결되었다면 다음으로 포토부스를 열어서 적당한 크기로 퀵타임 옆에 띄운다. 이제 사용 장면과 프로토타입 화면을 동시에 볼 수 있게 된 것이다. 이 때에 배경화면은 왠만하면 색상, 그 중에서도 흰색이 좋다. 사진을 배경화면으로 설정한 경우에는 시선이 분산되어 엄청 산만한 화면을 경험하게 될 것이다.
셋팅이 완료되었다면 가장 처음 언급한 방법인 퀵타임 화면 녹화를 통해 포토부스와 퀵타임(아이폰 화면)을 녹화하면 된다. 여기서 한 가지 아쉬운 점이 있다면, 포토부스에 비춰지는 영상이 좌우반전 상태라는 것이다. 포토부스에서는 촬영한 결과물을 자동 반전시키는 기능이 있지만, 프리뷰 화면 자체를 반전시키는 기능은 제공하지 않는다.
포인트 강조하기
설득을 위한 영상이라면 약간의 기교가 필요할 때가 있다. 가요 프로그램에서 무대의 풀 샷 영상만 보여준다면 얼마나 생동감이 떨어질까? 드리블이나 비핸스에 올라오는 감각적인 컨셉들은 종종 적절한 줌 인과 줌 아웃을 통해 핵심 요소를 강조한다. 약간 오버 스펙인가 싶었지만, 이것도 한 번 해보기로 했다.
프리미어나 파이널컷을 다룰 줄 안다면 일도 아니었겠지만, 나에게는 다른 쉬운 대안이 필요했고, 퀵타임, 포토부스에 이어 또 하나의 훌륭한 무료 툴인 아이무비를 이용해 보았다.
작업할 프로토타입 영상을 불러온 후 드래그&드랍으로 아래 타임라인에 올려놓으면 준비 끝.
타임라인을 살펴보며 적절한 위치를 찾아 클립을 분리한다. (단축키는 cmd + B)
분리된 두 개의 클립 중에서 줌 인 효과가 시작될 클립을 선택한 후, 프리뷰 화면에서 자르기 메뉴를 클릭한다.
자르기 메뉴에서는 각각 맞추기, 잘라서 채우기, Ken Burns의 세 가지 스타일을 제공한다. 줌 인 효과를 위해서는 이 중에서 Ken Burns가 필요하다.
Ken Burns를 선택하면, 시작 영역과 종료 영역을 지정하는 가이드가 나오는데, 전체화면 중 특정 영역을 확대하기 위해서는 종료 영역의 크기를 줄이고 그 위치를 프로토타입의 강조할 포인트에 배치하면 된다.
종료 영역을 프리뷰 화면의 한 쪽 귀퉁이에 붙이고 드래그 하면서 크기를 조절하다 보면 정확히 프리뷰 화면의 1/4 크기가 되는 순간 가이드 라인이 나타난다. 이렇게 하면 이후에 분리된 클립을 연결할 때에 화면 크기를 똑같이 맞추기 편하다.
이렇게 만들어진 줌 인 효과는 분리된 클립 전체에 적용되어 영상이 종료될 때까지 서서히 진행되므로, 순간적인 줌 인을 위해서 한 번 더 클립을 분리한다. 0.5초 정도가 적당한 것 같다.
여기까지 했다면 타임라인에는 분리된 3개의 클립이 표시된다.
이제 줌 아웃 효과를 만들 차례. 줌 인 효과와 마찬가지로 줌 아웃 할 지점을 찾아서 클립을 분리한다. 분리한 클립을 선택하고 프리뷰 화면에서 자르기 메뉴를 클릭하면, 처음에 적용했던 줌 인 효과가 그대로 남아 있는 것을 확인할 수 있다.
줌 인 효과에서 지정한 시작과 종료 영역을 반전시키면 그대로 줌 아웃이 되는데, Ken Burns 옆에 있는 버튼을 클릭하면 간단히 해결된다.
줌 아웃 효과도 마찬가지로 순간적인 줌 아웃을 위해 0.5초 정도로 또 한 번 클립을 분리한다. 이제 총 5개의 클립이 타임라인에 표시된다. 순서상 두 번째, 네 번째 클립이 각각 줌 인과 줌 아웃 순간이다.
하지만 세 번째, 다섯 번째 클립에도 불필요한 효과가 적용되어 있으니 화면을 정리할 필요가 있다.
먼저 세 번째 클립을 정리한다. 줌 인 이후의 화면이므로 확대한 상태가 유지되어야 한다. 줌 인 효과에서 적용한 Ken Burns의 종료 영역과 동일하게 화면을 맞추면 된다.
자르기 스타일 중, 잘라서 채우기를 선택하면 전체 화면의 크기와 위치를 조절할 수 있는데, 종료 영역처럼 프리뷰 화면의 1/4 크기로 맞춘 다음, 위치도 종료 영역과 동일하게 배치한다.
이렇게 하면 세 번째 클립은 확대된 상태를 유지하게 된다.
다섯 번째 클립은 줌 아웃 이후 전체 화면이 표시되어야 하므로, 자르기 스타일 중, 맞추기를 선택한다. 맞추기는 별다른 설정 없이 전체 화면을 그대로 보여주는 옵션이다.
이제 모든 클립이 정리되었다!!
완성된 영상은 ‘파일 > 공유’를 통해 내보낼 수 있다. 유튜브, 페이스북, 비메오 등 다양한 선택지를 제공하고 있지만, 조용히 파일을 선택한다. 대외비를 SNS에 공개하는 과오를 범하지 않기를 바란다.
이제 완성된 파일을 감상하며 뿌듯해 하기만 하면 된다. 이렇게 또 하나의 잔재주가 생겼다.
GIF 만들기
애플의 은혜로운 각종 무료 툴과 함께 프로토타입을 영상으로 뽑아내는 일은 비교적 수월해졌다. 하지만 아쉬운 한 가지. 개인 작업의 경우에는 드리블이나 비핸스에 올리는 경우가 많은데, 비핸스라면 모를까, 드리블에는 영상을 바로 올릴 수 없으므로 gif 변환이 필수였다.
간단한 버전과 약간 손이 가는 버전 두 가지가 있는데, 우선 간단한 버전부터 살펴본다.
1. GIPHY Capture
움짤계(?)에서 독보적인 위치를 차지하고 있는 Giphy에서 만든 gif 생성 툴이다. 아무래도 움짤 생태계를 더욱 확대하고 발전시키기 위해서 보급형 툴을 만든 것 같다.
GIPHY Capture를 실행하면 작은 창이 나타나는데, 창의 크기 만큼 화면을 녹화해서 gif로 만들어 준다. 그렇기 때문에 프로토타입 프리뷰 만큼 창을 키우고 녹화 하기만 하면 된다.
부가 기능으로 녹화된 구간의 편집과 간단한 설정들을 지원하며, 캡션도 추가할 수 있다.
단, 최대 30초까지 캡쳐할 수 있으므로 주의가 필요하다.
2. GIF Brewery 3
GIF Brewery 3는 약간 손이 가는 버전이다. 원래 유료였는데, 가끔 이벤트를 통해 무료로 풀리더니, 작년부터 아예 무료로 돌아선 모양이다.
앱을 실행하면 곧바로 화면을 캡쳐할 지, 아니면 영상을 gif로 변환할 지, 선택할 수 있는 메뉴가 등장한다. 이외에도 몇 가지 메뉴가 있지만 가장 빈번한 프로세스가 ‘퀵타임 영상 녹화 후, 필요할 때에 gif 변환’ 이었던 관계로 여기서는 영상 변환 메뉴 중심으로 설명을 해본다.
리사이즈와 크롭 기능이 있으며, 디자인 툴에서 보았던 캔버스 크기 조절도 있다. 캡션이나 스티커 추가, 프레임 보기와 오버레이 설정도 있지만 자주 사용할 것 같지는 않다.
가장 강력하다고 생각했던 기능은 설정에 있다. 디더링 옵션들을 통해서 화질 저하를 최소화 하면서 용량을 줄일 수 있는 다양한 선택지를 제공한다.
프레임 수와 딜레이를 조절하거나, 초당 프레임 수를 조절할 수 있고, 컬러 카운트나 디더링 알고리즘을 선택할 수도 있다.
GIF Brewery 3를 통해 충분히 만족스러운 결과물을 얻을 수 있지만, 만약 드리블이나 비핸스의 고퀄 gif를 원한다면 위의 프레이머 아티클에 등장하는 Claquette를 사용하는 것도 추천한다.
TL;DR
발단 // 프로토파이의 영상 내보내기 기능, 프레이머에는 없음
전개 // 퀵타임으로 프로토타입 화면 녹화 - 사운드 플라워 설치하면 소리도 함께 녹화 가능
위기 // 아이폰과 맥 연결하여 퀵타임으로 폰 화면 띄우기 + 포토부스로 사용 장면 화면에 띄우기 = 퀵타임으로 모든 장면 한 번에 녹화 but 포토부스는 화면 좌우 반전됨
절정 // 아이무비로 녹화한 장면 줌 인, 줌 아웃 효과 추가 (Ken Burns), 애플 무료 툴 만세!
결말 // 간단한 gif는 GIPHY, 다양한 디더링 옵션은 GIF Brewery 3 - 유료 툴은 Claquette 추천
