Terraform 프로젝트 폴더를 브라우저에 올리면, 사용자 요청 트래픽이 어떤 리소스를 거쳐 가는지를 다이어그램으로 그려주는 도구입니다.
terraform plan이나 apply는 전혀 실행하지 않습니다. .tf 파일의 텍스트만 읽어 정적으로 분석합니다.
Terraform 파일에서 바로 얻을 수 있는 건 "무엇이 먼저 만들어져야 하는가"(생성 순서) 뿐입니다. 이건 트래픽이 흐르는 방향과 자주 어긋납니다.
- ECS 서비스가 타겟그룹을 참조 → 생성 순서는 타겟그룹이 먼저지만, 트래픽은 타겟그룹 → ECS 방향
- Lambda가 IAM 역할을 참조 → 생성 순서에는 있지만 트래픽은 아예 흐르지 않음
이 도구는 리소스 타입으로 트래픽 단계를 먼저 정하고, 실제 파일에 적힌 참조 중 단계를 넘나드는 것만 골라 트래픽 방향으로 뒤집어 화살표로 그립니다. 코드에 근거가 없는 연결은 만들지 않습니다.
진입점 로드밸런싱 애플리케이션 데이터 ← 가로축: 트래픽 순서
┌ Region ──────────────────────────────────────────────────────┐
│ ┌ VPC 밖 ────────────────────────────────────────────────┐ │
│ │ ⑥ S3 버킷 │ │
│ ┌ VPC · main ────────────────────────────────────────────┐ │
│ │ ┌ 🔒 Public subnet · AZ a,b ─────────────────────────┐ │ │
🌐│ │ │ ① ALB → ② 리스너 → ③ 타겟그룹 → ④ ECS → ⑤ 태스크정의 │ │ │
│ │ ┌ 🔒 Private subnet · AZ a,b ────────────────────────┐ │ │
│ │ │ ⑥ RDS │ │ │ ← 세로축: 네트워크 계층
└───────────────────────────────────────────────────────────────┘
- 가로축 = 트래픽 순서, 세로축 = 네트워크 계층(Region → VPC → Public/Private 서브넷)
- 노드 앞 번호 = 인터넷에서 몇 번째로 거치는 홉인지 (인터넷에서 이어지지 않으면
·) - 트래픽이 지나지 않는 리소스(IAM·로그·보안그룹)는 다이어그램 아래 별도 목록으로
- 노드를 클릭하면 오른쪽에 리소스 세부 속성이 열립니다
폴더마다 provider/backend를 따로 둔 멀티 스택 구조(infra/vpc, infra/db, infra/dns …)나 module 블록으로 나뉜 프로젝트는 단위별로 나눠서 봅니다.
- 상단 버튼으로 스택을 골라 그 스택의 트래픽 경로를 봅니다
[전체 관계도]탭에서 스택 사이 관계를 한 화면에 봅니다 (terraform_remote_state/module참조를 점선으로)
| 항목 | 지원 |
|---|---|
| Terraform 문법 | 0.12 이상 (HCL2) |
| 클라우드 provider | AWS / GCP / Azure / Kubernetes 등 제한 없음 (타입 이름 키워드로 판정) |
| 분석 대상 | 업로드한 폴더 안의 로컬 파일 (로컬 module 포함) |
| 원격 모듈 (Registry/Git) | 분석 제외 — 내부를 로컬에서 볼 수 없으므로 목록으로만 안내 |
| 규모 제한 | 파일 50개 / 리소스 300개 (초과 시 전체 분석 거부) |
| 브라우저 | 최신 Chrome / Edge / Safari |
VPC·서브넷 배치 판정은 현재 AWS 리소스 타입 기준으로 구현돼 있습니다. 다른 provider는 트래픽 경로는 그려지지만 VPC/서브넷 박스가 표시되지 않습니다.
- 업로드한
.tf파일은 서버로 전송되지 않습니다. 파싱·의존 관계 추출·다이어그램 생성이 전부 브라우저 안에서 이뤄지고, 탭을 닫으면 메모리와 함께 사라집니다. - 유일한 예외는 AI 그룹 이름 생성입니다. 이때도 리소스의 타입·이름 목록만 서버 API Route로 보내며, 속성값이나 파일 원본은 보내지 않습니다.
OPENAI_API_KEY는 서버에서만 사용하고 브라우저 코드에 포함되지 않습니다.- 분석 결과를 서버에 저장하지 않습니다. 데이터베이스가 없습니다.
⚠️ 그래도 access key 등 자격증명이 들어 있는.tf파일은 업로드하지 마세요. 자동 탐지·차단 기능은 없습니다.
npm install프로젝트 루트에 .env 파일을 만들고 OpenAI 키를 넣습니다 (없어도 동작합니다 — 그룹 이름이 "진입점" 같은 기본값으로 대체됩니다).
OPENAI_API_KEY=sk-...npm run dev브라우저에서 http://localhost:3000 을 열고 Terraform 프로젝트 폴더를 선택하면 됩니다.
| 기술 | 역할 |
|---|---|
| Next.js | 화면과 서버 API Route를 한 프로젝트에서 처리 |
| hcl2-json-parser | .tf 파일을 브라우저에서 JSON으로 변환 (문법 오류 줄 번호 포함) |
React Flow (@xyflow/react) |
노드·화살표 렌더링, 확대/축소/팬 |
| Lucide | 카테고리 아이콘 |
| OpenAI SDK | 서버에서 트래픽 단계 그룹 이름 생성 |
레이아웃은 자동 배치 라이브러리를 쓰지 않습니다. 가로는 트래픽 순서, 세로는 네트워크 계층으로 두 축이 모두 정해져 좌표가 규칙만으로 결정되기 때문입니다.
| 문서 | 내용 |
|---|---|
| PRD.md | 기획서 |
| PLAN.md | 작업 계획 |
| DESIGN.md | 설계 — 트래픽 경로 판정(2.4), 네트워크 배치 판정(2.5), 단위 분리(2.6) |
| CLAUDE.md | 개발 규칙 |
terraform-samples/ 에 케이스별 샘플이 있습니다 — 정상(basic-web-app, zulip-app), 순환 의존, 중복 리소스, 원격 모듈, 빈 프로젝트, .tf가 아닌 폴더.