Quill v2 리치 텍스트 편집기 출시

 (quilljs.com)
2P by GN⁺ | ★ favorite | 댓글 1개
  • Quill 2.0은 현대 웹에서 쓸 수 있는 무료 오픈소스 WYSIWYG 편집기로, 리치 텍스트 편집 기능을 제품에 직접 넣을 수 있게 함
  • 모듈형 아키텍처와 표현력 있는 API를 기반으로, 기본 코어에서 시작해 요구 사항에 맞게 편집기를 커스터마이즈할 수 있음
  • 개발자는 편집기 콘텐츠, 변경 사항, 이벤트에 세밀하게 접근할 수 있고, 입력과 출력에 JSON을 사용해 일관적인 동작을 기대할 수 있음
  • 데스크톱, 태블릿, 휴대폰의 최신 브라우저를 지원하며, 플랫폼 전반에서 같은 동작과 생성 HTML을 제공하는 것을 목표로 함
  • 작은 프로젝트부터 Fortune 500 기업까지 적용 범위를 넓힐 수 있어, 단순한 편집기 도입 후 제품 성장에 맞춰 확장하기 좋음

Quill 2.0과 시작 방법

  • Quill 2.0이 출시됐으며, 별도 발표 글에서 릴리스 내용을 확인할 수 있음: Quill 2.0 is released!
  • Quill은 현대 웹을 위해 만들어진 무료 오픈소스 WYSIWYG 편집기임
  • 기본 예시는 CDN에서 quill.snow.css와 quill.js를 불러온 뒤 new Quill('#editor', ...)로 편집기를 생성함
    • 예시 버전은 quill@2.0.3
    • modules.toolbar에 #toolbar를 지정하고 theme은 snow를 사용함
  • 브라우저 개발자 콘솔에서 API를 직접 시험해볼 수 있음

커스터마이징과 적용 범위

  • Quill은 모듈형 아키텍처와 API를 통해 요구 사항에 맞게 편집기를 조정할 수 있음
  • 개발자는 간단한 API로 편집기 콘텐츠, 변경 사항, 이벤트에 세밀하게 접근 가능함
  • 입력과 출력 모두 JSON을 사용해 일관적이고 결정적인 동작을 제공함
  • 데스크톱, 태블릿, 휴대폰의 최신 브라우저를 지원하며, 플랫폼 간 동일한 동작과 생성 HTML을 제공함
  • 작은 프로젝트와 Fortune 500 기업 모두에서 사용할 수 있고, Quill core로 시작한 뒤 필요에 따라 커스터마이즈하거나 확장을 추가할 수 있음
  • GitHub Star 수는 47,204로 표시됨

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 이전 직장에서 사용자가 Quill 텍스트 상자에 서식 있는 텍스트를 입력하고, 이를 데이터베이스에 Delta 형식으로 저장하는 시스템을 만든 적이 있음
    나중에 다른 팀원이 그 내용을 InDesign 플러그인으로 가져와 Quill에서 적용된 서식을 읽고 InDesign 쪽 스타일로 다시 적용했음
    신문 법적 공고를 프런트 직원이 입력하면 제작팀이 InDesign으로 인쇄용 작업을 넘기는 흐름이었고, 대부분의 편집기처럼 HTML을 저장했다면 훨씬 어려웠을 작업을 Quill Delta 형식이 크게 쉽게 만들어 줬음
    몇 년간 Quill을 듣거나 써보지 못했는데 아직 살아 있어서 반가움

  • 릴리스 노트: https://github.com/quilljs/quill/releases/tag/v2.0.0
    발표 글: https://slab.com/blog/announcing-quill-2-0/
    Quill을 꽤 많이 써봤는데 통합이 쉽고, JSON Delta 형식도 꽤 괜찮으며 구조도 단순한 편임
    다만 쓸 때마다 “그냥 ProseMirror를 써야 하나?”라는 생각이 듦
    빠르게 편집 기능이 필요할 때는 Quill이 좋은 임시 해법이지만, 그 기능의 요구사항이 커지면 언젠가 마이그레이션 계획이 필요하다고 계속 머릿속으로 계산하게 됨

    • 제출 링크를 [1]로 바꿀 수 있으면 좋겠음. 실제로는 새 버전에 관한 내용이기 때문임
      한편으로는 왜 서식 있는 텍스트 편집기를 표준화할 수 없는지 가끔 궁금해짐
      [1] https://slab.com/blog/announcing-quill-2-0/
    • ProseMirror를 살펴보는 중인데, 주로 이를 잘 감싸주는 듯한 tiptap2를 통해 보고 있음
      하지만 실제로 넘어가는 건 부담스럽고, 다른 사람들의 경험이 궁금함
    • 직장에서 서식 있는 텍스트 편집을 구현해야 해서 여러 선택지를 검토했고, Quill도 초기에 살펴본 후보 중 하나였지만 결국 ProseMirror를 선택했음
      선택한 이유는 매우 저수준이라는 점과 방대한 문서화였고, 약간 D3가 떠오르는 느낌이었음
      이후 커스텀 노드, 커스텀 명령, 커스텀 툴바를 만들고 Markdown 및 커스텀 Markdown 플러그인과 통합했으며, 약간의 접착 코드만 있으면 Vue와도 꽤 깔끔하게 붙음
      지금까지는 ProseMirror를 고른 선택에 매우 만족함

  • 텍스트 편집기에서 Return 키를 어떻게 처리해야 하는지에 대해 지나치게 강한 의견을 가진 게 이상한 건지 모르겠음
    일반 텍스트에서 Return은 새 줄이고, 서식 있는 텍스트에서 Return은 새 문단이어야 함
    새 줄을 원하면 Shift+Return을 쓰면 됨
    예전 버전에서는 이게 큰 문제였고, 지금은 이 동작을 얼마나 커스터마이즈할 수 있는지 모르겠음
    내가 이 문제에 너무 신경 쓰는 건 인정하지만, TipTap은 잘 맞았음

    • 설정은 쉬워야 하지만, 그 동작이 기본값이어야 한다고는 생각하지 않음
      더 일반적이지 않고 특정 블록 종류에서 Return을 눌렀을 때만 동작하기 때문임
      Shift+Return은 모바일에서도 쓸 수 없고, 원하는 동작을 얻기 위해 숨겨진 키 조합을 알아야 하는 것도 성가심
      Reddit의 서식 있는 편집기가 이런 방식이라 자주 싸우게 됨
      결국 Return을 두 번 누르지 않아도 되게 해주려는 것뿐임
      사용자를 항상 문단 안에 유지하고, Shift+Return으로 명시적으로 줄바꿈을 선택하게 하는 깔끔함은 이해하지만, 서식 있는 텍스트 편집기처럼 까다로운 영역에서는 깔끔함보다 사용자 경험을 우선하겠음
    • 완전히 동의함. 심지어 그 Shift+ 지원도 불안하지만, 아마 양보할 수는 있을 듯함
      Quill 예제의 문단 처리는 어색해 보임
    • 제대로 읽은 거라면 Confluence/JIRA 텍스트 입력창의 동작과 비슷해 보임

  • 문서가 훌륭함. 모든 오픈소스 프로젝트가 “Why Quill”[1] 같은 페이지를 두면 프로젝트의 철학과 내 목표에 맞는지 빠르게 이해할 수 있어서 좋겠음
    더 좋게는 “Why Not Quill” 같은 내용도 있으면, 어떤 상황에서 잘 맞지 않는지 빠르게 알 수 있음
    모든 프로젝트는 절충을 하므로 이를 직접적이고 명확하게 전달하면 사용자가 더 나은 경험을 하게 됨
    [1] https://quilljs.com/docs/why-quill

  • 링크만 봐서는 분명하지 않지만, 아마 3일 전에 v2가 릴리스돼서 올라온 듯함
    얼마 전까지 Quill v1을 작업했는데 꽤 좋지 않았음
    플러그인으로 테이블을 동작하게 만드는 것도 고통스러웠고, 이상한 스크롤 문제도 있었음
    v2가 많이 고쳤기를 바라지만, 기능 면에서 더 나은 TinyMCE를 계속 쓸 생각임

    • TinyMCE도 좋아해서 6개월 전에 Quill 편집기를 TinyMCE로 교체했음
      하지만 사이트에서 정적 JS를 쓰는 데도 API 키가 필요하다는 점이 짜증났고, 며칠 전 무료 티어의 편집기 렌더링 “사용량”을 빠르게 줄인 것도 불편했음 [0]
      그게 문제가 되지 않는지 궁금함
      [0] https://news.ycombinator.com/item?id=40044544

  • 처음에는 왜 Quill이 다시 올라왔는지 이해하지 못했는데, 오래 기다렸던 2.0 버전이 3일 전에 릴리스된 걸 이제 알았음
    https://slab.com/blog/announcing-quill-2-0/ 참고

    • 이 링크와 제목이 주제에 들어가는 더 나은 진입점이라고 봄

  • 예전에 작업한 프로젝트가 Quill 사용 때문에 크게 당한 적이 있음
    개인적으로는 프로젝트 요구사항과 비교해 편집기의 한계를 충분히 검토하지 않은 게 문제였지만, 문서가 라이브러리의 확장성을 강조하는 방식도 피해를 부를 수 있어 보였음
    한계 안에 머문다면 훌륭한 라이브러리임. 예를 들어 중첩 콘텐츠처럼 너무 복잡한 건 피해야 함
    웹사이트에 “Why You Should NOT Use Quill?” 같은 섹션이 있으면 꽤 도움이 될 듯함

  • 경우에 따라 다르겠지만, 나는 프로덕션 프로젝트에서 Quill을 다시는 쓰지 않을 생각임
    2016년쯤 Quill 1.x를 쓰기 시작했고 처음에는 꽤 마음에 들었음
    Quill을 검토 중이라고 트윗했을 때 Jason이 먼저 연락해줬고, 구현 관련 질문에도 도움을 줬음
    2019년이 되자 몇몇 버그를 겪고 있었고, Quill 1.x는 유지보수 모드였으며, 2.0은 사실상 문서가 없었음 [1]
    일정 감을 얻으려고 Twitter에서 Jason에게 연락했지만 [2], 사실상 꺼지라는 식의 답을 받았음
    그의 회사 Slab도 지금은 나를 Twitter에서 차단했는데, 아마 개인 계정에서 차단하려던 것이었을 수도 있음
    스타트업을 만드는 중이면 누구나 스트레스 받는 날이 있으니, 내가 연락한 타이밍이 나빴을 수도 있음
    내 추측으로는 자기 회사에 집중하고 있었고, Quill을 내부 사용을 위해 겨우 유지할 시간은 있어도 오픈소스로 릴리스할 여유는 거의 없었던 듯함. 그렇다면 차라리 솔직히 말해줬으면 좋았겠음
    5년 뒤 Quill v2가 드디어 나왔고, Slab이 여전히 살아 있어서 기쁨
    앞으로 Quill을 공개적으로 유지할 여력이 있기를 바라지만, 프로덕션에 쓰려 한다면 지원에 대한 커밋먼트가 어느 정도인지 확인하고, 응답이 끊길 경우의 계획도 세워야 함
    Jason이 이 스레드에 있다면 악감정은 없고, 이미 지난 일임. 무시해도 되고 본인 관점을 덧붙여도 됨
    [1] https://github.com/quilljs/quill/issues/2435
    [2] https://twitter.com/nickbaum/status/1177240103925796865

    • Jason과 관련된 경험은 없지만, 이상한 동작을 우회 패치하려고 Quill 코드를 읽는 데 너무 많은 시간을 썼음
      직접 만드는 대신 서식 있는 텍스트 편집기 라이브러리를 쓰는 이유가 바로 그런 걸 피하기 위해서라서 더 답답했음
      v2는 모르겠지만 v1 코드는 구조가 별로 잘 잡혀 있지 않음
      작은 버그가 백만 개 생길까 봐 구현을 미룬 기본 기능들도 있음
      Quill에서 가장 좋은 건 단연 Delta 형식임
      하지만 굵게/밑줄/기울임 이상을 원하는 사람에게는 ProseMirror를 권하겠음

  • 관련 글들. 더 있을까?
    Announcing Quill 1.0 - https://news.ycombinator.com/item?id=12437345 - 2016년 9월, 댓글 82개
    Quill – A cross browser rich text editor with an API - https://news.ycombinator.com/item?id=10446865 - 2015년 10월, 댓글 47개
    Quill – An Open Source Rich Text Editor with an API - https://news.ycombinator.com/item?id=7716376 - 2014년 5월, 댓글 60개

    • 이번 발표는 며칠 전에 릴리스된 것으로 보이는 버전 2에 관한 것임

  • 1년 전쯤 프로젝트에서 https://github.com/facebook/lexical을 썼던 기억이 있는데, 대부분은 바로 잘 동작했음
    Quill을 더 선호할 이유가 있을까?

답변달기