터미널 녹화 및 재생 하기

Linux 터미널 내용의 녹화 및 재생 방법을 정리한다.

asciinema 소개

asciinema 툴은 터미널 내용을 녹화하여 재생할 수 있게 해 준다. 특히 재생시에 내용을 선택하여 복사가 가능하므로 단순히 커맨드만 보여주는 것보다 타인에게 효과적으로 전체 터미널 내용을 보여줄 수 있다.
Asciinema 홈페이지 또는 Github asciinema 페이지를 참조하면 설치, 녹화, 재생 방법을 알 수 있다. 특히 본 포스팅에서는 Github asciinema-player 페이지를 참조하여 블로그 자체 내에서 재생을 구현하였다.

asciinema 설치

우분투에서는 아래와 같이 할 수 있다.

$ sudo apt install asciinema

asciinema 녹화

녹화 후에 바로 asciinema.org의 본인 계정으로 upload 할 수 있는데, 여기서는 로컬로 저장하는 예를 든다. 아래와 같이 할 수 있다. (확장자는 통상 “cast”로 함)

$ asciinema rec <저장할 cast 파일명>

녹화 종료는 Ctrl+d 키를 누르거나 exit 명령을 실행하면 된다.

asciinema 재생

로컬에서 로컬 파일 재생

$ asciinema play <재생할 cast 파일명>

웹 브라우저에서 로컬 파일 재생

아래와 같이 html 코드를 삽입하면 된다.

<html>
<head>
  ...
  <link rel="stylesheet" type="text/css" href="/assets/asciinema-player.css"/>
  ...
</head>
<body>
  ...
  <asciinema-player src="/assets/재생할 case 파일명"></asciinema-player>
  ...
  <script src="/assets/asciinema-player.js"></script>
</body>
</html>

블로그에서 재생 예

아래 예제는 블로그에 있는 demo.cast 파일을 재생하는 예제이다. 재생 중에 출력되는 내용이 선택 및 복사가 됨을 확인할 수 있다.

Player 엘리먼트 속성

참고로 <asciinema-player> 엘리먼트 속성에는 아래와 같은 것들이 있으므로 (전체 엘리먼트는 asciinema-player 페이지 참조) 필요에 따라 추가로 사용할 수 있다.

cols: 터미널의 칼럼값 세팅 (디폴트는 80, 크기가 재조정되는 것을 방지하려면 cast 파일의 “width” 값과 동일한 값 사용)
rows: 터미널의 라인값 세팅 (디폴트는 24, 크기가 재조정되는 것을 방지하려면 cast 파일의 “height” 값과 동일한 값 사용)
autoplay: 자동 재생 여부 세팅 (디폴트는 no autoplay)
loop: loop 여부 (디폴트는 no looping)
poster: Preview 화면 세팅
font-size: 터미널 폰트의 크기 세팅 (디폴트는 small)
theme: 터미널 color 테마 (디폴트는 asciinema)

단, 엘리먼트 사용시에는 주의해야 할 사항이 있다. 현재 Jekyll v3.8.5에서 사용 중인 kramdown v1.17.0은 엘리먼트 숫자값에도 좌우에 양따옴포를 붙여야 한다. 반면에 Jekyll v4.0.0 이상은 kramdown v2.0.0 이상을 사용하고 이것은 양따옴표가 없어도 된다.

asciinema 설정

재생시 글자 폰트는 asciinema-player.css 파일에서 아래 예와 같이 변경할 수 있다. 먼저 font-face를 설정해야 하는데, Web 폰트를 사용하려는 경우에는 아래 예와 같이 하면 된다.

@import url('http://cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css');

만약에 Web 폰트 대신에 로컬 폰트 파일을 (예로 assets/css/D2CodingLigatureNerdFont-Regular.ttf) 사용하려면 아래 예와 같이 하면 된다.

@font-face {
  font-family: '"D2CodingLigature Nerd Font"'; src:url(D2CodingLigatureNerdFont-Regular.ttf);
}

이후 아래 예와 같이 .asciinema-terminal에서 폰트를 지정하면 된다.

.asciinema-terminal {
  ...
  font-family: "D2CodingLigature Nerd Font", D2Coding, 'D2 coding', Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace, 'Powerline Symbols';
  ...
}

재생시 글자 크기는 asciinema-player.css 파일에서 아래 예와 같이 변경할 수 있다.

.asciinema-terminal.font-small {
  font-size: 12px;
}
.asciinema-terminal.font-medium {
  font-size: 16px;
}
.asciinema-terminal.font-big {
  font-size: 20px;
}

참고로 컨트롤 바에서의 색깔은 asciinema-player.css 파일에서 아래 예와 같이 변경할 수 있다.

.asciinema-player .control-bar {
  color: #ffff00;
}
.asciinema-player .control-bar svg.icon path {
  fill: #ff0000;
}
.asciinema-player .control-bar .progressbar .bar .gutter span {
  background-color: #bb00bb;
}

DokuWiki에서 재생하기

Dokuwkiki에서는 재생하려면 asciinema-player.js, asciinema-player.css 파일을 다운받아서 원하는 경로에 복사한다. 이후 미디어 파일 추가를 이용하여 cast 파일을 업로드한 후, src 정보에 cast 파일의 경로를 세팅하면 된다.
예를 들어 html include 기능을 이용하여 아래 예와 같이 작성할 수 있다. (“server/address/directory” 등은 해당 서버에 맞게 수정 필요)

<html>
<head>
  <link rel="stylesheet" type="text/css" href="//server/address/directory/asciinema/asciinema-player.css"/>
</head>
<body>
  <asciinema-player src="//server/address/directory/dokuwiki/data/media/demo.cast" cols=100 rows=18 font-size=medium></asciinema-player>
  <script src="//server/address/directory/asciinema/asciinema-player.js"></script>
</body>
</html>

Twitter Facebook LinkedIn

Youngrok