2efe56df70
- 가이드레일 단면도 + 셔터박스 단면도 + 3D 렌더링 4탭 구성 - 파라미터 기반 SVG 실시간 렌더링 + Three.js 3D 조립체 - 기존 자동도면 생성 아키텍처 확장 (순수 클라이언트 측) - 4단계 개발 계획: 가이드레일 → 셔터박스 → 3D → 출력/프리셋
30 KiB
30 KiB
방화셔터 도면생성 기능 기획서
작성일: 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가지:
- 횡단면도 (Cross-Section): 가이드레일을 위에서 본 단면 — 슬랫이 레일에 끼워진 형태
- 종단면도 (Longitudinal): 가이드레일을 측면에서 본 단면 — 앵커볼트 배치
- 정면도 (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가지:
- 정면 단면도: 케이스를 정면에서 본 내부 구조 (샤프트, 모터, 브래킷 위치)
- 측면 단면도: 케이스를 측면에서 본 단면 (깊이 방향, 슬랫 감김 단면)
- 하부 상세도: 슬랫 출구 부분 확대
렌더링 요소:
| 요소 | 색상 | 설명 |
|---|---|---|
| 케이스 외곽 | #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)**으로 구현한다.
// 가이드레일 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 상태 관리 객체
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 제품 유형별 기본값 매핑
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)
// 개발 서버
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