터미널을 보기 쉽게 녹화하기

🗓 ⏰ 소요시간 9 분

개발 블로그를 하다보면 터미널 작업을 업로드해야 할 때가 종종 있습니다. 커맨드를 실행하면 많은 작업이 스쳐 지나가지만 보통 블로그에 올리는 것은 실행할 커맨드나 실행된 결과 화면 뿐입니다. 그래서 블로그를 참고해서 작업을 진행할 때는 이게 제대로 동작하는 것인지, 발생한 오류가 그냥 넘어가도 될만한 것인지 확인하기 어려운 경우가 많습니다.

대신 처음부터 끝까지 녹화된 화면을 올리면 어떨까요?

asciinema

asciinema는 터미널 화면을 녹화하고 공유하는 툴입니다. 단순한 화면 녹화라면 이렇게 소개해드리지 않았을 겁니다. 녹화된 영상과 달리 실행 중인 커맨드를 복사할 수 있습니다. 위 영상을 재생해보시면 커맨드 복사가 가능한 것을 확인하실 수 있을 겁니다.

asciinema 는 설치와 사용이 정말 쉽습니다. 사용하는 입장에서도 쉽게 포스트의 퀄리티를 높일 수 있고, 블로그를 방문한 분들도 단순 커맨드보다 도움이 되어 win-win 할 수 있는 툴입니다.

어떻게 가능할까?

  • asciinema 를 설치하고 녹화를 시작하면 화면의 아웃풋을 모두 캡쳐해서 저장합니다.
  • 녹화된 결과를 asciinema.org 에서 제공하는 API 를 이용해서 바로 업로드합니다.
  • 업로드된 결과를 javascript 플레이어를 이용해서 재생합니다.

asciinema 는 유닉스의 가상 터미널을 이용한 script 커맨드에서 영감을 받아 만들어졌습니다.[1] 키보드를 이용한 사용자의 입력과 화면에 출력되는 내용, 시간 등을 캡쳐해 .ascii 포맷으로 메모리에 저장합니다.[2] 이는 ANSI escape code 에 따라서 커서의 위치, 색깔 등 여러 정보가 저장됩니다.

녹화된 파일은 사용자의 선택에 따라 asciinema.org 에 업로드되고, 업로드된 영상은 ANSI-compatible video terminals parser 를 이용해서 파싱 후 재생됩니다. 이는 iTerm, xterm, Gnome Terminal 등 여러 터미널에서도 잘 동작합니다. 이러한 작업으로 인해 단순 영상 재생이 아니라 텍스트 복사가 가능해집니다.

설치하기

asciinema 는 리눅스와 macOS 에서 동작합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# macOS (Homebrew)
$ brew install asciinema

# Ubuntu
$ sudo apt-add-repository ppa:zanchey/asciinema
$ sudo apt-get update
$ sudo apt-get install asciinema

# Fedora 21 버전 이하
$ sudo yum install asciinema
# Fedora 22 버전 이상
$ sudo dnf install asciinema

# Pip (Python 3)
$ sudo pip3 install asciinema

이외에 가능한 버전과 설치 방법은 링크를 참고하세요.

녹화하기

사용법은 정말 간단합니다. 다음 영상으로 확인해보시죠.

1. asciinema rec 녹화를 시작합니다.
2. 녹화할 작업을 합니다.
3. exit 를 입력하거나 Ctrl + d 로 녹화를 중지합니다.
4. 완료된 작업은 Enter↵ 를 눌러 바로 업로드하고 업로드된 url 을 확인합니다.
5. 혹은 Ctrl + c 를 눌러 업로드하지 않고 로컬에 저장합니다.

녹화 후 업로드된 파일을 관리하기 위해서 asciinema.org 에서 가입한 계정 정보와 터미널을 연동시킬 수 있습니다. 로컬에서 파일로 관리하는 것보다 편하고, 녹화한 영상을 활용하기에도 편해서 이 방법을 추천드립니다.

1
$ asciinema auth

Hexo 에 영상 추가하기

자, 이제 녹화한 영상을 Hexo 블로그에 첨부해보도록 하겠습니다. hexo-tag-asciinema
플러그인을 사용하면 아주 쉽게 추가가 가능합니다.

설치부터 해보겠습니다.

1
$ npm install --save hexo-tag-asciinema

설치된 플러그인은 다음과 같이 사용할 수 있습니다.

1
{% asciinema video_id %}

위 영상 마지막에 보면 업로드 후에는 업로드된 url 을 확인할 수 있는데요, 이 뒤에 붙어있는 것이 video_id 입니다.

https://asciinema.org/a/187354

그럼 다음처럼 쉽게 영상을 첨부할 수 있습니다.

1
{% asciinema 187354 %}

이번 포스트에서는 쉽게 터미널을 녹화하고 공유할 수 있는 툴인 asciinema 를 살펴봤습니다. 저도 앞으로 적극 사용해봐야겠네요.


  1. 1.https://asciinema.org/docs/how-it-works
  2. 2.https://github.com/asciinema/asciinema/blob/master/doc/asciicast-v1.md