Files

김보곤 95b9efbcc5 docs: [planning-design] v1.2 작업 영역 극대화 기능 문서 업데이트

- 사이드바/Description 패널 접기/펼치기 기능 추가
- 캔버스 폭 자동 확장 (1100→1400px) 반영
- 이미지 블록 더블클릭 업로드 변경 반영
- 파일 줄 수 4,300→4,430줄 갱신
- 버전 v1.1 → v1.2 갱신

2026-03-08 09:30:14 +09:00

6.2 KiB

Raw Blame History

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

시작일: 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. 관련 문서

기술 스펙 — 데이터 구조, 블록 유형, CSS 상속 상세
R&D 메뉴 개요 — R&D 전체 메뉴 구조
프로젝트 인덱스 — 전체 프로젝트 목록

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

6.2 KiB Raw Blame History