사람처럼 당신의 앱을 직접 사용하면서 스스로 화면을 녹화하는, 전용 컴퓨터를 갖춘 클라우드 에이전트(예: Devin)를 활용하면 픽셀 퍼펙트한 제품 튜토리얼 제작을 자동화할 수 있습니다. 기술적으로는 꽤 전부터 가능했던 일이지만, Opus 5.5 를 거치며 결과물이 제가 직접 손으로 만드는 것보다 더 나은 수준으로 발전했습니다.
저는 10 년 넘게 이런 종류의 튜토리얼을 만들어 왔기에, 결코 가볍게 하는 말이 아닙니다. 특히 출연자 없이도 되는 기본적이면서도 중요한 튜토리얼에 아주 유용합니다. 게다가 작업은 100 배 더 쉽고 빨라졌죠.
요약:
클라우드 에이전트는 이미 자기만의 컴퓨터를 가지고 있습니다. 모든 설정이 완료된 시스템 계정, 문서 접근 권한, 스타일 가이드 등 필요한 리소스를 모두 제공해 주세요.
그런 다음 사람에게 부탁하듯 에이전트에게 튜토리얼 제작을 요청하면 됩니다.
이 작업을 진행할 때 제 환경의 스크린샷입니다(오른쪽은 클라우드 컴퓨터 로그인 화면, 왼쪽은 프롬프트):
이 방식은 Devin 에서 특히 잘 작동합니다. Devin 은 클라우드에 네이티브 macOS, Linux, Windows 머신을 갖추고 있어 웹 앱, 네이티브 iOS·iPad·macOS 앱, Windows 앱, Android 앱 등 사실상 무엇이든 실행할 수 있기 때문입니다.
또한 어떤 앱이든 다운로드하고, 앱이나 서비스에 인증하며, 자격 증명을 안전하게 불러와 사람이 사용하는 모든 도구를 똑같이 다룰 수 있습니다.
따라서 iPhone 앱, Android 앱 등을 위한 동일한 튜토리얼을 그대로 만들 수 있습니다.
좋은 워크플로우만 갖춰지면, 원하는 모든 기능의 데모를 동시에 병렬로 제작할 수 있습니다. 클라우드 에이전트는 한 번에 수백 대, 심지어 수천 대의 컴퓨터를 동시에 가동할 수 있으니까요.
새로운 변경 로그가 올라올 때 영상 제작이 동시에 트리거되도록 프로세스 전체를 자동화할 수도 있습니다.
실제로 Devin 은 이 과정을 어떻게 진행하는지 보여주는 튜토리얼까지 직접 만들었습니다!
테스트 및 검증
이 모든 것은 Devin 이 매일 수행하는 기존 작업을 기반으로 합니다. 바로 앱을 엔드투엔드로 테스트하고, 모든 과정을 실행하며, 클릭하거나 입력하는 위치를 강조하는 화면 주석과 함께 전체 과정을 영상으로 녹화하는 일입니다.
결국 하나의 컴퓨터일 뿐이므로 목업(mock) 처리되는 부분은 없습니다. 앱을 설치하고, 로그인한 뒤, 실제로 앱을 사용합니다.
튜토리얼은 기본적으로 이 실행 과정에 스타일 가이드를 얹은 것이므로, 게시하기 전에 이미 정상 작동 여부가 검증된 셈입니다.
작동 방식을 보여주는 Devin 이 만든 튜토리얼을 확인해 보세요!
대부분의 측면에서 더 우수함
소프트웨어는 매우 빠르게 변화하기 때문에, 수많은 영상 제작자를 고용하지 않는 한 비디오 튜토리얼을 최신 상태로 유지하는 것은 거의 불가능합니다.
제가 몸담았던 외부 공개 문서를 보유한 소프트웨어 회사들은 하나같이 이 작업의 규모 확장에 실패했습니다. 이런 종류의 영상을 유지 관리하는 일은 늘 난제이자 불가능한 영역이었습니다.
사람이 직접 이 영상을 만들려면 과정이 무척 지루하고 번거롭습니다. 맞춰야 할 자잘한 디테일이 너무 많아서 일관성을 유지하기가 정말 어렵습니다.
하지만 컴퓨터는 일관성 면에서 압도적으로 뛰어납니다.
프로그램 방식으로 모든 프레임의 일관성을 유지하고, 노출되면 안 되는 정보를 흐리게 처리하며, 테두리나 글꼴 크기, 여백 등을 설정하는 등 사실상 무엇이든 해낼 수 있습니다.
이제는 사람이 직접 만든 튜토리얼이 더 낫다고 느끼지 않는 전환점에 도달한 듯합니다. 어쩌면 객관적으로 더 떨어진다고 말해야 할지도 모르겠습니다.
또 다른 예시입니다:
프롬프트
사용한 프롬프트는 여기 있습니다: https://gist.github.com/dabit3/5d3969b61db56dc150c161b46350584a
한 가지 짚고 넘어갈 점은, 지금이 앞으로 나올 결과물 중 가장 퀄리티가 낮을 것이라는 사실입니다.
저는 이 프롬프트나 워크플로우를 거의 다듬지 않았습니다. 약간의 노력만 조금 더 보탠다면, 전문가가 매끄럽게 제작한 튜토리얼과 구별할 수 없는 수준의 결과물을 얻을 수 있을 것입니다.
론칭 영상 및 기타 활용
당연히 이 기법은 어떤 분야에도 적용할 수 있으며, 가장 대표적인 것이 론칭 영상입니다. 비슷한 기법으로 제가 만들어 낸 결과물 몇 가지를 소개합니다.
대부분 창의적인 아이디어를 담으면서도 우리 브랜드 특유의 룩앤필을 유지하고 있습니다:
아래 영상들은 다소 과하게 튀어나간 느낌이지만, 그래도 꽤 멋졌습니다:
