# 기획디자인 — 스토리보드 에디터

> **작성일**: 2026-03-08
> **상태**: 운영 중
> **경로**: `/rd/planning-design`
> **뷰 파일**: `resources/views/rd/planning-design/index.blade.php`

---

## 1. 개요

### 1.1 목적

ERP 화면 기획서(스토리보드)를 **브라우저 내에서 직접 설계**하는 Notion/Figma 스타일의 블록 에디터. 별도 소프트웨어 없이 화면 와이어프레임, Description, 메뉴 트리를 작성하고 HTML 내보내기 및 인쇄까지 지원한다.

### 1.2 핵심 특징

| 항목 | 설명 |
|------|------|
| **프레임워크** | Alpine.js 단일 파일 SPA (서버 API 없음) |
| **저장 방식** | localStorage (`pc_projects` 키) |
| **블록 에디터** | 자유 배치 캔버스 (absolute positioning) |
| **서식 시스템** | 블록별 글자색/배경색/크기/굵기/정렬/z-index |
| **내보내기** | HTML 파일 다운로드 + 좌표 기반 인쇄 (A4 Landscape) |

---

## 2. 화면 구조

```
┌──────────────────────────────────────────────────────────┐
│  프로젝트 툴바 (프로젝트명, 저장, 내보내기, 인쇄)          │
├──────────────────────────────────────────────────────────┤
│  블록 툴바 (H1, H2, 텍스트, 테이블, 콜아웃, ... 번호마커)  │
├──────────────────────────────────────────────────────────┤
│  문서 정보 바 (단위업무명, 버전, 페이지 네비)               │
├────┬─────────────────────────────────────────────────────┤
│    │  페이지 헤더 (경로, 화면명, 화면ID)                    │
│ 메 │ ┌─────────────────────────────────────────────────┐ │
│ 뉴 │ │  캔버스 (자유 배치 블록 영역)                      │ │
│ 트 │ │    ┌──────┐  ┌────────────┐  ┌──────┐          │ │
│ 리 │ │    │ H1   │  │  테이블     │  │ 01   │          │ │
│    │ │    └──────┘  └────────────┘  └──────┘          │ │
│ ◀▶ │ │                                                 │ │
│ 리 │ └─────────────────────────────────────────────────┘ │
│ 사 ├─────────────────────────────────────────────────────┤
│ 이 │  Description 패널 (기능 설명 목록, 번호 뱃지 D&D)     │
│ 저 │   01  로그인 후 3초 내 전사 현황 표시                  │
│    │   02  실시간 수주 데이터 연동                          │
├────┴─────────────────────────────────────────────────────┤
│  [플로팅 서식 툴바]  B I ☰ A □ 13px ▲▼ ↺                  │
│  [우클릭 컨텍스트 메뉴]  복제/잘라내기/삭제/색상/정렬/레이어  │
└──────────────────────────────────────────────────────────┘
```

### 2.1 리사이저

| 경계 | 방향 | 범위 |
|------|------|------|
| 메뉴 ↔ 캔버스 | 좌우 (col-resize) | 80px ~ 400px |
| 캔버스 ↔ Description | 상하 (row-resize) | 60px ~ 500px |

---

## 3. 데이터 구조

### 3.1 프로젝트 (localStorage: `pc_projects`)

```json
{
  "sb": {
    "docInfo": {
      "projectName": "SAM ERP",
      "unitTask": "품질관리",
      "version": "D1.0"
    },
    "menuTree": [
      { "name": "대시보드", "children": [] },
      { "name": "품질관리", "children": [
        { "name": "제품검사관리" }
      ]}
    ],
    "pages": [ /* Page[] */ ],
    "currentPageIndex": 0
  }
}
```

### 3.2 페이지 (Page)

```json
{
  "id": "sp_1709856000000_a1b2",
  "path": "품질관리 > 제품검사관리",
  "screenName": "제품검사 목록",
  "screenId": "QM-001",
  "blocks": [ /* Block[] */ ],
  "descriptions": [
    { "text": "검색 조건 입력 후 조회 버튼 클릭" }
  ]
}
```

### 3.3 블록 (Block)

```json
{
  "id": "blk_1709856000000_x3y",
  "type": "text",
  "content": "텍스트 내용",
  "x": 16,
  "y": 100,
  "w": 340,
  "h": 50,
  "style": {
    "fontColor": "#ef4444",
    "bgColor": "#fef2f2",
    "fontSize": 14,
    "bold": true,
    "italic": false,
    "textAlign": "center",
    "zIndex": 11
  }
}
```

### 3.4 블록 유형

| type | 설명 | 기본 크기 (W x H) | 고유 속성 |
|------|------|-------------------|----------|
| `heading` | 제목 (H1) | 400 x 40 | `content` |
| `heading2` | 소제목 (H2) | 350 x 36 | `content` |
| `text` | 텍스트 | 340 x 50 | `content` |
| `divider` | 구분선 | 400 x 20 | — |
| `callout` | 콜아웃 박스 | 240 x 60 | `content`, `icon` |
| `code` | 코드 블록 | 400 x 80 | `content` |
| `table` | 테이블 | 500 x 140 | `cols[]`, `rows[][]` |
| `button` | 버튼 모형 | 240 x 50 | `content`, `color` |
| `input` | 입력필드 모형 | 240 x 70 | `label`, `placeholder` |
| `select` | 셀렉트 모형 | 240 x 70 | `label`, `placeholder` |
| `card` | 카드 모형 | 300 x 90 | `title`, `content` |
| `badges` | 뱃지 모음 | 350 x 50 | `items[{text, color, textColor}]` |
| `todo` | 체크리스트 | 300 x 80 | `items[{text, checked}]` |
| `image` | 이미지 | 400 x 200 | `src` (base64 Data URL) |
| `marker` | 번호 마커 | 32 x 32 | `content` (01, 02, ...) |

### 3.5 블록 스타일 (style 객체)

| 속성 | 타입 | 기본값 | 설명 |
|------|------|--------|------|
| `fontColor` | string | — | 글자색 (CSS color) |
| `bgColor` | string | — | 배경색 (CSS color) |
| `fontSize` | number | 13 | 글자 크기 (px) |
| `bold` | boolean | false | 굵게 |
| `italic` | boolean | false | 기울임 |
| `textAlign` | string | `'left'` | 정렬 (`left`, `center`, `right`) |
| `zIndex` | number | 10 | 레이어 순서 (높을수록 앞) |

---

## 4. 기능 상세

### 4.1 블록 조작

| 기능 | 조작 방법 |
|------|----------|
| 블록 추가 | 상단 블록 툴바에서 유형 클릭 |
| 블록 선택 | 클릭 (단일), 올가미 드래그 (다중) |
| 블록 이동 | 드래그 앤 드롭 (단일/다중) |
| 블록 리사이즈 | 선택 후 우측/하단/우하단 핸들 드래그 |
| 블록 편집 | 더블클릭 → contenteditable 활성화 |
| 이미지 업로드 | 이미지 블록 더블클릭 → 파일 선택 (드래그 충돌 방지) |
| 블록 복제 | 우상단 ⧉ 버튼 또는 Ctrl+C → Ctrl+V |
| 블록 삭제 | 우상단 × 버튼 또는 Delete 키 |
| 블록 잘라내기 | Ctrl+X |

### 4.2 다중 선택 (올가미)

| 단계 | 동작 |
|------|------|
| 1 | 빈 캔버스 영역에서 마우스 드래그 시작 |
| 2 | 보라색 점선 사각형(lasso rect) 표시 |
| 3 | 마우스 놓으면 사각형과 겹치는 블록 전부 선택 (주황 테두리) |
| 4 | 선택된 블록 그룹을 드래그/복사/삭제 가능 |
| Ctrl+A | 전체 블록 선택 |

### 4.3 서식 설정

#### 플로팅 서식 툴바 (블록 선택 시 위에 나타남)

```
[ B ] [ I ] | [ ☰ ] [ ≡ ] [ ≡ ] | [ A▾ ] [ □▾ ] | [ 13px▾ ] | [ ▲ ] [ ▼ ] | [ ↺ ]
 굵게  기울임   좌   가운데  우    글자색   배경색    크기      앞으로 뒤로   초기화
```

- 글자색 / 배경색: 클릭 시 12색 팔레트 드롭다운
- 글자 크기: 10px ~ 24px 선택 드롭다운
- 앞으로/뒤로: z-index 증감 (레이어 순서)

#### 우클릭 컨텍스트 메뉴

블록에서 마우스 오른쪽 버튼 클릭 시 표시:

| 메뉴 항목 | 단축키 | 설명 |
|----------|--------|------|
| 복제 | Ctrl+C → V | 블록 복사 + 즉시 붙여넣기 |
| 잘라내기 | Ctrl+X | 클립보드에 복사 후 삭제 |
| 삭제 | Del | 블록 삭제 |
| 글자색 ▸ | — | 12색 팔레트 서브메뉴 |
| 배경색 ▸ | — | 12색 팔레트 서브메뉴 |
| 왼쪽/가운데/오른쪽 정렬 | — | 텍스트 정렬 |
| 앞으로 가져오기 | — | z-index +1 |
| 뒤로 보내기 | — | z-index -1 |
| 굵게 / 기울임 | — | 토글 |
| 서식 초기화 | — | 모든 style 속성 제거 |

### 4.4 키보드 단축키

| 단축키 | 기능 |
|--------|------|
| `Ctrl+Z` | 실행 취소 (Undo) |
| `Ctrl+Y` | 다시 실행 (Redo) |
| `Ctrl+C` | 블록 복사 (단일/다중) |
| `Ctrl+V` | 블록 붙여넣기 |
| `Ctrl+X` | 블록 잘라내기 |
| `Ctrl+A` | 전체 블록 선택 |
| `Ctrl+S` | 프로젝트 저장 |
| `Delete` / `Backspace` | 선택된 블록 삭제 |

### 4.5 번호 마커 (Description 연동)

| 입력 방식 | 설명 |
|----------|------|
| 블록 툴바 입력 | 번호 입력 후 "번호" 버튼 클릭 → 캔버스에 마커 추가 (자동 증가) |
| Description 드래그 | Description 번호 뱃지를 캔버스로 드래그 앤 드롭 |

### 4.6 페이지 관리

| 기능 | 설명 |
|------|------|
| 페이지 추가 | + 버튼으로 새 페이지 생성 |
| 페이지 복사 | 현재 페이지 통째로 복제 (블록 ID 재생성) |
| 페이지 삭제 | 마지막 1페이지는 삭제 불가 |
| 페이지 이동 | ◀ ▶ 버튼으로 전환 |

### 4.7 Undo/Redo

- 최대 50단계 히스토리 유지
- 블록 추가/삭제/이동/리사이즈/서식 변경 모두 스냅샷 저장
- 히스토리 분기: 중간 상태에서 새 작업 시 이후 히스토리 폐기

### 4.8 작업 영역 극대화

| 기능 | 설명 |
|------|------|
| 사이드바 접기 | 좌측 패널 탭 바의 `<<` 버튼 → 메뉴트리 패널 숨김 |
| 사이드바 펼치기 | 좌측 가장자리 `>` 버튼 → 메뉴트리 패널 복원 |
| Description 접기 | Description 영역 상단 토글 바 클릭 → 패널 숨김 |
| 캔버스 폭 자동 확장 | 사이드바 접힘 시 페이지 폭 1100px → 1400px |
| 패딩 축소 | sb-editor padding 24px → 12px |

### 4.9 템플릿 시스템

| 유형 | 설명 |
|------|------|
| 프리셋 | 검색+목록, 상세 폼, CRUD, 대시보드 카드 등 기본 레이아웃 |
| 커스텀 | 현재 페이지 블록을 템플릿으로 저장 (localStorage: `sb_custom_templates`) |

---

## 5. 내보내기 & 인쇄

### 5.1 HTML 내보내기 (`sbExportHtml`)

- 모든 페이지를 단일 HTML 파일로 출력
- 블록은 **좌표 기반 absolute positioning**으로 배치 (WYSIWYG)
- 블록 스타일(글자색, 배경색, 크기 등) 반영
- `@media print` CSS 포함 → 브라우저 인쇄 지원

### 5.2 인쇄 미리보기 (`sbPrintPreview`)

- 새 창에서 인쇄 미리보기 HTML 생성
- A4 Landscape, 8mm 마진
- `window.print()` 자동 호출
- 페이지별 `page-break-after: always`

---

## 6. CSS 스타일 상속 구조

블록 컨테이너(`.sb-block`)에 인라인 스타일로 서식을 적용하고, 자식 요소에 `inherit` 규칙을 적용하여 상속한다.

```css
/* 부모에 color가 설정된 경우 자식에게 상속 */
.sb-block[style*="color"] .sb-blk-text,
.sb-block[style*="color"] .sb-blk-heading { color: inherit; }

/* font-size, font-weight, font-style, text-align 동일 패턴 */
```

> **배경**: 자식 요소(`.sb-blk-text`, `.sb-blk-heading` 등)에 하드코딩된 `color: #334155` 등이 있어, 단순히 부모에 `color`를 설정하면 CSS 우선순위에 의해 무시된다. `[style*="color"]` attribute selector로 부모에 인라인 스타일이 존재할 때만 `inherit`를 활성화한다.

---

## 7. 기술적 주의사항

### 7.1 저장 용량

- localStorage 제한: 브라우저별 약 5~10MB
- 이미지를 base64 Data URL로 저장하므로 다수의 이미지 사용 시 용량 초과 가능
- 향후 서버 저장(DB) 전환 검토 필요

### 7.2 Alpine.js 반응성

- 블록 데이터는 Alpine.js 반응형 객체로 관리
- `style` 속성은 `sbEnsureStyle(blk)`로 객체 초기화 후 속성 설정
- 배열 조작(`splice`, `push`)은 Alpine.js가 자동 감지

### 7.3 좌표 시스템

| 항목 | 단위 | 기준 |
|------|------|------|
| `blk.x`, `blk.y` | px | 캔버스 좌상단 (0,0) |
| `blk.w`, `blk.h` | px | 블록 폭/높이 |
| 드래그 계산 | clientX/Y + scroll offset | 뷰포트 → 캔버스 좌표 변환 |
| 올가미 | 캔버스 내부 좌표 | scroll 보정 포함 |

---

## 8. 파일 구조

```
mng/
├── app/Http/Controllers/
│   └── RdController.php                     ← planningDesign() 메서드 (L308)
└── resources/views/rd/planning-design/
    └── index.blade.php                      ← 전체 CSS + HTML + Alpine.js (~4,430줄)
```

> **단일 파일 구조**: 이 기능은 서버 API가 없으며, 모든 CSS/HTML/JS가 `index.blade.php` 하나에 포함된다. Alpine.js `x-data` 객체 내에 모든 상태와 메서드가 정의되어 있다.

---

## 9. 향후 확장 가능성

| 기능 | 설명 | 우선순위 |
|------|------|---------|
| 스냅/그리드 정렬 | 블록 간 자석 가이드라인 | 높음 |
| 그룹핑 | 여러 블록을 하나의 그룹으로 묶기 | 중간 |
| 레이어 패널 | z-index 순서를 시각적으로 관리 | 중간 |
| DB 저장 | localStorage → DB 전환 (협업 지원) | 높음 |
| PDF 내보내기 | 직접 PDF 생성 | 낮음 |
| 리치 텍스트 | 블록 내 부분 텍스트 서식 (인라인 B/I/색상) | 중간 |
| 스냅샷/버전 관리 | 명시적 버전 저장 및 비교 | 낮음 |
| 이미지 드래그 업로드 | 외부 이미지를 캔버스로 드래그 앤 드롭 | 낮음 |

---

## 10. 관련 문서

- [R&D 메뉴 개요](README.md) — R&D 전체 메뉴 구조
- [MNG 구조](../../system/mng-structure.md) — MNG 관리자 패널 전체 구조

---

**최종 업데이트**: 2026-03-08