크로미움 변형체들

한때 내가 주로 사용하던 브라우저는 크롬이었다. 그리고 요즘 사용하는 브라우저는 크로미움을 기반으로 개발된 비발디다. 크로미움이 공개 소스 프로젝트로 개발되고 있기 때문에 크로미움을 기반으로 한 브라우저는 상당히 많다. 그런데 크로미움은 브라우저로만 개발되는 것은 아니다. 블로그에서 소개한 아톰도 크로미움을 기반으로 개발된 편집기다. 또 마크다운에 특화된 타이포라라는 마크다운 전용 위지윅 편집기도 존재한다.

마이크로소프트도 크로미움을 기반으로 프로그래머용 편집기를 개발했다. 바로 VS 코드다. 여기에 마그넷 링크나 토런트 파일로 동영상을 재생할 수 있는 소다 플레이어, 리멤버의 PC용 버전 등 크로미움을 기반으로 개발된 수 많은 프로그램들이 있다. 이 글에서는 이런 앱들을 간단히 소개하고 어떤 방법으로 구현했는지 알아 보겠다

크롬의 급성장

크로미움(Chromium)은 구글이 지원하는 공개 소스 프로젝트[1]다. 크로미움을 기반으로 한 크롬()은 2008년에 등장, 현재 세상에서 가장 많은 사람들이 사용하는 브라우저로 성장했다. 공개 소스로 누구나 개발에 참여할 수 있고 이렇게 개발된 소스로 원하는 생산물을 만들 수 있기 때문에 크롬이라는 이름이 붙지 않은 크로미움 후예들도 많다. 블로그에서 소개한 비발디, 비발디 이전에 사용하던 오페라[2][3]도 크로미움을 기반으로 하는 브라우저다. 국내에서는 에서 만든 웨일, 에서 만든 스윙도 크로미움을 기반으로 한 브라우저다.

브라우저 점유율

2008년 처음 등장, 2010년에 고작 6%를 점유한 크롬. 2017년 현재 62.8%를 점유하며 2위 불여우(Firefox)를 큰 격차로 따돌리고 있다. 참고로 위의 도표는 데스크탑 브라우저만 포함한 것이며 정확한 통계는 아니다.

아톰과 타이포라

브라우저(Browser)를 기반으로 다시 브라우저를 개발하는 것은 당연한 일이다. 그러나 크로미움(Chromium)은 브라우저로만 개발되는 것은 아니다. 일단 블로그에서 소개한 아톰 편집기도 크로미움을 기반으로 한다. 브라우저는 로컬 파일에 접근하기 힘들기 때문에 로컬 파일에 손쉽게 접근할 수 있도록 브라우저를 편집기로 개발한 것이다. 또 사용자 동작에 반응하기 위해 [node.js]를 사용하며 일렉트론(Electron)을 사용해서 자바스크립트(JavaScript)와 HTML, CSSUI를 구현했다. node.js가 떠있기 때문에 아톰은 간단한 서버 역할도 한다. 그런데 이렇게 개발된 편집기는 아톰만이 아니다. 에 특화된 타이포라(Typora)도 크로미움을 기반으로 개발된 편집기이다.

타이포라

마크다운에 특화된 편집기이다. 그림처럼 입력한 그대로 보이는 위지윅(WYSIWYG) 편집기이다. 수정하기 위해 항목을 클릭하면 그림의 빨간색 상자처럼 마크다운 문법이 활성화된다.

아톰은 다양한 언어에서 사용할 수 있는 확장 가능한 편집기이다. 반면 타이포라마크다운에 특화된 편집기이다. 아톰에서 마크다운을 사용하려면 별도의 꾸러미를 설치해야 한다. 또 마크다운으로 글을 입력하면 Markdown Preview Enhanced라는 꾸러미가 오른쪽에 미리보기 창을 만들어 마크다운을 해석한 결과를 보여준다. 그러나 타이포라는 미리보기가 없다. 입력한 그대로 보이기 때문이다. 수정할 때도 비슷하다. 수정하고 싶은 부분을 클릭해서 수정하면 된다. 다만 보이는 부분만 수정하는 것이 아니고 부가 항목(위의 그림에서는 주소)까지 수정해야 하는 부분만 마크다운 문법이 표시된다. 따라서 입력한 그대로 표시되는 마크다운 위지윅 편집기로 보면 된다.

마크다운에 특화된 편집기이다 보니 각종 마크다운 문법[4]에서 사용할 수 있는 대부분의 기능을 제공한다. # 제목으로 표시한 부분을 Outline에 표시하는 개요 기능이다. 개요 기능은 글을 작성한 뒤 이곳저곳 이동하며 글을 수정할 때 상당히 편하다[5]. 또 문서의 요약 정보를 기록하는 YAML 프론트 매터, LaTex의 형식의 수식, swquence, flowchart, mermaid 다이어그램과 편리한 목차 기능(TOC)을 지원한다. 따라서 개발은 '개'나 줘 버리고 오로지 마크다운만 사용해서 글을 쓸 사람이라면 당연히 타이포라가 더 나은 선택이다. 또 이것저것 기능을 추가하는 것이 장점일 수 있지만 초보자에게는 오히려 단점이 된다.

아톰과 VS 코드

그러면 여기서 끝일까? Visual Studio라고 하면 소프트웨어의 절대 강자 마이크로소프트(Microsoft)가 생각날 것이다. 마이크로소프트에서 개발 배포하는 프로그래머용 편집기가 있다. Visual Studio Code(이하 VS Cdoe 또는 VS 코드)이다. VS 코드도 아톰처럼 크로미움을 기반으로 한다. 아톰과의 차이는 그리 크지않다. 또 아톰기본적으로 로컬 파일에 손쉽게 접근할 수 있도록 한 브라우저이다. 또 아톰의 모든 UICSS, JS, HTML로 만들어진다. 심지어 줄번호도 CSS를 이용해서 정렬/표시하기 때문에 상황에 따라 줄번호 정렬이 깨지는 때도 있었다.

VS 코드

일단 외관은 아톰과 상당히 비슷하다. 그러나 메뉴 및 구성이 아톰에 비해 조금 더 정리된 느낌을 준다.

VS 코드의 기본적인 아이디어는 아톰에서 가져왔다. 아톰처럼 크로미움을 기반으로 한다. 앞에서 설명했듯이 아톰은 모든 UIHTML로 구현했다. 이렇게 하면 UI를 쉽게 바꿀 수있지만 속도가 느려진다. 따라서 VS 코드는 속도를 개선하기 위해 기본 UI를 내장한 것으로 추정하고 있다. 기본적인 구현 방식이 같기 때문에 아톰이나 VS 코드 모두 일반 편집기에 비해 좀 무겁다[6]. VS 코드는 아톰처럼 모든 UICSS, JS, HTML로 처리한 것은 아니지만 확장에서는 같은 방식을 사용한다. VS 코드의 설치 폴더를 보면 VS 코드의 많은 기능이 앱 또는 확장(CSS, JS, MD)로 구현되어 있는 것을 알 수 있다. 즉, VS 코드는 아톰에 자체 UI를 더해 속도를 개선하고 아톰에서 꾸러미로 제공하던 기능을 앱 또는 확장으로 내장한 것으로 보면 될 것 같다.

소다 플레이어

그럼, 편집기만 있을까? 며칠 전 소다 플레이어(Soda Player)라는 프로그램이 등장했다. 플레이어라는 이름에서 알 수 있듯이 이 프로그램은 동영상을 재생할 수 있는 프로그램이다. 국내에는 팟플레이어라는 뛰어난 동영상 재생기가 있다. 더구나 무료다. 또 현존하는 동영상 재생기 중 기능면에서 팟플레이어를 능가하는 프로그램은 내가 아는 한 없다. 반면에 소다 플레이어는 팟플레이어와 비교하기 힘들 정도로 아주 간단한 기능만 제공한다. 바로 동영상 재생 기능이다. "이런 동영상 재생기를 누가 쓰라고 만들었나?" 싶을 정도로 기능이 없다. 그런데 의외로 쓸모가 있다.

비공개 토런트에서는 절대 벌어지지 않는다. 그러나 공개 토런트를 사용하다 보면 종종 벌어지는 일이다. 무엇일까? 바로 토런트 파일을 통한 바이러스 또는 악성 코드 유포다. 공개 토런트에서 영상을 받기 위해 토런트 파일을 받다 보면 바이러스가 포함되어 있는 때가 종종 있다. 또 동영상 파일을 알 수 없는 형식으로 인코딩하고 인코딩을 푸는 파일이라며 악성 코드나 바이러스를 유포하는 사람도 종종 눈에 띈다. 따라서 동영상을 받기 전에 토런트 파일(.torrent)에 어떤 파일이 있는지 확인부터 한다. 또 동영상을 받은 뒤에도 진짜 동영상인지 아닌지 확인부터 한다.

의심스런 토런트 파일

모 공개 토런트에 신고된 파일①이다. 토털 코맨더로 파일의 내용②을 확인해 봤다. 그러나 토런트 파일에는 이상한 파일이 없었다. 따라서 직접 내려받아 영상 파일인지 확인③해 봤다. 영상 파일이 맞았다. 왜 신고가 됐는지 알 수 없어서 해당 게시판의 댓글을 확인해 보니 성인 사이트 접속 광고를 입힌 파일이었다.

따라서 나 같은 사람에게는 무용지물이지만 초보자에게는 의외로 효과적인 듯 공개 토런트를 가보면 바이러스 때문에 해킹당하고 포맷했다는 사람들을 종종 만난다. 바로 이런 사람들이 고민없이 공개 토런트에 올라온 동영상을 볼 수 있는 재생기가 바로 소다 플레이어다. 소다 플레이어는 팟플레이어와 같은 전문적인 동영상 재생기가 제공하는 기능 대부분을 제공하지 못한다. 그러나 소다 플레이어는 다른 재생기에서는 지원하지 않는 토런트 파일, 마그넷 링크를 지원한다. 로컬 파일과 스트리밍 동영상도 지원하지만 이런 영상은 다른 재생기를 사용하는 것이 더 낫다.

그러나 공개 토런트를 사용하며 바이러스 걱정이 된다면 소다 플레이어만한 것이 없다. 보려는 영상의 마그넷 링크를 소다 플레이어에 붙여넣으면 소다 플레이어가 알아서 파일을 받아 재생해 준다. 또 파일을 다 받지 않아도 버퍼링을 통해 일부만 받은 뒤 재생해 주기 때문에 동영상을 다 받을 때까지 기다릴 필요도 없다. 공개 토런트에서 마그넷을 지원하지 않는다면 토런트 파일(.torrent)을 받아 소다 플레이어에 끌어놓으면 영상을 받으면서 바로 재생해 준다. 참고로 이렇게 받은 영상은 시스템 %TEMP% 폴더\sodaplayer 폴더에 임시로 저장되며 소다 플레이어를 종료하면 이때 삭제된다.

소다 플레이어

소다 플레이어를 실행하면 나타나는 화면①. 다른 메뉴가 없기 때문에 여기 있는 4개의 메뉴가 전부라고 생각하면 된다. Open a URL or a magnet link를 클릭하면 나타나는 화면②. 여기에 스트리밍 영상의 주소나 마그넷 링크를 붙여 넣으면 된다. 잠시 뒤 영상이 재생되는 화면③. 화면 오른쪽 아래 빨간색 상자를 보면 2.8MB/s로 전송 속도가 표시되고 있다.

크로미움 변형체

그러면 아톰(Atom), 타이포라(Typora), VS 코드(VS Code), 소다 플레이어(Soda Player)와 같은 크로미움 변형체들은 얼마나 될까? 다음은 공식적으로 확인된 목록이다. 목록을 살펴보면 알 수 있지만 무려 310개의 크로미움 변형체가 있다. 그런데 이 목록에 없는 크로미움 변형체도 있다. 대표적인 예가 위에서 설명한 타이포라소다 플레이어다. 또 텍스트 큐브 데스크탑도 있다. 텍스트 큐브는 서버에 설치해야 사용할 수 있다. 그러나 텍스트 큐브 데스크탑을 사용하면 텍스트큐브를 설치하지 않고도 텍스트큐브를 체험해 볼 수 있다. 또 아이폰, 안드로이드폰에서 명함을 관리할 때 유용하게 사용할 수 있는 리멤버도 크로미움 변형체로 개발되었다.

크로미움 변형체 목록 보기

텍스트큐브 데스크탑과 리멤버

텍스트큐브 데스트탑 관리 패널①과 리멤버②다. 텍스트큐브 데스크탑은 텍스트큐브 베타 테스터를 위한 기능 시험 및 맛보기 용으로 만든 것으로 보인다.

크로미움 변형체라고 표현하고 있지만 크롬 웹 스토어를 방문하면 수없이 찾을 수 있는 웹 앱(Web Apps)을 크로미움을 이용해서 단독 실행이 가능하도록 만든 것이다. 명함관리 앱 리멤버PC용은 따로 제공하지 않고 웹 앱으로 제공하고 있었다. 그런데 며칠 전 확인해 보니 PC용 앱이 있었다. 내려받아 확인해 보니 역시 크로미움 변형체로 개발된 것이다. 따라서 따로 개발했다기 보다는 기존에 구현한 웹 앱을 [node.js]와 일렉트론(Electron)을 이용해서 단독 실행이 가능한 프로그램으로 만든 것이다.

이런 일이 가능한 것은 앞에서 지나가듯 언급한 일렉트론 덕분이다. 아톰크로미움 기반에 node.jsCSS, JS, HTML로 개발한 깃허부(GitHub)에서 아톰을 개발할 때 사용한 방법과 라이브러리를 공개했다. 일렉트론의 도메인이 http://atom.io/의 하위 도메인을 사용한 다는 점에서도 이런 사실을 유추할 수 있다. 아무튼 웹 앱을 단독 프로그램으로 개발할 수 있기 때문에 이런 앱은 앞으로도 계속 나올 것으로 예상된다. 이제 이 글의 제목이 왜 세상을 바꾼 크롬인지도 이해할 수 있을 것이라고 생각한다.

남은 이야기, Electron

설치한 크로미움 변형체

이 글을 쓰기위해 설치한 크로미움 변형체들이다. 소다 플레이어는 설치하지 않아도 잘 동작했지만 나머지는 설치를 해야 동작했다.

이 글을 쓰면서 내가 얼마나 오랜 동안 글을 쓰지 않았는지 새삼 깨달았다. IT에 대한 관심이 많기 때문에 최신 정보를 가장 먼저 접하고 알려왔다고 생각한다. 그런데 새로운 기술이 등장해서 이미 수백개의 앱이 만들어 질 때까지 이런 기술이 있었다는 것 자체를 모르고 있었다. 2009년 부터 글을 뜸하게 올렸고 2012년 부터 글을 쓰지 않았으니 5년 정도 관심을 끊고 산 것 같다. 다만 레이 커즈와일의 말처럼 기술은 기하 급수적으로 발전하는 것이 아니라 지수 급수적으로 발전하는 것 같다. 고작 5년, 관심을 완전히 끊은 것도 아닌데 새로운 기술이 차고 넘친다.

내가 마크다운에 관심을 가지고 사용하기 시작했을 때는 2009년이었다. 당시 텀블러 편집기에서 마크다운을 발견하고 사용한 것이 계기였다. 무엇이든 마음에 들면 바로 바꾸는 성격이 이번에도 도움이 되었다. 그래서 마크다운에 관련된 문서를 번역하고 블로그 댓글에서도 마크다운을 사용할 수 있도록 텍스트 큐브를 패치했었다. 마크다운이 글을 작성할 때 너무 편해서 마음에 드는 마크다운 편집기를 찾았었다. 그런데 당시에는 변변한 마크다운 편집기가 없었다. 결국 에디트 플러스를 연동해서 마크다운 편집기 대용으로 사용했었다.

그런데 크로미움 변형체에 대한 글을 쓰며 일렉트론으로 만들어진 앱을 확인하다 보니 마크다운 편집기가 정말 많았다. 또 목록에는 없지만 하루패드라고 우리나라 사람이 개발하고 있는 것으로 보이는 마크다운 편집기도 있었다. 올해가 2017년이니 마크다운을 사용한지 올해로 8년째인 셈이다. 그런데 세상은 완전히 마크다운으로 바뀐 느낌이다. 참고로 깃허브도 기본적으로 마크다운을 사용한다. 파일 목록 중 .md로 끝나는 파일은 모두 마크다운 문서라고 생각하면 된다.

관련 글타래


  1. 정확히는 크롬에서 공개 소스에는 포함시킬 수 없는 기능을 제거하고 공개한 것이 크로미움이다. 
  2. 오페라 15 이후 크롬에서 사용하는 블링크 엔진으로 바뀌었다. 
  3. 오페라 엔진을 블링크로 바꾼 뒤 오페라는 테마를 입힌 크롬이라는 소리를 들었다. 이런 상황이라 옛 오페라 개발진이 크롬을 오페라처럼 만들어 공개한 것이 비발디다. 크롬 때문에 오페라를 썼고 결국 정착한 브라우저가 비발디인데 좀 아이러니하다. 
  4. 마크다운의 장점은 쉽고 글에 집중할 수 있다는 점이다. 그러나 표준없어서 필요한 기능을 서로 추가하다 보니 마크다운 종류에 따라 지원하는 문법이 서로 다르다. 
  5. 아톰에도 비슷한 기능을 하는 꾸러미가 있었다. 그러나 어느 것도 타이포라처럼 편하지는 않았다. 
  6. 아톰, VS 코드와 비슷한 서브라임 설치 파일 크기가 8MB에 불과하다. 반면 아톰은 114M, VS 코드는 33.7M이다. 프로그램을 실행해 보면 실행 속도도 차이가 크다. 일반적으로 어떤 확장/꾸러미를 설치하지 않았다면 서브라임 텍스트 > VS 코드 > 아톰 순이며 꾸러미나 확장을 많이 설치하면 아톰은 크롬처럼 점점 더 느려진다.