이 글에서 소개한 도구
글을 읽으면서 브라우저에서 바로 도구를 열어 작업 흐름을 직접 확인해 보세요.
구성도가 아직도 「화이트보드 사진」으로 남아 있지 않나요?
설계 회의에서 그린 화이트보드 사진이 그대로 「최신 구성도」로 남아 있는 경우가 의외로 많습니다. 깔끔하게 다시 그리려 해도 그리기 도구에서 프레임을 긋고, 아이콘을 찾고, 선의 꺾임을 하나씩 정리하는 일은 생각보다 번거롭습니다.
Mermaid처럼 텍스트로 자동 배치하는 방법은 간편하지만 「Cloudflare 안」「자사 서버 안」「외부 서비스」처럼 경계를 프레임으로 묶는 것이나 무엇을 어디에 둘지 직접 정하는 것은 잘하지 못합니다.
그래서 아키텍처 구성도 에디터를 만들었습니다. 아이콘이 있는 노드와 그룹 프레임을 자유롭게 배치하면 선이 직각으로 자동 연결되어, 브라우저만으로 정돈된 구성도를 그릴 수 있습니다.
이 에디터로 할 수 있는 것
- 그룹 프레임: 실선·점선, 7색, 중첩 지원. 프레임을 옮기면 안의 노드도 함께 움직입니다
- 아이콘 노드: 범용 선화 아이콘 20종. 이름 아래에
Nitro,PostgreSQL같은 보충 설명도 쓸 수 있습니다 - 직각으로 자동 연결되는 선: 라벨, 점선, 파란색, 나가고 들어가는 변 지정
- 내 이미지: 로고 등을 이미지로 가져올 수 있습니다(브랜드 로고는 포함하지 않습니다)
- 내보내기: PNG / SVG / JSON. 되돌리기·다시 실행, 브라우저 내 자동 저장 포함
입력한 내용도 이미지도 브라우저 밖으로 전송되지 않습니다.
그리는 순서
「사용자 → 엣지 → 앱 서버 → 외부 서비스」라는 전형적인 구성을 예로 들겠습니다.
- 먼저 그룹 프레임을 놓습니다: 「엣지」「앱 서버」「외부 서비스」 세 개의 프레임을 만들고 색을 나눕니다. 어디에서 동작하는지 한눈에 보이는 도면의 토대가 됩니다
- 노드를 프레임 안에 놓습니다: 프레임을 선택한 상태에서 「노드 추가」를 누르면 그 프레임 안에 놓입니다. 이름과 보충 설명(기술 이름)을 넣고 아이콘을 고릅니다
- 선을 긋습니다: 「연결」을 누르고 시작→끝 순서로 클릭합니다. 노드를 선택한 상태에서 다른 노드를 Shift+클릭해도 연결됩니다
- 라벨로 의미를 더합니다:
HTTPS,/api같은 프로토콜이나 경로를 선 라벨로 씁니다 - 내보냅니다: 붙여넣기용 PNG, 확대해도 깨지지 않는 SVG, 나중에 이어서 편집할 JSON으로 저장합니다
읽기 쉬운 구성도를 만드는 요령
- 흐름은 왼쪽에서 오른쪽(바깥에서 안)으로 맞춥니다: 사용자를 왼쪽 끝에 두고 엣지, 서버, 외부 서비스 순으로 놓으면 통신 흐름이 자연스럽게 읽힙니다
- 선 색은 「주인공」만 바꿉니다: 사용자의 주요 통신만 파랗게 하면 전체 뼈대가 드러납니다
- 점선은 「운영상의 흐름」에 씁니다: 백업이나 배포처럼 요청의 본류가 아닌 화살표는 점선으로 구분합니다
- 그룹 프레임은 3~4개까지: 프레임이 너무 많으면 오히려 경계가 보이지 않습니다. 세부 구성은 다른 도면으로 나누세요
- 선이 원하는 대로 지나가지 않으면 나가고 들어가는 변을 지정합니다: 선은 다른 노드와 그룹 이름을 자동으로 피하지만, 경로를 직접 정하고 싶을 때는 「시작 변」「끝 변」을 위·아래·왼쪽·오른쪽으로 지정합니다
도면을 코드처럼 관리하기
「JSON으로 저장」한 파일을 저장소에 두면 구성이 바뀔 때 불러와 고치고 PR에서 차이를 확인할 수 있습니다. 텍스트로 차이를 보고 싶거나 Mermaid가 필요하면 인프라 구성도 메이커가 적합합니다. 배치와 아이콘까지 신경 쓰고 싶을 때는 이 에디터를 쓰세요.
자주 묻는 질문
Mermaid 구성도와 무엇이 다른가요?
Mermaid는 자동 배치라 간편하지만 노드 위치·아이콘·중첩 프레임을 세밀하게 지정할 수 없습니다. 이 에디터는 위치를 직접 정하는 대신 경계 프레임과 아이콘을 활용한 보기 좋은 도면을 만들 수 있습니다.
AWS나 Cloudflare 아이콘을 쓸 수 있나요?
브랜드 로고는 이용 조건이 있어 포함하지 않았습니다. 범용 아이콘 외에 직접 준비한 이미지(512KB까지)를 노드마다 가져올 수 있습니다. 로고를 쓸 때는 각 회사의 가이드라인을 따르세요.
만든 도면을 다른 사람과 공유할 수 있나요?
PNG / SVG로 내보내 붙여넣거나 JSON으로 저장해 전달할 수 있습니다. 받은 사람은 「JSON 불러오기」로 같은 도면을 열어 편집할 수 있습니다.
입력한 내용이 서버로 전송되나요?
전송되지 않습니다. 모든 처리는 브라우저 안에서 끝나며 도면과 가져온 이미지도 밖으로 나가지 않습니다. 자동 저장도 이 브라우저의 로컬 저장소만 사용합니다.
마무리
도면은 그리기 귀찮으면 갱신되지 않고, 결국 아무도 믿지 않게 됩니다. 아이콘과 프레임으로 「어디에서 무엇이 동작하는지」를 그리고 선은 자동으로 정돈되게 하세요. 이 정도로 가벼우면 구성이 바뀔 때 도면을 고치는 일도 부담이 되지 않습니다. 먼저 도구를 열어 샘플을 고쳐 보는 것부터 시작해 보세요.