howtodraw.cloud를 만든 이유
설명하는 다이어그램 서비스를 만들다
그림 한 장으로는 설명이 안 되더라고요
클라우드 공부하면서 아키텍처 다이어그램을 참 많이 그렸습니다. AWS 자격증을 준비할 때도, 블로그를 쓸 때도, 팀에 설명할 때도 항상 그림이 먼저였습니다.
그런데 그릴 때마다 아쉬운 게 있었습니다. 그림 한 장에 VPC, 서브넷, 여러 개의 서비스, 화살표가 다 들어가 있으면 그리는 사람은 이해하지만 보는 사람은 어디부터 봐야 할지 모릅니다.
“요청이 로드밸런서로 들어가서 → 오토스케일링 그룹을 거쳐서 → DB로 간다”
이 흐름을, 움직이지 않는 그림 한 장으로 전달하는 건 생각보다 힘든 일이더라고요.
좋은 다이어그램 툴은 이미 많습니다. “그리는” 도구로는 훌륭한데, 제가 진짜 필요했던 건 그린 걸 누군가에게 순서대로 설명하는 도구였습니다. 그래서 만들었습니다.
그냥 그리는 게 아니라, ‘설명하는’ 도구
가장 신경 쓴 건 ‘스토리(Story)’ 기능입니다.
다이어그램을 다 그린 다음, 설명하고 싶은 순서대로 단계를 만듭니다. 그러면 각 단계마다 관련된 부분만 밝게 비추고 나머지는 어둡게 처리하면서 자막이 따라붙습니다.
- 1단계: 사용자 요청이 여기로 들어옵니다
- 2단계: 여기서 인증을 거칩니다
- 3단계: 그리고 DB로 향합니다
복잡한 아키텍처도 한 번에 다 보여주지 않고, 이해되는 순서대로 쪼개서 설명할 수 있습니다. 정리하면 이렇게 쓰입니다.
- 스토리는 그대로 자막 있는 영상(MP4) 으로 뽑혀서, 유튜브나 릴스·쇼츠에 바로 올릴 수 있습니다 (16:9 / 9:16 / 1:1, 720p·1080p, 자막은 화면에 굽거나
.srt로). - 스토리가 진행되면서 다이어그램을 하나씩 쌓아 올리거나, 한 단계에서 관련 객체들만 깔끔한 배경으로 모아(gather) 보여줄 수도 있습니다.
- 링크나 임베드로 공유하면, 받는 사람이 직접 노드를 클릭하고 확대하며 스스로 살펴볼 수 있습니다.
아래는 이 도구로 그린 다이어그램을 블로그에 그대로 임베드한 모습입니다. 노드를 클릭하면 상세가 열리고, 스토리가 있으면 재생됩니다.
어떤 기능들을 넣었나
“그리는” 부분도 최대한 빠르고 간단하게 만들었습니다. 로그인도 설치도 필요 없이 브라우저에서 바로 시작할 수 있습니다.
- 멀티 클라우드 팔레트 — AWS / GCP / Azure 탭, 카테고리별로 묶인 서비스, 실제 벤더 아이콘(recolor 가능) + Lucide 라인 아이콘. 내 SVG·PNG를 캔버스에 드롭해서 쓸 수도 있습니다.
- draw.io 스타일 중첩 — 서비스를 VPC·서브넷 같은 경계 안으로 떨어뜨리면 부모/자식으로 묶이고, 밖으로 빼면 풀립니다.
- 편집 가능한 직각 연결선 — 다리(leg)를 잡고 끌면 필요한 꺾임이 알아서 생기고 사라집니다. 화살표·선 스타일·색·굵기·라벨·애니메이션까지.
- 스토리 · 내보내기 — 앞서 말한 스토리, 그리고 의존성 없는 단일 HTML 파일(클릭하면 상세가 열리는 인터랙티브 뷰어), 고해상도 PNG, MP4.
- 저장 · 공유 — 다이어그램은 그냥 JSON 문서입니다. 링크 하나에 다이어그램 전체를 담아(URL fragment) 서버도 계정도 없이 공유할 수 있고, 로그인하면 클라우드에 저장·갤러리 공유도 됩니다.
앞으로 하고 싶은 것
지금도 계속 다듬고 있지만, 방향이 분명한 두 가지가 있습니다.
그림과 함께하는 퀴즈
스토리가 설명을 위한 기능이라면, 다이어그램을 학습 도구로써, 문제 지문을 도식화하고 시각적으로 해설하는데 도움이 될것으로 생각했습니다.
자격증 공부하는 분들이 개념을 눈으로 굳히는 데, 그리고 서로 문제를 만들어 공유하는 데 쓰였으면 합니다.
오픈소스화
에디터(fe/)는 처음부터 이걸 염두에 두고 설계했습니다. 백엔드 없이 홀로 동작하고, 에디터는 별도의 오픈소스 레포로 공개할 계획입니다.
내가 목표하는 것
거창한 계획은 없습니다. 세 줄이면 됩니다.
- 작은 커뮤니티. 누구나 자신의 아키텍처를 그리고, 공유하고, 함께 배우는 것이 목표입니다.
- 수익화는 고려하지 않습니다. 광고도, 유료 플랜도 계획에 없습니다.
- 그리고 솔직히, 아무도 안 써도 나 혼자라도 쓸 예정입니다 ㅋ
자격증 공부하면서 개념을 정리할 때, 블로그나 영상 콘텐츠를 만들 때, 팀에 아키텍처를 온보딩할 때 — 그리는 것에서 설명까지 한 번에 끝내고 싶은 분들께 도움이 되면 좋겠습니다.
감사합니다!
