실시간 미리보기와 코드 펜스 기능을 갖춘 다기능 마크다운 에디터 'Typora'

2016. 8. 26. 19:24    작성자: ONE™


Typora (베타 테스트)

시중에 나온 마크다운 에디터를 찬찬히 살펴보면 인터페이스에 따라 크게 두 가지가 주류를 이루고 있습니다.

예를 들어, 'Byword' 'iA Writer'처럼 단일 윈도우 인터페이스를 통해 글을 먼저 작성하고 결과물을 나중에 확인하는 형태의 앱이 있는가 하면, 'Mou' 'HarooPad'처럼 자신이 적고 있는 글과 결과물을 동시에 볼 수 있는 스플릿 뷰 형태의 앱이 또 한 축을 이루고 있죠.

어떤 형태의 앱을 선호하는지는 순전히 개인의 취향에 달린 문제라 뭐가 더 뛰어나다고 단정짓기는 어려울 것 같은데요. 마크다운 문법에 익숙해한 사람일 수록 단일 윈도우 인터페이스 앱을 선호하는 경우가 많습니다. 아무래도 시선이 적게 분산되기 때문에 자연스럽게 글을 집중해서 적을 수 있는 환경이 조성되기 때문입니다. 

반면에 마크다운에 처음 도전하거나 아직 문법이 익숙하지 않은 분들은 미리보기가 가능한 스플릿 뷰 인터페이스를 선호하는 경우를 많이 볼 수 있습니다.

초보자와 개발자를 동시에 만족시키는 마크다운 에디터

이번에 소개하는 'Typora'도 기본적으로는 마크다운 에디터입니다. 

하지만 위의 어느 형식에도 속하지 않은 아주 실험적은 인터페이스를 갖추고 있습니다.

마크다운 문법으로 텍스트를 입력하면 그 즉시 텍스트 필드 상에서 문법이 적용된 모습을 보여줍니다. 텍스트 입력과 미리보기가 한 곳에서 동시에 이뤄지는 셈인데요. 코드가 결과물로 가공된 모습을 보기 위해 미리보기 창을 띄우거나 스플릿 뷰를 오갈 필요가 없으므로 더 많은 시간을 글을 적는 데 투자할 수 있고 집중력도 높일 수 있다는 장점이 있습니다.

Typora의 또 다른 장점은 단축키 지원이 우수하다는 점입니다.

마크다운 문법에 익숙하지 않은 사람도 다양한 문법을 활용할 수 있도록 일반적인 텍스트 편집기에서 사용되는 것과 동일한 단축키로 마크다운 코드를 간단히 입력할 수 있습니다.

대부분의 마크다운 에디터는 문서에 사진(또는 사진이 있는 URL)을 삽입하더라도 사진을 바로 보여주지 않습니다. 이미지를 삽입할 수 없는 일반 텍스트 형식을 기본 포맷으로 사용하기 떄문입니다. 하지만 Typora는 자체 포맷을 이용해 글을 작성할 때도 편집 영역 상에서 사진을 바로 볼 수 있도록 했습니다. 사진을 곁들인 블로그 포스팅을 자주 작성하는 사람들에게 아주 유용해 보입니다.

마크다운 에디터의 트렌드라고 해야할지 Typora은 텍스트 편집은 물론이거니와, 체크리스트를 통해 할 일이나 쇼핑 목록을 적을 수 있는 기능도 지원하고 있습니다. 그날 그날 해야할 일을 복잡한 일정 관리 프로그램이 아닌 텍스트로만 간단히 처리하고 싶은 분이라면 눈여겨 볼만한 기능입니다.

마크다운 문법으로는 작성이 번거로운 테이블도 UI를 통해 손쉽게 문서 내에 삽입할 수 있도록 배려했습니다. 메뉴 막대에서 Paragraph > Table을 선택하거나 option +command + T 키를 누르면 테이블의 행과 열을 입력할 수 있는 대화상자가 나타납니다. 아마 마크다운 에디터 중에서 이만큼 테이블 작성이 쉬운 앱도 없을 겁니다.

앱의 생김새가 마음에 들지 않는다면 Github∙Gothic∙Newsprint∙Night∙Pixyll∙Whitey 등 6가지 테마가 준비되어 있으니 테마를 바꾸어 사용해 보는 것도 좋습니다. 편집 영역에 표시되는 텍스트 스타일과 배경색상 등을 지정된 상태로 한꺼번에 바꿀 수 있습니다. 또 스타일시트(CSS)를 다룰 줄 아는 분들은 커스텀 테마를 제작해 적용할 수도 있습니다.

개발자를 위한 코드 펜스와 다이어그램 작성 기능

여기서부터는 일반 사용자보다는 코드를 다룰 일이 많은 개발자들에게 유용한 기능입니다.

'Code Fences'는 문서 내에 작은 울타리를 만들어 그 안에 소스코드를 담을 수 있는 기능입니다. 텍스트를 작성하다가 Java, C++, Swift 등의 소스코드를 입력할 일이 있으면 코드 펜스를 만들고 그 안에 소스코드를 작성하면 됩니다.

소스코드를 원형 그대로 보존할 수 있을 뿐 아니라 소스코드 떄문에 자칫 마크다운 문서 전체가 깨지는 것도 막을 수 있습니다. 함수나 값에 각각의 색상을 입혀 시인성을 높여주는 구문 강조도 지원합니다. 코드 펜스를 만드는 단축키는 command .+ option + C 키입니다.

표준 마크다운은 물론 자바스크립트와 마크다운 확장을 이용한 다양한 다이어그램도 그릴 수 있습니다. *앱 환경설정 > Markdown 탭을 열고 'Diagram' 항목을 체크하면 에디터 상에서 바로 다이어그램을 볼 수 있습니다.

* JS Sequence Diagrams 코드로 작성한 UML 시퀀스 다이어그램


* mermaid 코드로 작성한 UML 시퀀스 다이어그램


* flowchart.js 코드로 작성한 플로 차트


* mermaid 코드로 작성한 간트 차트


* Tex/LaTex를 이용한 수식 편집 및 미리보기

이렇게 마크다운 문법으로 작성을 마친 글은 HTML 코드뿐 아니라 PDF∙Word(.docx)∙Epub∙OPML 등의 다양한 포맷으로 저장할 수 있습니다. 글쓰기에 집중할 수 있는 환경에서 초안을 우선 착성하고, 이를 워드프로세서로 내보내 최종적으로 글을 다듬는 방식으로 활용하면 좋은 시너지 효과를 낼 수 있을 듯합니다.

코멘트 & 다운로드

마크다운 문법을 지원하는 텍스트 에디터가 시중에 많이 나와 있지만, 아직도 어느 것을 써야할지를 두고 고민하는 분들이 많은 것 같습니다. 저마다 내세우는 장점이 다르고 인터페이스와 기능 등도 천차만별이기 때문이 아닐까 싶은데요. 이런 분이라면 Typora를 한 번 써보시는 건 어떨까요?

가볍게 쓰고 싶으면 맥에 내장된 텍스트 편집기수준으로 가볍게 쓸 수 있고, 소스코드와 다이어그램을 포함한 문서도 그것대로 만족스럽게 작성할 수 있는 그야말로 카멜레온 같은 매력을 지니고 있습니다. 특히 텍스트 작성 영역에 미리보기 기능이 녹아 있는 부분에 좋은 점수를 주고 싶습니다. 마크다운에 익숙한 사용자나 그렇지 않은 사용자 모두에게 상당히 어필할 만한 기능입니다. 

이 외에도 공식 웹사이트를 방문하거나 앱에 내장된 '퀵 스타트(Quick Start)' 가이드를 열면 기본적인 조작부터 고급 기능에 이르기까지 다양한 기능을 익힐 수 있습니다. 단, 아직 베타 버전이어서 군데군데 버그나 오류가 발생하는데, 대부분 사소한 버그라서 사용하는데 크게 불편한 수준은 아닐 겁니다.

개발자가 아주 의욕적으로 앱을 업데이트하고 있어서 하루 다르게 완성도가 좋아지고 있고, 새로운 기능도 속속 추가되고 있는데 앞으로 얼마나 더 좋아질지 개인적으로 무척 기대됩니다.

아직 출시 일정은 미정인데 베타 기간 동안은 Typora를 무료로 내려받아 모든 기능을 자유롭게 쓸 수 있습니다. 맥뿐만 아니라 윈도우와 리눅스 버전도 준비되어 있습니다.

Download Typora(β) $0.00



참조
Typora 공식 웹사이트
놀부의 마크다운 사용법 - 무료 툴을 중심으로 한 워크플로우

관련 글
프레젠테이션 슬라이드 제작에 특화된 마크다운 편집기 'Marp'
글쓰기에만 집중해! 마크다운 기반의 아름다운 텍스트 편집기 'iA Writer'
마크다운을 지원하는 미니멀한 디자인의 텍스트 편집기 'Clean Writer Pro'

    
  1. Blog Icon
    클리지앵

    GitHub에 문서 올릴 일이 많은데 코드 펜스 기능이 정말 유용해 보이네요.
    평소 Byword 잘 쓰고 있는데 요것도 한 번 테스트해봐야 겠네요.
    소개 감사합니다.

  2. Blog Icon
    Haemaru

    갓갓갓 에디터 소개해주셔서 감사합니다. 원래 쓰던 마크다운 에디터 삭제했습니다. 나오면 꼭 사야겠네요.

  3. Blog Icon
    평군

    sublime text에 플러그인 깔아서 마크다운 작성하곤 했는데 이건 정말 갓갓갓 에디터네요. 한글을 잘 쓰지 않아서 버그가 있는지는 모르겠지만 현재까진 완벽해보입니다. 나중에 가격이 어떻게 될지...

  4. Blog Icon
    스타크

    와우.. 바로 이런 기능을 가진 마크다운 에디터를 찾아 헤맸는데 여기있었군요!! 고맙습니다.
    gist와 동기화 하는 기능만 추가되면 최고겠네요.

  5. Blog Icon
    widgie

    캬 진짜 괜찮네요!!

    마크다운 자주 쓰시는 분들은 꼭 써보세요

  6. Blog Icon
    흐음

    근데 리눅스 버전 받는데가 따로 있나요?
    not yet이라고만 나오던데..

  7. Blog Icon
    귀차니즘

    Inline math나 table, chart를 지원하는 마크다운 에디터가 필요해서 기존에는 하루패드를 쓰고 있었는데, 문서 용량이 늘어나면 속도가 느려져서 서브라임텍스트로 작성한 뒤 하루패드로 옮기는 방식으로 마크다운을 쓰고 있었습니다...

    그런데, wisywig방식까지 지원된다니 정말 완소 에디터네요! 좋은 정보 감사합니다!

  8. Blog Icon
    thisisyh

    하루 패드 사용하고 있었는데 인터페이스도 멋지고 사용도 쉽네요. 좋은 프로그램 소개 감사합니다. 정식판 나오면 구매해야겠네요^^

  9. Blog Icon
    페이퍼

    율리시스(ulysses)처럼 이미지가 에디터 자체에 포함이 되는 형식이 되면 더욱 좋겠네요. 설정 옵션에 있어도 좋을 것 같고요. 나오면 구매하고 싶습니다.

  10. Blog Icon
    HY

    여태까지 써본 마크다운 에디터 중에 최고인 것 같아요. 넘 잘 만든 앱이라 이정도 완성도라면 살 것 같네요!ㅎㅎ