권혁성
7a969b9d57
- .gitignore를 sam/ 기반에서 루트 기반으로 변경 - sam/docs/ 하위 문서를 루트로 이동 (contracts, features, guides, plans 등) - sam/ 폴더 삭제 (docker, coocon 포함)
158 lines
6.2 KiB
Markdown
158 lines
6.2 KiB
Markdown
# 기획디자인 스토리보드 에디터
|
|
|
|
> **시작일**: 2026-03-07
|
|
> **상태**: 🟢 v1.2 운영 중 (고도화 진행중)
|
|
> **경로**: MNG `/rd/planning-design`
|
|
> **담당**: Claude Code + 개발팀
|
|
|
|
---
|
|
|
|
## 1. 프로젝트 개요
|
|
|
|
### 1.1 배경
|
|
|
|
ERP 화면 기획서(스토리보드)를 PowerPoint나 Figma 없이 **SAM 관리자 웹 내에서 직접 설계**할 수 있는 도구가 필요했다. 기획자와 개발자가 같은 플랫폼에서 화면을 설계하고, 즉시 HTML/인쇄 출력까지 가능한 올인원 솔루션을 목표로 했다.
|
|
|
|
### 1.2 목표
|
|
|
|
- 브라우저 내 Notion/Figma 스타일 블록 에디터 구현
|
|
- ERP 스토리보드 표준 양식 (메뉴트리 + 와이어프레임 + Description) 지원
|
|
- 서버 API 없이 localStorage 기반 즉시 사용 가능
|
|
- HTML 내보내기 및 좌표 기반 WYSIWYG 인쇄
|
|
|
|
### 1.3 기술 스택
|
|
|
|
| 항목 | 선택 | 이유 |
|
|
|------|------|------|
|
|
| 프레임워크 | Alpine.js | 서버 없이 반응형 SPA, 기존 MNG 스택과 일치 |
|
|
| 캔버스 | DOM absolute positioning | Canvas API보다 접근성 좋고 텍스트 편집 용이 |
|
|
| 저장 | localStorage | 서버 API 불필요, 즉시 사용 가능 |
|
|
| 내보내기 | HTML 생성 + window.print() | 별도 라이브러리 없이 브라우저 내장 기능 활용 |
|
|
|
|
---
|
|
|
|
## 2. 구현 이력
|
|
|
|
### v1.0 — 기본 블록 에디터 (2026-03-07)
|
|
|
|
| 커밋 | 내용 |
|
|
|------|------|
|
|
| `063d8c61` | 스토리보드 블록 Undo/Redo 기능 (Ctrl+Z/Y, 50단계 히스토리) |
|
|
| `78c8f3f8` | 페이지 복사 기능 (블록 ID 재생성) |
|
|
| `a27d9921` | placeholder 색상 옅게 + italic 스타일 |
|
|
| `08cc866a` | 블록 툴바를 단위업무 상단으로 이동 (기획서 보기 방해 제거) |
|
|
| `20e5ab78` | 메뉴/캔버스 경계 드래그 리사이즈 (80~400px) |
|
|
| `7785dfed` | 올가미(마퀴) 다중 선택 + 그룹 이동/복사/삭제 |
|
|
| `ff373c71` | 올가미 선택 동작 수정 (캔버스 빈 영역 판별 개선) |
|
|
| `95cd217c` | Ctrl+X 잘라내기 기능 (단일/다중) |
|
|
| `f4131df0` | Ctrl+X 후 Ctrl+Z 복구 수정 (히스토리 인덱스 보정) |
|
|
| `8ff84e7f` | Description 패널 리사이즈 + 번호 마커 블록 (D&D/툴바) |
|
|
| `ac5ae6eb` | 좌표 기반 인쇄 + HTML 내보내기 블록 좌표 배치 |
|
|
|
|
### v1.1 — 서식 시스템 (2026-03-08)
|
|
|
|
| 커밋 | 내용 |
|
|
|------|------|
|
|
| `dfbbd3a1` | 플로팅 서식 툴바 + 우클릭 컨텍스트 메뉴 추가 |
|
|
| `280bfddb` | 블록 서식 CSS 상속 수정 (자식 요소 color inherit) |
|
|
|
|
### v1.2 — 작업 영역 극대화 (2026-03-08)
|
|
|
|
| 커밋 | 내용 |
|
|
|------|------|
|
|
| `5e0f1a63` | 좌측 사이드바 접기/펼치기 버튼 추가 |
|
|
| `f1202731` | 메뉴트리/Description 패널 접기/펼치기 + 캔버스 폭 자동 확장 (1100→1400px) |
|
|
| `a38c017c` | 이미지 블록 업로드를 더블클릭으로 변경 (드래그 중 파일 창 오픈 방지) |
|
|
|
|
---
|
|
|
|
## 3. 현재 기능 목록
|
|
|
|
### 3.1 블록 유형 (15종)
|
|
|
|
| 분류 | 유형 |
|
|
|------|------|
|
|
| 텍스트 | Heading (H1), Heading2 (H2), Text, Code |
|
|
| 레이아웃 | Divider, Callout |
|
|
| 데이터 | Table |
|
|
| UI 모형 | Button, Input, Select, Card, Badges |
|
|
| 미디어 | Image, Marker (번호 뱃지) |
|
|
| 체크 | Todo (체크리스트) |
|
|
|
|
### 3.2 편집 기능
|
|
|
|
- 자유 배치 캔버스 (드래그 이동, 핸들 리사이즈)
|
|
- 올가미 다중 선택 + 그룹 이동/복사/삭제
|
|
- Undo/Redo (50단계)
|
|
- 복사/붙여넣기/잘라내기 (Ctrl+C/V/X)
|
|
- 전체 선택 (Ctrl+A)
|
|
- 더블클릭 인라인 편집 (contenteditable)
|
|
- 이미지 블록 더블클릭 업로드 (드래그 충돌 방지)
|
|
|
|
### 3.3 서식 시스템
|
|
|
|
- 플로팅 서식 툴바: 글자색, 배경색, 크기, 굵기, 기울임, 정렬, z-index
|
|
- 우클릭 컨텍스트 메뉴: 복제/잘라내기/삭제/색상/정렬/레이어/서식 초기화
|
|
|
|
### 3.4 문서 관리
|
|
|
|
- 멀티 페이지 (추가/복사/삭제/이동)
|
|
- ERP 메뉴 트리 편집 (드래그 순서 변경)
|
|
- Description 패널 (기능 설명 + 번호 마커 D&D)
|
|
- 프리셋/커스텀 템플릿
|
|
|
|
### 3.6 작업 영역 극대화
|
|
|
|
- 좌측 사이드바(메뉴트리) 접기/펼치기 토글
|
|
- Description 패널 접기/펼치기 토글 바
|
|
- 패널 접힘 시 캔버스 폭 자동 확장 (1100px → 1400px)
|
|
- sb-editor 패딩 축소 (24px → 12px)
|
|
|
|
### 3.5 출력
|
|
|
|
- HTML 파일 내보내기 (좌표 기반 WYSIWYG)
|
|
- 인쇄 미리보기 (A4 Landscape, 페이지 분할)
|
|
|
|
---
|
|
|
|
## 4. 향후 로드맵
|
|
|
|
| 우선순위 | 기능 | 설명 | 상태 |
|
|
|---------|------|------|------|
|
|
| 🔴 필수 | DB 저장 | localStorage → DB 전환 (협업, 용량 해결) | ⚪ 대기 |
|
|
| 🔴 필수 | 스냅/그리드 정렬 | 블록 간 자석 가이드라인 | ⚪ 대기 |
|
|
| 🟡 중요 | 그룹핑 | 여러 블록을 하나의 그룹으로 묶기/풀기 | ⚪ 대기 |
|
|
| 🟡 중요 | 레이어 패널 | z-index 순서를 시각적으로 관리 | ⚪ 대기 |
|
|
| 🟡 중요 | 리치 텍스트 | 블록 내 부분 텍스트 서식 (인라인 B/I/색상) | ⚪ 대기 |
|
|
| 🟢 권장 | PDF 내보내기 | 서버사이드 PDF 생성 | ⚪ 대기 |
|
|
| 🟢 권장 | 버전 관리 | 명시적 스냅샷 저장 및 비교 | ⚪ 대기 |
|
|
| 🟢 권장 | 공유 링크 | 읽기 전용 공유 URL 생성 | ⚪ 대기 |
|
|
|
|
---
|
|
|
|
## 5. 기술적 특이사항
|
|
|
|
### 5.1 단일 파일 아키텍처
|
|
|
|
모든 CSS + HTML + JavaScript가 `index.blade.php` 하나에 포함 (~4,430줄). 서버 API가 없고 localStorage만 사용하므로, 컨트롤러는 뷰만 반환한다.
|
|
|
|
### 5.2 CSS 스타일 상속 문제
|
|
|
|
블록 자식 요소에 하드코딩된 `color`가 있어 부모의 인라인 스타일이 무시되는 문제를 CSS attribute selector(`[style*="color"]`)로 해결했다. 향후 블록 유형 추가 시 inherit 규칙도 함께 추가해야 한다.
|
|
|
|
### 5.3 localStorage 용량 한계
|
|
|
|
이미지를 base64 Data URL로 저장하므로 대량 사용 시 5~10MB 한계에 도달할 수 있다. DB 저장 전환이 중장기 과제.
|
|
|
|
---
|
|
|
|
## 6. 관련 문서
|
|
|
|
- [기술 스펙](../../features/rd/planning-design.md) — 데이터 구조, 블록 유형, CSS 상속 상세
|
|
- [R&D 메뉴 개요](../../features/rd/README.md) — R&D 전체 메뉴 구조
|
|
- [프로젝트 인덱스](../index_projects.md) — 전체 프로젝트 목록
|
|
|
|
---
|
|
|
|
**최종 업데이트**: 2026-03-08
|