몇몇 프로그래밍 팁들을 블로그 주제로 써보려고 구상중이다. 실감나는 포스팅을 하려니 아무래도 터미널 녹화가 필수다. 정적인 스크린샷 만으로는 해당 팁이 잘 전해지지 않을 것이다. 그렇다고 전체를 녹화하자니 내가 유튜버도 아니고(지금) 적당히 터미널에서 코딩하는 모습을 간단한 동영상 혹은 애니메이션 gif로 만드는 것이 좋을 것 같다. 하여, macOS에서 어떻게 녹화하는 것이 좋을까 알아봤다.
나는 본격 macOS 개발환경 구축하기 글 보고 터미널 기본 설정했다(강추!). 맥 기본 터미널 대신 iTerm2에 homebrew로 각종 오픈소스 프로그램들을 설치하고 사용한다. oh-my-zsh의 spaceship 테마를 좋아하고, tmux를 터미널 멀티플렉서로, nvim을 편집기로 사용한다.
그럼, 위와 같은 예쁜 터미널 설정을 볼 수 있다. 가로 크기 조정하여, 파이썬 프로그래밍시 한줄에 80 칸이 넘어가지 않도록 설정한다.
보통 macOS에서 화면을 녹화하려면, QuickTime Player의 "새로운 화면기록"을 클릭하고, 특정 영역을 선택한 뒤 할 수 있다. 파이썬 프로그래밍 전 유닛테스트 만드는 모습을 녹화해봤다.
고정된 화면에 텍스트만 바뀌는 건데, 5MB 짜리 .mov 파일 동영상을 만들어야 한다. 고정된 화면에 글씨만 바뀌는 건데 좀 낭비인 것도 같고, 화면캡쳐가 특정 윈도우만 되는데 비해 화면기록은 윈도우 단위가 아니라, 모서리가 깔끔하지 않다. 또한 녹화 터미널이 동영상 플레이어 크기랑도 안맞고 맘에 안든다.
하여 뭔가 텍스트 전문 녹화 방법이 있을 듯 하여 찾아봤다. 여기에 asciinema 와 agg (asciinema gif generator) 가 쓸만한 듯 하여 소개해본다. homebrew가 설치되어 있으면, 다음과 같이 쉽게 설치하고 쓸 수 있다.
# homebrew로 asciinema, agg 설치
brew install asciinema agg
# 화면녹화 시작하고 결과를 a.cast 파일에 저장 - ctrl-d 눌러서 종료
asciinema rec a.cast
# 녹화 영상을 터미널에서 확인
asciinema play a.cast
# 녹화 영상을 mp4 동영상 파일로 저장
agg a.cast a.mp4
# 녹화 영상을 애니메이션 gif로 저장
agg a.cast a.gif
위의 .mov 녹화 영상을 이 방법으로 다시 만들면 178KB짜리 애니메이션 gif 파일이 만들어진다.
iTerm2 윈도우나 tmux 세션의 모습은 녹화되지 않고, 쉘 내용만 녹화된다. 그리고 아쉬운점이 tmux에서 오가는 다른 윈도우는 녹화되지 않는다는 것. 이래서는 tmux 윈도우를 오가는 시연은 어렵겠다.
애니메이션 gif는 별도로 실행 버튼이 없어도 되긴 하지만, 화면 해상도가 다소 흐려져 보이는 단점이 있다. 창 크기를 뷰어랑 맞춰야 할 것 같은데, 좀 귀찮은 부분. 생성한 mp4 파일의 경우, ffmpeg 프로그램으로 코덱을 변경해야 만 일반 플레이어에서 재생된다.
애니메이션 gif 대신에 .cast 파일을 서버에 올리고, 블로그에 임베딩하여 표시하는 방법도 있다.
# -t 옵션으로 이름을 정해주면, 녹화 결과를 asciinema.org 에 업로드할 것인지 물어본다.
asciinema rec -t "start python programming"
# asciinema.org 에 계정을 만들고, 로그인하고, 직접 업로드할 수도 있다.
asciinema auth
asciinema upload a.cast
이렇게 하면, asciinema.org 에 내 계정 페이지가 만들어지고, 임베딩을 원하는 영상을 선택하여 만들 수 있다.
서버에 올리고 임베딩하는 방식이 가장 선명하고 예뻐보인다. 게다가 실행 영상의 텍스트를 복사 붙혀넣기 할 수 있다! 오~~
앞으로 이 방법으로 터미널 녹화 내용을 블로그 포스팅합니다!