021. VHS: CLI 명령을 GIF 데모영상으로 만들어주는 툴

소개

개발을 하다보면 터미널에 사용한 명령어를 데모로 만들 필요가 생길 때가 있다.
이럴 때는 주로 비디오 녹화를 켜고 터미널에서 명령어를 순차적으로 입력하는 작업을 녹화하는데, 이 방식은 여러가지 문제가 있다.

 

첫번째는 가장 큰 문제로 영상 녹화 도중에 잘못 입력할 경우 깔끔한 영상을 위해서는 처음부터 다시 찍어야한다.
기존 방식의 제일 크고 심각하게 시간을 많이 잡아먹게 만드는 문제라고 봐도 무방하다.
특히 명령어가 길고 연속적인 작업을 할 경우 오타 하나 나는 순간 깔끔한 영상은 물건너간다. 이를 위해 수많은 노력 혹은 붙여 넣기를 위한 준비를 해야한다.

 

다음으로 동영상 촬영을 하는 방식이기 때문에 영상 앞 뒤로 쓸모없는 공백 시간이 발생한다. 이를 깔끔하게 만들어주기 위해서 영상 편집을 해야하는 번거로움이 있다. 물론 녹화버튼을 완벽한 타이밍에 누른다면 필요 없는 과정이지만, 그것을 연습하기 위해 비디오 폴더에 잔뜩 쌓여있는 쓰레기 영상도 함께 만들어 내게 된다.

 

이런것 이외에도 다양한 문제가 라이브상에 발생하기 때문에 불편한 방식인것은 확실하다.
때문에 이 프로젝트를 처음 발견했을 때 "와 대박인데?" 생각이 자연스럽게 들 수 밖에 없었다.

 

VHS는 이런 단점을 거의 완벽하게 해결해 준다.

실제로 수행해야하는 명령어를 tape 파일로 코딩해 두고 vhs에 입력으로 넣어주면 된다.
미리 수행 해야하는 명령을 모두 적어 놓을 수 있으니, 오타나서 다시 영상을 찍는 시간을 획기적으로 줄일 수 있다.
또 폰트, 사이즈, 타이핑 속도 등 다양한 폰트 옵션, output 동영상 타입 등 다양한 설정이 가능해서 정말 원하는 데모 영상을 만드는데 아주 편리하다.

주의할 점은 VHS는 실제 명령을 수행하고 그 출력값을 저장하여 변환하는 방식이기 때문에 실행하는 환경에 따라 같은 코드도 다른 결과가 나올 수 있다. 또, 실제 명령을 수행하는 만큼 시간이 걸린다.

그럼 설치하고 간단하게 사용법을 알아보도록 하자.

설치

공식 Github 에 설치방법이 나와 있다.

homebrew를 이용한 설치는 다음과 같다.

brew install charmbracelet/tap/vhs ffmpeg
brew install ttyd --HEAD

데비안계열, 우분투의 경우 다음과 같이 apt로 설치한다.

sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://repo.charm.sh/apt/gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/charm.gpg
echo "deb [signed-by=/etc/apt/keyrings/charm.gpg] https://repo.charm.sh/apt/ * *" | sudo tee /etc/apt/sources.list.d/charm.list
# Install ttyd from https://github.com/tsl0922/ttyd/releases
sudo apt update && sudo apt install vhs ffmpeg

사용법

간단하게 사용법을 알아보자.

vhs new 명령을 이용하면 테스트 tape 파일을 만들수 있다.

vhs new test.tape

만들어진 파일을 살펴보면 Doc이 포함되어 있다. 한 파일에 지원하는 모든 명령이 다 들어갈 정도로 아주 간단하면서 강력하다.

# test.tape

# VHS documentation
#
# Output:
#   Output <path>.gif               Create a GIF output at the given <path>
#   Output <path>.mp4               Create an MP4 output at the given <path>
#   Output <path>.webm              Create a WebM output at the given <path>
#
# Settings:
#   Set FontSize <number>           Set the font size of the terminal
#   Set FontFamily <string>         Set the font family of the terminal
#   Set Height <number>             Set the height of the terminal
#   Set Width <number>              Set the width of the terminal
#   Set LetterSpacing <float>       Set the font letter spacing (tracking)
#   Set LineHeight <float>          Set the font line height
#   Set Theme <string>              Set the theme of the terminal (JSON)
#   Set Padding <number>            Set the padding of the terminal
#   Set Framerate <number>          Set the framerate of the recording
#   Set PlaybackSpeed <float>       Set the playback speed of the recording
#
# Sleep:
#   Sleep <time>                    Sleep for a set amount of <time> in seconds
#
# Type:
#   Type[@<time>] "<characters>"    Type <characters> into the terminal with a
#                                   <time> delay between each character
#
# Keys:
#   Backspace[@<time>] [number]     Press the Backspace key
#   Down[@<time>] [number]          Press the Down key
#   Enter[@<time>] [number]         Press the Enter key
#   Space[@<time>] [number]         Press the Space key
#   Tab[@<time>] [number]           Press the Tab key
#   Left[@<time>] [number]          Press the Left Arrow key
#   Right[@<time>] [number]         Press the Right Arrow key
#   Up[@<time>] [number]            Press the Up Arrow key
#   Down[@<time>] [number]          Press the Down Arrow key
#   Ctrl+<key>                      Press the Control key + <key> (e.g. Ctrl+C)
#
# Display:
#   Hide                            Hide the subsequent commands from the output
#   Show                            Show the subsequent commands in the output

Output examples/demo.gif

Set FontSize 32
Set Width 1200
Set Height 600

Type "echo 'Welcome to VHS!'"  Sleep 500ms  Enter

Sleep 5s

주석이 없는 부분이 실제로 실행되는 부분인데, 출력 위치와 포멧을 정하고
폰트와 출력 영상의 크기 설정 그리고 명령어를 지정하는 방식으로 아주 직관적으로 작성하면 된다.

다음 명령으로 이 예제를 통해 gif를 만들어 볼 수 있다.

출력 위치가 examples 아래이기 때문에 폴더를 먼저 생성해 주고 명령어를 수행한다.

mkdir examples
vhs < test.tape

실제 명령을 수행하고 비디오를 인코딩하는 시간이 끝나면 영상이 생성된다.
tape 에서 지정한 examples 폴더 아래에가면 찾을 수 있다.

 

간단하게 코드를 변경해서 neofetch를 출력해보았다.

Output examples/neofetch.gif

Set FontSize 24
Set Width 1200
Set Height 1000

Type "echo 'Hello, VHS! I am Kairos03'"  Sleep 500ms  Enter
Sleep 1s

Type "neofetch"  Sleep 1s  Enter
Sleep 5s