Lexiverse
Lexiverse - AI contextual reading engine for English learners. Your next article is your next review.
실제 AWS 계정이나 요금 없이 VPC, 서브넷, 보안 그룹, ALB, RDS를 설계하고 가상 통신을 시뮬레이션하는 비공식 학습용 플랫폼
Translation pending
EducationTypeScript · CSSGitHub @ci667702-starOnlineOwner unconfirmed
Have you tried it? One tap is enough. No sign-in needed.
No updates detected yet. GitHub releases will appear here.
Owners of public repositories under a personal GitHub account can sign in to verify ownership and manage the introduction themselves. No administrator approval is needed.
Sign in, generate a verification file, and commit it to this repository’s default branch within 30 minutes. Files on other branches or forks do not count. Then check the file below to manage the project without administrator approval. Keep the file to retain your access.
If needed, you will go to sign-in. After signing in, return here and press your chosen verification button again.
Run /nomorevibe verify in your project folder to verify ownership and manage the introduction yourself.
Verify in one minuteAsk about other verification options
AWS를 직접 설계해 볼 수 있는 웹사이트
Translation pending
Taken from the repository README
Loading the full README.
Read the full README ↗비공식 학습용 시뮬레이터입니다. Amazon Web Services와 제휴하지 않았으며, 실제 AWS 계정·Access Key·IAM 자격 증명을 요구하지 않고, 실제 EC2/VPC/RDS/ALB/S3 등 어떤 클라우드 리소스도 만들거나 수정하지 않습니다. 요금이 발생하는 외부 API에 의존하지 않습니다.
AWS를 배우고 싶지만 요금·계정 설정·과금 위험 때문에 실습하기 어려운 학생과 입문자를 위한 웹 애플리케이션입니다. 같은 샌드박스(가상 AWS 환경)를 두 가지 화면으로 다룰 수 있습니다.
| 화면 | 대상 | 특징 |
|---|---|---|
쉬운 모드 (/projects/[id]) | 처음 배우는 사람 | 리소스를 캔버스에 끌어다 놓고 선으로 연결하는 그림 설계 화면 |
심화 모드 (/console/[id]) | 실제 콘솔에 익숙해지고 싶은 사람 | AWS 콘솔처럼 서비스 메뉴·목록·생성 마법사·작업 메뉴로 하나씩 직접 설정. 앱이 대신 만들어 주는 리소스가 없음 |
두 화면은 같은 데이터를 쓰므로 언제든 바꿔 볼 수 있습니다. 모든 결과는 브라우저 안의 시뮬레이션 엔진이 설정값으로 계산한 가상 결과입니다.
요구 사항: Node.js 20.9 이상 (개발 환경: Node 24, npm 11)
npm install
npm run dev
브라우저에서 http://localhost:3000 을 엽니다. 첫 화면에는 미리 만든 샌드박스가 없습니다.
샌드박스는 브라우저 localStorage에 저장되며 새로고침 후에도 복원됩니다.
| 명령 | 설명 |
|---|---|
npm run dev | 개발 서버 (Turbopack) |
npm run build / npm start | 프로덕션 빌드 / 실행 |
npm run lint | ESLint |
npm run typecheck | TypeScript 타입 검사 |
npm test | Vitest 단위·통합·UI 테스트 |
npm run test:e2e | Playwright E2E 테스트 (개발 서버를 자동으로 띄우거나 실행 중인 서버를 재사용) |
E2E 테스트 브라우저는 npx playwright install chromium으로 설치하거나, 설치된 Edge/Chrome을 씁니다
(PowerShell: $env:PLAYWRIGHT_CHANNEL="msedge"; npm run test:e2e).
Next.js 16 (App Router, Turbopack) · React 19 · TypeScript 5 · Tailwind CSS 4 · shadcn/ui (Radix) · React Flow (@xyflow/react 12) ·
Zustand 5 · Zod 4 · sonner (알림 토스트) · driver.js (단계별 팝업 튜토리얼) · Lucide React · Vitest 5 + React Testing Library · Playwright
| 서비스 | 화면과 동작 |
|---|---|
| 네트워크 (VPC) | VPC(기본 VPC 생성 포함)·서브넷·라우팅 테이블·인터넷 게이트웨이·NAT 게이트웨이·탄력적 IP·네트워크 ACL·보안 그룹. 생성·편집·연결·삭제를 AWS 오류 코드([DependencyViolation] 등)와 함께 검사 |
| 서버 (EC2) | 인스턴스 시작 마법사(AMI, 유형, 서브넷, 퍼블릭 IP, 보안 그룹, 사용자 데이터, IAM 역할), 상태 수명 주기(Pending → Running 등), 대상 그룹·헬스 체크 |
| 로드 밸런서 (ALB) | 리스너, 기본 작업, 리스너 규칙(경로 패턴 → 다른 대상 그룹으로 전달 / 고정 응답), 규칙 경로 테스트 |
| 데이터베이스 (RDS) | DB 서브넷 그룹, DB 인스턴스, 퍼블릭 액세스와 네트워크 경로 |
| 스토리지 (S3, 가상) | 버킷 이름 규칙(전역 중복 체험 포함), 객체 업로드·폴더, 버전 관리와 삭제 마커, 기본 암호화, 퍼블릭 액세스 차단, 버킷 정책(예시 포함), 정적 웹 사이트 호스팅과 가상 브라우저(샌드박스 iframe), S3 접근 테스트(네트워크 → 자격 증명 → 정책 → 객체 순서로 판정) |
| 권한 관리 (IAM, 가상) | 사용자·그룹·역할·정책, 정책 시각적 편집기 + JSON 검사, 가상 액세스 키 발급 과정(용도 선택 → 대안 안내 → 한 번만 보이는 비밀 키 → .csv), 키 비활성화/삭제, 보안 권장 사항, 정책 시뮬레이터, 가상 로그인·역할 전환(루트가 아니면 만들기·바꾸기·삭제를 그 자격 증명의 정책으로 검사해 UnauthorizedOperation/AccessDenied로 거부), 학교 역할 템플릿(네트워크·서버·DB·스토리지·모니터링·감사·학생·IAM·강사 역할과 권한 표) |
| 모니터링 (CloudWatch, 가상) | 가상 부하(분당 요청 수·시간), 지표 그래프(EC2·ALB·RDS·NAT), 경보 생성 마법사(M/N 데이터 포인트, 누락 데이터 처리), 경보 상태 기록, 대시보드 위젯, 상태가 바뀌면 콘솔 알림 |
| NAT 인스턴스 | NAT 게이트웨이 대신 EC2로 프라이빗 서브넷의 외부 통신 구성: 사용자 데이터 템플릿 'NAT 인스턴스'(AWS 문서의 iptables 명령), 작업 → 네트워킹 → 소스/대상 확인 변경, 라우팅 대상 '인스턴스', 전용 검증 규칙(EC2-006~012), 통신 분석, NAT 게이트웨이와의 비용 비교 |
| 분석 도구 | Reachability Analyzer(단계별 근거, ALB 대상 분산, HTTP 경로), 리소스 맵(범례·선 종류 필터·선택 강조, 가용 영역 × 서브넷 종류 자동 정렬), 구성 검사, 가상 비용 추정(NAT 비교 포함), 이벤트 기록 |
[오류 코드] 메시지 → 해결 방법 → 오류 코드 뜻을 한 번에 표시.PGSIM으로 시작하는 연습용 가상 값이며 실제 AWS에서 동작하지 않습니다. 비밀 키는 만들 때 한 번만 보여 주고 저장하지 않습니다
(마지막 4자리만 보관). 콘솔 로그인·MFA는 표시만 바뀌며 암호를 받지 않습니다.sandbox iframe에서만 그립니다.단축키: Ctrl/⌘+Z 실행 취소, Ctrl/⌘+Shift+Z 또는 Ctrl+Y 다시 실행, Delete/Backspace 선택 항목 삭제.
UI와 분리된 순수 TypeScript 모듈입니다. 같은 입력에는 항상 같은 결과를 돌려줍니다 (CloudWatch 잡음도 해시 기반이라 결정적).
| 모듈 | 역할 |
|---|---|
resource-models.ts | 리소스/연결/서비스(IAM·S3·CloudWatch)/프로젝트 타입과 Zod 스키마, 관계 카탈로그 |
cidr-utils.ts | IPv4·CIDR 파싱, 포함/겹침, AWS 예약 주소(서브넷당 5개) |
topology-engine.ts | 소속·연결 관계, 유효 라우팅 테이블, 퍼블릭/프라이빗 판정(라우팅 기준), 가상 IP·DNS |
route-engine.ts | Longest Prefix Match 경로 선택, 중복 경로 탐지 |
security-group-engine.ts / network-acl-engine.ts | 보안 그룹(허용 합집합, 암묵적 거부, SG 참조) / NACL(번호 순서, 첫 일치, 상태 비저장) |
connectivity-engine.ts | 종단 간 통신: SG → 라우팅 → NACL → IGW/NAT → SG → 서비스(ALB 리스너 규칙 포함) → 응답 경로 |
alb-engine.ts | 대상 그룹, 가상 헬스 체크, 라운드 로빈, fail-open |
iam-engine.ts | 정책 JSON 검사, 와일드카드 일치, 평가(명시적 Deny > Allow > 암묵적 거부), 관리형 정책(학습용 단순화) |
s3-engine.ts | 버킷·객체 규칙, 퍼블릭 판정, 접근 평가(네트워크·자격 증명·IAM·버킷 정책·퍼블릭 액세스 차단), 정적 웹 사이트 응답 |
cloudwatch-engine.ts | 상태·가상 부하·헬스로 분 단위 지표 계산, 집계(평균/합계/최대/최소), 경보 평가와 상태 기록 |
validation-engine.ts | 72개 검증 규칙 (NET/SEC/EC2/ELB/RDS/GEN, 고유 ID) |
simulation-log.ts | 단계별 로그, 경로, 실패 정보 (통신 실패와 엔진 오류 구분) |
connection-rules.ts / cost-engine.ts | 관계 생성 규칙과 거부 사유 / 교육용 가상 비용 |
전체 목록은 앱의 /about 페이지에 있습니다.
설명은 화면 컴포넌트 안에 직접 적지 않고 src/lib/docs에 데이터로 둡니다. 모두 가상 시뮬레이터 내부 데이터이며 외부 API를 부르지 않습니다.
| 파일 | 역할 |
|---|---|
types.ts | DOC_FIELDS(리소스·서비스별 설정 키 목록)와 ResourceDoc 타입. 설정 키마다 도움말이 없으면 타입 오류가 납니다 |
content/*.ts | 리소스별 요약 · 자세한 설명 · 사용 이유 · 실무 사례 · 관련 리소스 · 설정별 도움말 · 시뮬레이터 구현 범위 |
rule-fields.ts | 검증 규칙 ID → 관련 설정 키 (검증 센터·시뮬레이션 실패의 "설정으로 이동") |
resource-analysis.ts / service-analysis.ts | 실제 토폴로지 · 검증 결과 · 시뮬레이션으로 만드는 "현재 구성 분석" (S3·IAM·CloudWatch는 기존 평가 엔진 사용) |
설명이 없는 키는 getResourceDoc()이 "준비되지 않음" 안내로 대신합니다. tests/unit/docs.test.ts는 설정 스키마 키·검증 규칙 매핑·도움말 7개 항목의 누락과
리소스끼리 복사한 설명을 검사합니다.
각 단계의 완료 여부는 버튼 클릭이 아니라 현재 샌드박스의 실제 설정·검증 결과·시뮬레이션 결과로 자동 판정됩니다. 두 모드 모두에서 진행할 수 있습니다.
src/
app/ Next.js 라우트 (/, /projects/[projectId], /console/[projectId], /about)
components/
app/ 공통 셸 (Providers, 테마, 가져오기 대화 상자 등)
dashboard/ 샌드박스 목록, 모드 선택, 실습·예시
builder/ 쉬운 모드: 캔버스, 설명·설정 패널, 하단 패널, 둘러보기
docs/ 리소스 설명 패널 섹션(A~F)과 설정 도움말 아이콘 (두 모드 공용)
console/ 심화 모드
shell/ 상단 메뉴, 사이드 메뉴, 도움말 패널
pages/ 서비스별 화면 (vpc·ec2·rds 공통 파일, iam/, s3/, cloudwatch/, listener-rules)
tutorial/ 순차 팝업 튜토리얼 (driver.js)
ui/ 콘솔 UI 부품 (표, 양식, 탭, 알림, 쉽게 이해하기)
map/ 리소스 맵
ui/ shadcn/ui 컴포넌트 (sonner 토스트 포함)
lib/
engine/ 시뮬레이션·검증 엔진 (순수 TypeScript)
docs/ 리소스·서비스 설명 데이터(content/), 설정 키 목록, 검증 규칙 → 설정 항목 매핑, 현재 구성 분석
project/ 콘솔 동작(console/iam/s3/cloudwatch-actions), 팩토리, 변경 연산, 무결성 검사, 저장소, 샘플
labs/ Guided Lab 정의와 판정
store/ Zustand 스토어 (프로젝트/Undo·Redo, 편집기 상태)
tests/
unit/ CIDR, 라우팅, SG/NACL, 토폴로지·ALB, ALB 규칙, IAM, S3, CloudWatch, 콘솔 동작, 검증 규칙
integration/ 종단 간 통신, 시나리오, 저장/복원·JSON, Guided Lab, 수명 주기
ui/ React Testing Library (대시보드, 쉬운 모드, 콘솔, IAM·S3·CloudWatch·ALB 규칙 화면)
e2e/ Playwright
legacy-cra/ 기존 Create React App 템플릿 원본 (삭제하지 않고 보존, 빌드/테스트 대상 아님)
npm test: 29개 파일, 400개 테스트 통과 (단위 · 통합 · UI)
npm run test:e2e: 11개 시나리오 (Chromium) — 콘솔만으로 웹 서버 구성, 오류 코드, 실습 판정, 모바일 가로 넘침, IAM 키 발급 + S3 웹 사이트 공개,
리소스 설명 패널(데스크톱·모바일 너비에서 도움말 위치, 설정 항목 이동, 심화 모드 탭),
튜토리얼('다음'을 눌러야 넘어감, 화면 자동 이동 없음, 튜토리얼 중 메뉴 사용, 양식이 커져도 강조·팝업이 따라감),
NAT 인스턴스 예시(리소스 맵 범례·선택 강조, 소스/대상 확인을 켜면 막히는 이유), 학교 역할 템플릿(역할 밖 작업 거부), NAT 인스턴스 튜토리얼을 안내대로 끝까지 수행npm run lint, npm run typecheck, npm run build 통과localStorage에만 저장됩니다 (기기 간 동기화 없음, 약 5MB 제한). 중요한 샌드박스는 JSON으로 내보내세요.