무한 캔버스, 이제 파일 포맷이 생겼어요
요즘 개발자들 사이에서 무한 캔버스(Infinite Canvas) 도구가 정말 많이 쓰이고 있죠. Miro, FigJam, Excalidraw, 그리고 Obsidian Canvas까지. 아이디어를 자유롭게 펼치고, 노드를 연결하고, 시각적으로 사고를 정리하는 데 이만한 게 없거든요. 그런데 문제가 하나 있었어요. 이 캔버스 파일들이 각 도구마다 제각각인 포맷으로 저장된다는 거예요. Miro에서 만든 보드를 Obsidian으로 옮기고 싶다? 방법이 없었죠.
이 문제를 해결하기 위해 Obsidian 팀에서 JSON Canvas라는 개방형 파일 포맷 스펙(1.0)을 공개했어요. 확장자는 .canvas이고, 이름 그대로 JSON 기반이에요.
스펙을 뜯어보면 이렇게 생겼어요
JSON Canvas의 구조는 생각보다 단순해요. 최상위에 딱 두 개의 배열이 있어요: nodes와 edges. 이게 뭐냐면, nodes는 캔버스 위에 놓인 개별 요소들(텍스트 카드, 파일, 링크, 그룹 등)이고, edges는 그 요소들을 연결하는 선이에요. 마인드맵을 생각하면 딱 맞아요. 동그라미가 node, 동그라미를 잇는 화살표가 edge인 거죠.
노드에는 네 가지 타입이 있어요. 첫 번째는 text 노드인데, 마크다운 텍스트를 담을 수 있어요. 두 번째는 file 노드로, 로컬 파일 경로를 참조해요. 이미지 같은 경우 서브패스(subpath)로 특정 부분을 가리킬 수도 있고요. 세 번째는 link 노드로 URL을 임베드하는 거고, 네 번째는 group 노드로 여러 노드를 하나의 영역으로 묶을 수 있어요. 폴더처럼 시각적 그룹핑을 하는 거죠.
모든 노드는 공통적으로 id, x, y, width, height 값을 가져요. 캔버스 위에서의 위치와 크기를 절대 좌표로 지정하는 방식이에요. color 속성도 있어서 프리셋 번호(1~6)나 hex 값으로 색상을 지정할 수 있고요.
엣지(edge) 쪽도 깔끔해요. fromNode와 toNode로 연결할 노드의 ID를 지정하고, fromSide와 toSide로 어느 면(top, right, bottom, left)에서 선이 나오고 들어가는지 정할 수 있어요. 선의 끝 모양도 fromEnd와 toEnd로 화살표(arrow) 여부를 설정할 수 있고요.
이 전체가 하나의 JSON 파일로 저장되기 때문에 Git으로 버전 관리가 가능하고, 텍스트 에디터로 직접 열어서 수정할 수도 있어요. 이건 바이너리 포맷과 비교하면 엄청난 장점이에요.
왜 이게 의미 있을까요?
기존에 캔버스 도구들이 각자의 포맷을 쓰면서 생기는 가장 큰 문제는 벤더 락인(vendor lock-in)이었어요. 이게 뭐냐면, 한 도구에 콘텐츠를 넣으면 다른 도구로 옮기기가 사실상 불가능해서, 그 도구에 종속되는 현상을 말해요. JSON Canvas는 이걸 깨려는 시도예요.
Excalidraw도 JSON 기반 포맷을 사용하긴 하지만, Excalidraw만의 자체 스키마예요. tldraw 역시 마찬가지고요. 각 도구가 다 JSON을 쓰지만 서로 호환은 안 되는 상황이었던 거죠. JSON Canvas가 업계 표준처럼 자리잡으면, 도구 간 데이터 이동이 자유로워질 수 있어요.
물론 현실적인 한계도 있어요. 이 스펙은 꽤 미니멀해서, Excalidraw의 자유 드로잉이나 tldraw의 리치한 도형 시스템 같은 걸 표현하기엔 부족할 수 있어요. 스펙에 따르면 각 도구가 자체 확장을 할 수 있지만, 그러면 또 호환성이 깨지는 딜레마가 생기죠. 이 부분은 커뮤니티에서도 논의가 활발해요.
그리고 Obsidian이라는 특정 회사가 주도하는 스펙이라는 점도 고려해야 해요. 진정한 개방형 표준이 되려면 다른 도구들의 채택이 필수적인데, 아직 Obsidian Canvas 외에 이 포맷을 네이티브로 지원하는 도구는 많지 않아요.
한국 개발자가 눈여겨볼 포인트
실무에서 당장 활용할 수 있는 시나리오가 몇 가지 있어요. 기술 문서나 아키텍처 다이어그램을 캔버스로 관리하는 팀이라면, JSON Canvas 포맷으로 저장해서 Git 레포에 함께 넣을 수 있어요. 코드 리뷰할 때 아키텍처 변경 사항도 diff로 확인할 수 있다는 뜻이에요.
만약 자체 노트 앱이나 시각화 도구를 만들고 있다면, JSON Canvas를 import/export 포맷으로 지원하는 것도 좋은 선택이에요. 스펙이 매우 단순해서 파서를 구현하는 데 하루면 충분할 정도거든요. 공식 사이트에서 JSON Schema와 TypeScript 타입 정의도 제공하고 있어서 개발이 한결 수월해요.
PKM(Personal Knowledge Management) 도구에 관심이 많은 한국 개발자 커뮤니티 특성상, Obsidian 사용자가 꽤 있을 거예요. 이 스펙을 알아두면 Obsidian Canvas 데이터를 프로그래밍적으로 다루거나, 다른 도구와 연동하는 스크립트를 짜는 데 유용할 거예요.
정리하면
JSON Canvas는 무한 캔버스를 위한 최초의 본격적인 개방형 포맷 시도예요. 스펙 자체는 단순하고 깔끔하지만, 업계 표준으로 자리잡을 수 있을지는 다른 도구들의 채택에 달려 있어요.
여러분은 캔버스 도구 간 데이터 이동이 안 돼서 불편했던 경험이 있나요? 그리고 이런 개방형 포맷이 실제로 널리 쓰일 수 있을 거라고 생각하시나요?
🔗 출처: Hacker News
TTJ 코딩클래스 정규반
월급 외 수입,
코딩으로 만들 수 있습니다
17가지 수익 모델을 직접 실습하고, 1,300만원 상당의 자동화 도구와 소스코드를 받아가세요.
"비전공 직장인인데 반년 만에 수익 파이프라인을 여러 개 만들었습니다"
실제 수강생 후기- 비전공자도 6개월이면 첫 수익
- 20년 경력 개발자 직강
- 자동화 프로그램 + 소스코드 제공