Atomic Editor 탐구: CodeMirror 6에 Obsidian 스타일의 Live Preview 도입하기

완벽한 Markdown editor를 찾는 과정은 종종 갈림길에 서게 됩니다: 텍스트 editor의 가공되지 않은, 방해 없는 특성과 WYSIWYG (What You See Is What You Get) 인터페이스의 즉각적인 시각적 만족감 사이의 선택입니다. 많은 이들에게 이상적인 절충안은 Obsidian이 대중화시킨 "Live Preview" 패러다임입니다. 이는 사용자가 커서를 이동함에 따라 Markdown syntax가 실시간으로 숨겨지거나 스타일링되어, 일반 텍스트의 속도와 렌더링된 문서의 명확성을 결합합니다.

Atomic Editor는 CodeMirror 6를 위한 특화된 구현체로서 이 영역에 진입하며, 자신만의 텍스트 기반 애플리케이션을 구축하는 개발자들에게 이러한 유동적이고 하이브리드적인 편집 경험을 제공하는 것을 목표로 합니다. CodeMirror 6의 확장성을 활용하여, Atomic Editor는 단일 편집 영역 내에서 원본 소스 코드와 렌더링된 미리보기 사이의 간극을 메우고자 시도합니다.

핵심 제안: CodeMirror 6에서의 Live Preview

Atomic Editor의 핵심은 편집과 보기 사이의 원활한 전환을 제공하도록 설계되었다는 점입니다. Markdown과 HTML 렌더링을 각각 다른 창에 보여주는 전통적인 분할 창 editor처럼 달리, Atomic Editor는 editor의 뷰를 동적으로 수정합니다. 이러한 접근 방식은 작성자가 소스 텍스트의 문맥을 벗어나지 않고도 자신의 서식(표, 체크박스, 굵은 텍스트 등)의 구조적 결과를 볼 수 있게 함으로써 인지적 부하를를 줄여줍니다.

현재 구현의 가장 찬사받는 측면 중 하나는 복잡한 Markdown 요소들을 처리하는 방식입니다. 사용자들은 특히 이 도구의 "fit-and-finish"를 언급하며, live-preview 환경에서 구현하기 까다로운 표(tables)에 대한 WYSIWYG 지원을 높게 평가했습니다.

기술적 고려 사항 및 커뮤니티 피드백

이 프로젝트는 상당한 가능성을 보여주고 있지만, 프로토타입에서 상용 수준의 도구로 전환하기 위해서는 몇 가지 기술적 난관을 극복해야 합니다. Hacker News의 개발자 커뮤니티 피드백은 몇 가지 마찰 지점을 강조합니다:

상태 관리 및 커서 동작

Live preview를 구현하려면 editor의 상태에 대한 정밀한 제어가 필요합니다. 일부 사용자들은 특정 요소 주변에서 타이핑할 때 "jumpy"한 동작을 보고했습니다. 이는 기반이 되는 텍스트 문서와 시각적 표현 사이의 동기화가 때때로 어긋나거나 예상치 못한 레이아웃 변화를 유발할 수 있음을 시사합니다.

"Leaky Abstraction" 문제

하이브리드 editor의 주요 과제 중 하나는 추상화가 "leak"되지 않도록 보장하는 것입니다. 즉, 사용자가 시각적 흐름을 깨뜨리는 방식으로 원본 syntax를 다루도록 강요받지 않아야 합니다. 예를 들어, 한 사용자는 여는 코드 펜스(code fence)를 삭제하면 닫는 펜스가 예상치 못하게 동작할 수 있다고 언급했는데, 이는 쌍을 이루는 구분자(delimiters)를 처리하는 editor의 로직이 추가적인 개선이 필요함을 나타냅니다.

상호작용 디자인

렌더링을 넘어, editor의 촉각적 느낌(tactile feel) 또한 주요 논의 사항입니다. 개선을 위한 구체적인 제안은 다음과 같습니다:

Selection Highlighting: 일부 사용자들은 선택 영역 강조가 항상 예상대로 작동하지 않는다고 언급했습니다.
Checkbox Ergonomics: 커서가 체크박스에 접근할 때 체크박스가 편집 가능한 텍스트로 더 직관적으로 전환되기를 바라는 요구가 있습니다.
Row Deletion: 표 렌더링은 인상적이지만, 표 내부의 특정 행을 삭제하는 메커니즘은 여전히 마찰 지점이입니다.

CodeMirror 6 vs. ProseMirror

커뮤니티에서 제기된 흥미로운 기술적 논쟁은 산문 중심의 editor를 위해 ProseMirror 대신 CodeMirror 6를 선택한 것입니다. ProseMirror는 구조화된 문서와 리치 텍스트를 위해 특별히 설계되었지만, CodeMirror 6는 매우 확장 가능한 텍스트 editor입니다. CodeMirror 6를 선택한 것은 기반이 되는 plain-text 파일과의 강력한 연결을 유지하려는 선호도를 나타내며, 이는 editor가 "텍스트를 저장하는 문서 editor"가 아닌 "텍스트 editor 우선" 방식임을 보장합니다.

결론

Atomic Editor는 정교한 편집 패러다임을 오픈 소스 생태계에 도입하려는 대담한 시도입니다. 커서 불안정성이나 엣지 케이스 syntax 처리와 같은 초기 단계 프로젝트의 전형적인 성장통을 현재 겪고 있다 하더라도, 표와 같은 복잡한 요소를 처리하는 능력은 강력한한 기초를 시사합니다. 자신만의 애플리케이션에 Obsidian과 같은 경험을 구현하고자 하는 개발자들에게, Atomic Editor는 매력적인 시작점과 하이브리드 Markdown 편집의 미래에 대한 엿보기를 제공합니다.