node.js를 하다보면 꼭 기억해야 할 회사중 하나인 LearnBoost에서 이번 JSConf에서 새로운 사이트를 공개했습니다. 아직 JSConf에 대한 자세한 내용을 못 들어서 그냥 시기가 맞은건지 컨퍼런스 내에서 발표한 건지 정확치는 않고 그냥 트위터를 보고 추측한 겁니다. 

codestre.am은 터미널을 사용하는 방법을 공유하는 사이트입니다. 개발을 하다보면 터미널을 사용할 일이 점점 많아지는데 다른 사람이 터미널을 어떻게 사용하는지 보기는 쉽지 않습니다. 동영상 강의를 통해서는 볼 수 있지만 그 외에는 블로그 글 같은 곳에 코드처럼 터미널의 입력과 결과를 작성해 놓는 것 정도였는데 CodeStream은 아주 간단하게 터미널을 녹화해서 바로 공유할 수 있도록 해주는 사이트입니다. LearnBoost의 이름으로 공개한 것 같지는 않고 Socket.IO를 만든 Guillermo Rauch와 최근 node.js 커미터로 합류한 Nathan Rajlich 둘이서 만든 것으로 보입니다.


사이트 디자인은 좀 구립니다. 디자인 구린건 그렇다치고 잘 보이지도 않는 형광버튼은 어떻게 좀 했으면 좋겠네요. (개발자의 디자인 감각은 해외에서도 어쩔수 없나 봅니다. ㅎ 이제 Bootstrap도 있는데 그거라도 갖다쓰지 하는 생각이 드네요) 회원가입을 하거나(이메일과 비번정도만 넣으면 됩니다.) 트위터로 로그인할 수 있습니다.


로그인한 뒤에 Create메뉴를 클릭하면 위와 같이 Term을 생성하는 화면이 나타납니다. 터미널을 녹화하기 전에 먼저 Term이란 공간을 생성해야 합니다. 위 화면처럼 제목을 입력하고 Topics를 입력합니다. Topics는 홈화면의 카테고리로 분류되어서 나타나게 되고 생성한 Term은 기본적으로 자신만 볼 수 있는 private으로 만들어집니다. 입력한 후 Next를 누르면 다음과 같은 화면을 볼 수 있습니다.


상단에는 Term에 대한 설정부분이고 아래쪽에 녹화되는 화면이 나타납니다. 아직 녹화를 시작하지 않았으므로 녹화를 위한 간단한 가이드가 나타납니다.

위 화면에 나타났듯이 터미널을 녹화하려면 PC에 codestream 모듈을 설치해야 합니다. codestream은 node.js 모듈이기 때문에 node.js와 npm이 설치되어 있어야 합니다.


위 명령어로 글로벌영역에 codestream을 설치한 뒤에 codestre.am에 나온 키와 함께 다음과 같이 입력하면 번개모양의 콘솔이 나타나면서 녹화가 시작되게 됩니다.


쉘의 모양이 번개모양으로 나타났을 뿐 현재 위치에서의 쉘과 동일하므로 쉘에서 사용할 수 있는 명령어는 모두 그대로 사용할 수 있으며 VI도 사용할 수 있습니다. 이제 여기서 입력하는 내용과 출력내용은 모두 녹화가 됩니다. 표현을 녹화라고 했을 뿐이지 실제로는 입력과 출력을 잡아서 Socket.IO 클라이언트를 이용해서 스트리밍으로 codestream 서버에 전송하고 서버에서는 이를 동영상처럼(실제 구현방식은 모르지만요) 만들어줍니다. 앞에서 본 codestre.am에서 Term을 생성하고 나온 화면과 터미널을 같이 띄워놓고 보면 터미널에서 입력하는 내용이 codestre.am에 실시간으로 같이 출력되는 것을 확인할 수 있습니다. 녹화가 끝나면 exit를 입력하면 되고 필요해 따라서 설명을 변경하거나 다른 사람과 공유하려면 public으로 지정하면 됩니다.

다음은 테스트삼아 만들어 본 Github에서 클론 받아서 커밋하고 다시 푸시하는 과정을 녹화한 것입니다.(아직 사이즈를 다양하게 embed하는걸 지원하지 않아서 잘 안보이면 링크를 클릭하고 사이트 가서 보세요. 때로 사이트가 죽은 경우에는 안보일 수 있습니다.)



화면 녹화프로그램으로 녹화를 하거나 입력과 출력을 복사해서 글에 붙힐 필요없이 아주 간단하게 터미널 명령어의 사용방법을 공유할 수 있습니다. 참신한 아이디어에서 구현까지 놀랍네요. 아직 오픈한지 얼마안되어서 인지 생각보다 많이 접속해서 인지 사이트가 꽤 불안합니다. 접속이 안되거나 엄청 느릴때가 자주 있는데 그럴때는 나중에 다시 시도하세요 ㅎ