내가 직접 만든 다이어그램 툴

Source: Dev.to

소개

Terry Davis는 일리가 있었다. 2025년에 열기 어려운 인용구이지만, 그 생각은 남는다: 도구를 이해하지 못하고 의존한다면, 실제로 작업을 소유하고 있는 것이 아니다.

나는 수년간 Draw.io와 Excalidraw를 사용해 왔다—훌륭한 도구들이다. 하지만 아키텍처를 설명하거나 흐름을 스케치하거나 통화 중에 빠른 다이어그램을 공유해야 할 때마다, 생각하기보다 도구와 싸우고 있었다.

그래서 Markasso를 만들었다. 이름은 직관적이다: Marker + Picasso. 브라우저용 화이트보드 엔진으로, 처음부터 직접 구현했다—의존성도, 프레임워크도, 런타임도 없다. 오직 Canvas API와 키보드‑우선 철학만 있다.

왜 처음부터 만들었는가?

• 완전한 제어 – 모든 코드 라인을 이해하고 싶었다.
• 디자인 제약 – “Zero dependencies”는 성능 트릭이 아니라 명료성을 강제한다. 라이브러리를 손에 넣을 수 없을 때, 더 깊게 생각해야 한다.
• 결과 – 더 가볍고, 더 빠르며, 완전히 내 것이 된 도구.

무엇을 만들고 있는지 이해한다는 것이 모든 것을 혼자 해야 한다는 뜻은 아니다. 나는 전체 과정에서 Claude를 AI 어시스턴트로 활용했다—아키텍처 결정, 코드 리뷰, 엣지 케이스 처리 등에 도움을 받았다. Lorenzo Cataldi(github.com/lc-d)는 시각 디자인 측면을 도와줬다. 핵심은 혼자 천재가 되는 것이 아니라, 위임한 부분조차도 모든 결정을 직접 파악하는 것이다.

Markasso가 제공하는 기능

• 키보드‑우선 내비게이션 및 단축키 (완전 문서화)
• Mermaid 다이어그램 지원 기본 제공
• 맞춤형 내보내기/가져오기 포맷으로 세션 간 작업 이동 가능
• 기본 다크 테마 (20년 이상 화면을 바라보면 자연스럽게 생긴다)
• 프로파일링, 추적 없음 — 분석 및 CI/CD는 Cloudflare만 사용

대상 사용자

• 시스템 설계, 아키텍처 리뷰, 혹은 통화 중 개념 설명을 위한 화이트보드가 필요한 개발자.
• 로그인 없이 어두운 페이지에 그림을 그리고 싶은 모든 사람.

아직은 초기 단계다. 깨질 수도 있다. 하지만 가능성은 충분히 있다.

사용해 보기

markasso.it

시도해 보고, 깨뜨려 보고, 무엇이 잘못됐는지 알려 주세요. 모든 보고, 불만, 의견을 환영합니다.