Claude Haiku
363c2a2a25
- CLAUDE.md: 프로젝트 전체 가이드 및 워크플로우 정의 - CONSIDERATIONS.md: 8개 영역 고려사항 분석 (기술, 품질, 배포, UX) - PROGRESS.md: 진행 상황 추적 및 체크리스트 - PLAN.md: 단계 5~9 상세 계획 및 에이전트 역할 정의 - 메모리: 프로젝트 정보 저장 다음: 단계 5 (에이전트/커맨드/스킬/훅 아이디어 제안)
243 lines
6.3 KiB
Markdown
243 lines
6.3 KiB
Markdown
# 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, 정점 최적화 |
|
|
| 배포 시간 | 서비스 시작 지연 | 낮음 | 사전 인프라 준비 |
|
|
| 유지보수 | 기술 부채 | 중 | 명확한 문서 & 테스트 |
|
|
|