STP 파일 뷰어의 새로운 기능과 개선사항 추적
중대한 가져오기 및 측정 문제를 수정하고 파일 로딩 성능을 최대 95% 최적화
2025/09/02
플랫폼 안정성 달성 - 최종 통합 문제를 해결하고 주목할 만한 성능 향상 실현:
이번 릴리스는 사용자 경験에 큰 영향을 미쳤던 여러 심각한 문제들을 해결합니다:
해결된 문제: "첫 번째는 작동하지만, 이후에는 실패하는" 문제를 완전히 해결
window.OV 객체가 컴포넌트 정리 중에 부적절하게 지워짐해결된 문제: 3D 모델에 측정 마커가 표시되지 않음
window.OV 글로벌 객체를 사용한 직접적인 공식 API 호출 구현해결된 문제: 전체 화면 모드에서 모바일 기기의 추가 메뉴 버튼이 반응하지 않음
디버깅 전략 개선:
개발 모범 사례:
파일 로딩에서 주목할 만한 성능 개선 달성:
결과: 모든 파일 크기에서 60-95% 성능 개선
| 파일 크기 | 이전 | 현재 | 개선율 |
|---|---|---|---|
| 1MB | 840ms | 39ms | 95.4% 빠름 |
| 10MB | 1,380ms | 255ms | 81.5% 빠름 |
| 100MB | 6,780ms | 2,415ms | 64.4% 빠름 |
배경: 사용자 요구사항을 바탕으로 왼쪽에 떠있는 공유 도구 모음을 설립하여 3버전에 걸친 핵심 아키텍처 진화를 경험
디자인 결정 과정:
lg:block)/모바일 숨김 - 디자인 트레이드오프기술 구현 도전 과제:
/* 고정 위치 지정 및 레이어 관리 */
.floating-share-bar {
position: fixed;
left: 1rem;
top: 50%;
transform: translateY(-50%);
z-index: 40; /* 중요한 레이어 디자인 */
}핵심 기술 결정사항:
scale(1.1) 상호작용 피드백 디자인사용자 니즈 주도:
기술 구현 복잡성:
// 상태 관리 도전
const [showMoreDialog, setShowMoreDialog] = useState(false);
// More 버튼의 특별한 처리
const platforms = [
// ... 기존 7개 플랫폼
{
name: 'More',
isMore: true,
onClick: () => setShowMoreDialog(true)
}
];통합 도전 과제:
문제 진단 과정:
문제 증상: FloatingShareBar가 메인 페이지에 표시되지 않음
아키텍처 분석: FloatingShareBar가 ViewerView 내부에 배치됨
상태 의존성: ViewerView는 loading/viewing 상태에서만 렌더링
메인 페이지 상태: STPViewer 기본값은 upload 상태, UploadView 표시
근본 원인: FloatingShareBar가 잘못된 컴포넌트 레이어에 위치현재 아키텍처 문제:
메인 페이지 → HeroSection → HeroStpViewer → STPViewer
├── upload 상태 → UploadView (FloatingShareBar 없음) ❌
├── loading 상태 → ViewerView (FloatingShareBar 있음) ✅
└── viewing 상태 → ViewerView (FloatingShareBar 있음) ✅해결 아키텍처:
STPViewer (새로운 FloatingShareBar 레이어)
├── upload 상태 → UploadView + FloatingShareBar ✅
├── loading 상태 → ViewerView + FloatingShareBar ✅
└── viewing 상태 → ViewerView + FloatingShareBar ✅중요한 코드 수정:
// src/components/stp-viewer/stp-viewer.tsx
return (
<div className={cn('stp-viewer-container', className)}>
{/* 상태 관련 주요 콘텐츠 */}
{renderContent()}
{/* 글로벌 플로팅 공유 도구 모음 */}
<FloatingShareBar file={viewerState.file} />
</div>
);비교 분석 방법: 메인 페이지 모드 vs 전체화면 모드 간 체계적 비교를 통해 기능 불일치 발견:
| 기능 | 메인 페이지 모드 | 전체화면 모드 | 상태 |
|---|---|---|---|
| New File | ✅ | ✅ | 일관됨 |
| Screenshot | ✅ | ✅ | 일관됨 |
| Share | ❌ 누락 | ✅ | 불일치 |
코드 레벨 분석:
// viewer-view.tsx:730-766 - 메인 페이지 도구 모음
const toolbarButtons: ToolbarButton[] = [
{ id: 'new-file', /* ... */ },
{ id: 'screenshot', /* ... */ },
// ❌ Share 버튼 누락
];
// FullscreenToolbar.tsx:132-139 - 전체화면 모드 도구 모음
const secondaryTools: ToolbarButton[] = [
{
id: 'share',
label: t('toolbar.share'),
// ✅ 존재하지만 기능 미구현
},
];기술 한계의 깊은 발견:
// ✅ React-Share 실제 능력
- 링크 공유: 모든 플랫폼이 URL 공유 지원
- 텍스트 콘텐츠: 제목, 설명 등 텍스트 매개변수 지원
- 소셜 플랫폼 리다이렉트: 플랫폼의 공식 공유 페이지 열기
- 외부 의존성 제로: 서드파티 SDK 로딩 불필요
// ❌ React-Share 기술 제약
- 로컬 파일 공유 지원 없음: 스크린샷, 문서 직접 공유 불가
- 이미지 업로드 지원 없음: 주류 플랫폼은 직접 이미지 업로드 미지원
- 공개 이미지 URL만 지원: 소수 플랫폼이 공개 접근 가능한 이미지 링크 요구
- 백엔드 기능 없음: 파일 업로드, 단축 링크 생성 처리 불가개발 계획의 현실적 조정:
컴포넌트 전략:
src/components/stp-viewer/
├── shared/
│ └── SimpleShareDialog.tsx # 통합 공유 대화상자 (유일한 컴포넌트)
├── viewer-view.tsx # Share 버튼 추가
└── fullscreen/
└── FullscreenToolbar.tsx # 실제 공유 기능 연결설계 원칙의 실천:
문제 1: disabled 버튼 로직 오류
// 잘못된 로직
{
id: 'share',
disabled: !isViewerReady, // ❌ 페이지 링크 공유는 모델 로딩을 기다릴 필요 없음
}
// 올바른 로직
{
id: 'share',
disabled: false, // ✅ 페이지 공유 기능은 항상 사용 가능해야 함
}근본 원인 분석:
isViewerReady가 false문제 2: 불충분한 플랫폼 지원에 대한 빠른 대응
1단계: 기본 수정 (15분)
// src/components/stp-viewer/viewer-view.tsx:754
- disabled: !isViewerReady,
+ disabled: false,2단계: 플랫폼 확장 (20분)
// 6개의 새로운 주류 플랫폼 추가
const newPlatforms = [
'WhatsApp', // 세계 최대 인스턴트 메시징 앱
'Telegram', // 기술 사용자 그룹 선호
'Reddit', // 기술 커뮤니티 주요 공유 플랫폼
'Pinterest', // 시각적 콘텐츠 공유, 3D 모델에 적합
'Weibo', // 중국 사용자 주요 소셜 플랫폼
'Line', // 아시아 지역 인기 커뮤니케이션 앱
];3단계: 경험 최적화 (10분)
아키텍처 진화의 중요성:
현실적 기술 선택:
빠른 대응 개발 능력:
이 공유 기능 개발 히스토리는 아키텍처 진화부터 기술 선택까지, 문제 진단부터 빠른 수정까지의 완전한 개발 지혜를 보여주며 팀에게 소중한 실무 경험을 축적하였다.
주요 코드 정리 및 성능 개선, 18초 로딩 성능 유지
2025/08/28
장기적 안정성을 위한 기반 강화 - 포괄적인 기능 세트 최적화:
유지 보수성과 성능 향상을 위한 포괄적인 정리 및 최적화:
불필요한 코드 제거
리소스 관리 최적화
상태 관리 재설계
전문적인 모델 트리 탐색과 장치별 작동 가이드
2025/08/27
복잡한 STEP 어셈블리를 관리 가능하고 탐색 가능한 구성 요소로 변환하는 계층적 모델 탐색의 혁명.
지능형 장치 인식 인터페이스로 상황에 맞는 작동 가이드 제공:
useResponsive 훅을 사용한 장치 감지（以下略）
긴 파일 이름 압축 문제 해결 및 모바일 레이아웃 개선
2025/08/27
터치 장치에서 고급 기능을 완벽하게 작동시키기 위한 전문적인 모바일 경験 최적화:
긴 파일 이름으로 인해 도구 버튼이 압축되는 문제 해결:
동적 공간 할당
지능형 정보 표시
성능 최적화
17개의 가져오기/10개의 내보내기 형식을 통한 범용 파일 변환 및 고급 재질 편집
2025/08/26
가장 포괄적인 온라인 3D 파일 변환기를 설립하는 혁신적인 파일 형식 지원.
CAD 형식: STEP, IGES, BREP, OCCT
메시 형식: STL, OBJ, OFF, PLY, 3DS
현대 형식: GLTF/GLB, FBX, DAE, 3DM
산업 형식: IFC, BIM, FCStd, SVG
전문적인 재질 편집 및 시각화 기능:
중요한 사용자 경験 문제 해결:
（以下略）
혁신적인 풀스크린 모드 프레임워크 - STP 뷰어를 전문 3D CAD 플랫폼으로 변환
2025/08/25
이 마일스톤은 STP 뷰어를 단순한 파일 뷰어에서 전문 수준의 3D CAD 시각화 플랫폼으로 전환하는 시작점입니다. 온라인에서 가장 포괄적인 STEP 파일 보기 경験을 만들었습니다.
점진적 기능 전략: 2계층 경験 설계
// 새로운 컴포넌트 구조
src/components/stp-viewer/
├── fullscreen/ # 전문 도구 (지연 로딩)
├── panels/ # 접을 수 있는 탐색 패널
└── hooks/ # 3D 뷰어 통합을 위한 사용자 정의 훅"기본적으로 간단하고, 선택에 따라 강력하게"
| 경験 수준 | 인터페이스 | 사용 사례 |
|---|---|---|
| 일반 사용자 | 깨끗하고 최소한의 도구 모음 | 빠른 파일 미리보기, 기본 보기 |
| 전문가 | 전체 CAD 도구 모음 | 자세한 분석, 측정, 내보내기 |
（以下略）
혁신적인 정밀 측정 도구 - 거리, 각도, 평행면 측정
2025/08/20
산업 수준의 측정 기능을 도입하여 STP 뷰어를 정밀 분석 도구로 변환합니다. 이번 릴리스는 브라우저 기반 3D 시각화에 산업 표준 CAD 측정 정확도를 제공합니다.
측정 시스템과 함께 초점을 맞춘 개선:
（以下略）
혁명적인 3D 내비게이션 - 6개의 사전 설정 뷰포인트, 투영 모드, 30% 빠른 로딩
2025/08/15
3D 내비게이션을 기본적인 이동과 확대에서 전문 CAD 수준의 뷰 컨트롤로 변환합니다. 이번 릴리스는 데스크톱 CAD 애플리케이션에 필적하는 산업 표준 뷰포인트 관리 기능을 제공합니다.
원근 투영（기본값）
직교 투영（전문가）
새로운 뷰 시스템과 함께 중요한 최적화:
（以下略）
STEP 형식 3D 미리보기 기능을 갖춘 온라인 STP 파일 뷰어의 첫 번째 버전
2025/08/01
다음과 같은 핵심 기능을 갖춘 STP Viewer의 첫 번째 버전을 출시하게 되어 기쁩니다: