개발 문서나 노트 앱에서 순서도, 시퀀스 다이어그램 같은 것을 그릴 때 Mermaid 문법을 쓰는 사람이 많다. 텍스트로 다이어그램 구조를 적으면 자동으로 도형과 화살표를 그려주는 방식이라 버전 관리도 쉽고 손으로 그리는 것보다 빠르기 때문이다. 최근 공개된 Pele는 이 Mermaid 문법을 그대로 입력받아 SVG로 렌더링해주는 오픈소스 프로젝트로, 기존 Mermaid.js보다 훨씬 가볍고 빠르다는 점을 내세우고 있어 눈여겨볼 만하다.
Pele는 무엇을 하는 도구인가
Pele의 사용법은 단순하다. Mermaid 문법으로 작성한 텍스트를 render() 함수에 전달하면 SVG 코드가 반환되고, 이를 그대로 페이지에 삽입하면 다이어그램이 화면에 나타난다. 공식 사이트에서는 예제 코드를 직접 수정해보면서 결과물이 즉시 바뀌는 것을 확인할 수 있는 인터랙티브 데모를 제공한다.
가장 큰 특징은 색상과 폰트를 CSS 변수로 제어한다는 점이다. 일반적인 다이어그램 렌더러는 색상을 바꾸려면 다이어그램을 다시 그려야 하는 경우가 많은데, Pele는 SVG 자체에 CSS 변수를 심어두는 방식을 택해서 색상을 바꿀 때 다시 렌더링할 필요 없이 CSS 값만 변경하면 즉시 반영된다. 다크 모드와 라이트 모드를 전환하거나 서비스 테마에 맞춰 다이어그램 색을 맞추는 작업이 한결 간단해지는 셈이다.
Mermaid.js와 비교했을 때 달라지는 점
원문에서 Pele는 자신을 Mermaid.js와 직접 비교하며 의존성이 전혀 없고(zero dependencies), 파일 크기는 6배 작으며, 렌더링 속도는 최대 500배 빠르다고 설명한다. 이 수치는 Pele 측이 공식 사이트에서 밝힌 자체 주장으로, 구체적인 벤치마크 환경이나 측정 조건은 발췌 내용만으로는 알 수 없어 실제 도입 전에는 각자 환경에서 직접 비교해보는 편이 안전하다.
기능 측면에서는 Mermaid 12.1.0 버전에 내장된 모든 다이어그램 타입을 지원한다고 밝히고 있다. 즉 플로우차트, 시퀀스 다이어그램, 클래스 다이어그램, 간트 차트 등 Mermaid 생태계에서 흔히 쓰는 다이어그램 종류를 그대로 그릴 수 있다는 뜻이다. 공식 사이트에는 문법, 레이아웃, 기능을 Mermaid와 나란히 비교해볼 수 있는 페이지도 마련되어 있다.
Obsidian 사용자를 염두에 둔 설계
Pele는 메모 및 지식 관리 앱 Obsidian에서 다이어그램을 빠르게 렌더링하고, 사용자가 설정한 테마와 자연스럽게 어울리도록 만들기 위해 개발됐다고 한다. Obsidian처럼 방대한 노트를 다루는 환경에서는 문서마다 들어있는 Mermaid 다이어그램을 매번 무겁게 렌더링하면 체감 속도가 떨어질 수밖에 없는데, Pele는 바로 이 지점을 겨냥해 가볍고 빠른 렌더링 엔진을 만든 것으로 보인다. 다만 Obsidian 플러그인으로 바로 쓸 수 있는지, 별도의 통합 작업이 필요한지는 원문 발췌만으로는 확인되지 않는다.
이름의 유래도 소개되어 있는데, 화산과 불의 여신 ‘펠레(Pele)’에서 따왔다고 한다. 빠른 렌더링 속도를 화산의 폭발적인 힘에 빗댄 작명으로 짐작된다.
한국 개발자가 눈여겨볼 만한 지점
한국에서도 README, 기술 블로그, 사내 위키, 노션이나 Obsidian 같은 노트 앱에 Mermaid 다이어그램을 삽입하는 경우가 많다. 이런 환경에서 Pele를 도입하면 두 가지 실질적인 이점을 기대할 수 있다. 첫째, 다이어그램이 많은 문서에서 렌더링 속도가 느려 답답했던 경험이 있다면 Pele의 가벼운 구조가 체감 개선을 줄 수 있다. 둘째, 다크 모드를 지원하는 웹사이트나 에디터에 다이어그램을 넣을 때 CSS 변수만으로 색상을 맞출 수 있어 테마 전환 로직을 별도로 구현할 필요가 줄어든다.
다만 오픈소스 프로젝트는 커뮤니티 규모, 유지보수 활발함, 버그 대응 속도가 안정적인 도입 여부를 가르는 중요한 변수다. Mermaid.js는 이미 오랜 기간 널리 쓰이며 검증된 반면 Pele는 상대적으로 신생 프로젝트이므로, 프로덕션에 바로 적용하기보다는 개인 프로젝트나 내부 문서 도구에 먼저 써보면서 호환성과 안정성을 확인해보는 것을 권한다. 또한 “Mermaid 12.1.0에 내장된 모든 다이어그램 타입 지원”이라는 설명이 향후 Mermaid 버전이 올라갈 때도 계속 유지될지는 지켜볼 필요가 있다.
답글 남기기