무슨 일이 있었나요?
GitHub에 Doory라는 프로젝트가 공개됐는데요, 스스로를 “Open-Source Canva”라고 소개하고 있어요. Canva는 다들 한 번쯤 써보셨을 거예요. 템플릿 하나 고르고, 글자를 바꾸고, 이미지를 끌어다 놓으면 인스타 카드뉴스나 발표 자료가 뚝딱 나오는 웹 디자인 툴이죠. Doory는 그런 경험을 오픈소스로 만들겠다는 프로젝트예요. 누구나 코드를 열어보고, 고치고, 자기 서버에 직접 설치해서 쓸 수 있다는 뜻이죠.
“그냥 Canva 쓰면 되지 왜?” 싶을 수 있는데요, 개발자 입장에선 사정이 좀 달라요. 우리 서비스 안에 디자인 편집기를 넣어야 하는 순간이 생각보다 자주 오거든요. 쇼핑몰 셀러가 쓰는 배너 제작 기능, 인쇄소의 명함·현수막 주문 편집기, 사내 마케팅팀이 쓰는 썸네일 툴 같은 거요. 이럴 때 Canva를 우리 서비스에 통째로 넣을 수는 없잖아요. 그래서 이런 오픈소스 프로젝트가 나오면 늘 관심이 쏠리는 거예요.
Canva 같은 에디터는 속이 어떻게 생겼을까?
Doory가 정확히 어떤 기술 스택을 쓰는지는 레포 README에서 직접 확인하시는 게 가장 정확해요. 여기서는 이런 웹 디자인 에디터라면 공통으로 풀어야 하는 문제들을 짚어볼게요. 이 기준으로 보면 어떤 프로젝트든 훨씬 잘 보이거든요.
1. 화면에 어떻게 그릴까 (렌더링) 방법은 크게 세 가지예요. HTML5 Canvas에 픽셀로 직접 그리는 방식, SVG로 도형을 표현하는 방식, 일반 HTML 요소(div)를 절대 위치로 배치하는 방식이요. Canvas는 요소가 많아도 빠르지만 텍스트 편집 같은 기능을 직접 구현해야 해요. DOM 방식은 텍스트 편집은 쉬운 대신 요소가 수백 개를 넘으면 느려지고요. 그래서 많은 프로젝트가 Fabric.js나 Konva.js 같은 캔버스 라이브러리 위에 만들어져요.
2. 디자인을 어떻게 저장할까 (문서 모델) 이게 뭐냐면, 화면에 보이는 디자인을 “x=100, y=50 위치에 빨간 사각형, 그 위에 32px 텍스트”처럼 JSON 데이터로 표현하는 거예요. 이런 구조를 씬 그래프(scene graph)라고 불러요. 이걸 잘 설계해야 템플릿 저장, 실행 취소(undo), 실시간 협업 같은 기능이 수월해져요.
3. 텍스트, 특히 한글 디자인 툴에서 제일 골치 아픈 게 사실 글자예요. 줄바꿈, 자간, 행간, 폰트 로딩을 전부 맞춰야 하거든요. 한글은 더 어려워요. 글자 수가 워낙 많아서 한글 폰트 파일이 영문 폰트보다 훨씬 크거든요. 필요한 글자만 잘라내는 웹폰트 서브셋이나 동적 로딩을 안 하면 에디터 첫 화면이 확 느려져요.
4. 내보내기(export) 화면에 보이는 그대로 PNG나 PDF로 뽑아야 하는데, 브라우저마다 렌더링 결과가 미묘하게 달라요. 그래서 서버에서 헤드리스 브라우저(화면 없이 돌아가는 크롬)로 한 번 더 그려서 뽑는 방식도 많이 써요. 인쇄용이라면 CMYK 색상이나 재단 여백(bleed)까지 챙겨야 하고요.
비슷한 프로젝트들과 비교하면
오픈소스 디자인 툴 쪽에는 이미 꽤 쟁쟁한 선배들이 있어요.
- Penpot: Figma의 오픈소스 대안으로 가장 유명해요. 다만 UI/UX 디자이너가 화면을 설계하는 도구에 가까워서, 템플릿으로 결과물을 빠르게 찍어내는 Canva와는 쓰임새가 달라요.
- Excalidraw / tldraw: 화이트보드형 드로잉 툴이에요. 다이어그램이나 손그림 느낌의 스케치에는 강하지만 마케팅 이미지를 만드는 용도는 아니에요. 그리고 tldraw는 상업적으로 쓰려면 별도 라이선스가 필요하니 꼭 확인해 보세요.
- 상용 에디터 SDK: Canva 같은 편집기를 서비스에 끼워 넣을 수 있는 SDK들도 있지만, 상업적으로 쓰려면 비용이 드는 경우가 대부분이에요.
한국 개발자에게는?
커머스, 인쇄, 교육 서비스처럼 사용자가 직접 이미지를 꾸미는 기능이 필요한 팀이라면 한번 띄워보고 구조를 참고할 가치가 충분해요. 다만 실서비스에 넣기 전에 이 세 가지는 꼭 확인하세요.
1. 라이선스: MIT인지 AGPL인지에 따라 우리 서비스 코드를 공개해야 하는지가 달라져요.
2. 유지보수 상태: 커밋이 꾸준히 올라오는지, 이슈에 답이 달리는지 보세요.
3. 한글 입력: 한글은 자음과 모음을 조합해서 글자를 만드는데, 이 조합 과정을 처리하는 게 입력기(IME)예요. 해외에서 만든 캔버스 에디터는 조합 중에 글자가 깨지거나 두 번 입력되는 문제가 의외로 자주 생기니 꼭 직접 테스트해 보세요.
당장 도입하지 않더라도 캔버스 에디터의 상태 관리나 undo/redo 구현을 공부하는 교재로도 이런 레포만 한 게 없어요.
마무리
한 줄 정리: Doory는 ‘우리 서비스에 넣을 수 있는 Canva’라는 빈자리를 노리는 오픈소스 프로젝트이고, 평가할 때는 렌더링 구조, 라이선스, 한글 지원을 먼저 보세요.
여러분은 서비스에 이미지 편집기를 넣어본 적 있나요? 직접 만들었는지 상용 SDK를 썼는지, 그리고 어디서 제일 고생했는지 궁금해요.
🔗 출처: Hacker News