# DXF to 3D 웹앱 구현 고려사항

## 1. 가시설 도면의 특수성

### 1.1 구조적 특징
- **모듈화**: 표준 부재 조합 → 조합 가능 옵션 제공
- **임시성**: 설치/해체 순서 명시 필요
- **안전성**: 구조 안정성 검증 필수 (처짐, 강도)
- **확장성**: 설계 변경 쉬워야 함 (파라메트릭)

### 1.2 도면 특성
- 평면도, 단면도, 상세도 조합
- 치수 표기가 중심 (기하보다 수치 신뢰)
- 레이어로 재질/용도 구분
- 절단 기호로 단면 위치 명시

### 1.3 이전 도면(맨홀)과의 차이
| 항목 | 맨홀 | 가시설 |
|------|------|--------|
| 목적 | 지하 구조물 | 임시 가설물 |
| 부재 | 공사별 맞춤 | 표준 규격 + 조합 |
| 검증 | 부피, 구조 | 구조, 안정성, 조립도 |
| 변경 | 드물음 | 빈번 (설계 변경) |

---

## 2. 기술 구현 전략

### 2.1 DXF 파싱 및 변환
**결정**: 기존 dwg2model 파이프라인 재사용

- ✅ 검증된 파싱 로직
- ✅ 기준점 자동 검출
- ⚠️ 가시설 설정 파일 신규 작성 필요

**관리 항목**:
```
- 도면 좌표계 일치성 검증 (X, Y, Z 기준점)
- 레이어 필터링 (구조선 vs 치수선)
- 단위 설정 (mm vs m 자동 변환)
```

### 2.2 3D 모델 생성
**선택지**: 
1. EGModeler (egm CLI) - 기존 검증됨
2. Open3D/PyMesh - 오픈소스, 더 가볍지만 테스트 필요
3. Rhino.Compute - 클라우드 기반, 비용 발생

**추천**: EGModeler 지속 사용
- 가장 안정적 (19개 교훈)
- 부피/기하학 검증 자동화 완성
- 이전 도면 사례와 비교 검증 가능

### 2.3 웹 시각화
**요구사항**:
- 실시간 3D 렌더링 (60fps 목표)
- 부재 정보 표시 (클릭 시)
- 단면/뷰 전환
- 측정 기능 (거리, 면적)

**기술 선택**:
| 라이브러리 | 크기 | 성능 | 학습곡선 | 선택 |
|-----------|------|------|---------|------|
| Three.js | 200KB | 매우 좋음 | 중간 | ✅ |
| Babylon.js | 300KB | 좋음 | 높음 | △ |
| Cesium.js | 1.2MB | 보통 | 높음 | ✗ |

**선택 이유**: Three.js
- 가벼운 로드
- 풍부한 예제
- React 통합 용이 (drei)

### 2.4 웹앱 프레임워크
```
React (상태 관리, UI 컴포넌트)
  ↓
Vite (빠른 개발 & 빌드)
  ↓
Three.js + react-three-fiber (3D 렌더링)
  ↓
TypeScript (타입 안정성)
```

---

## 3. 품질 보증 전략

### 3.1 도면 검증 (단계별)
```
Level 1: 기본 파싱
  ├─ 도면 로딩 성공
  ├─ 엔티티 수 > 0
  └─ 기준점 감지 가능

Level 2: 기하학 검증
  ├─ 뷰 폭/높이 vs 도면 치수 비교 (±2%)
  ├─ 폐곡선 수 확인
  ├─ 자기교차 감지
  └─ 좌표 범위 타당성

Level 3: 3D 모델 검증
  ├─ 부피 오차 < 0.5%
  ├─ 폐면 여부 (manifold)
  ├─ 면 법선 방향
  └─ 경계 무결성

Level 4: 시각적 검증
  ├─ 웹 렌더링 성공
  ├─ 부재 식별 가능
  └─ 기본 상호작용 작동
```

### 3.2 자동화 테스트
```
도면 → 설정 파일 → IR 생성 → 부피 계산 → 기준값 비교
                                ↓
                        ✅ 0.5% 이내 → PASS
                        ❌ 초과 → FAIL (알림)
```

### 3.3 회귀 검증
- 이전 도면(맨홀) 재처리 → 부피 일치 확인
- 새 도면(가시설) 첫 처리 → 기준값 수립
- 매 수정 후 부피 추적

---

## 4. 배포 전략

### 4.1 호스팅 선택
```
Vercel (추천)
├─ Next.js/React 최적화
├─ 무료 SSL
├─ 자동 배포 (git 푸시)
├─ 환경 변수 관리
└─ 서버리스 함수 지원

Netlify (대안)
├─ 마찬가지로 무료
├─ Netlify Functions
└─ 더 유연한 구성
```

### 4.2 도메인
- Freenom (완전 무료, .tk/.ml/.ga)
- DNS 리다이렉트 → Vercel

### 4.3 CI/CD 파이프라인
```
git push
  ↓
GitHub Actions
  ├─ 린트 & 타입 체크
  ├─ 빌드 테스트
  ├─ DXF 도면 검증
  └─ 부피 회귀 테스트
  ↓
Vercel 자동 배포
  ├─ 프리뷰 URL 생성
  └─ 프로덕션 배포
```

---

## 5. 사용자 경험 (UX)

### 5.1 핵심 기능
1. **도면 업로드** → DXF 선택
2. **자동 변환** → 진행 상황 표시
3. **3D 뷰** → 회전, 줌, 패닝
4. **부재 정보** → 클릭 시 표시
5. **다운로드** → OBJ, IFC, 스크린샷

### 5.2 대시보드
```
┌─────────────────────────────┐
│   DXF to 3D 변환기          │
├─────────────────────────────┤
│ 📁 업로드  │ 최근 변환 목록 │
├──────────┼─────────────────┤
│ 3D 뷰    │ 부재 정보 패널 │
│ (Three.js)│ - 이름         │
│          │ - 재질         │
│          │ - 부피         │
└──────────┴─────────────────┘
```

### 5.3 모바일 반응형
- 터치 제스처 (pinch zoom)
- 모바일 레이아웃 최적화
- 가로/세로 자동 전환

---

## 6. 보안 및 성능

### 6.1 보안
- DXF 파일 크기 제한 (50MB)
- 바이러스 스캔 (선택사항)
- 개인정보 없음 (파일 자동 삭제)
- HTTPS만 (Vercel 기본)

### 6.2 성능
| 지표 | 목표 | 수단 |
|------|------|------|
| 로딩 | < 3초 | 번들 최적화, 이미지 압축 |
| 렌더링 | 60fps | Three.js 최적화, LOD |
| 변환 | < 10초 | 병렬 처리 (Worker) |

### 6.3 캐싱
```
정적 파일 → CDN 캐시 (1년)
API 응답 → 메모리 캐시 (1시간)
3D 모델 → 로컬스토리지 (세션)
```

---

## 7. 개발 일정 (추정)

| 단계 | 작업 | 기간 |
|------|------|------|
| 1 | 가시설 설정 파일 작성 | 2-3일 |
| 2 | 웹앱 기본 구조 | 2-3일 |
| 3 | Three.js 통합 | 2-3일 |
| 4 | 품질 테스트 | 2-3일 |
| 5 | 배포 & 도메인 | 1일 |

**전체**: ~2주 (병렬 처리 시)

---

## 8. 위험 요소 및 완화 방안

| 위험 | 영향 | 확률 | 완화 |
|------|------|------|------|
| DXF 파일 다양성 | 파싱 실패 | 중 | 설정 파일 테스트 |
| 3D 모델 복잡도 | 웹 렌더링 느림 | 중 | LOD, 정점 최적화 |
| 배포 시간 | 서비스 시작 지연 | 낮음 | 사전 인프라 준비 |
| 유지보수 | 기술 부채 | 중 | 명확한 문서 & 테스트 |