<나의 글쓰기> 노트 애플리케이션 베어(Bear): 1편 수려한 디자인과 독보적인 마크다운 에디터

in kr •  last year

마크다운 기반 노트 애플리케이션 Bear

안녕하세요. 스팀잇에서 글을 쓰는 @mishana입니다.

<나의 글쓰기> 시리즈에서는 제가 글을 작성할 때 사용하는 도구들과 애플리케이션들을 소개해나가고자 합니다.

처음으로 소개할 애플리케이션은 샤이니 프로그Shiny Frog에서 만든 macOS/iOS 용 노트 애플리케이션 베어Bear입니다. 베어는 애플 앱스토어에서 설치할 수 있습니다. 추후에 웹을 지원할 예정이라고 합니다. 정말 매력적인 애플리케이션이지만 아직은 애플 생태계만을 지원하고 있습니다.

노트 애플리케이션

10년 전에는 급하게 메모장을 열어서 기록을 남기고 "제목 없음.txt"로 바탕화면에 저장해두는 게 흔한 일이었습니다. 나중에는 어떤 게 어떤 메모인지 알 수 없게 되어버리곤 했죠. 공유는 또 어떤가요. 다른 컴퓨터에서 메모를 보려면 이 파일을 전송해서 옮겨야만 했습니다.

에버노트의 부상과 함께 이러한 상황은 급변했습니다. 에버노트는 무한한 노트를 제공했으며, 작성한 노트를 정리하기 위한 다양한 기능을 제공했습니다. 클라우드 기반 동기화에 있어서도 선구자 역할을 했습니다. 이제 어디서 작성한 노트건 어디에서나 볼 수 있어야한다는 걸 노트 애플리케이션의 상식이 되어버렸습니다.

베어는 에버노트와 같은 노트 애플리케이션의 계보를 잇는 노트 앱입니다. 노트 애플리케이션 시장은 여전히 에버노트가 주도하고 있지만, 사람들의 욕망이 다양한 만큼 다양한 애플리케이션들이 경쟁하고 있습니다.

베어는 노트를 작성하고 정리하는 데 있어서 에버노트와는 몇 가지 차별화된 접근을 취하고 있습니다.

  • 군더더기 없는 아름다운 디자인
  • 마크다운 문법 지원
  • 독보적인 마크다운 에디터
  • 해시 태그 지원
  • 노트 간 링크 문법
  • 베어 프로와 기기간 동기화

여기서부터는 베어에 대해서 하나씩 알아보도록 하겠습니다. 베어 리뷰 1편에서는 베어의 아름다운 디자인과 마크다운 에디터에 대해서 소개하고자 합니다.

군더더기 없는 아름다운 디자인

베어의 가장 매력적인 특징 중 하나는 디자인에 군더더기가 없다는 점입니다. 베어의 글쓰기 창입니다.

베어의 메인 글쓰기 창(에디터)

베어에서 새 글을 작성하면 이 노트에서 글을 작성하게 됩니다. 마치 아무것도 없는 것 같지만 네비게이션은 왼쪽에 숨어겨져있고, 오른쪽에 작은 아이콘들로 베어의 중요한 기능들을 모두 사용할 수 있습니다.

베어의 메인 글쓰기 창(에디터) - 해설

아래는 문서 정보와 서식 메뉴를 클릭하면 나오는 서브 메뉴입니다. 문서 정보 창에서는 현재 문서의 다양한 정보를 확인할 수 있으며 다른 포맷으로 내보내기가 가능합니다. 펜 모양의 서식 버튼을 클릭하면 사용가능한 마크다운 문법(서식)을 보여주고 텍스트를 선택하고 원하는 서식을 클릭해서 바로 적용하는 것도 가능합니다.

문서 정보와 서식 서브 메뉴

왼쪽에는 네비게이션 컬럼들이 숨겨져있습니다. 레이아웃 버튼을 누르면 레이아웃을 선택할 수 있습니다. 1단(에디터), 2단(노트 목록, 에디터), 3단(태그, 노트 목록, 에디터)를 지원합니다. 아래는 3단 레이아웃 구성입니다.

3단 컬럼 레이아웃(태그, 노트 목록, 에디터)

첫 번째 컬럼은 태그 컬럼입니다. 베어에서 문서를 조직하는 방법은 조금 특이합니다. 베어는 카테고리나 태그를 지원하지 않는 대신, 본문 어디에나 해시 태그를 남길 수 있습니다. 이 태그들을 기반으로 글을 탐색할 수 있습니다.

두 번째 컬럼은 노트 목록입니다. 여기에 작성한 노트들의 목록과 간단한 요약이 나타나며 본문을 검색할 수 있는 기능을 제공합니다.

그리고 마지막 컬럼이 에디터입니다. 베어에서 글쓰기는 다른 애플리케이션에서의 경험과는 조금 차별화되어있습니다. 베어는 마크다운 기반 에디터지만, 다른 마크다운 에디터와 달리 텍스트를 편집하는 에디터가 아닙니다. 뒤에서 자세히 다루겠지만 베어의 에디터 창에는 기존의 서식을 표현하는 리치 텍스트 에디터의 매력이 녹아들어 있습니다.

그리고 테마를 지원하고 있습니다. 테마에 대한 커스터마이징은 불가능하지만, 이 테마 기능 또한 베어의 전체 인터페이스와 완벽하게 어울리도록 설계되어있습니다. (일부 테마는 Bear Pro를 구독해야만 사용할 수 있습니다.)

다양한 테마를 지원

베어는 디자인과 기능 사이에서 기막힌 줄다리기를 합니다. 베어에는 디자인과 완전히 어우러지지 않은 기능이 없습니다. 그리고 그러한 기능은 릴리즈에 포함시키지 않습니다. 이러한 완벽함에 대한 추구가 샤이니 프로그Shiny Frog의 개발 철학이라고도 말할 수 있을 것 같습니다.

마크다운 지원

에버노트와 같은 서식을 지원하는 리치 텍스트 에디터는 편리하지만 단점을 가지고 있습니다. 서식은 눈에는 보기 좋지만 완벽하게 제어하는 게 어렵습니다. 예를 들어 외부에 텍스트를 복사해올 때 스타일까지 복사되는데, 의도치 않게 문서를 망치는 경우가 종종 발생합니다. 반대로 서식이라는 게 외부에서도 반드시 호환되리라는 보장이 없기 때문에 다른 애플리케이션으로 데이터를 옮길 때 문서의 내용이 깨지기도 합니다.

리치 텍스트와 반대로 정말로 문자로만 구성된 문서를 플레인 텍스트라고 이야기합니다. 이러한 플레인 텍스트에서 서식 대신 몇 가지 특수문자들을 사용해서 서식처럼 사용하는 문법을 경량 마크업 언어라고 이야기합니다. HTML도 마크업 언어이지만 <p></p>과 같이 아무런 시각적 단서도 제공하지 않는 사람이 이해할 수 없는 태그들이 자연어와 섞여서 사용됩니다. 반면에 경량 마크업 언어에서는 텍스트만 보더라도 강조**강조**처럼 보입니다. 텍스트만으로 서식을 표현하고 사람이 직관적으로 받아들일 수 있도록 설계된 언어입니다. 물론 이러한 문법들은 어디까지나 약속일 뿐이고, 이 문법에 따라서 작성된 문서도 실제로는 문자들의 집합일 뿐입니다.

경량 마크업 언어의 대표적인 예가 바로 존 그루버와 애런 스워츠가 디자인한 마크다운입니다. 스팀잇을 사용하는 스티미언들이라면 마크다운에 이미 익숙하실 겁니다. 마크다운 언어로 문서를 작성하면 텍스트 만으로 서식을 표현할 수 있습니다. **강조** 문법을 사용하면 단어나 문장을 강조할 수도 있고, > 인용을 사용해 인용구를 표현하거나 []()문법으로 하이퍼링크를 생성할 수도 있습니다.

다음은 마크다운으로 작성한 문서의 예입니다.

# 마크다운(Markdown)
마크다운은 문서는 **경량 마크업 언어**이다. 마크다운에서 제목은 제목처럼 보이고, 강조는 강조처럼 보인다. 존 그루버는 마크다운의 철학에 대해 이렇게 이야기했다.

> Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
> [Daring Fireball: Markdown Syntax Documentation](https://daringfireball.net/projects/markdown/syntax)

이 문서는 HTML로 변환되어 웹브라우저에서는 다음과 같이 보입니다.

HTML 렌더링된 마크다운 문서

베어에서도 바로 이 마크다운을 문법을 지원합니다. 정확히는 북극곰 마크업 문법이라는 베어 전용 마크다운의 방언을 지원하고 있습니다. 하지만 마크다운 호환성 모드(Markdown compatibility mode)를 활성화하면 마크다운으로 문서를 작성하는 게 가능합니다. 저는 이 모드를 사용하시기를 권장합니다.

베어의 마크다운 호환 모드

베어를 사용할 때 마크다운으로 문서를 작성하려면 반드시 이 옵션을 미리 활성화해두셔야합니다. 이 옵션은 모든 노트에 적용되기 때문에 이후에 변경하면 노트의 서식이 달라질 수 있기 때문입니다.

독보적인 마크다운 에디터

베어는 마크다운 노트 애플리케이션을 찾고있는 사람들에겐 가뭄의 단비와 같은 애플리케이션입니다. 하지만 베어의 진정한 매력은 단순히 "마크다운을 지원한다"는 데 있지 않습니다.

대부분의 마크다운 에디터는 플레인 텍스트 에디터의 연장선상에 있습니다. 플레인 텍스트 에디터란 어디까지나 텍스트를 텍스트로서 편집하기 위해서 만들어진 에디터입니다. 프로그래밍 언어를 다룰 때 사용하는 기법인 문법 강조(특정한 조건에 맞는 부분에 색을 입혀주는 기능)를 제공하지만, 서식을 표현하는 데는 서툴고 이미지는 아예 출력이 불가능합니다.

이러한 한계를 극복하기 위해서 마크다운을 지원하는 에디터들에서 자주 사용하는 방식이 바로 프리뷰입니다. 다음은 맥다운에서 이 문서의 일부를 작성한 모습입니다.

맥다운에서 작성한 마크다운 문서. 에디터와 프리뷰.

하지만 저는 프리뷰 방식을 별로 좋아하지 않습니다. 텍스트 에디터는 어디까지나 텍스트 에디터일 뿐입니다. 서식을 표현하는 데도 한계를 가지고 있고, 에디터에서 이미지도 나오지 않습니다. 마크다운 문서를 작성하면서 항상 이 마크다운 문서가 HTML 문서로는 어떻게 보일지를 고민해봐야합니다. 그리고 프리뷰 방식은 마크다운을 다룰 때는 많이 사용되지만, 막상 사용해보면 썩 만족스럽지 않습니다. 특히 긴 글을 작성할 때는 에디터와 프리뷰의 스크롤이 잘 맞지 않는 문제로 큰 고통을 겪게 됩니다.

이러한 방식은 플레인 텍스트라는 전통에 충실한 접근입니다. 플레인 텍스트는 특정한 애플리케이션에 종속되어서는 안 되며 언제 어디에서나 편집가능해야합니다. 그리고 텍스트 에디터는 어디까지나 텍스트 편집에 충실해야합니다. 이는 플레인 텍스트 문화의 철학이라고 할 수 있습니다. 저는 이러한 철학을 사랑하지만 이러한 철학에 과도하게 집착하게 되면 다양한 부작용을 겪게 됩니다.

베어는 이러한 플레인 텍스트의 철학에 얶매이지 않고 새로운 시도를 합니다. 베어의 노트는 순수한 마크다운 문서가 아니며 어디까지나 베어 위에서만 제대로 해석됩니다. 대신에 베어는 완전한 마크다운 문서로 복사를 하거나 문서를 내보내는 기능을 제공하고 있습니다. 또한 베어의 에디터는 플레인 텍스트를 다루지만 텍스트가 아닌 서식과 이미지를 에디터 위에서 표현할 수 있습니다. 베어에서 작성하는 마크다운 문서는 HTML 뷰와 거의 차이가 없습니다. 그래서 베어에는 프리뷰가 없고 에디터 자체가 프리뷰 역할까지 겸하고 있습니다.

다음은 제가 실제로 베어에서 마크다운을 사용해 이 글을 작성하고 있는 화면입니다.

베어에서 문서를 작성중인 화면

베어에서는 마크다운 문법으로 작성하고 있는 문서가 플레인 텍스트가 아닌 서식이 있는 문서처럼 보입니다. 이러한 방식을 본격적으로 도입했던 에디터는 사실 율리시스이긴합니다. 인터페이스와 에디터라는 측면에서 베어 역시 율리시스에게 많은 빚을 지고 있다고 생각합니다. 하지만 베어는 한 발 더 나아가 이미지까지도 에디터 위에서 바로 보여줍니다. (그리고 뒤늦게 율리시스에서도 이러한 기능을 제한적으로 도입합니다)

베어의 에디터는 플레인 텍스트의 간결함과 리치 텍스트 표현력 모두를 담고 있는 강력한 물건입니다. 마크다운이나 플레인 텍스트 기반의 경량 마크업 언어의 역사는 길지만 의외로 이러한 시도는 많지 않았습니다. 특히 노트 애플리케이션으로서 다른 기능들과 조화를 통해 더욱더 빛을 발하는 있습니다.

마치며

여기까지 베어의 디자인 에디터에 대해서 알아보았습니다. 이것으로 1편은 마치고 2편에서는 베어에서 노트를 조직하기 위한 기능을 소개하고자 합니다. 베어의 매력은 디자인과 에디터에만 있지는 않습니다. 베어는 노트를 조직하는 기능을 해시 태그와 노트 간 링크라는 상당히 독특한 접근을 취하고 있습니다. 이와 더불어 베어의 유료 모델인 베어 프로에 대해서 소개하겠습니다.

베어 구독 1주년

저는 베어를 사용한지 어느덧 1년이 지났습니다. 1년간 간단한 메모에 스팀잇에 올렸던 글들을 포함해 약 2500개의 노트를 작성했습니다. 블로그, 위키, 에버노트, 심플노트, nvALT, 율리시스 등등 지난 몇 년 동안 저에게 맞는 노트 애플리케이션을 헤매왔는데, 이제야 정착할 곳을 찾은 기분입니다.

베어는 유료로 구독하지 않더라도 기기간 동기화 기능을 제외하면 기능상으론 큰 제약 없이 모든 기능을 사용해볼 수 있습니다. 마크다운을 좋아하는 맥 사용자라면 꼭 한 번 사용해보시기를 바랍니다. 강력 추천합니다!

그럼 2편에서 베어에 대해 못 다한 이야기들과 함께 돌아오겠습니다.


최근에 공개한 글 목록입니다.


576C3781-B0F1-4BAE-879D-ABAC4E47520B.png
글쓰고, 프로그래밍하고, 투자하는 @mishana입니다.

웹사이트 | 트위터 | RSS | Feedly에서 구독

  • 이 글이 도움이 되셨다면 리스팀, 팔로우 부탁드려요 :)
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

스스로 홍보하는 프로젝트에서 나왔습니다.
오늘도 좋은글 잘 읽었습니다.
오늘도 화이팅입니다.!

찾고 있던 마크다운 에디터 추천에 반가워서
팔로+보팅 했습니다.
그동안 typora만 경험해봤는데 이 참에 바꿔봐야겠네요. (:

·

Bear 정말 좋습니다. 맥 사용자라면 꼭 한 번 써보시기를! 다음 편도 기대해주세요~

짱짱맨이 스윽 지나갑니다^^
즐거운 스티밋 라이프!

·

감사합니다!

This post has received a 2.86 % upvote from @booster thanks to: @mishana.

맥이 쓰고 싶어지는 고퀄 리뷰네요.

·

저는 프로그래밍 때문에(?) 맥을 쓰기 시작했는데, 애플리케이션 생태계가 정말 매력적이긴 합니다. 이제는 맥을 떠날 수가 없어져버렸습니다 ㅜ

와 이런 어플이 있었군요! 전 아이패드 주로 쓰는데 한번 써봐야겠네요 ㅎㅎ 당장 설치하러 가야겠어요. 정성스런 리뷰 잘 보고갑니다!!

·

전 macOS를 기준으로 작성하긴 했는데 베어의 장점 중 하나가 어떤 기기를 사용하더라도 "비슷한 경험"을 할 수 있다는 점입니다. 아이패드에서도 분명 맘에 드실 겁니다 ;)