Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

125 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🛠️ SIMVEX(S Makers-FE)

학생과 연구자를 위한 3D 시각화 시뮬레이션 기반 통합 엔지니어링 플랫폼

블레이버스 해커톤 출품작 (2026.02.01 ~ 2026.02.10)


📝 프로젝트 소개

SIMVEX는 공학 부품 및 장비의 3D 모델을 브라우저 상에서 직접 조작하며 학습할 수 있는 통합 엔지니어링 플랫폼입니다. 시각적인 3D 시뮬레이션뿐만 아니라, AI 어시스턴트, 학습 메모, 그리고 팀 프로젝트 진행을 위한 워크플로우 관리 기능까지 지원하여 심도 있는 학습과 연구 환경을 제공합니다.

Image

⚙️ FE 기술 스택

Version Control & Config

Development

Infrastructure & CI/CD


👥 FE 팀원 및 역할

이름 담당 업무
조선 Workflow Management
• React Flow 라이브러리를 활용한 워크플로우 에디터 UI/UX 설계 및 상태 동기화
• 워크플로우 CRUD 로직 구현

Interactive Quiz Module
• 퀴즈 인터페이스 및 사용자 응답 제출 로직 구축
• 퀴즈 결과 및 피드백 UI 구현
황혜린 3D Rendering & Interaction
• R3F를 활용한 3D 모델 브라우저 렌더링 및 분해/조립 로직, 카메라 컨트롤 구현
• localStorage를 활용하여 탭 전환 및 새로고침 시에도 3D 뷰어 상태와 카메라 시점을 유지하는 영속성 관리 로직 구현

UI Components & Learning Support System
• 선택한 모델의 상세 설명 팝업 UI 구현
• 사이드 메모 패널(CRUD) 및 AI 실시간 질의응답 어시스턴트 구현
• 3D 모델 캔버스 캡처 및 학습 내용 리포트 PDF 자동 다운로드 구현

Infra & CI/CD Pipeline
• AWS S3, CloudFront를 활용한 웹 호스팅 및 배포 환경 구축
• GitHub Actions를 활용한 빌드 및 배포 자동화(CI/CD) 파이프라인 구축

💻 주요 기능 및 화면 구성

  1. 3D 모델 기반 공학 부품 학습

    • 직접 3D 모델을 회전, 분해, 조립하며 시각적으로 원리를 파악할 수 있습니다.
    • 부품 리스트를 통해 전체 구성을 확인하고, 선택한 부품의 상세 설명을 열람할 수 있습니다.
    • 측면 패널을 통해 메모 기능과 AI 어시스턴트 기능을 제공합니다.
    • 뷰어 상태를 캐싱하여, 다른 탭을 다녀오거나 브라우저를 새로고침 하더라도 보던 부품과 3D 카메라 시점이 복구 및 유지됩니다.
    • 현재 학습 중인 3D 캔버스 화면을 캡처하고, 학습한 내용을 PDF 문서로 즉시 다운로드할 수 있습니다.
    학습 화면 (메모 패널) 학습 화면 (AI 어시스턴트)
    학습 화면 1 학습 화면 2
    학습 화면 (설명 팝업) PDF 내 모델 캡처 이미지
    학습 화면 3 Image

  1. 프로젝트 워크플로우 관리

    • 노드 기반의 시각적인 워크플로우 탭을 통해 팀 프로젝트 작업 상황을 한눈에 정리하고 추적합니다.
    워크플로우 리스트 화 워크플로우 관리 화면
    Image Image

  1. 학습 점검 퀴즈

    • 3D 모델 시뮬레이션 학습이 끝난 후, 제공되는 퀴즈를 통해 이해도를 스스로 점검할 수 있습니다.
    퀴즈 화면 퀴즈 총평 화면
    Image Image

About

블레이버스 해커톤 출품작(SIMVEX)

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages