Quill 2.0 발표
We are thrilled to announce the release of Quill 2.0! 
드디어 2024년 4월, Quill의 Major 업데이트가 있었다. 큼직큼직한 기능 개선과 함께, 그동안 묵혀있던 이슈 160여 개가 수정되었다. 릴리즈 노트에서 스크롤을 엄청 내려야 할 지경이다.
약 5년 만의 업데이트다.
무려 2019년 9월에 마지막 Patch 업데이트가 있었으니 Quill 측에서 “thrilled” 이라는 표현을 쓸만하다.
주요 개선 사항들
1. 공식 TypeScript 선언
이전에는 TypeScript와 함께 사용하기 위해 @types/quill 패키지를 별도로 설치해야 했다. 이러한 경우, Quill의 실제 타입과 일치하지 않거나, Quill의 핵심 패키지와 동기화되지 않았다고 한다.
이제 2.0으로 업데이트 하면 타입을 소스에서 직접 가져올 수 있으며, 추가 패키지 설치를 해야 하는 번거로움과 오류 발생 가능성을 줄일 수 있다. 프로젝트에서 @types/quill 패키지를 제거하면, TypeScript가 Quill에서 타입 선언을 직접 자동으로 선택한다.
Quill이 TypeScript로 완전히 전환되면서 오류들을 더 빠르게 감지할 수 있을 것으로 기대된다.
2. 다중 레지스트리
종종 동일한 페이지 안에서 여러 개의 다른 편집기를 사용해야 하는 경우가 있다.
예를 들어, 하나의 페이지 안에 포스팅을 위한 편집기와 댓글 입력을 위한 편집기가 함께 있는 상황이라 치자. 그런데 포스팅을 위한 편집기 안에는 볼드, 이탤릭, 링크 형식 등을 지원하는 반면, 댓글 입력을 위한 편집기에는 별도의 기능이 없어도 되는 경우가 있다.
#3590 PR에 의하면 새로운 레지스트리 기능은 위와 같은 사용 사례를 가능하게 한다. 따라서 각각 다른 형식과 구성을 가진 여러 편집기가 충돌 없이 동일한 페이지에서 공존할 수 있게 되었다.
const registry = new Parchment.Registry();
// registry.register()로 편집기에 필요한 형식을 등록하면 된다.
const quill = new Quill('#editor', { // Quill 생성자에 registry 등록
registry,
// ... 다른 옵션들
})
JavaScript
복사
사용자 지정 레지스트리가 있는 편집기를 만든다면 위와 같이 Quill 생성자에 레지스트리 객체를 전달하면 된다.
3. 자동 스크롤 컨테이너 감지
이전에는 Quill 인스턴스를 생성할 때 편집기의 스크롤 컨테이너를 지정해야 했다. 그래야 사용자의 커서나 선택이 필요할 때 스크롤 될 수 있었다. 더불어, #2642 Issue처럼 특정 환경에서 여러 줄의 텍스트를 입력할 경우 편집기가 스크롤을 따라오지 못하면서 상단의 편집기가 보이지 않는 경우가 있었다고 한다. 때문에 사용자가 사용하기 매우 번거로웠을듯 하다.
이해가 어려울 수 있으니 화면으로 비포 애프터를 보자.
Before
이전 버전에서는 Quill이 스크롤을 자동으로 감지하지 못해, 사용자가 컨테이너에 넘치게 입력하는 경우 상단 편집기가 사라지는 경우가 있었다.
편집기가 사라짐
After
이제는 Quill이 스크롤 컨테이너를 자동으로 감지해, 컨테이너에 넘치게 입력해도 편집기가 상단에 고정된다. 긴 글이라도 사용자가 더욱 편리하게 작성할 수 있도록 할 수 있다.
편집기가 상단에 고정됨
이외에도 수평 스크롤 등으로 커스터마이징 할 수 있게 하거나, 테두리와 스크롤바 크기를 고려하여 동작할 수 있도록 개선했다고 한다.
4.InputEvent 사용
Quill의 주요 장점 중 하나는 DOM에 의존하지 않는 내부 관리 문서 모델이라는 것이다. Quill은 DOM 변경 사항을 수신하고 이를 내부 문서 모델로 정규화한다. 하지만 때때로 브라우저가 사용자 동작을 일관되게 또는 정확하게 처리하지 못하여 잘못된 DOM 변경 사항이 생성되기도 했다.
Quill 2.0에서는 최신 브라우저 기능인 InputEvent를 사용하여 진행한다. 사용자의 동작이 먼저 캡처되어 내부 문서 모델을 업데이트한 후, 결과 변경 사항을 DOM에 동기화하는 것이다.
정리: Quill의 동작 원리
Quill의 내부 문서 모델과 DOM
Quill은 독립적인 내부 문서 모델을 가지고 있고, 이는 사용자가 입력한 내용과 형식을 관리한다.
이 문서 모델에 따라 실제 DOM이 만들어진다.
브라우저의 불안정한 동작 문제
때때로 브라우저는 실수를 한다. 예를 들어 사용자가 빨간색으로 텍스트를 입력하면, Quill은 이를 문서 모델에 “빨간색 글자”로 기록한다.
그러나 브라우저는 때때로 이를 “빨간색 스타일을 가진 글꼴 요소”로 변경한다. 이것이 바로 Quill의 문서 모델과 일치하지 않는 문제다.
Quill 2.0의 해결 방법
Quill 2.0은 InputEvent을 사용해 사용자의 동작을 먼저 문서 모델에 기록한 후, 이를 실제 DOM에 반영한다. 즉, 사용자가 빨간색 텍스트를 입력하면, Quill은 이를 내부 문서 모델에 기록하고, 이를 기반으로 DOM을 업데이트한다.
이렇게 하면 브라우저가 실수를 하더라도 Quill의 문서 모델이 항상 정확하게 유지되므로, 일관된 편집 경험을 제공할 수 있다.
5. IME 및 맞춤법 검사기 개선
#3807 PR에 따르면 IME(Input Method Editor: 입력기)와 맞춤법 검사기를 개선했다고 한다. 여러가지 개선이 있었는데, 그 중에서도 조금 크리티컬했던 이슈 하나를 가져와 보았다.
이전에는 Quill이 미처 처리할 수 없는 예기치 못한 브라우저 오류가 발생하면, 아래와 같이 텍스트 대체 (text replacements) 기능이 제대로 작동하지 않는 경우가 있었다. (Issue #3375)
맞춤법 검사로 텍스트 대체를 하면 Quill이 이를 지워버렸던 이슈
만약 내가 Quill을 사용한 웹사이트를 운영 중인데, 엔드 유저에게 이러한 상황을 접하게 했다면 매우 당황스러웠을 것 같다. 단어와 문장이 통째로 없어지는 건 서비스 신뢰를 매우 떨어뜨리는 일이니까.
그래서 올라온 이슈 개수도 꽤 많았던 것 같다.
정리
이 외에도 이번 2.0 버전에 클립보드를 비롯한 여러 기능 업데이트가 이루어졌다.
라이브러리나 프레임워크의 기능 개선과 업데이트가 자주 이루어지면 이루어질수록 신뢰도도 올라가는 것 같다. 반면, Quill의 업데이트 소식은 너무 잠잠해서 신뢰가 떨어질 정도였다. 때문에 업데이트도 자주 이루어지고 커스텀 기능도 더 많은 Editor.js 등으로 마이그레이션 할까 고민했다.
하지만 이번 업데이트를 기점으로 Quill을 더 지켜보아도 좋을듯 하다.