95b9efbcc5
- 사이드바/Description 패널 접기/펼치기 기능 추가 - 캔버스 폭 자동 확장 (1100→1400px) 반영 - 이미지 블록 더블클릭 업로드 변경 반영 - 파일 줄 수 4,300→4,430줄 갱신 - 버전 v1.1 → v1.2 갱신
367 lines
14 KiB
Markdown
367 lines
14 KiB
Markdown
# 기획디자인 — 스토리보드 에디터
|
||
|
||
> **작성일**: 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
|