여러분의 인프라 구성도는 최신 상태인가요?
“가장 최신 구성도가 어디에 있죠?”
팀에 새로 합류한 멤버가 이렇게 물었을 때, 자신 있게 파일을 내밀 수 있는 프로젝트는 얼마나 될까요? 많은 경우 초기 설계 단계에서 draw.io나 파워포인트로 만든 그림이 업데이트되지 않은 채 방치되어 있곤 합니다.
이유는 단순합니다. **“수정하기 번거롭기 때문”**입니다.
브라우저에서 마우스로 일일이 선을 다시 연결하고, 배치를 조정하고, 이미지로 내보내는 과정은 인프라 변경이 잦은 현대의 개발 환경에서 너무나 큰 비용입니다.
”코드를 짜듯” 그림을 만들고 싶다
우리가 코드를 Git으로 관리하는 것처럼 구성도 역시 텍스트 기반으로 관리할 수 있다면, 문서의 최신성을 유지하는 일은 훨씬 쉬워질 것입니다. 이를 가능하게 하는 것이 바로 Mermaid.js입니다.
텍스트로 연결 관계만 정의하면 브라우저가 자동으로 최적의 레이아웃을 계산하여 도표를 그려줍니다. 이 ‘마법’ 같은 방식을 쓰지 않을 이유가 없죠.
graph TD
Internet["Internet"] --> LB["Load Balancer"]
LB --> WebServer["Web Server"]
WebServer --> DB[("Database")]도구에 휘둘리지 않기 위한 ‘비주얼 에디터’
하지만 Mermaid 구문을 모두 외워서 직접 타이핑하는 것도 만만한 일은 아닙니다. 우리는 ‘인프라 구성을 고민하는 것’에 집중하고 싶지, ‘Mermaid 문법 에러’ 때문에 씨름하고 싶지는 않으니까요.
DevToolKits의 **인프라 구성도 빌더**는 바로 이런 고민을 해결하기 위해 만들어졌습니다.
직관적인 조작, 스마트한 출력
- 노드 배치: 서버나 DB 등 컴포네트들을 UI에서 클릭 한 번으로 추가합니다.
- 선 연결: 어떤 노드끼리 통신하는지 선택만 하면 됩니다.
- Mermaid 코드 복사: 완성된 도표를 그대로 코드로 복사할 수 있습니다.
출력된 Mermaid 코드를 GitHub의 README나 Notion에 붙여넣으면, 그곳이 바로 ‘항상 최신 상태인 구성도’가 됩니다. 수정이 필요할 때는 코드 한 줄만 바꾸면 끝이죠. 이런 가벼움이야말로 진정한 ‘살아있는 문서’의 모습입니다.
마치며
인프라 구성도는 한 번 만들고 끝나는 ‘예술 작품’이 아닙니다. 시스템의 성장에 맞춰 계속해서 모습을 바꾸는 ‘생명체’입니다.
마우스 노가다를 졸업하고 더 가볍고 정확하게.
여러분의 설계를 텍스트의 힘으로 시각화하여 팀원들과 항상 같은 최신 지도를 공유해 보세요.
💡 유용한 활용 팁: GitHub에서 Pull Request를 올릴 때, 인프라 변경 사항에 맞춰 Mermaid 코드도 함께 업데이트해 보세요. 코드 리뷰와 동시에 인프라 구성의 변경점도 함께 리뷰할 수 있어 문서가 낡아버리는 것을 방지할 수 있습니다.