안녕하세요,
꾸준히 성장하는 인재 심민입니다.

📌 프로젝트 개요

우주 컨셉의 Mind Map 형태의 ERP 제작 프로젝트

📌 주요 기능

• Canvas를 통한 노드(별, 행성, 위성) 추가

• 노션같은 ERP 제작

• 실시간 협업

📌문제 해결

• 노드 객체 렌더링 문제 store에서 좌표를 미리 저장하는 구조 + 삭제 후 나머지 좌표를 갱신하지 않아 화면에 빈칸이 생김. 좌표를 미리 저장하지 않고, 렌더링 시 children의 index로 동적으로 좌표 계산하여 해결

• 공전 속도 해결 문제 행성과 위성이 별을 기준으로 반지름, 초기 각도를 정해 각도를 변화시키며 공전하도록 구현했더니 모든 행성 위성이 같은 속도로 돌아 공전의 모습이 이상하게 보임. 실제 천체처럼 궤도 반지름이 클수록 공전 속도가 느려지도록 지수함수(baseSpeed * decay^idx 등)로 속도를 점점 감소시켜 해결

• Canvas 구현 문제 기존 react-konva, <canvas> 방식은 SSR 충돌과 복잡도 때문에 Next.js 환경에 부적합해 캔버스 구현에 문제 발생. 직접 SVG + React + viewBox 조절 방식으로 구현해 커스터마이징 및 Next.js 호환성 확보

📌 프로젝트 개요

현대오토에버 모빌리티 SW 스쿨에서 수행한 최종 프로젝트로, AWS 기반의 보안 인프라를 직접 설계·구축하고, 실전형 침투 시나리오를 통해 보안 탐지 체계를 검증하는 프로젝트를 수행했습니다. 전체 아키텍처는 협력사 → 본사(개발망, 보안망, 일반망) 의 3계층 네트워크로 구성하였고, 각 구간에는 Suricata 기반 IDS/IPS를 배치하여 트래픽을 감시하고, 로그는 SIEM 시스템과 연동하여 통합 분석할 수 있도록 구성했습니다.

저는 이 프로젝트에서 전체 인프라(네트워크, 라우팅, 서브넷, 보안 구조 등)를 직접 설계하고 구축 하였으며, 공격 시나리오의 상당수를 기획하고 직접 실행했으며, 공격 후 협력사 구간에서 Suricata 및 SIEM 로그를 분석하여 탐지 여부를 확인하고, 탐지되지 않은 경우 룰을 개선하는 작업도 담당하였습니다.

📌 주요 기능

• AWS 기반 보안 인프라 아키텍처 설계 및 구축 VPC, 서브넷, 라우팅 테이블, NAT, IGW 등을 직접 설계하고, 모든 인스턴스의 트래픽이 Suricata를 경유하도록 구성

• 3계층 망 분리 구성 협력사 → 개발망 → 보안망/일반망으로 나누고, 각 구간 사이에 IDS/IPS를 배치하여 흐름 통제 및 탐지 가능

• Suricata 기반 침입 탐지 체계 구축 각 구간에 Suricata를 설치하여 패킷을 수집하고, 시그니처 기반 탐지 설정으로 실시간 로그 기록

• 실제 침투 시나리오 기획 및 실행 포트 스캔, 웹쉘 업로드, 취약한 CMS 침투, DNS 터널링 등 다양한 공격을 기획하고 직접 실행

• 공격 후 로그 분석 및 탐지 평가 Suricata의 로그를 수집하여 협력사 구간의 탐지 여부를 확인하고, 탐지되지 않은 패턴에 대해 룰 개선 제안

📌문제 해결

• 트래픽이 Suricata를 우회하는 구조 발생: 기본 라우팅 설정으로 인해 일부 트래픽이 Suricata를 거치지 않고 직접 전달됨

  • 퍼블릭/프라이빗 라우팅 테이블을 세분화하고, NAT/IGW를 Suricata 서브넷에만 연결되도록 구조 설계

• Suricata 탐지 누락 문제: 웹쉘 업로드, nmap 스캔 등 일부 공격이 탐지되지 않음

  • Suricata 시그니처 최신화 및 커스텀 룰 작성으로 탐지 커버리지 확대

• SIEM 연동 지연: Suricata 로그가 실시간으로 SIEM에 전송되지 않음

  • Filebeat 설정 최적화 및 Logstash 버퍼 처리 설정 조정으로 로그 전송 속도 개선

• 공격 로그의 위치 식별 문제: 협력사 공격 후 어떤 구간에서 탐지되었는지 추적이 어려움

  • Suricata 로그에 구간별 태그 삽입 및 로그 필터링 방식 개선으로 식별 가능하게 처리

• AWS 환경에서 NAT 구성 제약: 특정 상황에서 EC2의 iptables/NAT 설정이 제한되어 통신 경유 강제 어려움

  • 정책 기반 라우팅과 별도의 경유 인스턴스를 구성하여 흐름 제어 유도

📌 프로젝트 개요

현대오토에버 모빌리티 SW 스쿨에서 수행한 세 번째 프로젝트로, LAMP 스택 기반의 취약한 웹페이지를 직접 개발하고, 그 위에 다양한 웹 해킹 시도와 시큐어 코딩 적용을 통해 보안을 강화하는 실습 프로젝트를 진행했습니다. 저는 웹 애플리케이션 개발과 시큐어 코딩 적용을 주로 담당했고, 웹 해킹 시도도 함께 수행했습니다. OWASP Top 10과 KISA의 「주요정보통신기반시설 기술적 취약점 분석·평가 상세가이드」 를 참고하여, 실제 보안 컨설팅에서 사용하는 방식으로 취약점 유형을 분류하고 방어 방법을 적용했습니다.

📌 주요 기능

• 취약 웹 애플리케이션 개발 로그인, 게시판 등 주요 기능에 SQL Injection, XSS, CSRF, SSRF 등 주요 취약점을 포함하여 직접 구현

• 웹 해킹 실습 OWASP Top 10과 KISA 분석가이드를 기반으로 실제 공격 시나리오 구성 및 실행

• 시큐어 코딩 적용 Prepared Statement, 입력값 필터링, CSRF 토큰 처리 등 보안 코드를 삽입하여 대응

• 보안 로그 및 대응 기록화 공격 성공/실패 여부를 기록하고, 웹 서버 로그 분석을 통해 보안 수준을 평가

📌문제 해결

• SQL Injection: 사용자 입력이 쿼리에 직접 삽입되어 인증 우회 및 DB 정보 유출 가능

  • Prepared Statement 적용 및 입력값 검증 추가

• XSS (Cross-Site Scripting): 게시판 등 입력 필드에 악성 스크립트 삽입 가능

  • HTML 이스케이프 처리 및 출력 시 정제 적용

• CSRF (Cross-Site Request Forgery): 인증된 사용자의 권한을 도용하여 외부 사이트에서 무단 요청 가능

  • CSRF 토큰을 발급하고, 요청 시 토큰을 검증하여 방지

• SSRF (Server-Side Request Forgery): 서버가 외부 입력을 기반으로 내부 자원(URL 등)에 요청을 보낼 수 있어 내부망 접근 및 정보 유출 가능

  • 요청 대상 주소에 대해 화이트리스트 방식 필터링 적용, 메타데이터 IP 등 민감 주소 차단

• 불완전한 인증 처리: 로그인 없이 특정 URL 직접 접근 시 인증 우회 가능

  • 세션 유효성 확인 로직을 전 페이지에 적용

• 입력값 검증 미흡: 파일 업로드, 텍스트 입력 등에서 유효성 미검사로 인한 보안 위협 존재

• MIME 타입, 확장자, 길이 등 기준 기반 화이트리스트 필터링 적용

📌 프로젝트 개요

Terraform을 활용해 **AWS 상에 보안이 고려된 3-Tier 인프라 구조(Frontend–Backend–DB)**를 자동으로 구축하는 프로젝트를 수행했습니다. 기존에는 인프라 리소스를 수동으로 생성하고 구성하여 반복 작업이 많고, 설정 오류 발생 가능성이 높았습니다. 이에 따라 코드 기반으로 VPC, 서브넷, EC2, 보안 그룹, RDS 등을 일괄 구성하고, 재사용 가능하고 통제 가능한 보안 인프라를 목표로 설계하였습니다. 저는 해당 프로젝트에서 Terraform 모듈 작성, 보안 정책 설계, 전체 아키텍처 구성 및 테스트를 담당하였습니다.

📌 주요 기능

• 3-Tier 구조 설계 및 자동

  • Public Subnet: Frontend용 EC2 -Private Subnet: Backend용 EC2

• RDS Subnet Group: DB용 서브넷에 MySQL RDS 생성 각 계층이 서로 필요한 리소스에만 접근 가능하도록 보안 그룹을 구성함

• Terraform 모듈화 및 재사용성 확보 VPC, EC2, 보안 그룹, RDS 등을 모듈화하여 구조를 단순화하고, 다양한 구성에서도 재사용 가능하도록 설계

• 보안 그룹 및 IAM 역할 설정 자동화 프론트–백엔드–DB 간 통신만 허용하는 보안 그룹 규칙 적용 EC2에 최소 권한의 IAM 역할을 부여하여 보안성 확보

• User Data를 이용한 서버 초기 설정 자동화 EC2 인스턴스 생성 시 필요한 패키지 설치 및 설정 작업을 User Data로 처리하여 수동 설정 제거

📌문제 해결

• 서브넷 및 라우팅 설정 오류: 퍼블릭/프라이빗 서브넷 구분 없이 설정할 경우 인터넷 게이트웨이, NAT 연결 문제가 발생함

  • 라우팅 테이블을 계층별로 분리하고, 퍼블릭은 IGW, 프라이빗은 NAT 게이트웨이와 연결하여 해결

• 보안 그룹 간 연결 설정 누락: 백엔드에서 DB 접근이 차단되는 문제가 있었음

  • 보안 그룹 간 인바운드/아웃바운드 규칙을 명확히 정의하고, 계층 간 트래픽만 허용되도록 제한

• Terraform 상태 관리 문제: 상태 파일(tfstate) 관리 미숙으로 리소스 충돌 발생

  • 백엔드 설정을 통해 원격 저장소(S3) + Locking(DynamoDB) 을 적용하여 상태 일관성 유지

• 모듈 간 변수 의존성 복잡성: 모듈 간 입력 변수가 많아지고 의존 관계가 꼬이며 재사용성 저하

  • 변수 정의를 공통화하고 locals와 output을 활용해 명확하게 연결

📌 프로젝트 개요

현대오토에버 모빌리티 SW 스쿨에서 수행한 첫 프로젝트로, 서버 보안 설정을 자동으로 진단할 수 있는 인프라 환경을 구축했습니다. 기존에는 보안 진단을 수작업으로 수행하고, 각 항목별 결과를 수동으로 정리해야 했기 때문에 작업 효율이 낮고 인적 오류 가능성도 컸습니다. 저는 해당 프로젝트에서 보안 진단 대상이 되는 LAMP 스택 서버를 AWS 상에 직접 구축하고, 우분투, 레드햇 등 다양한 리눅스 배포판에서도 보안 진단이 가능하도록 환경을 구성하고 배포하는 작업을 주도하였습니다. Ansible 기반의 자동화 스크립트는 일부 작성하였고, 주요 역할은 진단 대상 서버 인프라의 멀티 OS 환경 구성 및 테스트 적용이었습니다.

📌 주요 기능

• LAMP 스택 보안 진단 환경 구축 Apache, MySQL, PHP 등으로 구성된 LAMP 환경을 AWS EC2 인스턴스에 구성하고, 보안 진단이 필요한 항목들이 재현 가능하도록 설정

• 멀티 리눅스 OS 대응 인프라 구성 우분투, 레드햇(RHEL/CentOS) 등 서로 다른 배포판에서 동일한 보안 진단을 수행할 수 있도록 환경을 설계하고 패키지 설치 방식 및 설정 파일 경로 등을 차이에 맞게 구성

• 보안 항목 표준화 및 테스트 기반 구축 계정 관리, 포트 개방, 서비스 상태, 패스워드 정책 등 공통 보안 항목에 대해 테스트 가능한 기준과 진단 조건을 정리하고, 진단 환경에 적용

• AWS 기반 인프라 배포 및 실습 환경 제공 팀원들이 보안 진단을 실습할 수 있도록 퍼블릭/프라이빗 서브넷을 구성하고, 인스턴스별 접근 제어와 보안 그룹 설정을 자동화

📌문제 해결

• 배포판별 설정 파일 경로 및 명령어 차이: 우분투와 레드햇 계열의 OS는 설정 위치 및 서비스 제어 명령어가 상이하여 통일된 진단 환경 구성에 어려움이 있었음

  • OS 식별 조건(/etc/os-release 등)을 기반으로 스크립트를 분기 처리하고, 공통 추상화 계층을 만들어 해결

• LAMP 구성 시 버전 호환 및 의존성 오류: Apache, PHP, MySQL 간의 버전 호환 문제로 인해 일부 모듈이 정상 작동하지 않는 문제가 발생

  • 각 배포판의 공식 저장소 기준 안정화된 버전을 수동 지정하여 설치하고, 설정을 표준화

• AWS 상에서 외부 접근 제어 문제: 보안 진단 대상 포트를 외부에서 접근할 수 없는 설정으로 인해 점검이 제한됨

  • 보안 그룹 설정을 통해 포트 개방 범위를 필요 최소한으로 조정하고, 인바운드 접근 허용 설정 적용

• 진단 대상 서버 복제의 어려움: 테스트 반복을 위해 동일한 환경을 빠르게 배포해야 했으나 수동 작업이 반복됨

  • AMI 이미지 생성 및 User Data 스크립트를 활용하여 인프라 재현 자동화

📌 프로젝트 개요

2024 한이음 ICT 멘토링 프로젝트로, 인터넷 개인 방송 진행자들을 위한 서드파티 프로그램을 개발했습니다. 기존 방송 플랫폼이 제공하지 않는 기능을 보완하고, 방송의 생산성과 시청자 경험을 높이는 것을 목표로 하였습니다. 저는 AI 모델 개발을 주도적으로 맡았고, 프론트엔드 일부도 함께 개발하였습니다. 프론트엔드는 React, 백엔드는 Spring Boot와 PostgreSQL을 기반으로 구성하였으며, 실시간 채팅에 포함된 욕설이나 부적절한 발언을 자동으로 검열하는 AI 기능과 다양한 시청자 참여형 기능을 구현하였습니다.

📌 주요 기능

• AI 기반 욕설 검열 기능 실시간 채팅 내용을 수집하여 비속어나 혐오 표현을 탐지하고, 방송 화면에 출력되지 않도록 필터링

• 시청자 참여형 인터랙션 도구 방송 중 실시간으로 시청자들과 상호작용할 수 있는 돌림판, 투표, 퀴즈 기능 제공 스트리머가 직접 질문과 보기를 설정하고, 시청자는 채팅을 통해 참여 가능

• 실시간 채팅 분석 및 통계 시각화 채팅 수, 참여도, 반응량 등을 시각화하여 방송 중 실시간으로 확인할 수 있는 대시보드 제공

• 관리자용 프론트엔드 UI React 기반의 웹 인터페이스를 통해 방송자가 인터랙션 기능을 쉽게 제어하고, 검열 설정을 관리할 수 있도록 구성

📌문제 해결

• 욕설 탐지 정확도 한계: 초기에 정규표현식 기반 필터링만으로는 다양한 우회 표현 탐지가 불가능했음

  • 비속어 패턴을 학습한 BiLSTM 기반 AI 모델을 적용하여 문맥을 고려한 욕설 탐지로 개선

• 채팅 데이터 처리 병목 현상: 실시간 채팅량이 많아질수록 DB I/O가 증가하며 응답 지연 발생

  • 비동기 큐 기반으로 채팅 수집 및 저장을 분리하고, PostgreSQL 인덱스 최적화 적용

• Spring ↔ React 간 CORS 오류: 개발 환경에서 API 호출 시 브라우저 CORS 에러 발생

  • Spring Boot의 @CrossOrigin 설정과 프론트엔드 proxy 설정을 통해 해결

• 돌림판·투표 UI 비동기 처리 문제: 다수 시청자가 동시에 상호작용할 때 결과가 지연되거나 충돌 발생

  • WebSocket을 도입하여 실시간 양방향 통신으로 처리 속도 및 동기화 문제 해결

📌 프로젝트 개요

2023 한이음 ICT 멘토링 프로젝트로, 과일 구매 시 품종이나 영양 정보를 알기 어렵고, 시각적 외관만으로는 신선도를 파악하기 힘들다는 문제에서 출발하여, 카메라로 과일을 인식하면 실시간으로 품종과 성분 정보를 제공하는 AI 기반 AR 모바일 애플리케이션을 개발하였습니다. 소비자는 앱을 통해 과일을 비추기만 해도 종류와 신선도, 당도, 칼로리 등의 정보를 직관적으로 확인할 수 있고, AR로 시각화된 정보는 오프라인 구매 현장에서 활용성을 높이는 데 중점을 두었습니다. Android Studio 기반으로 프론트엔드를 개발하고, ARCore + Teachable Machine을 활용하여 카메라 인식 및 3D 정보 표시 기능을 연동하였습니다.

📌 주요 기능

• AI 기반 과일 분석 카메라로 과일을 촬영하면 AI 모델이 이미지를 분류하여 과일 종류 및 숙성도를 판단

• AR 시각화 기능 분석된 정보를 실시간으로 과일 위에 AR로 오버레이하여 시각적으로 제공

• 과일 추천 시스템 사용자의 선호나 계절 정보를 반영하여 제철 과일 추천

• 사용자 커뮤니티 사용자들이 과일 후기, 조리 팁 등을 공유할 수 있는 게시판 기능 제공

📌문제 해결

• Unity에서 제작한 AR 모델을 Android Studio와 연동하려 했지만, ARCore 버전 충돌 및 AAB 패키징 이슈로 인해 앱 빌드 오류 발생

  • Sceneform을 도입하고, Blender 모델을 .sfb 형식으로 변환해 직접 앱 내 로딩 방식으로 전환하여 해결

• HTTP 통신 오류로 이미지/텍스트 전송 실패

  • 이미지와 텍스트를 함께 전송하는 과정에서 Content-Type 설정 오류로 인해 서버 수신 실패
  • multipart/form-data 방식으로 전환하고, FormData 구조 재구성 + Postman 테스트를 통해 해결

• 기본 카메라 호출로 사용자 경험 저하

  • 시스템 카메라 Intent 사용 시 앱 이탈 → 복귀 구조로 인해 UX 단절 발생
  • Jetpack CameraX를 도입하여 앱 내 카메라 프리뷰 구성, AR과의 자연스러운 연결로 개선

📌 프로젝트 개요

오프라인 가게 홍보와 사용자 편의성을 높이기 위해, 위치 정보를 기반으로 주변 가게를 추천하고, 쿠폰 발급·사용 기능까지 통합한 웹 서비스를 개발했습니다. 사용자에게는 실시간으로 가게 정보를 제공하고, 사업자에게는 마케팅 수단을 제공하는 구조로 기획되었습니다. AWS EC2에서 직접 서버를 구성하고, Apache + PHP 기반의 LAMP 환경에서 프로젝트를 구현하였습니다.

📌 주요 기능

• 지도 기반 가게 위치 시각화 사용자의 현재 위치 혹은 검색 위치를 중심으로 주변 가게를 지도 상에 시각화하여 표시하며, 클릭 시 가게 정보 및 쿠폰 정보를 확인할 수 있습니다.

• 쿠폰 발급 및 QR코드 사용 사용자는 웹에서 발급받은 쿠폰을 QR코드 형태로 저장할 수 있으며, 가게 측에서는 이를 스캔하여 쿠폰 사용 여부를 확인할 수 있습니다.

• 회원가입 및 로그인 기능 사용자 계정 정보를 기반으로 개인화된 서비스(쿠폰 내역 확인, 관심 가게 등록 등)를 제공합니다.

• 관리자 페이지 가게 정보 및 쿠폰 내용을 등록·관리할 수 있는 별도의 관리자 페이지를 구현하여, 신규 가맹점 추가와 쿠폰 발행 관리가 가능합니다.

• 모바일 최적화 및 반응형 UI 다양한 디바이스 환경에서 사용할 수 있도록 반응형 웹으로 설계하였으며, 모바일 환경에서 지도 인터페이스 및 쿠폰 기능을 편리하게 이용할 수 있도록 최적화했습니다.

📌문제 해결

• 서버 포트 충돌 문제를 포트 번호 변경으로 해결.

• 데이터베이스 계정 정보 관리의 번거로움을 dbadmin.php 파일을 통한 include 방식으로 개선.

📌 프로젝트 개요

현재 진행 중인 개인 프로젝트로, 시각장애인을 위한 YouTube 음성 안내 크롬 확장 프로그램을 개발하고 있습니다. 영상의 제목, 채널명, 조회수, 업로드일 등 주요 정보를 자동으로 TTS(Text-to-Speech)로 읽어주는 기능을 통해, 시각 정보에 접근이 어려운 사용자도 유튜브 콘텐츠를 탐색할 수 있도록 돕는 것이 목적입니다. 사용자는 Shift 키를 누른 상태로 마우스를 움직이기만 하면, 현재 커서가 위치한 요소(예: 영상 제목, 채널명 등) 의 정보를 자동으로 인식하여 음성으로 안내해줍니다. 페이지 내 DOM 구조를 실시간으로 탐색하고, 해당 위치에 알맞은 정보를 추출해 읽어주는 방식으로 구현하였습니다.

📌 주요 기능

• Shift + 마우스 이동 기반 음성 안내 사용자가 Shift 키를 누른 채 마우스를 움직이면, 커서가 위치한 YouTube 요소(제목, 채널명, 조회수 등)를 탐지해 해당 텍스트를 실시간으로 읽어줌

• TTS(Text-to-Speech) 자동 음성 변환 Web Speech API를 활용하여 시각적 요소를 음성으로 변환, 한국어 음성 출력을 기본으로 구현

• 동적 DOM 변경 대응 YouTube는 SPA 구조로 콘텐츠가 비동기 로딩되므로, MutationObserver로 DOM 변화 감지 → 요소 탐지 → 정보 읽기를 순차적으로 처리

• 중복 안내 방지 및 속도 제어 마우스가 빠르게 움직일 경우 중복 음성이 겹치지 않도록 speechSynthesis.cancel()로 이전 안내를 종료하고, 사용자 설정 기반으로 음성 속도 조절

📌문제 해결

• TTS가 화면 이동해도 계속 출력되는 문제: 영상 썸네일 클릭 후 재생 페이지로 전환되었음에도 이전 페이지의 TTS가 중단되지 않고 계속 출력됨

  • speechSynthesis.cancel() 호출로 기존 TTS 즉시 중단
  • chrome.webNavigation.onHistoryStateUpdated 이벤트를 이용해 SPA 페이지 전환 감지
  • ctrl+ Hover의 기존 단축키 조합을 Shift + Hover로 변경하고 keydown/keyup으로 상태 제어
  • Debounce 로직을 추가해 빠른 연속 이벤트에서 TTS가 중첩되지 않도록 처리

• 제목 대신 재생시간(1:24:39 등)을 읽는 문제: 썸네일 카드의 innerText에서 가장 먼저 나타나는 재생시간 문자열을 제목으로 잘못 인식함

  • 시간 형식을 감지하는 정규식 추가 (예: ^\d{1,2}:\d{2} 패턴 등)
  • 의미 없는 줄**(“재생”, “1:24:39”)** 제거 후 실제 콘텐츠 정보만 필터링
  • innerText 대신 구조화된 DOM 요소로 접근하는 방식으로 전환 (예: #video-title, #channel-name)

• 웹페이지 구조 변경에 따른 셀렉터 파손 문제: 유튜브는 SPA 방식이며 UI가 자주 변경되므로, 고정된 셀렉터(querySelector('#metadata-line'))만 의존할 경우 코드가 자주 깨짐

  • 카드 전체의 innerText를 줄 단위로 파싱하여 정보 추출 (.split(/\n/))
  • 줄별로 필터링하여 제목, 채널명, 조회수, 업로드일을 동적으로 식별
  • MutationObserver를 활용해 비동기로 추가되는 카드에도 실시간 바인딩
  • 페이지 전환 감지를 위해 yt-navigate-finish 이벤트 사용

📌 프로젝트 개요

AWS의 VPC 구성 정보를 자동으로 수집하고, 이를 시각화하여 네트워크 구조를 한눈에 파악할 수 있는 웹 기반 시각화 도구를 개발했습니다. 복잡한 클라우드 네트워크 구성에서 VPC, 서브넷, 라우팅 테이블, NAT 게이트웨이 등의 리소스 관계를 직관적으로 파악하는 데 어려움이 있다는 점에서 출발하였습니다. 저는 **백엔드(Flask + boto3)**와 **프론트엔드(React + Cytoscape.js)**를 개발하였고, Docker와 Terraform으로 배포 및 인프라 자동화를 병행하였습니다.

📌 주요 기능

• AWS 리소스 자동 수집 (boto3) VPC, Subnet, Route Table, Internet Gateway, NAT Gateway, EC2 인스턴스 등을 자동으로 수집

• 토폴로지 시각화 (Cytoscape.js) 리소스 간의 관계를 계층형 그래프로 표현하며, 노드 클릭 시 상세 정보 제공

• 서브넷 유형 판별 인터넷 게이트웨이 연결 여부를 기준으로 퍼블릭/프라이빗 서브넷을 구분

• React 기반 상호작용 UI 리전 선택, 리소스 필터링, 노드 상호작용 기능 제공

📌문제 해결

• 서브넷 퍼블릭/프라이빗 구분 불가능: AWS API만으로는 서브넷이 퍼블릭인지 프라이빗인지 구분 불가능함

  • 서브넷이 연결된 라우팅 테이블을 조회하여 IGW가 연결된 경우 퍼블릭으로 판별

• CORS 정책으로 API 호출 차단: 프론트(3000)와 백엔드(5000) 분리 실행 시 브라우저 CORS 정책으로 API 호출이 차단됨

  • Flask에 CORS(app) 적용하고, 프론트의 package.json에 proxy 설정 추가

• Cytoscape.js 계층 표현 오류: VPC 내부에 서브넷, 인스턴스 등을 계층적으로 표현할 때 UI가 깨지거나 노드가 영역을 이탈함

  • Cytoscape의 parent 속성을 활용하여 부모-자식 구조로 계층 관계를 설정하고 위치를 고정

• React 데이터 비동기 처리 오류: 데이터 로딩 전에 Cytoscape.js가 렌더링되어 오류 발생

  • useEffect에서 데이터 존재 여부를 조건문으로 체크한 뒤 초기화 진행, 의존성 배열 설정으로 안전하게 재렌더링 유도

📌 프로젝트 개요

Python으로 구현한 간단한 패킷 분석 및 시각화 프로그램입니다. Wireshark처럼 복잡하고 무거운 툴이 아닌, 가볍게 네트워크 흐름을 확인할 수 있는 교육용 분석 도구를 목표로 하였습니다. scapy로 패킷을 수집하고, networkx와 matplotlib을 이용해 송수신 IP 간의 관계를 그래프로 시각화하여 트래픽 흐름을 직관적으로 표현했습니다.

📌 주요 기능

• 실시간 패킷 수집 지정한 네트워크 인터페이스에서 일정 시간 동안 IP 패킷을 캡처

• 송수신 IP 추출 및 기록 패킷의 IP 헤더를 분석하여 송신지와 수신지 IP를 분리, 딕셔너리 형태로 누적 저장

• 패킷 흐름 시각화 송신 IP → 수신 IP 관계를 방향 그래프로 표현하며, 패킷 수에 따라 엣지 두께 조정

• 간단한 실행 구조 한 파일 내에서 수집, 분석, 시각화가 모두 가능한 구조로 설계

📌문제 해결

• 인터페이스 선택 문제: 일부 환경에서 eth0, wlan0 등 인터페이스 이름이 다르게 설정되어 sniff 실패 발생

  • 사용자 입력을 통해 인터페이스를 명시적으로 지정하도록 수정

• IP 외 다른 프로토콜 필터링 문제: ARP, IPv6 등 불필요한 트래픽으로 인해 시각화가 복잡해지는 문제 발생

  • IP 계층에 해당하는 패킷만 필터링하여 처리

• 시각화 시 노드 겹침 및 가독성 문제: 트래픽이 많은 경우 노드와 엣지가 중첩되어 판별 어려움

  • spring_layout()을 적용하고 노드 크기 및 엣지 두께를 조절하여 가독성 개선