그누보드 게시판에서 동영상 자막 활성화 방법

추측컨대, 그누보드의 보안 필터(`html_purifier`)가 `<track>` 태그를 걸러내고 있는 상황으로 보입니다. 그누보드 5.4는 사용자 입력값을 필터링할 때 `HTML Purifier`라는 라이브러리를 사용하는데, 이 라이브러리가 기본적으로 `<track>` 같은 비교적 최신의 HTML5 태그는 허용 목록에 포함시키지 않아서 발생하는 문제입니다.

---

### 🛠️ 해결 방법: \’html_purifier\’에 `<track>` 태그 허용하기

`/lib/common.lib.php` 파일에 있는 `html_purifier` 함수를 수정하여 `<track>` 태그를 허용 목록에 추가해야 합니다.

**방법 1: 직접 수정 (권장)**

1. FTP나 서버 파일 관리자로 접속해 `/lib/common.lib.php` 파일을 엽니다.
2. `function html_purifier($html){ ... }` 함수 내부를 찾습니다.
3. `$purifier = new HTMLPurifier($config);` 구문 바로 **위**에 다음 코드를 추가합니다.
    ```php
    // HTML5 태그인 video, track 등을 허용 목록에 추가
    $config->set('HTML.DefinitionID', 'html5-definitions');
    $config->set('HTML.DefinitionRev', 1);
    if ($def = $config->maybeGetRawHTMLDefinition()) {
        // 기존에 video 태그가 이미 정의되어 있을 수 있으니, 없을 경우에만 추가
        if (!$def->info['video']) {
            $def->addElement('video', 'Block', 'Optional: (source, Flow) | (Flow, source) | Flow', 'Common', array(
                'src' => 'URI',
                'type' => 'Text',
                'width' => 'Length',
                'height' => 'Length',
                'poster' => 'URI',
                'preload' => 'Enum#auto,metadata,none',
                'controls' => 'Bool',
            ));
        }
        // track 태그 정의 추가
        $def->addElement('track', 'Inline', 'Optional: (source, Flow) | (Flow, source) | Flow', 'Common', array(
            'src' => 'URI',
            'kind' => 'Text', // 'subtitles', 'captions' 등
            'srclang' => 'Text', // 언어 코드 (예: 'ko')
            'label' => 'Text', // 자막 이름 (예: 'Korean')
            'default' => 'Bool', // 기본 활성화 여부
        ));
    }
    ```

**방법 2: Hook 파일 사용**

코어 파일을 직접 수정하는 게 부담스럽다면, `hook` 기능을 이용할 수 있습니다.

1. 그누보드 루트에 `/hook` 디렉토리가 없다면 생성합니다.
2. `/hook` 디렉토리 안에 `html_purifier.config.sample.php` 파일을 만들고, 아래 코드를 붙여넣습니다.
    ```php
    <?php
    if (!defined('_GNUBOARD_')) exit;

    add_event('html_purifier_config', function($config) {
        $add_html_tag = $config->getHTMLDefinition(true);
        // track 태그 정의 추가
        $add_html_tag->addElement('track', 'Block', 'Flow', 'Common', [
            'src' => 'Text',
            'kind' => 'Text',
            'srclang' => 'Text',
            'label' => 'Text',
            'default' => 'Bool'
        ]);
    }, 1, 1);
    ```
3. 파일명을 `html_purifier.config.php`로 변경합니다.

---

### 🔍 추가 확인 사항

1. **textarea 이스케이프 문제**: 글을 작성할 때 `<textarea>` 내부에 HTML을 직접 입력하면, 브라우저가 `<`와 같은 문자를 `<` 같은 **HTML 엔티티로 변환**할 수 있습니다. 이 경우 `video`와 `track` 태그가 순수한 HTML로 인식되지 않습니다. 게시글 본문을 HTML 모드(소스 보기)로 확인하여 코드가 정상적인 태그로 출력되는지 꼭 체크하세요.

2. **브라우저 자체 문제**: `<track>` 태그가 제대로 작동하려면 **웹 서버**(Apache, Nginx)와 **웹 브라우저**(크롬, 엣지 등) 간의 통신 규약인 CORS 정책과 MIME 타입 설정이 올바르게 되어 있어야 합니다. 크롬 브라우저의 `개발자 도구(F12)` -> `Console`(콘솔) 탭에서 에러 메시지를 확인해보세요. 대표적인 에러는 다음과 같습니다.
    * **404 (Not Found)**: VTT 파일 경로가 잘못되었거나, 해당 위치에 파일이 존재하지 않습니다.
    * **CORS 정책 문제**: `No 'Access-Control-Allow-Origin' header is present on the requested resource.`라는 에러가 발생하면, 웹 서버 설정을 변경해야 합니다.
    * **MIME 타입 문제**: `Resource interpreted as TextTrack but transferred with MIME type text/plain` 같은 경고가 보인다면, 웹 서버가 VTT 파일의 MIME 타입을 `text/vtt`로 보내지 않을 때 발생합니다. `.htaccess` 파일이나 서버 설정에 `AddType text/vtt .vtt`를 추가하여 해결할 수 있습니다.

3. **표준 HTML 준수 여부**: `<video>` 태그 안에 `<track>` 태그가 올바르게 포함되어 있는지 확인하세요. 속성 중 `kind="subtitles"` 속성은 자막임을 명시하고, `srclang="ko"`은 언어를 나타내며 반드시 포함해야 합니다. 또한, `.vtt` 파일은 표준 형식을 지켜야 하며 반드시 **UTF-8 (BOM 없음)** 형식으로 저장되어야 합니다.

4. **대체 방법 고려**: HTML5 기본 `<track>` 태그 대신, JavaScript 기반의 **plyr.io** 또는 **video.js** 같은 동영상 플레이어 라이브러리를 사용하는 방법도 있습니다. 이런 라이브러리들은 더 다양한 자막 형식(SRT 등)을 지원하고, 더 풍부한 기능을 제공합니다.

---