정책 가시화 3D 대시보드

🔖 요약

👏 프로젝트 소개

• 프로젝트 개요
• 프로젝트 이름: 3D Force-Directed Graph 도입 및 운영
• 프로젝트 기간: 2022년 12월 ~ 2023년 1월
• 역할: 개발 및 시스템 엔지니어
• 오픈 소스 솔루션 리서치
• 솔루션 도입 소스 개발
• 서버 선정 및 구축

✍️ 프로젝트 배경

• 도입 이전 상황
• 중복된 정책을 텍스트로만 확인할 경우 어느 정도 수준인지 가시적으로 확인하기 어려움
• 복잡한 네트워크 정책을 시각적으로 이해하기 힘듦

• 도입 이유 및 목표
• 도입 이유:
• 중복 정책 및 네트워크 구조의 가시화 필요성
• 정책 관리 및 분석의 효율성 증대
• 목표:
• 네트워크 정책의 3D 가시화 도구 개발
• 정책 중복 및 관계를 시각적으로 이해하고 관리할 수 있는 솔루션 제공

🔦 기술 스택 및 주요 기능 구현

• 기술 스택
• 주요 기술:
• JavaScript
• Three.js
• HTML
• CSS

• 주요 기능 및 구현 내용
• 네트워크 정책 3D 가시화:
• 3D Force-Directed Graph 기반의 정책 시각화
• 네트워크 정책을 3D 그래프로 시각화하여 중복 및 관계를 쉽게 파악할 수 있는 기능
• Three.js를 사용하여 3D 그래프 구현

🔦 도입 과정

1. 초기 요구사항 분석

기능	설명
3D 정책 가시화	네트워크 정책을 3D 그래프로 시각화하여 중복 및 관계를 쉽게 파악하는 기능.
데이터 통신	웹 인터페이스를 통해 데이터 입력 및 시각화된 결과를 출력하는 기능.
사용자 및 권한 관리	사용자 계정을 생성하고, 각 사용자에게 적절한 접근 권한을 부여하는 기능.
로그 및 감사 기능	정책 변경 로그를 기록하고, 감사 기능을 제공하는 기능.

2. 오픈 소스 및 기술 리서치

기술	역할
라이브러리	3d-force-graph
JavaScript	클라이언트 사이드 스크립팅
Three.js	3D 그래픽 라이브러리
HTML	웹 페이지 구조
CSS	스타일링

3. 서버 설치 및 환경 구성
1. 설치 정보

라이브러리	3d-force-graph MIT 라이선스
JavaScript	ES6
Three.js	최신 버전
HTML	5
CSS	3

2. 설치
1. 프론트 개발
1. HTML, CSS, JavaScript를 사용하여 기본 웹 페이지 설정
2. 3d-force-graph를 활용하여 3D 그래프 시각화 기능 개발
2. 서버
1. 네트워크 정책 데이터를 받아와서 시각화할 수 있는 백엔드 설정
2. 클라이언트와 서버 간의 데이터 통신을 관리하는 인터페이스 개발

🔦 결과 및 성과

• 성과 및 결과
• 도입 후 성과
• 네트워크 정책 관리의 효율성 증대
• 3D 시각화를 통해 정책의 중복 및 관계를 쉽게 파악할 수 있게 되어 관리 효율성이 높아졌습니다.
• 정책 분석의 용이성 향상
• 복잡한 네트워크 구조를 시각적으로 표현하여 분석이 용이해졌습니다.
• 사용자 만족도 향상
• 중복 정책 및 관계를 쉽게 확인할 수 있어 사용자 만족도가 크게 향상되었습니다.