플러터, 텍스트 에디터가 필요하다면?

앱을 만들다 보면, 사용자가 텍스트를 입력하고 서식을 적용할 수 있는 텍스트 에디터가 필요한 경우가 많아요. 예를 들어 메모앱, 블로그 편집기, 콘텐츠 관리 시스템(CMS) 등에서는 단순한 텍스트 필드로는 부족하고, 글꼴 크기 조정, 굵게/기울임 등 서식 기능이 있는 리치 텍스트 에디터가 필요하죠.

 

Flutter에서는 이를 위해 여러 가지 옵션이 있지만, 그중에서도 flutter_quill 패키지는 가장 강력하고 직관적인 WYSIWYG 편집기 중 하나입니다. 웹 기반의 Quill.js를 Flutter에 이식한 이 라이브러리는 모바일뿐 아니라 데스크톱, 웹에서도 동일한 사용자 경험을 제공하며, Delta라는 내부 포맷을 통해 서식을 효과적으로 관리할 수 있게 해줍니다.

 

이번 글에서는 flutter_quill의 기본 사용법부터, 서식이 적용된 텍스트를 HTML, CSS와 연동하는 전략까지 단계적으로 소개해드릴게요.

 

 

Flutter Quill로 리치 텍스트 에디터 구성하기

Flutter Quill을 사용하면 비교적 간단한 설정만으로도 본격적인 텍스트 편집기를 앱에 탑재할 수 있습니다. 핵심 구성 요소는 크게 QuillController, QuillEditor, 그리고 QuillSimpleToolbar입니다. 각각의 역할은 다음과 같아요:

 

• QuillController: 문서 상태와 편집 내용을 관리하는 중심 컨트롤러입니다.
• QuillEditor: 실제 텍스트를 표시하고 편집할 수 있는 영역이에요.
• QuillSimpleToolbar: 서식(굵게, 기울임, 목록 등)을 적용할 수 있는 툴바 UI입니다.

 

설정은 아래와 같이 이루어집니다.

QuillController _controller = QuillController.basic();

QuillSimpleToolbar(
  controller: _controller,
  config: const QuillSimpleToolbarConfig(),
),

Expanded(
  child: QuillEditor.basic(
    controller: _controller,
    config: const QuillEditorConfig(),
  ),
);

 

기본적으로 Quill은 Delta라는 포맷으로 내용을 저장하고, 이는 JSON 형태로 저장하거나 다시 불러올 수 있습니다. 저장 예시는 다음과 같습니다.

final String json = jsonEncode(_controller.document.toDelta().toJson());

 

불러올 때는 아래처럼 다시 Document로 변환해주면 되죠.

_controller.document = Document.fromJson(jsonDecode(json));

 

이렇게 하면 저장/불러오기 기능을 포함한 리치 텍스트 편집기가 완성돼요. 다음 단계에서는 이 데이터를 외부와 연동하거나 서버와 통신할 때 HTML로 변환하는 전략에 대해 알아보겠습니다.

 

 

Quill Delta와 HTML/CSS 간의 연동 전략

Flutter Quill은 내부적으로 Delta라는 포맷을 사용해 텍스트와 서식을 관리합니다. Delta는 삽입(insert), 삭제(delete), 속성(attribute) 같은 변경사항을 연속된 연산(operation)으로 저장하는 방식이에요. 하지만 현실에서는 이 데이터를 HTML로 변환해 외부 시스템과 통신하거나, 웹뷰로 보여주거나, 이메일 본문처럼 HTML을 요구하는 환경에 전달해야 할 필요가 많습니다.

 

 

Delta → HTML 변환: 외부로 내보내기

Delta 데이터를 HTML로 변환하려면 공식 Quill 또는 Flutter Quill에서 직접 지원하진 않지만, 커뮤니티에서 제공하는 유틸리티 패키지를 활용할 수 있어요. 대표적으로:

 

• vsc_quill_delta_to_html: Flutter에서 Delta 객체를 HTML로 변환해주는 라이브러리입니다.

import 'package:vsc_quill_delta_to_html/vsc_quill_delta_to_html.dart';

final delta = _controller.document.toDelta();
final html = DeltaToHTML.encodeJson(delta.toJson());

 

이렇게 생성한 HTML을 서버로 전송하거나, WebView 위젯을 통해 앱 내에서 미리보기 용도로 활용할 수 있어요.

 

 

HTML → Delta 변환: 외부 입력을 에디터로 불러오기

반대로 외부에서 HTML 형식으로 저장된 데이터를 불러와 Flutter Quill 에디터에 표시하고 싶을 때는 다음 패키지를 사용할 수 있습니다:

 

• flutter_quill_delta_from_html: HTML을 Delta로 변환해주는 라이브러리입니다.

import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';

final delta = Delta.fromJson(convertHtmlToDelta(htmlString));
_controller = QuillController(
  document: Document.fromDelta(delta),
  selection: const TextSelection.collapsed(offset: 0),
);

 

이를 통해 웹 기반 CMS나 워드프레스처럼 HTML 형식으로 저장된 콘텐츠를 앱에서도 동일하게 표시할 수 있죠.

 

 

HTML 연동 시 주의할 점

Quill Delta와 HTML은 구조적 차이가 큽니다. Delta는 오히려 버전 관리나 변경 이력 추적에 유리한 구조인 반면, HTML은 시각적으로 더 직관적인 형식이에요. 그래서 다음과 같은 전략을 권장합니다:

 

• 저장 시에는 Delta(JSON) 로 저장하고,
• 외부와의 교환이 필요한 경우에만 HTML 변환을 활용하세요.

 

또한 텍스트만 간단히 저장하면 .toPlainText()를 활용해도 됩니다. 하지만 서식 정보가 필요한 경우에는 반드시 Delta를 기반으로 변환해야 정확하게 정보를 유지할 수 있어요.

 

 

실전 예제 – HTML 데이터와의 통신 및 응용 시나리오

Flutter Quill을 사용해 에디터를 구축한 뒤에는 실제 앱 환경에서 데이터를 저장하고 불러오는 과정이 매우 중요해요. 특히 백엔드와 연동하거나 외부 시스템과의 호환성을 고려한다면, HTML 변환 전략을 적절히 활용할 필요가 있습니다.

 

 

1. 저장할 때 HTML로 변환해 서버 전송하기

에디터에서 입력된 서식 있는 텍스트를 서버에 저장할 때, Delta를 HTML로 변환하여 전송하는 방식은 다음과 같아요.

final delta = _controller.document.toDelta();
final html = DeltaToHTML.encodeJson(delta.toJson());

// 예: HTTP POST로 서버에 저장
await http.post(
  Uri.parse('https://example.com/save'),
  body: {'content': html},
);

 

이렇게 하면 서버나 외부 시스템에서 HTML로 바로 렌더링할 수 있어 웹 호환성이 매우 좋아요.

 

 

2. 서버에서 HTML을 받아와 에디터에 출력하기

반대로, 서버에 HTML로 저장된 콘텐츠가 있다면 이를 받아와 Delta로 변환 후 Flutter Quill에서 표시할 수 있어요.

final response = await http.get(Uri.parse('https://example.com/load'));
final htmlContent = response.body;

final delta = Delta.fromJson(convertHtmlToDelta(htmlContent));
_controller = QuillController(
  document: Document.fromDelta(delta),
  selection: const TextSelection.collapsed(offset: 0),
);

 

이런 식으로 HTML 저장 구조를 유지하면서도 에디터에서 완벽하게 서식 텍스트를 재현할 수 있게 됩니다.

 

 

3. 복사/붙여넣기 또는 웹에서의 공유

사용자가 외부 웹사이트에서 복사한 리치 텍스트를 붙여넣거나, 에디터 콘텐츠를 이메일/뉴스레터에 삽입하려면 HTML 형태가 필요하죠. 이럴 때도 Delta → HTML 변환은 실용적인 해결책이 될 수 있어요. 단, 현재는 웹 환경에서 Flutter Quill의 리치 텍스트 붙여넣기가 완전히 지원되지 않기 때문에, 플랫폼 제약은 고려해야 합니다.

 

 

마치며...

Flutter Quill은 Flutter 앱에서 서식 있는 텍스트를 구현할 수 있는 강력한 에디터 도구입니다. 특히 Delta 포맷을 통해 텍스트와 서식을 효율적으로 저장하고, HTML로의 변환을 통해 외부 시스템과도 원활히 연동할 수 있다는 점이 큰 장점이에요. 다만 HTML과 Delta 간 구조 차이를 인지하고, 언제 어떤 포맷으로 저장하고 통신할지를 명확히 정하는 것이 중요합니다.

 

에디터 구현은 단순히 UI를 넘어서, 데이터의 저장 형식과 전달 방식까지 고려해야 하는 고차원 작업이에요. 그런 의미에서 Flutter Quill과 Delta-HTML 변환 전략을 함께 익혀두면, 보다 유연하고 호환성 높은 앱을 만드는 데 큰 도움이 될 것입니다.