Files
dxf-to-3d-gasiseol/CONSIDERATIONS.md
T
Claude Haiku 363c2a2a25 step3-4: 프로젝트 기본 구조 & 상세 계획 수립
- CLAUDE.md: 프로젝트 전체 가이드 및 워크플로우 정의
- CONSIDERATIONS.md: 8개 영역 고려사항 분석 (기술, 품질, 배포, UX)
- PROGRESS.md: 진행 상황 추적 및 체크리스트
- PLAN.md: 단계 5~9 상세 계획 및 에이전트 역할 정의
- 메모리: 프로젝트 정보 저장

다음: 단계 5 (에이전트/커맨드/스킬/훅 아이디어 제안)
2026-10-16 15:06:18 +09:00

6.3 KiB

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, 정점 최적화
배포 시간 서비스 시작 지연 낮음 사전 인프라 준비
유지보수 기술 부채 중 명확한 문서 & 테스트