퀼 에디터 테이블 붙여넣기 기능 개선 보고서 | Nuuthang

Loading Services...

퀼 에디터 테이블 붙여넣기 기능 개선 보고서 | Nuuthang

퀼 에디터 테이블 붙여넣기 기능 개선 보고서

1. 상황 개요

현재 상태: 블로그 포스트 작성에 사용되는 퀼(Quill) 에디터에서 표(테이블)를 붙여넣으면 구조가 깨지고 텍스트만 남는 문제가 해결됨
배경 정보: 퀼 에디터는 기본적으로 테이블 요소를 지원하지 않아 엑셀이나 워드 등에서 복사한 표를 붙여넣으면 테이블 구조가 손실됨
주요 특징: HTML과 CSS를 활용해 테이블 구조를 보존하는 방식으로 문제를 해결함
예상과 실제: 기존에는 표 구조가 완전히 사라지고 텍스트만 남았으나, 개선 후에는 원본 표와 동일한 형태로 붙여넣기 가능해짐

2. 분석 및 관찰

주요 요인: 퀼 에디터의 기본 클립보드 핸들러가 테이블 구조를 지원하지 않는 것이 핵심 문제였음
쉬운 설명: 에디터가 다른 곳에서 복사한 표를 인식하지 못해서, 표의 '껍데기'는 버리고 '내용물'인 텍스트만 가져오는 상황이었습니다
일상 비유: 마치 과일 주스기가 과일의 껍질은 버리고 주스만 추출하는 것처럼, 에디터도 표의 구조(껍질)는 버리고 텍스트(주스)만 추출했던 상황입니다

3. 조치 사항 및 권장 사항

항목 1: HTML 블롯(Blot) 정의

무엇을: 퀼 에디터에 HTML 코드를 그대로 삽입할 수 있는 사용자 정의 블롯을 추가함
왜: 퀼이 기본적으로 지원하지 않는 HTML 요소(테이블 등)를 그대로 보존하기 위함
어떻게: HtmlBlot 클래스를 정의하고 퀼에 등록하여 HTML 내용을 보존하는 기능 구현
예시:

class HtmlBlot extends Quill.import('blots/block/embed') {
    static create(value) {
        let node = super.create();
        node.innerHTML = value;
        return node;
    }

    static value(node) {
        return node.innerHTML;
    }
}

HtmlBlot.blotName = 'html';
HtmlBlot.tagName = 'div';
HtmlBlot.className = 'ql-html-block';
Quill.register(HtmlBlot);

기대 효과: HTML 구조를 가진 콘텐츠를 에디터에 삽입했을 때 구조가 보존됨

항목 2: 클립보드 매처(Matcher) 추가

무엇을: 붙여넣기 시 테이블 요소를 감지하고 특별히 처리하는 로직 추가
왜: 테이블을 감지해 HTML 구조 그대로 삽입하기 위함
어떻게: addMatcher 메서드로 테이블 요소를 감지하고 처리하는 로직 구현
예시:

quill.clipboard.addMatcher(Node.ELEMENT_NODE, function(node, delta) {
    if (node.tagName === 'TABLE' || node.querySelector('table')) {
        const tableHtml = node.outerHTML || node.innerHTML;
        const tableWrapper = document.createElement('div');
        tableWrapper.className = 'table-container';
        tableWrapper.innerHTML = tableHtml;
        
        return new Delta().insert({
            'html': tableWrapper.outerHTML
        });
    }
    return delta;
});

기대 효과: 엑셀, 워드 등에서 복사한 테이블을 붙여넣으면 구조가 온전히 보존됨

항목 3: 테이블 스타일 추가

무엇을: 테이블을 보기 좋게 표시하기 위한 CSS 스타일 추가
왜: 구조만 보존해서는 보기 어렵기 때문에 가독성 좋은 디자인 적용
어떻게: 테이블 테두리, 셀 패딩, 헤더 스타일 등을 CSS로 정의
기대 효과: 붙여넣은 테이블이 깔끔하고 일관된 디자인으로 표시됨

항목 4: 다크모드 지원

무엇을: 다크모드에서도 테이블이 잘 보이도록 스타일 추가
왜: 다크모드 사용자도 테이블을 보기 좋게 표시하기 위함
어떻게: 다크모드 전용 CSS 스타일 추가
기대 효과: 다크모드에서도 테이블이 가독성 높게 표시됨

4. 핵심 개념 설명

개념 1: 퀼 에디터(Quill Editor)
쉬운 정의: 웹 페이지에서 사용할 수 있는 글쓰기 도구로, 워드나 한글과 같은 문서 작성 기능을 웹에서 제공합니다
일상 비유: 웹 페이지에 내장된 작은 워드 프로세서라고 생각하면 됩니다
중요성: 블로그 포스트 작성에 중요한 도구이며, 사용자 경험에 직접적 영향을 줍니다
개념 2: 블롯(Blot)
쉬운 정의: 퀼 에디터에서 텍스트, 이미지, 비디오 등 다양한 콘텐츠를 표현하는 기본 단위입니다
일상 비유: 레고 블록처럼 에디터 콘텐츠를 구성하는 각각의 부품입니다
중요성: 에디터에 새로운 기능을 추가하려면 커스텀 블롯을 만들어야 합니다
개념 3: 클립보드 매처(Clipboard Matcher)
쉬운 정의: 사용자가 복사해온 콘텐츠의 유형을 감지하고, 어떻게 처리할지 결정하는 규칙입니다
일상 비유: 우편물 분류기처럼 "이것은 표다, 이것은 코드다"라고 구분해주는 역할을 합니다
중요성: 복사-붙여넣기 기능의 품질을 결정하는 핵심 요소입니다
개념 4: 델타(Delta)
쉬운 정의: 퀼 에디터에서 문서의 변경사항을 표현하는 형식입니다
일상 비유: 변경 전후를 비교한 '차이점 기록장'이라고 볼 수 있습니다
중요성: 에디터의 모든 변경은 델타를 통해 처리되므로 새 기능 추가 시 델타 조작이 필수적입니다

5. 시사점 및 제안

주요 시사점: 오픈소스 라이브러리도 커스터마이징을 통해 기본 기능 외의 추가 기능을 구현할 수 있습니다
향후 고려사항:

테이블 편집 기능 추가 검토 (셀 병합, 행/열 추가 등)
대용량 테이블 붙여넣기 시 성능 최적화 필요
다른 복잡한 콘텐츠(예: 다이어그램, 차트)도 같은 방식으로 지원 가능한지 검토

추천 자료:

Quill.js 공식 문서 (https://quilljs.com/docs/)
Quill 커스텀 블롯 가이드 (https://quilljs.com/guides/cloning-medium-with-parchment/)

6. 요약

퀼 에디터에서 테이블 붙여넣기가 되지 않는 문제를 HTML 블롯과 클립보드 매처를 활용하여 해결했습니다. 이제 엑셀이나 워드에서 복사한 표를 에디터에 붙여넣으면 원래 구조 그대로 표시됩니다. 또한 테이블 스타일을 적용하여 가독성을 높였고, 다크모드에서도 잘 보이도록 했습니다. 이 개선으로 사용자들은 복잡한 표 형식의 데이터도 손쉽게 블로그에 포함시킬 수 있게 되었습니다.