🔐로그인하면 문서 작성, 프로젝트 게시, ZIP 기반 버전 업로드, 브랜치 생성 기능을 사용할 수 있습니다. 로그인하러 가기
플러그인: draw

리비전 비교

⎇ main ← 이력
비교 대상 선택
추가 0줄 삭제 0줄 변경 0줄 동일 142줄
r1 파일 가져오기: plugin-draw.md
2026-04-17 14:54

플러그인 개요

draw 플러그인은 T2Editor의 기본 설치에 포함되는 확장 모듈로, 특정 기능을 에디터에 추가하거나 사용자 경험을 향상시키기 위해 제공됩니다. 본 문서는 플러그인의 역할과 동작 방식을 초보자와 일반 웹마스터도 이해할 수 있도록 설명하고, 전문 개발자를 위한 내부 구조와 확장 포인트를 상세히 제공합니다.

초보자와 웹마스터를 위한 기능 설명

이 섹션에서는 플러그인의 주요 기능과 사용법을 쉽게 설명합니다. 각 플러그인은 툴바 버튼이나 단축키를 통해 호출되며, 파일이나 미디어를 삽입하고, 콘텐츠를 포맷하고, 검색과 협업을 지원합니다.

  • 주요 역할: 플러그인이 어떤 기능을 사용자에게 제공하는지 요약합니다. 예를 들어, image 플러그인은 이미지 업로드와 미리보기, 크기 조절을 지원하며, search 플러그인은 에디터 내 검색과 T2Search API 연동을 제공합니다.
  • 사용 시나리오: 플러그인을 언제 사용해야 하는지, 어떤 메뉴나 버튼에서 접근하는지 설명합니다.
  • 권한 및 설정: 플러그인이 파일 업로드를 수행하는 경우, 서버의 /data 또는 /collab 디렉터리에 적절한 권한(707)을 부여해야 합니다.

초보자는 플러그인의 코드를 수정할 필요 없이, 제공되는 설정과 기본 동작을 활용해 에디터를 사용할 수 있습니다.

전문 개발자를 위한 구조 분석

파일 구조

  • JavaScript: 9.0.0/t2editor/plugin/draw/draw.js
  • CSS: 9.0.0/t2editor/plugin/draw/draw.css

내부 메서드

플러그인의 자바스크립트 파일에는 다음과 같은 주요 메서드들이 정의되어 있습니다. 각 메서드는 클래스 내부에서 특정 이벤트를 처리하거나 사용자 인터랙션에 응답합니다.

  • clearCanvas(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • closeModal(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • createMoveControls(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • createPlaceholderBlock(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • fillWhiteBackground(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • handleCancel(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • handleCommand(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • initializeDrawingBlocks(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • insertPlaceholderAtCursor(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • loadExistingImage(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • loadFromHistory(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • moveBlock(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • onContentSet(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • openDrawingModal(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • redo(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • resetContext(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • saveHistory(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • setupCanvas(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • setupDrawingBlockEvents(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • setupDrawingEvents(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • setupEventListeners(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • undo(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • updateBrushPreviews(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • updateDrawingBlock(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • updateHistoryButtons(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

초기화 및 이벤트 흐름

플러그인은 에디터 초기화 과정에서 editor.lib.php에 등록됩니다. 플러그인 등록 순서는 editor.lib.php의 $plugin_priority 배열에서 지정할 수 있으며, 0은 즉시 로드, 1·2·3은 지연 로드를 의미합니다.

플러그인의 초기화 함수는 에디터가 준비된 시점에 호출되며, 필요한 UI 요소를 생성하고 이벤트 리스너를 바인딩합니다. 각 메서드는 사용자 입력이나 명령 실행 시 동작하므로, 수정 시에는 호출 관계를 잘 파악해야 합니다.

UI 요소와 스타일

플러그인의 CSS 파일은 해당 플러그인이 제공하는 UI 컴포넌트의 스타일을 정의합니다. 예를 들어 버튼, 모달 창, 툴바 아이콘 등의 디자인을 지정합니다. 스타일을 수정할 때에는 core.css 및 dark.css와의 충돌을 방지하고, 스킨을 사용하는 경우 스킨에서 재정의할 수 있는 구조를 따라야 합니다.

확장 포인트 및 안전한 수정 방법

  • 새로운 기능을 추가하려면 플러그인의 JS 클래스에 메서드를 추가하고, 버튼과 커맨드를 툴바 설정에 연결해야 합니다.
  • 기존 기능을 수정할 때에는 입력 값과 상태 변화를 면밀히 추적하고, 다른 플러그인에 미치는 영향을 검토해야 합니다.
  • 플러그인의 CSS 수정 시, 클래스 명은 가능한 한 고유하게 유지하고 core 스타일을 오버라이드하지 않도록 주의하세요.

테스트 포인트

  • 플러그인 설치 후 브라우저 콘솔에 오류 메시지가 없는지 확인합니다.
  • 다양한 브라우저와 기기에서 UI가 깨지지 않는지 점검합니다.
  • 플러그인 기능이 다른 플러그인과 충돌하지 않고 제대로 작동하는지 테스트합니다.

AI agent 작업 규칙

  • AI agent는 플러그인 코드를 수정할 때 반드시 이 문서와 관련된 코어 파일 문서를 먼저 읽어야 합니다.
  • Stable Anchor로 표시된 구조를 기반으로 수정하면 버전 간 안정성을 높일 수 있습니다.
  • Version-Bound로 표시된 부분은 버전 업데이트 시 변경될 수 있으므로, 수정 전 최신 문서를 확인하세요.

참고 / 인용 / 비교 자료

r1 파일 가져오기: plugin-draw.md
2026-04-17 14:54

플러그인 개요

draw 플러그인은 T2Editor의 기본 설치에 포함되는 확장 모듈로, 특정 기능을 에디터에 추가하거나 사용자 경험을 향상시키기 위해 제공됩니다. 본 문서는 플러그인의 역할과 동작 방식을 초보자와 일반 웹마스터도 이해할 수 있도록 설명하고, 전문 개발자를 위한 내부 구조와 확장 포인트를 상세히 제공합니다.

초보자와 웹마스터를 위한 기능 설명

이 섹션에서는 플러그인의 주요 기능과 사용법을 쉽게 설명합니다. 각 플러그인은 툴바 버튼이나 단축키를 통해 호출되며, 파일이나 미디어를 삽입하고, 콘텐츠를 포맷하고, 검색과 협업을 지원합니다.

  • 주요 역할: 플러그인이 어떤 기능을 사용자에게 제공하는지 요약합니다. 예를 들어, image 플러그인은 이미지 업로드와 미리보기, 크기 조절을 지원하며, search 플러그인은 에디터 내 검색과 T2Search API 연동을 제공합니다.
  • 사용 시나리오: 플러그인을 언제 사용해야 하는지, 어떤 메뉴나 버튼에서 접근하는지 설명합니다.
  • 권한 및 설정: 플러그인이 파일 업로드를 수행하는 경우, 서버의 /data 또는 /collab 디렉터리에 적절한 권한(707)을 부여해야 합니다.

초보자는 플러그인의 코드를 수정할 필요 없이, 제공되는 설정과 기본 동작을 활용해 에디터를 사용할 수 있습니다.

전문 개발자를 위한 구조 분석

파일 구조

  • JavaScript: 9.0.0/t2editor/plugin/draw/draw.js
  • CSS: 9.0.0/t2editor/plugin/draw/draw.css

내부 메서드

플러그인의 자바스크립트 파일에는 다음과 같은 주요 메서드들이 정의되어 있습니다. 각 메서드는 클래스 내부에서 특정 이벤트를 처리하거나 사용자 인터랙션에 응답합니다.

  • clearCanvas(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • closeModal(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • createMoveControls(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • createPlaceholderBlock(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • fillWhiteBackground(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • handleCancel(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • handleCommand(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • initializeDrawingBlocks(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • insertPlaceholderAtCursor(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • loadExistingImage(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • loadFromHistory(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • moveBlock(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • onContentSet(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • openDrawingModal(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • redo(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • resetContext(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • saveHistory(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • setupCanvas(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • setupDrawingBlockEvents(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • setupDrawingEvents(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • setupEventListeners(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • undo(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • updateBrushPreviews(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • updateDrawingBlock(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
  • updateHistoryButtons(): 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

초기화 및 이벤트 흐름

플러그인은 에디터 초기화 과정에서 editor.lib.php에 등록됩니다. 플러그인 등록 순서는 editor.lib.php의 $plugin_priority 배열에서 지정할 수 있으며, 0은 즉시 로드, 1·2·3은 지연 로드를 의미합니다.

플러그인의 초기화 함수는 에디터가 준비된 시점에 호출되며, 필요한 UI 요소를 생성하고 이벤트 리스너를 바인딩합니다. 각 메서드는 사용자 입력이나 명령 실행 시 동작하므로, 수정 시에는 호출 관계를 잘 파악해야 합니다.

UI 요소와 스타일

플러그인의 CSS 파일은 해당 플러그인이 제공하는 UI 컴포넌트의 스타일을 정의합니다. 예를 들어 버튼, 모달 창, 툴바 아이콘 등의 디자인을 지정합니다. 스타일을 수정할 때에는 core.css 및 dark.css와의 충돌을 방지하고, 스킨을 사용하는 경우 스킨에서 재정의할 수 있는 구조를 따라야 합니다.

확장 포인트 및 안전한 수정 방법

  • 새로운 기능을 추가하려면 플러그인의 JS 클래스에 메서드를 추가하고, 버튼과 커맨드를 툴바 설정에 연결해야 합니다.
  • 기존 기능을 수정할 때에는 입력 값과 상태 변화를 면밀히 추적하고, 다른 플러그인에 미치는 영향을 검토해야 합니다.
  • 플러그인의 CSS 수정 시, 클래스 명은 가능한 한 고유하게 유지하고 core 스타일을 오버라이드하지 않도록 주의하세요.

테스트 포인트

  • 플러그인 설치 후 브라우저 콘솔에 오류 메시지가 없는지 확인합니다.
  • 다양한 브라우저와 기기에서 UI가 깨지지 않는지 점검합니다.
  • 플러그인 기능이 다른 플러그인과 충돌하지 않고 제대로 작동하는지 테스트합니다.

AI agent 작업 규칙

  • AI agent는 플러그인 코드를 수정할 때 반드시 이 문서와 관련된 코어 파일 문서를 먼저 읽어야 합니다.
  • Stable Anchor로 표시된 구조를 기반으로 수정하면 버전 간 안정성을 높일 수 있습니다.
  • Version-Bound로 표시된 부분은 버전 업데이트 시 변경될 수 있으므로, 수정 전 최신 문서를 확인하세요.

참고 / 인용 / 비교 자료

라인 단위 비교
이전 새 버전
1 --- 1 ---
2 title: 플러그인: draw 2 title: 플러그인: draw
3 document_id: plugin-draw 3 document_id: plugin-draw
4 slug: plugin-draw 4 slug: plugin-draw
5 target_editor_version: 9.0.0 5 target_editor_version: 9.0.0
6 document_type: plugin 6 document_type: plugin
7 doc_type: plugin 7 doc_type: plugin
8 target_readers: [초보자, 웹마스터, 개발자, AI agent] 8 target_readers: [초보자, 웹마스터, 개발자, AI agent]
9 importance: High 9 importance: High
10 dependency: Medium 10 dependency: Medium
11 core_type: Plugin 11 core_type: Plugin
12 stability: [Stable Anchor, Version-Bound] 12 stability: [Stable Anchor, Version-Bound]
13 stable_anchor: [] 13 stable_anchor: []
14 version_bound: [] 14 version_bound: []
15 related_docs: [] 15 related_docs: []
16 related_files: [9.0.0/t2editor/plugin/draw/draw.js, 9.0.0/t2editor/plugin/draw/draw.css] 16 related_files: [9.0.0/t2editor/plugin/draw/draw.js, 9.0.0/t2editor/plugin/draw/draw.css]
17 related_functions: [clearCanvas, closeModal, createMoveControls, createPlaceholderBlock, fillWhiteBackground, handleCancel, handleCommand, initializeDrawingBlocks, insertPlaceholderAtCursor, loadExistingImage, loadFromHistory, moveBlock, onContentSet, openDrawingModal, redo, resetContext, saveHistory, setupCanvas, setupDrawingBlockEvents, setupDrawingEvents, setupEventListeners, undo, updateBrushPreviews, updateDrawingBlock, updateHistoryButtons] 17 related_functions: [clearCanvas, closeModal, createMoveControls, createPlaceholderBlock, fillWhiteBackground, handleCancel, handleCommand, initializeDrawingBlocks, insertPlaceholderAtCursor, loadExistingImage, loadFromHistory, moveBlock, onContentSet, openDrawingModal, redo, resetContext, saveHistory, setupCanvas, setupDrawingBlockEvents, setupDrawingEvents, setupEventListeners, undo, updateBrushPreviews, updateDrawingBlock, updateHistoryButtons]
18 related_classes_modules: [] 18 related_classes_modules: []
19 related_features: [] 19 related_features: []
20 related_ui: [] 20 related_ui: []
21 change_risk: 수정 범위를 넓게 잡으면 관련 기능과 문서 흐름에 영향이 생길 수 있습니다. 21 change_risk: 수정 범위를 넓게 잡으면 관련 기능과 문서 흐름에 영향이 생길 수 있습니다.
22 reading_order: 40 22 reading_order: 40
23 summary: T2Editor draw 플러그인의 역할과 사용 방법을 설명하는 문서 문서 23 summary: T2Editor draw 플러그인의 역할과 사용 방법을 설명하는 문서 문서
24 description: T2Editor draw 플러그인의 역할과 사용 방법을 설명하는 문서 24 description: T2Editor draw 플러그인의 역할과 사용 방법을 설명하는 문서
25 tags: [T2Editor, plugin, draw] 25 tags: [T2Editor, plugin, draw]
26 version_tag: 9.0.0 26 version_tag: 9.0.0
27 maintenance_difficulty: Medium 27 maintenance_difficulty: Medium
28 test_requirement: Medium 28 test_requirement: Medium
29 ai_agent_risk: Medium 29 ai_agent_risk: Medium
30 source_basis: [현재 코드 분석 기반, 웹 참고 자료 기반] 30 source_basis: [현재 코드 분석 기반, 웹 참고 자료 기반]
31 beginner_section_included: true 31 beginner_section_included: true
32 webmaster_section_included: true 32 webmaster_section_included: true
33 developer_section_included: true 33 developer_section_included: true
34 --- 34 ---
35 ## 플러그인 개요 35 ## 플러그인 개요
36   36  
37 draw 플러그인은 T2Editor의 기본 설치에 포함되는 확장 모듈로, 특정 기능을 에디터에 추가하거나 사용자 경험을 향상시키기 위해 제공됩니다. 본 문서는 플러그인의 역할과 동작 방식을 초보자와 일반 웹마스터도 이해할 수 있도록 설명하고, 전문 개발자를 위한 내부 구조와 확장 포인트를 상세히 제공합니다. 37 draw 플러그인은 T2Editor의 기본 설치에 포함되는 확장 모듈로, 특정 기능을 에디터에 추가하거나 사용자 경험을 향상시키기 위해 제공됩니다. 본 문서는 플러그인의 역할과 동작 방식을 초보자와 일반 웹마스터도 이해할 수 있도록 설명하고, 전문 개발자를 위한 내부 구조와 확장 포인트를 상세히 제공합니다.
38   38  
39 ## 초보자와 웹마스터를 위한 기능 설명 39 ## 초보자와 웹마스터를 위한 기능 설명
40   40  
41 이 섹션에서는 플러그인의 주요 기능과 사용법을 쉽게 설명합니다. 각 플러그인은 툴바 버튼이나 단축키를 통해 호출되며, 파일이나 미디어를 삽입하고, 콘텐츠를 포맷하고, 검색과 협업을 지원합니다. 41 이 섹션에서는 플러그인의 주요 기능과 사용법을 쉽게 설명합니다. 각 플러그인은 툴바 버튼이나 단축키를 통해 호출되며, 파일이나 미디어를 삽입하고, 콘텐츠를 포맷하고, 검색과 협업을 지원합니다.
42   42  
43 * **주요 역할**: 플러그인이 어떤 기능을 사용자에게 제공하는지 요약합니다. 예를 들어, image 플러그인은 이미지 업로드와 미리보기, 크기 조절을 지원하며, search 플러그인은 에디터 내 검색과 T2Search API 연동을 제공합니다. 43 * **주요 역할**: 플러그인이 어떤 기능을 사용자에게 제공하는지 요약합니다. 예를 들어, image 플러그인은 이미지 업로드와 미리보기, 크기 조절을 지원하며, search 플러그인은 에디터 내 검색과 T2Search API 연동을 제공합니다.
44 * **사용 시나리오**: 플러그인을 언제 사용해야 하는지, 어떤 메뉴나 버튼에서 접근하는지 설명합니다. 44 * **사용 시나리오**: 플러그인을 언제 사용해야 하는지, 어떤 메뉴나 버튼에서 접근하는지 설명합니다.
45 * **권한 및 설정**: 플러그인이 파일 업로드를 수행하는 경우, 서버의 `/data` 또는 `/collab` 디렉터리에 적절한 권한(707)을 부여해야 합니다. 45 * **권한 및 설정**: 플러그인이 파일 업로드를 수행하는 경우, 서버의 `/data` 또는 `/collab` 디렉터리에 적절한 권한(707)을 부여해야 합니다.
46   46  
47 초보자는 플러그인의 코드를 수정할 필요 없이, 제공되는 설정과 기본 동작을 활용해 에디터를 사용할 수 있습니다. 47 초보자는 플러그인의 코드를 수정할 필요 없이, 제공되는 설정과 기본 동작을 활용해 에디터를 사용할 수 있습니다.
48   48  
49 ## 전문 개발자를 위한 구조 분석 49 ## 전문 개발자를 위한 구조 분석
50   50  
51 ### 파일 구조 51 ### 파일 구조
52   52  
53 - JavaScript: `9.0.0/t2editor/plugin/draw/draw.js` 53 - JavaScript: `9.0.0/t2editor/plugin/draw/draw.js`
54 - CSS: `9.0.0/t2editor/plugin/draw/draw.css` 54 - CSS: `9.0.0/t2editor/plugin/draw/draw.css`
55   55  
56 ### 내부 메서드 56 ### 내부 메서드
57 플러그인의 자바스크립트 파일에는 다음과 같은 주요 메서드들이 정의되어 있습니다. 각 메서드는 클래스 내부에서 특정 이벤트를 처리하거나 사용자 인터랙션에 응답합니다. 57 플러그인의 자바스크립트 파일에는 다음과 같은 주요 메서드들이 정의되어 있습니다. 각 메서드는 클래스 내부에서 특정 이벤트를 처리하거나 사용자 인터랙션에 응답합니다.
58   58  
59 - **clearCanvas()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 59 - **clearCanvas()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
60   60  
61 - **closeModal()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 61 - **closeModal()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
62   62  
63 - **createMoveControls()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 63 - **createMoveControls()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
64   64  
65 - **createPlaceholderBlock()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 65 - **createPlaceholderBlock()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
66   66  
67 - **fillWhiteBackground()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 67 - **fillWhiteBackground()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
68   68  
69 - **handleCancel()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 69 - **handleCancel()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
70   70  
71 - **handleCommand()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 71 - **handleCommand()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
72   72  
73 - **initializeDrawingBlocks()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 73 - **initializeDrawingBlocks()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
74   74  
75 - **insertPlaceholderAtCursor()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 75 - **insertPlaceholderAtCursor()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
76   76  
77 - **loadExistingImage()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 77 - **loadExistingImage()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
78   78  
79 - **loadFromHistory()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 79 - **loadFromHistory()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
80   80  
81 - **moveBlock()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 81 - **moveBlock()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
82   82  
83 - **onContentSet()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 83 - **onContentSet()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
84   84  
85 - **openDrawingModal()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 85 - **openDrawingModal()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
86   86  
87 - **redo()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 87 - **redo()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
88   88  
89 - **resetContext()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 89 - **resetContext()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
90   90  
91 - **saveHistory()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 91 - **saveHistory()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
92   92  
93 - **setupCanvas()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 93 - **setupCanvas()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
94   94  
95 - **setupDrawingBlockEvents()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 95 - **setupDrawingBlockEvents()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
96   96  
97 - **setupDrawingEvents()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 97 - **setupDrawingEvents()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
98   98  
99 - **setupEventListeners()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 99 - **setupEventListeners()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
100   100  
101 - **undo()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 101 - **undo()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
102   102  
103 - **updateBrushPreviews()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 103 - **updateBrushPreviews()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
104   104  
105 - **updateDrawingBlock()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 105 - **updateDrawingBlock()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
106   106  
107 - **updateHistoryButtons()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다. 107 - **updateHistoryButtons()**: 이 메서드는 draw 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.
108   108  
109   109  
110 ### 초기화 및 이벤트 흐름 110 ### 초기화 및 이벤트 흐름
111   111  
112 플러그인은 에디터 초기화 과정에서 `editor.lib.php`에 등록됩니다. 플러그인 등록 순서는 `editor.lib.php`의 `$plugin_priority` 배열에서 지정할 수 있으며, 0은 즉시 로드, 1·2·3은 지연 로드를 의미합니다. 112 플러그인은 에디터 초기화 과정에서 `editor.lib.php`에 등록됩니다. 플러그인 등록 순서는 `editor.lib.php`의 `$plugin_priority` 배열에서 지정할 수 있으며, 0은 즉시 로드, 1·2·3은 지연 로드를 의미합니다.
113   113  
114 플러그인의 초기화 함수는 에디터가 준비된 시점에 호출되며, 필요한 UI 요소를 생성하고 이벤트 리스너를 바인딩합니다. 각 메서드는 사용자 입력이나 명령 실행 시 동작하므로, 수정 시에는 호출 관계를 잘 파악해야 합니다. 114 플러그인의 초기화 함수는 에디터가 준비된 시점에 호출되며, 필요한 UI 요소를 생성하고 이벤트 리스너를 바인딩합니다. 각 메서드는 사용자 입력이나 명령 실행 시 동작하므로, 수정 시에는 호출 관계를 잘 파악해야 합니다.
115   115  
116 ### UI 요소와 스타일 116 ### UI 요소와 스타일
117   117  
118 플러그인의 CSS 파일은 해당 플러그인이 제공하는 UI 컴포넌트의 스타일을 정의합니다. 예를 들어 버튼, 모달 창, 툴바 아이콘 등의 디자인을 지정합니다. 스타일을 수정할 때에는 core.css 및 dark.css와의 충돌을 방지하고, 스킨을 사용하는 경우 스킨에서 재정의할 수 있는 구조를 따라야 합니다. 118 플러그인의 CSS 파일은 해당 플러그인이 제공하는 UI 컴포넌트의 스타일을 정의합니다. 예를 들어 버튼, 모달 창, 툴바 아이콘 등의 디자인을 지정합니다. 스타일을 수정할 때에는 core.css 및 dark.css와의 충돌을 방지하고, 스킨을 사용하는 경우 스킨에서 재정의할 수 있는 구조를 따라야 합니다.
119   119  
120 ### 확장 포인트 및 안전한 수정 방법 120 ### 확장 포인트 및 안전한 수정 방법
121   121  
122 - 새로운 기능을 추가하려면 플러그인의 JS 클래스에 메서드를 추가하고, 버튼과 커맨드를 툴바 설정에 연결해야 합니다. 122 - 새로운 기능을 추가하려면 플러그인의 JS 클래스에 메서드를 추가하고, 버튼과 커맨드를 툴바 설정에 연결해야 합니다.
123 - 기존 기능을 수정할 때에는 입력 값과 상태 변화를 면밀히 추적하고, 다른 플러그인에 미치는 영향을 검토해야 합니다. 123 - 기존 기능을 수정할 때에는 입력 값과 상태 변화를 면밀히 추적하고, 다른 플러그인에 미치는 영향을 검토해야 합니다.
124 - 플러그인의 CSS 수정 시, 클래스 명은 가능한 한 고유하게 유지하고 core 스타일을 오버라이드하지 않도록 주의하세요. 124 - 플러그인의 CSS 수정 시, 클래스 명은 가능한 한 고유하게 유지하고 core 스타일을 오버라이드하지 않도록 주의하세요.
125   125  
126 ### 테스트 포인트 126 ### 테스트 포인트
127   127  
128 - 플러그인 설치 후 브라우저 콘솔에 오류 메시지가 없는지 확인합니다. 128 - 플러그인 설치 후 브라우저 콘솔에 오류 메시지가 없는지 확인합니다.
129 - 다양한 브라우저와 기기에서 UI가 깨지지 않는지 점검합니다. 129 - 다양한 브라우저와 기기에서 UI가 깨지지 않는지 점검합니다.
130 - 플러그인 기능이 다른 플러그인과 충돌하지 않고 제대로 작동하는지 테스트합니다. 130 - 플러그인 기능이 다른 플러그인과 충돌하지 않고 제대로 작동하는지 테스트합니다.
131   131  
132 ### AI agent 작업 규칙 132 ### AI agent 작업 규칙
133   133  
134 - AI agent는 플러그인 코드를 수정할 때 반드시 이 문서와 관련된 코어 파일 문서를 먼저 읽어야 합니다. 134 - AI agent는 플러그인 코드를 수정할 때 반드시 이 문서와 관련된 코어 파일 문서를 먼저 읽어야 합니다.
135 - Stable Anchor로 표시된 구조를 기반으로 수정하면 버전 간 안정성을 높일 수 있습니다. 135 - Stable Anchor로 표시된 구조를 기반으로 수정하면 버전 간 안정성을 높일 수 있습니다.
136 - Version-Bound로 표시된 부분은 버전 업데이트 시 변경될 수 있으므로, 수정 전 최신 문서를 확인하세요. 136 - Version-Bound로 표시된 부분은 버전 업데이트 시 변경될 수 있으므로, 수정 전 최신 문서를 확인하세요.
137   137  
138 ## 참고 / 인용 / 비교 자료 138 ## 참고 / 인용 / 비교 자료
139   139  
140 - 기능 목록과 버전 히스토리: [DSclub T2Editor 서비스 페이지](https://dsclub.kr/service/editor) 140 - 기능 목록과 버전 히스토리: [DSclub T2Editor 서비스 페이지](https://dsclub.kr/service/editor)
141 - 설치 및 오류 대처법: [DSclub T2Editor 서비스 페이지 - 설치·오류 안내](https://dsclub.kr/service/editor) 141 - 설치 및 오류 대처법: [DSclub T2Editor 서비스 페이지 - 설치·오류 안내](https://dsclub.kr/service/editor)
142 - 라이선스 조항: [DSclub T2Editor 서비스 페이지 - 라이선스 안내](https://dsclub.kr/service/editor) 142 - 라이선스 조항: [DSclub T2Editor 서비스 페이지 - 라이선스 안내](https://dsclub.kr/service/editor)
T2WIKI · 기술 통합 위키 & 프로젝트 허브 · 나무위키 + Markdown 완벽 지원 · SQLite · PHP 8.2 · 소개 · 문법 안내