sam-docs/sam/docs/features/rd/planning-design.md

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

작성일: 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)

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

3.2 페이지 (Page)

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

3.3 블록 (Block)

{
  "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 규칙을 적용하여 상속한다.

/* 부모에 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 메뉴 개요 — R&D 전체 메뉴 구조
• MNG 구조 — MNG 관리자 패널 전체 구조

---

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