CodeMirror에 거는 승부수

Replit은 에디터의 안정성, 성능, 접근성을 높이기 위해 오랫동안 Monaco를 사용해 왔으나, 서비스가 성장함에 따라 다음과 같은 한계에 직면했다.

Monaco의 주요 문제점:

• 모바일 지원 부재: 모바일 환경을 위해 Ace 에디터를 별도로 사용해야 했으며, 이로 인해 기능을 중복 구현해야 하는 번거로움이 있었다.
• 커스터마이징의 어려움: UI와 기능을 수정하기 어렵고, 독자적인 디자인 시스템을 적용하는 데 한계가 있었다.
• 성능 및 번들 크기: 관련 라이브러리가 약 51.17 MB의 번들 크기를 차지하여 앱 전체의 로딩 성능을 저하시켰다.
• 복잡한 API: 문서화가 부족하고 API가 복잡해 새로운 기능을 구현하기가 매우 까다로웠다.

이에 대한 대안으로 도입한 CodeMirror 6는 접근성, 터치스크린 지원, 확장성에 최적화된 에디터다.

CodeMirror 6의 특징:

• 모듈형 아키텍처: 핵심 라이브러리는 매우 가볍고, 구문 강조나 줄 번호 같은 기능은 확장(extension) 방식으로 추가하는 레고와 같은 구조를 가진다.
• 높은 유연성: 필요한 기능만 골라 쓰거나 핵심 부분을 커스텀 구현으로 교체할 수 있어, Replit만의 독자적인 에디터 경험을 구축하기 용이하다.
• 성능 및 모바일 최적화: Monaco보다 훨씬 가볍고 성능이 뛰어나며, 모바일 환경을 완벽하게 지원한다.