이 계획서는 브라우저에서 인디자인이나 캔바와 같은 출판 경험을 제공할 수 있도록 매거진 편집기의 고급 기능(페이지 확대, 판형별 자동 생성, 프레임 텍스트 연결 및 자동 흐름, 도형 주변 텍스트 흐름, 문자 단위 스타일 편집 툴팁)을 구현하기 위한 세부 계획입니다.

제안된 변경 사항

1. 편집기 캔버스 확대(Zoom) 및 자동 페이지 생성

다양한 모니터 화면에서 작업하기 편리하도록 기본 편집 페이지의 크기를 화면에 차게 1.5배(150%) 더 확대하여 렌더링하고, 우측 상단 툴바에 배율 선택 드롭다운(100%, 120%, 150%, 180%, 200%)을 추가합니다.

  • CSS transform: scale()을 사용하여 캔버스를 확대할 때 스크롤바가 정상적으로 작동할 수 있도록 #canvasFrame을 #canvasScaleContainer로 감쌉니다.
  • 드래그(Drag), 크기 조절(Resize), 라쏘 선택(Lasso Select) 시 마우스 좌표 계산식에 확대 배율(window.editorZoom)을 반영하여, 확대/축소 상태에서도 요소 편집이 정확하게 작동하도록 좌표 계산 코드를 보정합니다.
  • 매거진 초기 생성 시, 기존에 생성된 페이지가 없다면 설정된 전체 페이지 수(magazine_page_count)만큼 판형(A4, A5 등) 크기에 맞게 자동으로 빈 페이지들을 생성합니다.

2. 스타일 유지가 가능한 본문 프레임 연결 및 자동 흐름 (Rich HTML Reflow Chain)

  • 본문 텍스트 프레임이 넘쳐 다음 프레임으로 연결될 때, 글자 굵기, 색상, 소제목 스타일 등이 유실되지 않도록 HTML 태그 기반의 텍스트 배분 알고리즘(Token-based HTML Splitting)을 적용합니다.
  • HTML 텍스트를 태그(<strong>, <span> 등)와 일반 텍스트 문자로 분리하고, 프레임 경계에서 잘린 열린 태그들을 자동으로 닫고 다음 프레임 시작에 열어주어 스타일이 유실되지 않도록 연결합니다.
  • 전체 연결된 텍스트의 HTML 원본을 가장 첫 번째 프레임(Head Frame)의 data-chain-html 속성에 저장하여 원본 서식이 보존되도록 처리합니다.

3. 도형 프레임 주변의 본문 텍스트 흐름 (Text Wrap around Shape Frames)

  • 도형 속성 패널에 "프레임 고정 (도형 주변으로 본문 흐름)" 체크박스를 추가합니다.
  • 도형의 위치를 조정하거나 크기를 바꿀 때(mouseup 이벤트 시) 및 텍스트 자동 흐름이 계산될 때, 도형과 본문 텍스트 레이어의 중첩 영역을 계산합니다.
  • 중첩 영역 크기만큼의 Float Spacer(CSS float 속성을 가진 빈 div)를 본문 텍스트 안에 동적으로 삽입하여 글자들이 도형 주변을 자연스럽게 피해 흐르도록 구현합니다. 원형 도형의 경우 CSS shape-outside: circle(50%)을 지정하여 텍스트가 둥글게 감싸며 흐르도록 합니다.

4. 문자 단위 서식 편집 (인라인 편집 및 툴팁 팝업)

  • 본문 텍스트 프레임을 더블클릭하면 해당 프레임이 바로 편집 가능한 상태(contentEditable = true)가 되도록 전환합니다.
  • 텍스트 영역 내부에서 마우스로 범위를 지정(드래그)하면, 선택 영역 바로 위에 서식 편집용 툴팁 팝업(#text-style-tooltip)이 표시되도록 합니다.
  • 툴팁에는 다음과 같은 단추들을 구성합니다:
    • 굵게 (Bold) / 기울임 (Italic) / 밑줄 (Underline)
    • 글자 색상 (Color Picker)
    • 글자 크기 드롭다운 (12px ~ 36px)
    • 스타일 템플릿 (소제목, 강조 등)
  • 편집이 끝나고 프레임 외부를 클릭하여 포커스를 잃으면(blur), 자동으로 전체 HTML을 병합하고 다음 연결 프레임들로 텍스트를 다시 흐르게 한 뒤 상태를 저장합니다.
  • 개별 문자 서식은 글자 자체에 style 속성으로 적용되므로, 나중에 전체 텍스트 레이어의 기본 글꼴이나 글자 크기를 변경하더라도 개별 지정된 글자 속성은 유지됩니다.

[Views Component]

[MODIFY] 

  • #canvasFrame을 #canvasScaleContainer 내부로 감싸는 구조 변경.
  • 인라인 편집용 클래스, 스타일 툴팁 UI 및 텍스트 흐름을 위한 CSS 정의 추가.
  • 상단 툴바에 Zoom(배율) 드롭다운 메뉴 추가 및 setZoom() 함수 구현.
  • DOMContentLoaded 핸들러에서 초기 페이지 자동 생성 및 기본 1.5배 줌 초기화 적용.
  • 페이지 넘버 표시 영역 아래에 개별 [새 페이지 추가] 및 [페이지 삭제] 버튼 삽입.
  • HTML 토큰 구조 기반의 새로운 reflowText 함수 구현.
  • 도형과의 겹침 영역을 계산하고 float spacer를 주입하는 adjustTextWrap() 함수 추가.
  • mouseup 시점에 도형의 프레임 고정 상태에 맞춰 주변 본문을 갱신하는 트리거 바인딩.
  • 본문 더블클릭 시 편집 모드 활성화 및 선택 영역 감지 기반의 #text-style-tooltip 툴팁 표시 제어 바인딩.
  • 도형 속성 패널 내 "프레임 고정 (도형 주변으로 본문 흐름)" 체크박스 HTML 삽입 및 속성 저장 로직 연동.

검증 계획 (Verification Plan)

수동 검증

  1. 페이지 초기화: 새 매거진을 열었을 때 설정한 판형으로 1.5배 기본 확대된 페이지들이 깔끔하게 노출되는지 확인.
  2. 텍스트 프레임 연결 흐름: 긴 텍스트를 입력하고 여러 개의 본문 프레임을 연결하였을 때 텍스트가 잘 나뉘어 흐르는지 확인. 소제목 서식을 지정한 텍스트가 다음 프레임으로 밀려나더라도 소제목 서식이 그대로 적용되어 있는지 확인.
  3. 도형 주변 흐름: 사각형 및 원형 도형을 본문 텍스트 위에 얹고 "프레임 고정"을 켰을 때 텍스트가 도형 가장자리를 피해서 흘러가는지 확인.
  4. 인라인 스타일 유지: 특정 텍스트 블록을 드래그하여 글자 크기, 굵기, 색상을 수정한 후 전체 레이어의 폰트를 바꾸어도 개별 지정된 개성 있는 글자 스타일이 그대로 보존되는지 확인.