sam-docs/plans/fire-shutter-drawing-generator-plan.md

방화셔터 도면생성 기능 기획서

작성일: 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)**으로 구현한다.

// 가이드레일 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