플러그인: draw

플러그인 개요

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 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

초기화 및 이벤트 흐름

10.0.0부터 hook 도입으로 중앙 집중형에서 분산형으로 바뀌었습니다. 지금(10.5.1)에 editor.lib.php를 열어 플러그인 이름을 추가하는 단계는 존재하지 않습니다 — 그 파일은 43줄짜리 불변 부트스트랩이고 $plugin_priority 심볼이 0건입니다. 플러그인은 plugin/<id>/ 폴더에 파일을 두면 자동으로 로드되며, 로드 시점은 해당 플러그인의 hooks.js가 정합니다. 플러그인 개발 절차는 60-plugin-development-guide.md를 보십시오.

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

UI 요소와 스타일

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

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

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

테스트 포인트

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

AI agent 작업 규칙

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

참고 / 인용 / 비교 자료

• 기능 목록과 버전 히스토리: DSclub T2Editor 서비스 페이지
• 설치 및 오류 대처법: DSclub T2Editor 서비스 페이지 - 설치·오류 안내
• 라이선스 조항: DSclub T2Editor 서비스 페이지 - 라이선스 안내