Qt WebEngine 개요

Qt WebEngine 모듈은 네이티브 웹 엔진이 없는 플랫폼에서 월드 와이드 웹의 콘텐츠를 Qt 애플리케이션에 쉽게 임베드할 수 있는 웹 브라우저 엔진을 제공합니다.

Qt WebEngine 는 CSS(Cascading Style Sheet)를 사용하여 스타일을 지정하고 자바스크립트로 스크립팅한 HTML, XHTML 및 SVG 문서를 렌더링하기 위한 C++ 클래스와 QML 유형을 제공합니다. HTML 문서는 HTML 요소에 contenteditable 속성을 사용하여 사용자가 완전히 편집할 수 있습니다.

Qt WebEngine 아키텍처

Qt WebEngine 의 기능은 다음과 같은 모듈로 나뉩니다:

• Qt WebEngine 위젯 위젯 기반 웹 애플리케이션을 만들기 위한모듈
• Qt WebEngine Qt Quick 기반 웹 애플리케이션을 만들기 위한모듈
• Qt WebEngine 크롬과 상호 작용하기 위한코어 모듈

페이지 렌더링과 자바스크립트 실행은 GUI 프로세스에서 Qt WebEngine 프로세스로 분리되어 있습니다. Qt 라이브러리가 애플리케이션에 번들로 제공되는 경우 애플리케이션과 함께 제공되어야 하는 라이브러리입니다.

Qt WebEngine 위젯 모듈

웹 엔진 보기는 Qt WebEngine 모듈의 주요 위젯 구성 요소입니다. 다양한 애플리케이션에서 웹 콘텐츠를 로드하는 데 사용할 수 있습니다. 보기 내에서 웹 엔진 페이지에는 웹 콘텐츠, 탐색한 링크의 기록 및 작업을 담당하는 메인 프레임이 있습니다. 뷰와 페이지는 일련의 공통 기능을 제공한다는 점에서 매우 유사합니다.

모든 페이지는 공유 설정, 스크립트 및 쿠키가 포함된 웹 엔진 프로필에 속합니다. 프로필을 사용하여 페이지를 서로 격리할 수 있습니다. 일반적인 사용 사례는 정보가 영구적으로 저장되지 않는 비공개 브라우징 모드를 위한 전용 프로필입니다.

콘텐츠는 그래픽 카드(GPU) 기능을 사용하여 렌더링됩니다. 장면 그래프는 GPU가 제공할 수 있는 다양한 기능과 API를 위한 추상화 계층으로 Qt 렌더링 하드웨어 인터페이스에 의존합니다. 렌더링 파이프라인을 조정하는 방법에 대한 자세한 내용은 Qt 렌더링 하드웨어 인터페이스를 통한 렌더링을 참조하십시오.

Qt WebEngine 모듈

Qt WebEngine QML 구현은 별도로 액세스할 수 있는 웹 엔진 페이지가 없다는 점을 제외하면 Qt WebEngine 위젯 구현과 동일한 요소를 포함합니다. 지원되는 페이지 기능은 웹 엔진 보기에 통합되어 있습니다.

Qt WebEngine 코어 모듈

Qt WebEngine 코어는 Chromium 프로젝트를 기반으로 합니다. 크롬은 자체 네트워크 및 페인팅 엔진을 제공하며 종속 모듈과 함께 긴밀하게 개발됩니다. QtNetwork 스택을 사용하지 않더라도 Qt WebEngine 과 설정을 동기화할 수 있습니다. 자세한 내용은 프록시 지원, 인증서 관리, 클라이언트 인증서 및 QWebEngineCookieStore 을 참조하세요.

사용된 Chromium 버전은 현재 버전( Qt WebEngine)의 Qt 기능 동결 시점에 가장 안정적인 최신 Chrome 버전에서 사용된 버전입니다. 추가 보안 패치는 매 패치 릴리스마다 최신 Chrome 릴리스에서 선별되며, Qt 패치 릴리스 동결에 맞춰 발표된 보안 패치가 포함됩니다. Chrome에서 릴리스 기간 외에 중요한 수정 사항을 릴리스하는 경우, 다음 패치 릴리스는 패치 세부 사항이 공개되기 전에 Qt WebEngine 패치가 릴리스되도록 속도를 높입니다.

보안 수정 외에 최신 Qt WebEngine 버전이 필요하지만 모든 Qt를 업데이트할 수 없는 경우, Qt WebEngine 에서 이전 버전의 Qt로 마지막 Qt LTS로 빌드하는 것을 지원합니다. 예를 들어 Qt WebEngine 6.3, 6.4, 6.5는 모두 Qt 6.2로 빌드할 수 있습니다. Qt LTS 릴리스에서는 보안 패치를 더 쉽게 하기 위해 Qt WebEngine 을 최신 버전으로 완전히 교체할 수 있습니다.

런타임에 qWebEngineChromiumVersion() 메서드를 사용하여 해당 Chromium 버전을 읽을 수도 있고 qWebEngineChromiumSecurityPatchVersion()를 사용하여 현재 보안 패치 수준을 읽을 수도 있습니다. Qt WebEngine 소스의 CHROMIUM_VERSION 파일에서도 버전을 확인할 수 있습니다.

Qt WebEngine 프로세스

Qt WebEngine 프로세스는 웹 페이지를 렌더링하고 JavaScript를 실행하는 데 사용되는 별도의 실행 파일입니다. 이를 통해 보안 문제를 완화하고 특정 콘텐츠로 인한 충돌을 격리할 수 있습니다.

위젯 기반 애플리케이션에 웹 콘텐츠 임베드하기

QWebEngineView 클래스를 사용하면 가장 간단한 방법으로 웹 페이지를 표시할 수 있습니다. 위젯이므로 QWebEngineView 을 양식에 임베드하고 위젯의 편의 기능을 사용하여 웹 사이트를 다운로드하고 표시할 수 있습니다.

QWebEngineView *view = new QWebEngineView(parent);
view->load(QUrl("http://www.qt.io/"));
view->show();

QWebEngineView 인스턴스에는 QWebEnginePage 하나가 있습니다. QWebEnginePage 에는 페이지의 탐색 기록에 대한 액세스를 제공하는 QWebEngineHistory 과 웹 페이지에 작업을 적용하는 여러 개의 QAction 객체가 있을 수 있습니다. 또한 QWebEnginePage 에는 페이지의 메인 프레임 컨텍스트에서 자바스크립트 코드를 실행하고 사용자 지정 인증 대화 상자 표시와 같은 특정 이벤트에 대한 핸들러를 사용자 지정할 수 있는 기능이 있습니다.

각 QWebEnginePage 은 페이지 설정을 지정하는 QWebEngineSettings, 페이지에서 스크립트를 실행하는 QWebEngineScriptCollection, Chromium의 HTTP 쿠키에 액세스하는 QWebEngineCookieStore 을 가질 수 있는 QWebEngineProfile 에 속합니다. QWebEnginePage 은 스크립트 컬렉션을 직접 가리킬 수도 있습니다.

위젯 기반 애플리케이션의 경우 플러그인에 배치하지 않는 한 웹 엔진이 자동으로 초기화됩니다. 이 경우 다음 코드 스니펫에 설명된 대로 QtWebEngineQuick::initialize 을 사용하여 애플리케이션 메인 소스 파일에서 초기화해야 합니다:

int main(int argc, char **argv)
{
    QtWebEngineQuick::initialize();

    QApplication app(argc, argv);

    QMainWindow window;
    window.show();

    return app.exec();
}

Qt Quick 애플리케이션에 웹 콘텐츠 임베드하기

WebEngineView QML 유형을 사용하면 Qt Quick 애플리케이션에서 동적 웹 콘텐츠의 영역을 렌더링할 수 있습니다. A WebEngineView 유형은 다른 QML 유형과 화면을 공유하거나 Qt Quick 애플리케이션에 지정된 대로 전체 화면을 포함할 수 있습니다.

GUI와 렌더링 프로세스 간에 OpenGL 컨텍스트를 공유할 수 있도록 하려면 다음 코드 조각에 설명된 대로 애플리케이션 메인 소스 파일에서 QtWebEngineQuick::initialize 을 사용하여 웹 엔진을 초기화해야 합니다:

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QtWebEngineQuick::initialize();

    QQmlApplicationEngine engine;
    engine.load(QUrl("qrc:/main.qml"));

    return app.exec();
}

애플리케이션은 URL 또는 HTML 문자열을 사용하여 WebEngineView 로 페이지를 로드하고 세션 기록 내에서 탐색할 수 있습니다. 기본적으로 다른 페이지로 연결되는 링크는 동일한 WebEngineView 객체 내에서 로드되지만 웹 사이트에서 새 탭, 창 또는 대화 상자로 열도록 요청할 수 있습니다.

다음 샘플 QML 애플리케이션은 url 속성을 사용하여 웹 페이지를 로드합니다:

import QtQuick
import QtQuick.Window
import QtWebEngine

Window {
    width: 1024
    height: 750
    visible: true
    WebEngineView {
        anchors.fill: parent
        url: "https://www.qt.io"
    }
}

스크립트 주입

Qt WebEngine 은 페이지의 DOM(문서 객체 모델)에 대한 직접 액세스를 허용하지 않습니다. 그러나 스크립트를 삽입하여 DOM을 검사하고 조정할 수 있습니다.

페이지의 DOM은 문서가 준비되었을 때, 일반적으로 페이지가 완전히 로드되었을 때 구성됩니다. 따라서 문서가 생성되자마자 스크립트를 실행하는 것은 DOM이 준비될 때까지 기다려야 하는 DOM 작업에는 적합하지 않습니다.

또한 삽입된 스크립트는 페이지에서 실행되는 다른 스크립트와 동일한 월드를 공유하므로 충돌이 발생할 수 있습니다. 이를 방지하기 위해 QWebEngineScript 클래스와 WebEngineScript QML 유형은 콘텐츠 스크립트 확장을 위한 크롬 API의 구현을 제공합니다. 이들은 실행할 스크립트, 삽입 지점 및 스크립트가 실행되는 월드를 지정합니다. 이를 통해 DOM에 액세스하여 월드 내에서 이를 조작할 수 있습니다.

Qt 5.8부터 Qt WebEngine 은 다음과 같은 Greasemonkey와 유사한 어트리뷰트를 사용하여 스크립트를 보강할 수 있도록 지원합니다:

• @exclude <regexp>
• @include <regexp>
• @match <regexp>
• @name <free text>
• @run-at [document-start|document-end|document-idle]

어트리뷰트는 사용자 스크립트의 실행 여부와 시기를 결정합니다. 이 속성은 스크립트 시작 부분의 ==UserScript== 주석 안에 바로 배치해야 합니다:

// ==UserScript==
// @include http://*.qt.io/*
// @exclude http://wiki.qt.io/*
// ==/UserScript==

window.alert("Page is from qt.io, but not wiki.qt.io");

WebEngine 애플리케이션이 Qt Quick Compiler 을 사용하여 빌드되고 애플리케이션이 .qrc 리소스 내에 JavaScript 파일을 제공하는 경우 Qt 리소스 파일의 JavaScript 파일 섹션을 읽어 보세요.

인증서 관리

Qt WebEngine 는 자체 네트워크 스택을 사용하므로 QSslConfiguration 는 SSL 연결을 여는 데 사용되지 않습니다. 대신 Qt WebEngine 은 운영 체제의 루트 CA 인증서를 사용하여 상대방의 인증서를 검증합니다.

WebEngineCertificateError::type 및 QWebEngineCertificateError::Type 열거형은 발생할 수 있는 인증서 오류 유형에 대한 정보를 제공합니다. 오류는 WebEngineView::certificateError QML 메서드를 사용하거나 QWebEnginePage::certificateError 신호에 연결하여 처리할 수 있습니다.

프록시 지원

Qt WebEngine 의 프록시 설정을 사용하여 Qt Network의 프록시 설정을 사용하여 Chromium의 네트워킹 스택으로 전달합니다. QNetworkProxy::applicationProxy 이 설정되어 있으면 Qt WebEngine 에도 사용됩니다. QNetworkProxyFactory::usesSystemConfiguration ()가 활성화된 경우 프록시 설정은 시스템에서 자동으로 검색됩니다. 하지만 설치된 QNetworkProxyFactory 의 설정은 무시됩니다.

QNetworkProxy::user() 및 QNetworkProxy::password()가 설정된 경우 이 자격 증명이 프록시 인증에 자동으로 사용됩니다. 오류 처리 콜백이 없으므로 유효한 자격 증명을 제공하는 것은 사용자의 몫입니다.

QNetworkProxy 에 자격 증명이 설정되어 있지 않지만 프록시에 인증이 필요한 경우 QWebEnginePage::proxyAuthenticationRequired 이 전송됩니다. Qt Quick 의 경우 대화 상자가 표시됩니다.

QNetworkProxy 의 모든 속성이 Qt WebEngine 에서 지원되는 것은 아닙니다. 즉, QNetworkProxy::type(), QNetworkProxy::hostName() 및 QNetworkProxy::port()가 고려됩니다. QNetworkProxy::rawHeader ()와 같은 다른 모든 프록시 설정은 무시됩니다.

높은 DPI 지원

고DPI 장치를 지원하려면 애플리케이션 속성 Qt::AA_EnableHighDpiScaling 을 설정하여 모니터의 픽셀 밀도에 따라 자동 스케일링을 사용하도록 하는 것이 좋습니다. Qt WebEngine 애플리케이션에서 배율은 기본 확대/축소 계수와 스크롤바 크기에 영향을 줍니다.

예를 들어

int main(int argc, char *argv[])
{
  QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
  QApplication app(argc, argv);
  // ...
}

Qt WebEngine 은 일반 및 고해상도 이미지를 qtwebengine_resources_100p.pak 및 qtwebengine_resources_200p.pak 파일로 번들링합니다. 대상 해상도에 따라 이 파일 중 하나 또는 둘 모두를 배포해야 합니다.

자세한 내용은 높은 DPI를 참조하세요.

웹엔진 코어 사용

Qt WebEngine Core는 Chromium의 네트워킹 스택에 대한 URL 요청을 처리하고 해당 HTTP 쿠키에 액세스하기 위해 Qt WebEngine 및 Qt WebEngine 위젯에서 공유하는 API를 제공합니다.

QWebEngineUrlRequestInterceptor 인터페이스를 구현하고 프로필에 인터셉터를 설치하면 URL 요청(QWebEngineUrlRequestInfo)이 크롬의 네트워킹 스택에 도달하기 전에 가로채고, 차단하고, 수정할 수 있습니다.

프로필에 QWebEngineUrlSchemeHandler 을 등록하여 사용자 지정 URL 체계에 대한 지원을 추가할 수 있습니다. 그러면 해당 스키마에 대한 요청이 QWebEngineUrlSchemeHandler::requestStarted()에 QWebEngineUrlRequestJob 객체로 발행됩니다.

QWebEngineCookieStore 클래스는 Chromium의 HTTP 쿠키에 액세스하기 위한 함수를 제공합니다. 이 함수는 쿠키를 QNetworkAccessManager 와 동기화하고 탐색 중에 쿠키를 설정, 삭제 및 가로채는 데 사용할 수 있습니다.

플랫폼 참고 사항

Qt WebEngine 현재 윈도우, 리눅스, 맥OS만 지원합니다. 또한 Chromium 빌드 요구 사항으로 인해 다른 Qt보다 최신 컴파일러가 필요한 경우가 많습니다. 자세한 내용은 Qt WebEngine 플랫폼 노트를 참조하세요.

관련 모듈

Qt WebEngine WebKit 프로젝트를 기반으로 하지만 Qt 5.2 이후 업스트림 WebKit 코드와 적극적으로 동기화되지 않았으며 Qt 5.5에서 더 이상 사용되지 않는 Qt WebKit 모듈을 대체합니다. Qt WebEngine 위젯을 사용하도록 Qt WebKit 위젯 애플리케이션을 변경하는 방법에 대한 팁은 Qt WebKit에서 Qt WebEngine 로 포팅하기 를 참조하십시오.

모듈은 Qt WebView 모듈을 사용하면 네이티브 웹 브라우저를 사용할 수 있는 플랫폼에서 네이티브 웹 브라우저를 사용할 수 있습니다.

모듈은 Qt WebChannel 모듈을 사용하여 C++ 측의 QObject 객체와 QML 측의 JavaScript 간에 양방향 통신 채널을 생성할 수 있습니다.