문자열로 이루어진 AWS 설계를 Mermaid를 활용해서 구성도로 그려봅시다.

안녕하세요 클래스메소드 김재욱(Kim Jaewook) 입니다. 이번에는 문자열로 이루어진 AWS 설계를 Mermaid를 활용해서 구성도로 그려봤습니다.

Mermaid?

Mermaid는 코드 기반으로 다이어그램을 그려주는 툴입니다.

별도의 설치없이 웹 사이트에서 다이어그램을 그려볼 수 있습니다.

Mermaid는 아래 사이트에서 활용할 수 있습니다.

https://mermaid.live/edit

Mermaid에 대한 보다 상세한 설명은 아래 사이트에서 확인할 수 있습니다.

https://mermaid.js.org/intro/

설계한 AWS 환경 준비

Mermaid로 구성도 즉 다이어그램을 뽑아내기 전에 AWS 환경을 설계할 필요가 있습니다.

구글 스프레드 시트로 간단하게 하나의 EC2 인스턴스를 가지고 있는 AWS 환경을 정리했습니다.

아무래도 문자열 형식으로 되어있기 때문에 한 번에 알아보기 어렵다는 점이 있습니다.

Mermaid 활용

이제 설계한 AWS 환경을 구성도 즉 다이어그램으로 뽑아봅시다.

문자열을 Mermaid 코드로 변환하면 다음과 같습니다.

			
			graph TB
    subgraph VPC["VPC Template"]
        VPCRes[VPC<br/>gr-product-vpc<br/>10.0.0.0/24]

        subgraph PublicTier["Public Subnets"]
            PubSub1a[Public Subnet 1a<br/>10.0.0.0/27]
            PubSub1b[Public Subnet 1b<br/>10.0.0.32/27]
        end

        subgraph WebTier["Web Subnets"]
            WebSub1a[Web Subnet 1a<br/>10.0.0.64/27]
            WebSub1b[Web Subnet 1b<br/>10.0.0.96/27]
        end

        subgraph DataTier["Datastore Subnets"]
            DataSub1a[Datastore Subnet 1a<br/>10.0.0.128/27]
            DataSub1b[Datastore Subnet 1b<br/>10.0.0.160/27]
        end

        IGW[Internet Gateway]
        EIP[Elastic IP]
        NAT[NAT Gateway]
        PubRTB[Public Route Table]
        WebRTB[Web Route Table]
        DataRTB[Datastore Route Table]
    end

    subgraph IAMTemp["IAM Template"]
        IAMRole[IAM Role<br/>SSM Access]
        InstanceProfile[Instance Profile]
    end

    subgraph SGTemp["Security Group Template"]
        SG[Security Group]
    end

    subgraph EC2Temp["EC2 Template"]
        KeyPair[Key Pair]
        EC2[EC2 Instance<br/>t2.micro]
    end

    Internet((Internet))

    Internet --- IGW
    IGW --- VPCRes
    VPCRes --- PubSub1a
    VPCRes --- WebSub1a
    NAT --- PubSub1a
    EIP --- NAT

    IAMRole --- InstanceProfile
    InstanceProfile -.-> EC2
    SG -.-> EC2
    WebSub1a -.-> EC2
    VPCRes -.-> SG
    KeyPair --- EC2

		

머메이드 코드에서 구성도로

머메이드 코드로 변환했다면 구성도 즉 다이어그램으로 변환시켜 봅시다.

코드를 그대로 복사해서 머메이드에 붙여넣으면 다음과 같은 구성도를 확인할 수 있습니다.

IAM, 보안 그룹, EC2, VPC 네 가지의 템플릿으로 나누어 각 템플릿에 생성된 리소스를 확인할 수 있습니다. 또, 각 리소스 간의 상관관계도 확인할 수 있습니다.

※ 머메이드 코드 변환이 어렵다면, 생성 AI를 활용합시다.

문자열로 작성된 AWS 설계를 구성도, 즉 다이어그램으로 간단히 변환해 시각적으로 AWS 환경을 확인할 수 있어서, 설계가 머릿속에서만 그려지던 것보다 훨씬 명확하게 이해할 수 있습니다. 단순히 글자와 표로만 존재하던 아키텍처가 눈에 보이는 형태로 표현되면, 서비스 간의 연결 관계나 데이터 흐름이 한눈에 들어오기 때문에 팀원들과 공유하거나 설명할 때도 훨씬 수월해집니다.

물론 AWS 구성도를 직접 그려보는 것도 학습이나 정리 차원에서 큰 도움이 되지만, 실제 프로젝트 현장에서는 빠르게 현재 구성을 확인해야 하는 경우가 많습니다. 특히 이미 설계된 구성이 너무 복잡해서 하나하나 도형을 배치하며 AWS 구성도를 수동으로 작성하기 어려운 상황도 흔히 발생합니다. 이러한 경우에는 Mermaid와 같은 도구를 활용해 보는 것이 좋습니다. 문자열 기반으로 설계를 기술하면, Mermaid가 이를 자동으로 시각화해 주기 때문에 최소한의 노력으로도 아키텍처 전체를 다이어그램 형태로 얻을 수 있고, 추후 변경이나 수정이 필요할 때도 텍스트만 고치면 자동으로 업데이트된 구성도를 얻을 수 있어 효율적입니다.

따라서 AWS 설계를 단순히 문서로만 관리하는 데 그치지 않고, Mermaid를 활용해 시각적으로 변환한다면 설계 이해도와 협업 효율성을 동시에 높일 수 있습니다. 여러분도 직접 시도해 보면서, 복잡한 아키텍처를 한눈에 파악할 수 있는 경험을 해보시길 권장드립니다.

본 블로그 게시글을 읽고 궁금한 사항이 있으신 분들은 jaewookkim533@yahoo.com로 보내주시면 감사하겠습니다.