docs: [plans] 방화셔터 도면생성 기능 기획서 작성
- 가이드레일 단면도 + 셔터박스 단면도 + 3D 렌더링 4탭 구성 - 파라미터 기반 SVG 실시간 렌더링 + Three.js 3D 조립체 - 기존 자동도면 생성 아키텍처 확장 (순수 클라이언트 측) - 4단계 개발 계획: 가이드레일 → 셔터박스 → 3D → 출력/프리셋
This commit is contained in:
김보곤
@@ -147,9 +147,10 @@ docs/
|
||||
| [equipment/README.md](features/equipment/README.md) | 설비관리 (MNG 전용) |
|
||||
| [approvals/README.md](features/approvals/README.md) | 결재관리 시스템 (순차결재, 보류/전결/참조/복사재기안) |
|
||||
| [planning/README.md](features/planning/README.md) | 주일기업 기획 (견적/프로젝트/사진대지/회의록/AI) |
|
||||
| [rd/README.md](features/rd/README.md) | R&D (조직도/AI견적/기획디자인/디자인 인사이트) |
|
||||
| [rd/README.md](features/rd/README.md) | R&D (조직도/AI견적/기획디자인/디자인 인사이트/사운드 로고/CM송) |
|
||||
| [rd/planning-design.md](features/rd/planning-design.md) | 기획디자인 스토리보드 에디터 기술 명세 |
|
||||
| [rd/design-insight.md](features/rd/design-insight.md) | 디자인 인사이트 UI/UX 연구 도구 (100종 패턴, AI 프롬프트) |
|
||||
| [rd/sound-logo-studio.md](features/rd/sound-logo-studio.md) | 사운드 로고 스튜디오 (시퀀서 + Gemini TTS + Lyria BGM 합성) |
|
||||
|
||||
---
|
||||
|
||||
@@ -196,6 +197,7 @@ docs/
|
||||
|------|------|
|
||||
| [index_plans.md](plans/index_plans.md) | 계획 인덱스 (ACTIVE + PLANNED) |
|
||||
| [GUIDE.md](plans/GUIDE.md) | 계획 문서 작성 가이드 |
|
||||
| [fire-shutter-drawing-generator-plan.md](plans/fire-shutter-drawing-generator-plan.md) | 방화셔터 도면생성 기능 기획서 (가이드레일 단면도 + 셔터박스 + 3D 렌더링) |
|
||||
|
||||
---
|
||||
|
||||
|
||||
753
sam/docs/plans/fire-shutter-drawing-generator-plan.md
Normal file
753
sam/docs/plans/fire-shutter-drawing-generator-plan.md
Normal file
@@ -0,0 +1,753 @@
|
||||
# 방화셔터 도면생성 기능 기획서
|
||||
|
||||
> **작성일**: 2026-03-08
|
||||
> **상태**: 기획 초안
|
||||
> **위치**: MNG > R&D > 방화셔터 도면생성
|
||||
> **라우트**: `GET /rd/fire-shutter-drawing`
|
||||
> **참고**: 기존 `자동도면 생성` (`/rd/auto-drawing`) 구조를 확장
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요
|
||||
|
||||
### 1.1 목적
|
||||
|
||||
방화셔터의 **가이드레일 단면**과 **셔터박스(케이스) 형태**를 파라미터로 입력하면, **2D 단면도(SVG)**와 **3D 렌더링(Three.js)**을 실시간으로 생성하는 도구를 제공한다.
|
||||
|
||||
### 1.2 핵심 가치
|
||||
|
||||
| 기존 (수동) | 개선 (SAM 도면생성) |
|
||||
|-------------|-------------------|
|
||||
| CAD 프로그램에서 수동 작도 | 파라미터 입력 → 자동 도면 생성 |
|
||||
| 도면 수정 시 전체 재작업 | 치수 변경 → 실시간 미리보기 |
|
||||
| 제품별 도면 관리 어려움 | 프리셋 저장/불러오기로 재활용 |
|
||||
| 영업/설치팀 도면 요청 대기 | 현장에서 즉시 단면도 확인 가능 |
|
||||
|
||||
### 1.3 대상 사용자
|
||||
|
||||
- 설계팀: 방화셔터 단면 설계 및 검토
|
||||
- 영업팀: 고객 제안 시 단면도/3D 이미지 첨부
|
||||
- 설치팀: 현장 설치 전 가이드레일/케이스 형태 확인
|
||||
- 생산팀: 절곡/제작 사양 확인
|
||||
|
||||
---
|
||||
|
||||
## 2. 방화셔터 핵심 구조
|
||||
|
||||
### 2.1 전체 구성도
|
||||
|
||||
```
|
||||
┌─────────────────── 천장 슬래브 ───────────────────┐
|
||||
│ │
|
||||
│ ┌──────────── 셔터박스 (HEAD BOX / CASE) ──────┐ │
|
||||
│ │ ┌─────┐ ┌─────┐ │ │
|
||||
│ │ │브래킷│ [샤프트+슬랫 감김] │브래킷│ │ │
|
||||
│ │ └──┬──┘ [모터+감속기+브레이크] └──┬──┘ │ │
|
||||
│ │ │ [밸런스 스프링] │ │ │
|
||||
│ └─────┼─────────────────────────────────┼──────┘ │
|
||||
│ │ │ │
|
||||
│ ┌─────┴─────┐ ┌──────┴─────┐ │
|
||||
│ │ 가이드레일 │ ← 슬랫 커튼 → │ 가이드레일 │ │
|
||||
│ │ (좌) │ (강판/스크린) │ (우) │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ 연기차단재│ │연기차단재 │ │
|
||||
│ │ │ │ │ │
|
||||
│ └─────┬─────┘ └──────┬─────┘ │
|
||||
│ │ │ │
|
||||
│ ══════╧═══ 하장바 (BOTTOM BAR) ═════════╧═══════ │
|
||||
│ [고무 실링] │
|
||||
└────────────────── 바닥 ──────────────────────────┘
|
||||
```
|
||||
|
||||
### 2.2 주요 구성요소 상세
|
||||
|
||||
#### A. 가이드레일 (Guide Rail)
|
||||
|
||||
- **형태**: C-채널 단면 (ㄷ자 형태)
|
||||
- **재질**: 강판 2.3mm 이상
|
||||
- **기능**: 슬랫 커튼의 좌우 안내 + 연기 차단
|
||||
- **표준 길이**: 2,438mm / 3,305mm / 4,430mm (조합 사용)
|
||||
- **수량**: 항상 **2개** (좌우 1쌍)
|
||||
- **부속**: 연기차단재(Smoke Seal Packing), 앵커볼트
|
||||
|
||||
```
|
||||
가이드레일 단면 (상단에서 본 모습)
|
||||
|
||||
┌────────────┐
|
||||
│ │ ← 가이드레일 본체 (C-채널)
|
||||
│ ┌──────┐ │
|
||||
│ │ 연기 │ │
|
||||
│ │ 차단 │ │
|
||||
│ │ 재 │ │
|
||||
│ │ │ │
|
||||
│ │슬랫 │ │
|
||||
│ │엣지→ ● │
|
||||
│ │ │ │
|
||||
│ │ 연기 │ │
|
||||
│ │ 차단 │ │
|
||||
│ │ 재 │ │
|
||||
│ └──────┘ │
|
||||
│ │
|
||||
└────────────┘
|
||||
■■■■■■■■■■■■■ ← 방화벽
|
||||
```
|
||||
|
||||
**파라미터**:
|
||||
|
||||
| 파라미터 | 설명 | 단위 | 기본값 |
|
||||
|---------|------|------|--------|
|
||||
| `rail_width` | 레일 전체 폭 | mm | 65 |
|
||||
| `rail_depth` | 레일 깊이 (채널 깊이) | mm | 50 |
|
||||
| `rail_thickness` | 강판 두께 | mm | 2.3 |
|
||||
| `rail_lip` | 립(입구) 높이 | mm | 15 |
|
||||
| `seal_thickness` | 연기차단재 두께 | mm | 5 |
|
||||
| `seal_depth` | 연기차단재 깊이 | mm | 40 |
|
||||
| `slat_thickness` | 슬랫 두께 (끼워지는 부분) | mm | 1.6 |
|
||||
| `rail_height` | 레일 전체 높이 | mm | 3305 |
|
||||
| `anchor_spacing` | 앵커볼트 간격 | mm | 500 |
|
||||
|
||||
#### B. 셔터박스 / 케이스 (Head Box / Case)
|
||||
|
||||
- **형태**: 직사각형 박스 (상부 천장 부착)
|
||||
- **재질**: 강판 1.6mm 이상
|
||||
- **기능**: 샤프트/모터/슬랫 감김 수납
|
||||
- **표준 규격**: 1500×380mm / 500×380mm (개구부 크기에 따라)
|
||||
|
||||
```
|
||||
셔터박스 단면 (정면에서 본 모습)
|
||||
|
||||
┌─────────────────────────────────────────┐ ← 상판
|
||||
│ │
|
||||
│ [브래킷] ┌──── 샤프트 ────┐ [브래킷] │
|
||||
│ │ │ (슬랫 감김) │ │ │
|
||||
│ ├──────┤ ├──────┤ │
|
||||
│ │ │ ◎ 중심축 │ │ │
|
||||
│ │ └───────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ [모터+감속기] [브레이크] │ │
|
||||
│ │ [밸런스 스프링] │ │
|
||||
│ │
|
||||
└───┬─────────────────────────────────┬───┘ ← 하판 (슬랫 출구)
|
||||
│ ↓ 슬랫 하강 ↓ │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
**파라미터**:
|
||||
|
||||
| 파라미터 | 설명 | 단위 | 기본값 |
|
||||
|---------|------|------|--------|
|
||||
| `box_width` | 케이스 전체 폭 (= 개구부 폭 + 마진) | mm | 1500 |
|
||||
| `box_height` | 케이스 높이 | mm | 380 |
|
||||
| `box_depth` | 케이스 깊이 (전후) | mm | 380 |
|
||||
| `box_thickness` | 케이스 강판 두께 | mm | 1.6 |
|
||||
| `shaft_diameter` | 샤프트 직경 | mm | 120 |
|
||||
| `shaft_offset_x` | 샤프트 중심 수평 오프셋 | mm | 0 |
|
||||
| `shaft_offset_y` | 샤프트 중심 수직 오프셋 | mm | 0 |
|
||||
| `motor_side` | 모터 위치 (좌/우) | - | 우 |
|
||||
| `slat_exit_width` | 슬랫 출구 폭 | mm | 1400 |
|
||||
| `bracket_width` | 브래킷 폭 | mm | 80 |
|
||||
|
||||
#### C. 슬랫 (Steel Slat / Screen)
|
||||
|
||||
- **강판형**: EGI 강판 1.6mm, C/S형 인터록킹 프로파일
|
||||
- **스크린형**: 실리카/와이어 원단, 가이드레일 11mm 홈
|
||||
- **피치**: 75~100mm
|
||||
|
||||
**파라미터**:
|
||||
|
||||
| 파라미터 | 설명 | 단위 | 기본값 |
|
||||
|---------|------|------|--------|
|
||||
| `slat_type` | 슬랫 유형 (강판/스크린) | - | 강판 |
|
||||
| `slat_pitch` | 슬랫 피치 | mm | 80 |
|
||||
| `slat_thickness` | 슬랫 두께 | mm | 1.6 |
|
||||
| `slat_profile` | 단면 형태 (C형/S형) | - | C형 |
|
||||
|
||||
#### D. 하장바 (Bottom Bar)
|
||||
|
||||
- **기능**: 슬랫 커튼 하단 마감 + 바닥 밀착
|
||||
- **부속**: 고무 실링
|
||||
|
||||
**파라미터**:
|
||||
|
||||
| 파라미터 | 설명 | 단위 | 기본값 |
|
||||
|---------|------|------|--------|
|
||||
| `bar_width` | 하장바 폭 | mm | 60 |
|
||||
| `bar_height` | 하장바 높이 | mm | 40 |
|
||||
| `bar_seal_height` | 고무 실링 높이 | mm | 15 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 기능 설계
|
||||
|
||||
### 3.1 탭 구성
|
||||
|
||||
기존 자동도면 생성의 탭 구조를 참고하여 4개 탭으로 구성한다.
|
||||
|
||||
```
|
||||
┌──────────┬──────────┬──────────┬──────────┐
|
||||
│ 설정 │ 가이드 │ 셔터박스 │ 3D │
|
||||
│ Settings │ 레일 │ (케이스) │ 렌더링 │
|
||||
└──────────┴──────────┴──────────┴──────────┘
|
||||
```
|
||||
|
||||
| 탭 | ID | 기능 |
|
||||
|----|----|------|
|
||||
| **설정** | `Settings` | 제품 유형 선택, 개구부 크기, 전역 설정 |
|
||||
| **가이드레일** | `GuideRail` | 가이드레일 단면 파라미터 입력 + SVG 단면도 실시간 미리보기 |
|
||||
| **셔터박스** | `ShutterBox` | 셔터박스 단면 파라미터 입력 + SVG 단면도 실시간 미리보기 |
|
||||
| **3D 렌더링** | `3D` | 전체 방화셔터 조립체 3D 렌더링 (Three.js) |
|
||||
|
||||
### 3.2 설정 탭 (Settings)
|
||||
|
||||
#### 입력 항목
|
||||
|
||||
| 항목 | 타입 | 설명 |
|
||||
|------|------|------|
|
||||
| 제품 유형 | 드롭다운 | 강판형 (KFS) / 스크린형 (KSS) |
|
||||
| 제품 모델 | 드롭다운 | KSS01, KSS02, KFS01 등 (유형 선택 시 필터링) |
|
||||
| 개구부 폭 (W0) | 숫자 입력 | mm |
|
||||
| 개구부 높이 (H0) | 숫자 입력 | mm |
|
||||
| 수량 | 숫자 입력 | 기본값 1 |
|
||||
|
||||
#### 자동 계산 (표시 전용)
|
||||
|
||||
| 항목 | 수식 | 설명 |
|
||||
|------|------|------|
|
||||
| 제작 폭 (W1) | 스크린: W0+140 / 강판: W0+110 | 마진 포함 |
|
||||
| 제작 높이 (H1) | H0+350 | 마진 포함 |
|
||||
| 면적 (M) | W1 × H1 / 1,000,000 | m² |
|
||||
| 중량 (K) | 스크린: M×2 / 강판: M×25 | kg |
|
||||
| 권장 모터 | K 기준 자동 선택 | 150K~1500K |
|
||||
|
||||
#### 프리셋 관리
|
||||
|
||||
- **프리셋 저장**: 현재 파라미터를 이름 지정하여 localStorage에 저장
|
||||
- **프리셋 불러오기**: 저장된 프리셋 목록에서 선택하여 파라미터 복원
|
||||
- **기본 프리셋**: 강판형 기본, 스크린형 기본 (제품 유형 선택 시 자동 적용)
|
||||
|
||||
### 3.3 가이드레일 탭
|
||||
|
||||
#### UI 구성 (2컬럼 레이아웃)
|
||||
|
||||
```
|
||||
┌──────────────────────┬──────────────────────────────────┐
|
||||
│ 왼쪽: 파라미터 입력 │ 오른쪽: SVG 단면도 미리보기 │
|
||||
│ │ │
|
||||
│ ■ 레일 전체 폭: [65] │ │
|
||||
│ ■ 레일 깊이: [50] │ ┌────────┐ │
|
||||
│ ■ 강판 두께: [2.3] │ │ │ │
|
||||
│ ■ 립 높이: [15] │ │ ┌────┐ │ ← SVG 실시간 │
|
||||
│ ■ 연기차단재: [5/40] │ │ │ ● │ │ 렌더링 │
|
||||
│ ■ 슬랫 두께: [1.6] │ │ └────┘ │ │
|
||||
│ │ │ │ │
|
||||
│ [치수 표시 ON/OFF] │ └────────┘ │
|
||||
│ [연기차단재 ON/OFF] │ ← 치수 라벨 (mm) │
|
||||
│ │ │
|
||||
│ ■ 레일 높이: [3305] │ [줌 +] [줌 -] [리셋] [DXF 저장] │
|
||||
│ ■ 앵커 간격: [500] │ │
|
||||
└──────────────────────┴──────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### SVG 단면도 렌더링 상세
|
||||
|
||||
**뷰 모드 3가지**:
|
||||
|
||||
1. **횡단면도 (Cross-Section)**: 가이드레일을 위에서 본 단면 — 슬랫이 레일에 끼워진 형태
|
||||
2. **종단면도 (Longitudinal)**: 가이드레일을 측면에서 본 단면 — 앵커볼트 배치
|
||||
3. **정면도 (Front View)**: 가이드레일을 정면에서 본 모습 — 레일 전체 높이 + 앵커 위치
|
||||
|
||||
**렌더링 요소**:
|
||||
|
||||
| 요소 | 색상 | 설명 |
|
||||
|------|------|------|
|
||||
| 레일 본체 | `#94a3b8` (은회색) | 강판 단면 |
|
||||
| 연기차단재 | `#f97316` (주황) | 실링 재질 |
|
||||
| 슬랫 엣지 | `#60a5fa` (파랑) | 레일 안의 슬랫 |
|
||||
| 방화벽 | `#a1887f` (갈색 해칭) | 콘크리트 벽 |
|
||||
| 앵커볼트 | `#ef4444` (빨강) | 고정 부속 |
|
||||
| 치수선 | `#3b82f6` (파랑) | mm 단위 치수 |
|
||||
|
||||
### 3.4 셔터박스 탭
|
||||
|
||||
#### UI 구성 (2컬럼 레이아웃)
|
||||
|
||||
```
|
||||
┌──────────────────────┬──────────────────────────────────┐
|
||||
│ 왼쪽: 파라미터 입력 │ 오른쪽: SVG 단면도 미리보기 │
|
||||
│ │ │
|
||||
│ ■ 케이스 폭: [1500] │ ┌────────────────────────────┐ │
|
||||
│ ■ 케이스 높이: [380] │ │ [브래킷] ◎샤프트 [브래킷]│ │
|
||||
│ ■ 케이스 깊이: [380] │ │ 감김 슬랫 │ │
|
||||
│ ■ 강판 두께: [1.6] │ │ [모터+감속기] [브레이크] │ │
|
||||
│ │ └────────────────────────────┘ │
|
||||
│ ■ 샤프트 직경: [120] │ │
|
||||
│ ■ 샤프트 오프셋 │ ← SVG 실시간 렌더링 │
|
||||
│ X: [0] Y: [0] │ ← 치수 라벨 (mm) │
|
||||
│ ■ 모터 위치: [좌/우] │ │
|
||||
│ │ │
|
||||
│ ■ 내부 부품 표시 │ [줌 +] [줌 -] [리셋] [DXF 저장] │
|
||||
│ □ 샤프트 │ │
|
||||
│ □ 모터/감속기 │ │
|
||||
│ □ 브레이크 │ │
|
||||
│ □ 밸런스 스프링 │ │
|
||||
└──────────────────────┴──────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### SVG 단면도 렌더링 상세
|
||||
|
||||
**뷰 모드 3가지**:
|
||||
|
||||
1. **정면 단면도**: 케이스를 정면에서 본 내부 구조 (샤프트, 모터, 브래킷 위치)
|
||||
2. **측면 단면도**: 케이스를 측면에서 본 단면 (깊이 방향, 슬랫 감김 단면)
|
||||
3. **하부 상세도**: 슬랫 출구 부분 확대
|
||||
|
||||
**렌더링 요소**:
|
||||
|
||||
| 요소 | 색상 | 설명 |
|
||||
|------|------|------|
|
||||
| 케이스 외곽 | `#94a3b8` (은회색) | 강판 박스 |
|
||||
| 샤프트 | `#64748b` (짙은 회색) | 중심축 + 감김 슬랫 |
|
||||
| 모터 | `#3b82f6` (파랑) | 전동 개폐기 |
|
||||
| 브레이크 | `#ef4444` (빨강) | 전자 브레이크 |
|
||||
| 스프링 | `#22c55e` (녹색) | 밸런스 스프링 |
|
||||
| 브래킷 | `#8b5cf6` (보라) | 벽 고정 브래킷 |
|
||||
| 슬랫 | `#f59e0b` (주황) | 감긴 슬랫 단면 |
|
||||
|
||||
### 3.5 3D 렌더링 탭
|
||||
|
||||
#### 렌더링 대상
|
||||
|
||||
Three.js를 사용하여 방화셔터 전체 조립체를 3D로 시각화한다.
|
||||
|
||||
```
|
||||
3D 렌더링 요소:
|
||||
├── 셔터박스 (반투명 상자)
|
||||
│ ├── 샤프트 (원통)
|
||||
│ ├── 감긴 슬랫 (원통 표면)
|
||||
│ ├── 모터+감속기 (박스)
|
||||
│ ├── 브레이크 (디스크)
|
||||
│ └── 브래킷 (L형 판)
|
||||
├── 가이드레일 좌 (C-채널 압출)
|
||||
├── 가이드레일 우 (C-채널 압출)
|
||||
├── 슬랫 커튼 (평면 텍스처)
|
||||
│ ├── 강판형: 줄무늬 텍스처 (인터록킹 표현)
|
||||
│ └── 스크린형: 반투명 메쉬
|
||||
├── 하장바 (직사각형 바)
|
||||
└── 방화벽 (반투명 콘크리트 텍스처)
|
||||
```
|
||||
|
||||
#### 3D 인터랙션
|
||||
|
||||
| 기능 | 조작 | 설명 |
|
||||
|------|------|------|
|
||||
| 회전 | 마우스 드래그 | OrbitControls |
|
||||
| 줌 | 마우스 휠 | 확대/축소 |
|
||||
| 팬 | 우클릭 드래그 | 시점 이동 |
|
||||
| 부품 하이라이트 | 마우스 호버 | 해당 부품 강조 + 이름 표시 |
|
||||
| 부품 ON/OFF | 체크박스 | 개별 부품 표시/숨김 |
|
||||
| 투명도 | 슬라이더 | 케이스 투명도 조절 (내부 구조 확인) |
|
||||
| 셔터 개폐 | 슬라이더 | 0%(전개)~100%(전폐) 애니메이션 |
|
||||
| 조명 | 프리셋 | 기본/스튜디오/야외/드라마틱 |
|
||||
|
||||
#### 3D 모델링 방식
|
||||
|
||||
DB나 외부 3D 파일 없이, **파라미터 기반 절차적 모델링(Procedural Modeling)**으로 구현한다.
|
||||
|
||||
```javascript
|
||||
// 가이드레일 C-채널 3D 생성 예시 (Three.js ExtrudeGeometry)
|
||||
function createGuideRailMesh(params) {
|
||||
const shape = new THREE.Shape();
|
||||
// C-채널 프로파일 경로 정의
|
||||
shape.moveTo(0, 0);
|
||||
shape.lineTo(params.rail_width, 0);
|
||||
shape.lineTo(params.rail_width, params.rail_lip);
|
||||
shape.lineTo(params.rail_width - params.rail_thickness, params.rail_lip);
|
||||
shape.lineTo(params.rail_width - params.rail_thickness, params.rail_thickness);
|
||||
shape.lineTo(params.rail_thickness, params.rail_thickness);
|
||||
shape.lineTo(params.rail_thickness, params.rail_lip);
|
||||
shape.lineTo(0, params.rail_lip);
|
||||
shape.lineTo(0, 0);
|
||||
|
||||
// 높이 방향으로 압출
|
||||
const extrudeSettings = {
|
||||
depth: params.rail_height,
|
||||
bevelEnabled: false
|
||||
};
|
||||
|
||||
return new THREE.Mesh(
|
||||
new THREE.ExtrudeGeometry(shape, extrudeSettings),
|
||||
new THREE.MeshStandardMaterial({ color: 0x94a3b8 })
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 3.6 출력 기능
|
||||
|
||||
| 기능 | 형식 | 설명 |
|
||||
|------|------|------|
|
||||
| **DXF 다운로드** | `.dxf` | 가이드레일/셔터박스 단면도를 CAD 호환 파일로 저장 |
|
||||
| **PNG 다운로드** | `.png` | SVG 단면도를 이미지로 저장 |
|
||||
| **3D 스크린샷** | `.png` | 3D 렌더링 현재 뷰를 이미지로 저장 |
|
||||
| **파라미터 JSON** | `.json` | 현재 설정값을 파일로 내보내기/가져오기 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 기술 설계
|
||||
|
||||
### 4.1 아키텍처
|
||||
|
||||
기존 자동도면 생성과 동일한 **순수 클라이언트 측** 아키텍처를 사용한다.
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ Browser (Client-Side Only) │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ Blade Template │ │
|
||||
│ │ (fire-shutter-drawing/index.blade) │ │
|
||||
│ ├─────────────────────────────────────┤ │
|
||||
│ │ JavaScript State Management │ │
|
||||
│ │ (fireShutterState 객체) │ │
|
||||
│ ├──────────┬──────────────────────────┤ │
|
||||
│ │ SVG 엔진 │ Three.js 3D 엔진 │ │
|
||||
│ │ (단면도) │ (조립체 렌더링) │ │
|
||||
│ ├──────────┴──────────────────────────┤ │
|
||||
│ │ DXF 생성기 │ PNG 내보내기 │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ DB 연동: 없음 (localStorage 프리셋만 사용) │
|
||||
│ API 호출: 없음 │
|
||||
└─────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 4.2 파일 구조
|
||||
|
||||
```
|
||||
mng/
|
||||
├── routes/web.php ← 라우트 추가
|
||||
├── app/Http/Controllers/RdController.php ← 메서드 추가
|
||||
└── resources/views/rd/fire-shutter-drawing/
|
||||
├── index.blade.php ← 메인 레이아웃 + 탭 UI
|
||||
├── partials/
|
||||
│ ├── _settings.blade.php ← 설정 탭 HTML
|
||||
│ ├── _guide-rail.blade.php ← 가이드레일 탭 HTML
|
||||
│ ├── _shutter-box.blade.php ← 셔터박스 탭 HTML
|
||||
│ └── _3d-viewer.blade.php ← 3D 렌더링 탭 HTML
|
||||
└── js/
|
||||
(인라인 또는 @push('scripts')에 포함)
|
||||
```
|
||||
|
||||
> **참고**: 기존 `auto-drawing/index.blade.php`는 단일 파일 4,884줄이다. 유지보수성을 위해 **Blade partial로 분리**하되, JavaScript는 상태 공유가 필요하므로 메인 파일의 `@push('scripts')`에 통합한다.
|
||||
|
||||
### 4.3 상태 관리 객체
|
||||
|
||||
```javascript
|
||||
const fireShutterState = {
|
||||
// 활성 탭
|
||||
activeTab: 'Settings',
|
||||
|
||||
// 설정 탭
|
||||
settings: {
|
||||
productType: 'steel', // 'steel' | 'screen'
|
||||
productModel: 'KFS01', // 제품 모델 코드
|
||||
openWidth: 2000, // 개구부 폭 W0 (mm)
|
||||
openHeight: 3000, // 개구부 높이 H0 (mm)
|
||||
quantity: 1,
|
||||
// 자동 계산
|
||||
mfgWidth: 0, // 제작 폭 W1
|
||||
mfgHeight: 0, // 제작 높이 H1
|
||||
area: 0, // 면적 M (m²)
|
||||
weight: 0, // 중량 K (kg)
|
||||
motorSpec: '', // 권장 모터
|
||||
},
|
||||
|
||||
// 가이드레일 파라미터
|
||||
guideRail: {
|
||||
width: 65,
|
||||
depth: 50,
|
||||
thickness: 2.3,
|
||||
lip: 15,
|
||||
sealThickness: 5,
|
||||
sealDepth: 40,
|
||||
slatThickness: 1.6,
|
||||
height: 3305,
|
||||
anchorSpacing: 500,
|
||||
// 뷰 옵션
|
||||
showDimensions: true,
|
||||
showSeal: true,
|
||||
viewMode: 'cross', // 'cross' | 'longitudinal' | 'front'
|
||||
},
|
||||
|
||||
// 셔터박스 파라미터
|
||||
shutterBox: {
|
||||
width: 1500,
|
||||
height: 380,
|
||||
depth: 380,
|
||||
thickness: 1.6,
|
||||
shaftDiameter: 120,
|
||||
shaftOffsetX: 0,
|
||||
shaftOffsetY: 0,
|
||||
motorSide: 'right', // 'left' | 'right'
|
||||
slatExitWidth: 1400,
|
||||
bracketWidth: 80,
|
||||
// 내부 부품 표시
|
||||
showShaft: true,
|
||||
showMotor: true,
|
||||
showBrake: true,
|
||||
showSpring: true,
|
||||
viewMode: 'front', // 'front' | 'side' | 'bottom'
|
||||
},
|
||||
|
||||
// 슬랫 파라미터
|
||||
slat: {
|
||||
type: 'steel', // 'steel' | 'screen'
|
||||
pitch: 80,
|
||||
thickness: 1.6,
|
||||
profile: 'C', // 'C' | 'S'
|
||||
},
|
||||
|
||||
// 하장바 파라미터
|
||||
bottomBar: {
|
||||
width: 60,
|
||||
height: 40,
|
||||
sealHeight: 15,
|
||||
},
|
||||
|
||||
// 3D 뷰 설정
|
||||
threeD: {
|
||||
caseOpacity: 0.3, // 케이스 투명도
|
||||
shutterPosition: 100, // 0=전개, 100=전폐
|
||||
showComponents: {
|
||||
case: true,
|
||||
shaft: true,
|
||||
motor: true,
|
||||
brake: true,
|
||||
spring: true,
|
||||
guideRailL: true,
|
||||
guideRailR: true,
|
||||
slats: true,
|
||||
bottomBar: true,
|
||||
wall: true,
|
||||
},
|
||||
lightPreset: 'default',
|
||||
},
|
||||
|
||||
// 프리셋 관리
|
||||
presets: [], // localStorage에서 로드
|
||||
|
||||
// 뷰 컨트롤 (줌/팬)
|
||||
view: {
|
||||
scale: 1,
|
||||
offset: { x: 0, y: 0 },
|
||||
isDragging: false,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 4.4 제품 유형별 기본값 매핑
|
||||
|
||||
```javascript
|
||||
const PRODUCT_DEFAULTS = {
|
||||
steel: {
|
||||
label: '강판형',
|
||||
marginW: 110, // W1 = W0 + 110
|
||||
marginH: 350, // H1 = H0 + 350
|
||||
weightFactor: 25, // K = M × 25
|
||||
guideRail: { width: 65, depth: 50, thickness: 2.3, lip: 15 },
|
||||
slat: { type: 'steel', pitch: 80, thickness: 1.6, profile: 'C' },
|
||||
},
|
||||
screen: {
|
||||
label: '스크린형',
|
||||
marginW: 140, // W1 = W0 + 140
|
||||
marginH: 350, // H1 = H0 + 350
|
||||
weightFactor: 2, // K = M × 2
|
||||
guideRail: { width: 30, depth: 25, thickness: 1.5, lip: 11 },
|
||||
slat: { type: 'screen', pitch: 100, thickness: 0.8, profile: 'flat' },
|
||||
},
|
||||
};
|
||||
|
||||
const MOTOR_TABLE = [
|
||||
{ maxWeight: 150, spec: '150K', inch: 4 },
|
||||
{ maxWeight: 300, spec: '300K', inch: 4 },
|
||||
{ maxWeight: 500, spec: '500K', inch: 5 },
|
||||
{ maxWeight: 750, spec: '750K', inch: 5 },
|
||||
{ maxWeight: 1000, spec: '1000K', inch: 6 },
|
||||
{ maxWeight: 1500, spec: '1500K', inch: 6 },
|
||||
];
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 개발 단계
|
||||
|
||||
### Phase 1: 기본 구조 + 가이드레일 단면도 (1단계)
|
||||
|
||||
> **목표**: 라우트/컨트롤러/뷰 생성, 설정 탭, 가이드레일 SVG 단면도
|
||||
|
||||
| 작업 | 상세 | 예상 |
|
||||
|------|------|------|
|
||||
| 라우트 등록 | `GET /rd/fire-shutter-drawing` | 10분 |
|
||||
| 컨트롤러 메서드 | `RdController@fireShutterDrawing` | 10분 |
|
||||
| 레이아웃 + 탭 UI | 4탭 구조, 다크 테마 | 1시간 |
|
||||
| 설정 탭 | 제품 유형/개구부 크기 입력 + 자동 계산 | 1시간 |
|
||||
| 가이드레일 SVG 엔진 | C-채널 단면도 + 치수선 + 연기차단재 | 3시간 |
|
||||
| 줌/팬 컨트롤 | 기존 auto-drawing 코드 재사용 | 30분 |
|
||||
|
||||
**산출물**: 가이드레일 파라미터 입력 → SVG 횡단면도 실시간 렌더링
|
||||
|
||||
### Phase 2: 셔터박스 단면도 (2단계)
|
||||
|
||||
> **목표**: 셔터박스(케이스) SVG 단면도 + 내부 부품 표시
|
||||
|
||||
| 작업 | 상세 | 예상 |
|
||||
|------|------|------|
|
||||
| 셔터박스 SVG 엔진 | 케이스 외곽 + 내부 구조 | 3시간 |
|
||||
| 내부 부품 렌더링 | 샤프트, 모터, 브레이크, 스프링 | 2시간 |
|
||||
| 뷰 모드 전환 | 정면/측면/하부 | 1시간 |
|
||||
| 부품 ON/OFF 토글 | 체크박스 → SVG 요소 표시/숨김 | 30분 |
|
||||
|
||||
**산출물**: 셔터박스 파라미터 입력 → SVG 단면도 (정면/측면/하부)
|
||||
|
||||
### Phase 3: 3D 렌더링 (3단계)
|
||||
|
||||
> **목표**: Three.js 기반 방화셔터 전체 조립체 3D 렌더링
|
||||
|
||||
| 작업 | 상세 | 예상 |
|
||||
|------|------|------|
|
||||
| Three.js 씬 구축 | 카메라, 조명, OrbitControls | 1시간 |
|
||||
| 가이드레일 3D 모델 | ExtrudeGeometry (C-채널 압출) | 2시간 |
|
||||
| 셔터박스 3D 모델 | BoxGeometry + 내부 부품 | 2시간 |
|
||||
| 슬랫 커튼 3D 모델 | 평면 메쉬 + 텍스처 | 1시간 |
|
||||
| 셔터 개폐 애니메이션 | 슬라이더 → 슬랫 위치 변경 | 1시간 |
|
||||
| 조명/투명도 패널 | 기존 auto-drawing 패널 재사용 | 30분 |
|
||||
|
||||
**산출물**: 파라미터 연동 3D 방화셔터 조립체 + 인터랙션
|
||||
|
||||
### Phase 4: 출력 + 프리셋 (4단계)
|
||||
|
||||
> **목표**: DXF/PNG 저장, 프리셋 관리, 완성도 향상
|
||||
|
||||
| 작업 | 상세 | 예상 |
|
||||
|------|------|------|
|
||||
| DXF 내보내기 | 기존 DXF 생성기 확장 | 1시간 |
|
||||
| PNG 내보내기 | SVG → Canvas → PNG | 30분 |
|
||||
| 3D 스크린샷 | Three.js renderer.domElement.toDataURL | 15분 |
|
||||
| 프리셋 저장/불러오기 | localStorage CRUD | 1시간 |
|
||||
| JSON 가져오기/내보내기 | 파일 업로드/다운로드 | 30분 |
|
||||
| UI 다듬기 | 반응형, 툴팁, 키보드 단축키 | 1시간 |
|
||||
|
||||
**산출물**: 완성된 방화셔터 도면생성 도구
|
||||
|
||||
---
|
||||
|
||||
## 6. UI/UX 설계
|
||||
|
||||
### 6.1 디자인 시스템
|
||||
|
||||
기존 자동도면 생성의 **다크 테마 (Space Theme)**를 그대로 이어간다.
|
||||
|
||||
| 요소 | 값 |
|
||||
|------|------|
|
||||
| 배경 | `#020617` (slate-950) |
|
||||
| 패널 | `rgba(15, 23, 42, 0.7)` + backdrop-blur |
|
||||
| 테두리 | `rgba(255, 255, 255, 0.1)` |
|
||||
| 강조색 | `#3b82f6` (blue-500) |
|
||||
| 텍스트 | `#f8fafc` (white) / `#94a3b8` (slate-400) |
|
||||
| 입력 필드 | `bg-slate-950/80` + `border-slate-800` |
|
||||
|
||||
### 6.2 반응형 레이아웃
|
||||
|
||||
```
|
||||
Desktop (1200px+): 2컬럼 (4:8 비율)
|
||||
Tablet (768-1199px): 1컬럼 (상: 파라미터, 하: 미리보기)
|
||||
Mobile: 지원 안 함 (최소 768px)
|
||||
```
|
||||
|
||||
### 6.3 인터랙션 흐름
|
||||
|
||||
```
|
||||
사용자 → 제품 유형 선택 (강판/스크린)
|
||||
→ 기본값 자동 적용
|
||||
→ 개구부 크기 입력
|
||||
→ 제작 치수/중량/모터 자동 계산
|
||||
|
||||
→ 가이드레일 탭 이동
|
||||
→ 파라미터 조정 (폭, 깊이, 두께 등)
|
||||
→ SVG 실시간 업데이트 (입력 즉시)
|
||||
→ 뷰 모드 전환 (횡단면/종단면/정면)
|
||||
→ DXF 다운로드 가능
|
||||
|
||||
→ 셔터박스 탭 이동
|
||||
→ 파라미터 조정
|
||||
→ SVG 실시간 업데이트
|
||||
→ 내부 부품 ON/OFF
|
||||
|
||||
→ 3D 탭 이동
|
||||
→ 전체 조립체 3D 뷰
|
||||
→ 셔터 개폐 애니메이션
|
||||
→ 스크린샷 저장
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 메뉴 등록
|
||||
|
||||
### 7.1 메뉴 위치
|
||||
|
||||
```
|
||||
R&D
|
||||
├── 대시보드
|
||||
├── 조직도 관리
|
||||
├── 중대재해처벌법 점검
|
||||
├── AI 견적
|
||||
├── 기획디자인
|
||||
├── 디자인 인사이트
|
||||
├── 사운드 로고 스튜디오
|
||||
├── CM송 제작
|
||||
├── 자동도면 생성 ← 기존
|
||||
└── 방화셔터 도면생성 ← 신규 (자동도면 하위에 배치)
|
||||
```
|
||||
|
||||
### 7.2 메뉴 등록 (tinker)
|
||||
|
||||
```php
|
||||
// 개발 서버
|
||||
App\Models\Commons\Menu::create([
|
||||
'tenant_id' => 1,
|
||||
'parent_id' => <R&D 메뉴 ID>,
|
||||
'name' => '방화셔터 도면생성',
|
||||
'url' => '/rd/fire-shutter-drawing',
|
||||
'icon' => 'shield',
|
||||
'sort_order' => <자동도면 다음 순서>,
|
||||
'is_active' => true,
|
||||
]);
|
||||
```
|
||||
|
||||
> **주의**: 메뉴 시더 실행 금지 — tinker로 수동 등록
|
||||
|
||||
---
|
||||
|
||||
## 8. 향후 확장 가능성
|
||||
|
||||
| 확장 | 설명 | 우선순위 |
|
||||
|------|------|---------|
|
||||
| **STL/OBJ 내보내기** | 3D 프린팅/CAD 호환 | 🟡 중요 |
|
||||
| **견적 연동** | 도면 파라미터 → 견적 자동 산출 | 🔴 필수 |
|
||||
| **제품 카탈로그 연동** | DB에서 제품별 기본 파라미터 로드 | 🟡 중요 |
|
||||
| **비교 모드** | 2개 설정을 나란히 비교 | 🟢 권장 |
|
||||
| **PDF 도면 출력** | A3/A4 도면 양식 포함 출력 | 🟡 중요 |
|
||||
| **설치 시뮬레이션** | 현장 사진 위에 3D 오버레이 | 🟢 권장 |
|
||||
|
||||
---
|
||||
|
||||
## 관련 문서
|
||||
|
||||
- `/home/aweso/sam/docs/features/academy/fire-shutter-image-prompts.md` — 방화셔터 이미지 프롬프트
|
||||
- `/home/aweso/sam/docs/samples/방화셔터_견적구조_인터뷰.md` — 견적 구조 인터뷰
|
||||
- `/home/aweso/sam/docs/features/quotes/README.md` — 견적 시스템 분석
|
||||
- `/home/aweso/sam/docs/projects/quotation/phase-1-5130-analysis/js-formulas.md` — 견적 수식 상세
|
||||
- `/home/aweso/sam/mng/resources/views/rd/auto-drawing/index.blade.php` — 기존 자동도면 생성
|
||||
|
||||
---
|
||||
|
||||
**최종 업데이트**: 2026-03-08
|
||||
Reference in New Issue
Block a user