대본 기획 도우미▸ 
AI 앱 
AI 뉴스 
iCraft Editor:전문적인 웹 기반 3D 아키텍처 다이어그램 편집 도구
iCraft Editor:전문적인 웹 기반 3D 아키텍처 다이어그램 편집 도구소개
iCraft Editor는 웹 기반 3D 아키텍처 다이어그램 편집 도구로, 3차원 공간에서 복잡한 시스템 아키텍처를 시각화하는 데 중점을 두며, 개발자, 아키텍트, 프로덕트 매니저 등이 시스템 구조를 더 직관적으로 이해하고 소통할 수 있도록 도와줍니다. 전통적인 2D 다이어그램에 비해 시각화 효과가 뛰어나고 상호작용 경험이 더 좋아, 복잡한 시스템 설계에 훌륭한 조력자입니다.
iCraft Editor 핵심 기능
편리한 3D 디자인 도구: iCraft Editor는 풍부한 3D 모델 라이브러리(서버, 데이터베이스, 네트워크 장치 등 자주 사용되는 구성 요소 포함)와 예제 템플릿을 제공하며, 2D 다이어그램을 원클릭으로 3D로 변환할 수 있어 사용자가 빠르게 디자인을 시작할 수 있도록 도와줍니다. 에디터에는 그리드 자동 스냅, 요소 자동 정렬 기능이 있어 연결이 더 편리하며, 많은 디자인 시간을 절약할 수 있습니다.
몰입형 3D 표현: 3D 파노라마 기술을 통해 사용자는 자유롭게 모델을 회전, 확대/축소, 드래그하여 다양한 각도에서 아키텍처 세부 정보를 확인할 수 있습니다. 애니메이션 효과(예: 파이프 흐름, 객체 동적 표시)를 지원하여 디자인 아이디어를 더 생생하게 표현할 수 있습니다. 서브 씬无缝 전환 기능을 통해 복잡한 설계를 여러 계층(프론트엔드, 백엔드, 인프라 등)으로 분할하여 정보를 더 체계적으로 표시할 수 있습니다.
디지털 트윈 및 실시간 동기화: iCraft Editor는 웹 렌더링 컴포넌트(JavaScript SDK)를 제공하여 웹 애플리케이션에 쉽게 임베드할 수 있으며, SDK를 통해 3D 요소 상태(예: 비정상 노드 강조 표시)를 제어할 수 있습니다. 실시간 데이터 동기화를 지원하여 시스템의 서버 CPU 사용률, 네트워크 트래픽 등의 데이터를 3D 아키텍처 다이어그램에 매핑하여 시스템 운영 상태를 직관적으로 표시하고, 이상 징후를 빠르게 발견할 수 있도록 합니다.
강력한 편집 및 확장 기능: iCraft Editor는 GLB, glTF, OBJ 등 다양한 3D 파일 형식 가져오기를 지원하며, 사용자는 자체 모델(예: 기업 로고, 전용 장비)을 업로드하여 디자인 리소스를 확장할 수 있습니다. 그리드 자동 스냅, 요소 자동 정렬 등의 기능을 제공하여 도면 정확도와 효율성을 높일 수 있습니다.
iCraft Editor 사용 시나리오
소프트웨어 아키텍처 설계: 아키텍트가 시스템의 각 구성 요소와 상호 관계를 명확하게 표시하여 팀이 이해하고 소통할 수 있도록 도와줍니다.
시스템 배포 및 유지 보수: 운영 담당자가 서버, 네트워크 장치 등의 배포 및 운영 상태를 직관적으로 파악할 수 있도록 합니다.
교육 및 교류: 생생한 3D 아키텍처 다이어그램과 애니메이션을 통해 수강생이 복잡한 개념을 더 쉽게 이해할 수 있습니다.
산업 디자인: 산업 디자이너가 사용할 수 있으며, 정밀한 3D 모델링 도구를 제공합니다.
전자 상거래: 전자 상거래 사용자는 매력적인 3D 제품 전시를 만들 수 있습니다.
교육 시연: 교육자는 생생한 3D 교육 자료를 제작할 수 있습니다.
iCraft Editor 사용 방법
온라인 사용
공식 웹사이트 접속: iCraft Editor 공식 웹사이트 https://icraft.design/ 을 직접 열면 소프트웨어 설치가 필요 없습니다.
프로젝트 생성: iCraft Editor 공식 웹사이트에서 새 프로젝트를 만들거나 기존 프로젝트를 엽니다.
요소 추가: 도구 모음의 도구를 사용하여 3D 모델(예: 서버, 네트워크 장치)을 추가합니다.
레이아웃 조정: 드래그, 회전 작업을 통해 요소의 위치와 방향을 조정하고, 크기, 색상 등 속성을 설정할 수 있습니다.
연결선 추가: 요소 간 관계에 따라 연결선을 추가하여 연결을 표시합니다.
텍스트 설명 추가: 요소에 텍스트를 추가하여 시청자가 이해하기 쉽게 합니다.
저장 및 내보내기: 디자인이 완료되면 클라우드에 저장하거나 .iplayer 파일로 내보내 다른 프로젝트에 임베드하거나 오프라인으로 볼 수 있습니다.
로컬 사용
환경 준비: 시스템에 Node.js와 Git이 설치되어 있는지 확인합니다.
프로젝트 복제: 명령어 git clone https://github.com/gantFDT/icraft.git 을 사용하여 프로젝트를 로컬로 다운로드합니다.
의존성 설치: 프로젝트 폴더로 이동하여 npm install 을 실행하여 필요한 의존성을 설치합니다.
프로젝트 시작: 프로젝트 폴더에서 npm start 를 실행하여 프로젝트를 시작하고, 브라우저에서 http://localhost:3000 을 열어 확인합니다.
편집 및 저장: 로컬 에디터에서 디자인을 진행하고, 완료되면 프로젝트를 저장합니다.
서브 씬 중첩 사용
서브 씬 진입: 요소를 선택하고,浮 도구 모음의 서브 씬 버튼을 클릭하여 해당 요소의 서브 씬으로 들어갑니다.
서브 씬 편집: 서브 씬에서 요소를 추가하고, 위치를 조정하며, 연결선 등을 그리 요구 사항을 충족할 때까지 진행합니다.
메인 씬 복귀: 서브 씬 편집이 완료되면 메인 씬으로 돌아가 전체 아키텍처 다이어그램 조정을 계속합니다.
다른 프로젝트에 통합
프론트엔드 컴포넌트 설치: iCraft Editor로 만든 3D 씬을 React 프로젝트에 임베드하려면 명령어 pnpm install @icraft/player-react --save 를 실행하여 컴포넌트 라이브러리를 설치합니다.
통합 코드: 프로젝트에서 해당 코드를 사용하여 3D 씬을 통합합니다.
import { ICraftPlayer } from "@icraft/player-react";
export default function MyScene() {
return <ICraftPlayer src='your-scene.iplayer' />;
}여기서 your-scene.iplayer 는 iCraft Editor에서 내보낸 3D 씬 파일입니다.
iCraft Editor 프로젝트 주소：https://github.com/gantFDT/icraft
