코드로 다이어그램을 그리는 방식은 이제 개발 문서와 기술 블로그의 표준에 가깝다. 텍스트 기반 다이어그램 문법인 머메이드(Mermaid)는 플로차트, 시퀀스 다이어그램, 상태 머신 같은 그림을 마크다운처럼 간단한 구문으로 작성하게 해 주고, GitHub를 비롯한 여러 플랫폼이 이를 기본 지원하면서 사실상 업계 공용 표기법으로 자리 잡았다. 'Pele'는 바로 이 머메이드 문법을 입력으로 받아 SVG로 렌더링하는 오픈소스 라이브러리로, 스스로를 가볍다고 소개한다.
무엇을 하는 도구인가
Pele의 동작은 단순하다. 머메이드 구문을 작성해 render() 함수에 전달하면, 반환된 SVG를 페이지에 삽입하는 방식이다. 즉 복잡한 설정이나 별도의 렌더링 파이프라인을 구성할 필요 없이, 다이어그램 정의 문자열 하나를 함수에 넘기고 그 결과물을 DOM에 꽂는 것으로 끝난다. 출력 형식이 비트맵 이미지가 아니라 SVG라는 점이 핵심인데, 벡터 그래픽이기 때문에 확대·축소에도 선명하고 요소 하나하나가 문서 객체로 남아 이후 조작이나 스타일링의 여지가 열려 있다.
Pele가 내세우는 특징은 테마링 방식이다. 색상과 폰트를 CSS 변수(custom properties)로 지정하도록 설계되어 있어, 다이어그램의 외형을 일반적인 웹 스타일 규칙과 동일한 체계 안에서 다룰 수 있다. 특히 주목할 만한 대목은 색상 변경이 다시 렌더링하지 않고도 적용된다는 설명이다. SVG 요소들이 CSS 변수를 참조하고 있기 때문에, 변수 값만 바꾸면 브라우저가 알아서 스타일을 다시 계산해 그림에 반영한다는 의미로 읽힌다.
실무에서 어떤 의미가 있나
이 구조가 실무자에게 주는 이점은 분명하다. 많은 다이어그램 도구에서 테마를 바꾸려면 설정 객체를 수정하고 전체를 다시 그려야 한다. 반면 외형이 CSS 변수에 묶여 있으면, 라이트·다크 모드 전환이나 브랜드 색상 적용 같은 작업을 기존 스타일시트 구조에 그대로 녹여 처리할 수 있다. 다이어그램만 예외적으로 관리하던 방식에서 벗어나, 사이트 전반의 디자인 토큰 체계 안에 다이어그램을 편입시킬 수 있다는 뜻이다. 재렌더링이 없다는 점은 테마를 자주 전환하는 인터랙티브한 문서나 대시보드에서 반응 속도와 구현 단순성 면에서 유리하게 작용할 수 있다.
SVG 출력이라는 선택도 문서화 맥락과 잘 맞는다. 정적 사이트 생성기로 만든 기술 문서, 블로그, 사내 위키처럼 콘텐츠를 자주 갱신하는 환경에서는 그림 역시 코드로 버전 관리되는 편이 낫다. 머메이드 텍스트를 소스로 두고 Pele로 SVG를 뽑아내면, 디자인 변경이 생겨도 그림 파일을 새로 그려 교체할 필요 없이 스타일 레이어만 손보면 된다. 글쓴이와 디자이너의 작업이 분리된다는 점에서 유지보수 부담이 줄어든다.
남는 질문들
다만 공개된 설명만으로는 판단을 유보해야 할 부분이 많다. Pele가 머메이드의 어떤 다이어그램 유형까지 지원하는지, 머메이드 공식 구현과의 호환 범위는 어디까지인지, 서버 사이드 렌더링이나 번들 크기, 의존성 구성은 어떤지에 대한 구체적인 정보는 제시되지 않았다. '가볍다'는 표현도 상대적인 것이어서, 실제 도입을 검토한다면 번들 영향과 렌더링 성능을 직접 측정해 보는 편이 안전하다. CSS 변수 기반 테마링은 색상과 폰트를 다루는 데 적합하지만, 레이아웃이나 노드 형태처럼 구조적인 커스터마이징까지 같은 방식으로 커버되는지는 확인이 필요하다.
결국 Pele는 '머메이드 문법 입력, SVG 출력, CSS 변수 테마링'이라는 좁고 명확한 역할에 집중한 도구로 보인다. 화려한 기능을 늘리기보다 웹 표준인 CSS와 매끄럽게 맞물리는 지점을 노린 설계는, 다이어그램을 디자인 시스템의 일부로 다루고 싶은 팀에게 검토할 만한 선택지다. 다만 프로덕션 투입 여부는 지원 범위와 성숙도를 실제 프로젝트 조건에서 직접 검증한 뒤에 결정하는 것이 바람직하다.