141: tweet overflow

베어(Bear): 이미지를 처음 이미지로 보여준 마크다운 에디터

마크다운은 플레인 텍스트로 작성할 수 있도록 설계된 경량 마크업 언어이다. 마크다운은 플레인 텍스트 포맷이기 때문에 이미지를 직접 처리할 수 없다. 그 대신에 URL을 사용해 로컬이나 네트워크 상의 이미지를 참조할 수 있다. 여기서 참조라는 표현이 중요하다. 실제로 그곳에 이미지가 있는 지 없는 지는 마크다운 문서에서 관여하지 않는다. 있으면 좋지만, 없으면 그것대로 어쩔 수 없다. 지금은 이미지가 잘 나오더라도, 미래에도 잘 나올 것이라고 보장할 수는 없다. 마크다운과 같은 경량 마크업 언어에서 이미지를 다루는 일은 오래된 골칫거리였다.

원래 플레인 텍스트를 편집하기 위해서 만들어졌던 텍스트 에디터들은 이 문제에 큰 관심을 두지 않았다. 이러한 텍스트 에디터들은 본래 미디어를 다루기 위해서 만들어진 애플리케이션이 아니다. 주로 프로그래밍 언어로 작성되는 소스 코드를 편집하기 위한 도구였고 이미지를 다루는 기능 자체가 필요 없었다. 이미지에 처리는 마크다운이 성공적으로 자리 잡으면서 중요한 문제로 떠오르게 된다.

이에 대한 가장 간단한 해결책은 에디터와 프리뷰를 2컬럼 레이아웃으로 나눠서 프리뷰를 보여주는 방식이다. 마크다운을 직접 HTML 문서로 변환하는 대신에 라이브 프리뷰를 통해서 문서 편집과 동시에 렌더링 결과를 확인할 수 있는 장점이 있었다. 참조된 이미지를 출력하는 기능은 자동적으로 구현되었다. 하지만 라이브 프리뷰는 근본적인 한계가 있다.

이에 대한 또 다른 접근은 에디터 상에서 참조한 이미지를 직접 보여주는 방식이다. 이 방식은 많은 에디터가 지원하지는 않았던 걸로 기억한다. 마크다운을 편집하는 에디터는 주로 플레인 텍스트 에디터로 만들어졌고, 플레인 텍스트에서 이미지라는 문자가 아닌 요소를 직접 다루는 일은 이질적이었기 때문이다. 타이포라(Typora)엠웹(MWeb)이 이 방식을 사용한다.

타이포라는 참조한 이미지를 에디터에서 직접 보여준다.

타이포라는 참조한 이미지를 에디터에서 직접 보여준다.

위의 두 방식은 이미지가 어딘가에 존재한다는 마크다운의 가정을 그대로 따른다. 이미지는 참조하기 전에 먼저 존재해야하면 확정된 URL을 가지고 있어야한다. 따라서 이미지를 저장하는 방식은 여전히 그대로였다.

이와 조금 다른 방식을 취하고 있는 노트 애플리케이션이 율리시스와 베어였다. 율리시스는 에디터 위에서 직접 이미지를 보여주지는 않지만 (img)로 정의하는 특별한 객체로 다뤄진다. 사용자는 (img) 이미지 객체를 먼저 생성하고 이 객체에 외부 이미지를 참조하거나 이미지를 지정할 수 있다. 참조 방식은 이전 방식 그대로지만, 로컬의 이미지를 지정하면 이 이미지는 노트에 저장된다. 율리시스는 하이브리드 에디터였고, 이미지가 저장되는 (가상의) 공간이 존재하기 때문에 좀 더 과감한 접근도 가능하다. 이미지의 바이너리 데이터를 직접 에디터 붙여넣기 하면 (img) 객체로 만들어져서 문서에 포함된다.1 드래그앤드롭으로 이미지를 첨부할 수도 있다. 단순히 URL을 참조하는 게 아니라 문자 그대로 이미지가 문서에 포함 된다. 율리시스에서는 텍스트와 이미지가 항상 함께 움직인다. 이 방식의 장점은 노트가 남아있다면 이미지 영원히 함께 남아있다는 점이다.

율리시스에서는 이미지를 이미지는 아니지만 특별한 객체로 취급한다.

율리시스에서는 이미지를 이미지는 아니지만 특별한 객체로 취급한다.

베어에서는 한 발 더 나아간다. 표현에서도 이미지 처리 방식에서도 율리시스보다 더 나아졌다.2 베어는 이미지를 그냥 에디터 상에서 보여준다. 이미지 처리 방식은 기존 마크다운의 방식과는 완전히 다르다. 베어는 마크다운의 이미지 참조 문법을 아예 지원하지 않는다. 문서 상에 마크다운 이미지 참조 문법을 사용하는 것은 자유지만, 베어에서는 이 문법을 무시한다. 베어는 오직 이미지 첨부만 지원한다. 율리시스는 여전히 이미지 참조를 지원하기 때문에 이미지가 깨질 가능성이 존재한다. 하지만 베어에서는 이미지 첨부만 지원하기 때문에 그럴 가능성 자체가 없다. 율리시스와 마찬가지로 이미지를 바이너리 데이터로 처리할 수 있기 때문에 직접 복사하거나 드래그앤드롭으로 첨부할 수도 있다. 플레인 텍스트에서 문자가 네이티브한 요소인 거처럼, 베어에서는 이미지도 네이티브한 요소이다.

베어에서 이미지는 이미지 객체로 보여지고, 텍스트와 함께 텍스트번들(Textbundle) 형식으로 저장된다.

베어에서 이미지는 이미지 객체로 보여지고, 텍스트와 함께 텍스트번들(Textbundle) 형식으로 저장된다.

이전에도 얘기했지만 율리시스나 베어는 플레인 텍스트 에디터의 궤적을 쫓아 발전하는 도구라기보다는, 노트 애플리케이션을 설계하면서 플레인 텍스트의 훌륭한 편집 경험을 빌려온 도구라고 평가하는 것이 더 정확할 것이다. 그렇기 때문에 다른 마크다운 에디터와는 다른 방향으로 발전할 수 있었다. 특히 베어는 플레인 텍스트 세계에서 언제나 무시 당해온 이미지를 처음으로 제대로 대우해준 노트 애플리케이션(텍스트 에디터)이다. 🐻


  1. 율리시스는 이것을 가능하게 하기 위해서 텍스트번들(TextBundle)이라는 간단하고 특별한 포맷을 만들었다. 
  2. 이 글은 2017년 9월에 처음 작성되었다. 율리시스도 2017년 10월에 출시된 버전 12(37233)부터 에디터 상에서 이미지 프리뷰를 지원한다. 
, nacyot.

블로그nacyot이 운영합니다.