GTK 3와 Webkit2.0로 리눅스 웹앱 만들기!

오늘은 GTK3 와 Webkit 2.0로 리눅스용 웹앱을 만들어봤습니다.

예, 그냥 C++로 껍데기를 만들고 속은 그냥 진짜 웹페이지인겁니다. 일단 준비물은 두가지인데, gtk 3 개발 패키지와 webkit2 개발 패키지에요. 직접 빌드하지 말고 그냥 아래 명령을 실행하면 바로 받을 수 있죠.

jaehoon@jaehoon ~ $ sudo apt-get install libgtk-3-dev libwebkit2gtk-4.0-dev

이렇게 말이죠, 이 개발 패키지들은 의존성이 꽤 많은 편인데 이걸 다 직접 빌드하려면 엄청난 스트레스가... 위에서 저렇게 설치한 패키지의 링크 정보는 pkg-config 명령으로 CFLAG랑 인클루딩 페러미터를 자동으로 생성할 수 있지요. 아래처럼요.

이렇게 긴걸 어떻게 다치고 있겠습니까... 그냥 이걸 바로 쓰면 됩니다. 예를들면 아래처럼요.

jaehoon@jaehoon ~ $ g++ *.cpp -o output `pkg-config --cflags --libs gtk+-3.0 webkit2gtk-4.0`

이렇게 해주면 되는 거죠. 그러면 저렇게 긴 옵션들이 자동으로 먹히게 됩니다. C++로 Gtk 껍데기를 만드는 코드는 그렇게 길지 않지요. 아래 코드를 살펴볼까요?

#include <gtk/gtk.h>

#include <webkit2/webkit2.h>

static void destroyWindowCb(GtkWidget* widget, GtkWidget* window) {

gtk_main_quit(); // 창이 파괴되면 메인 루프를 죽입니다.

}

static gboolean closeWebViewCb(WebKitWebView* webView, GtkWidget* window) {

gtk_widget_destroy(window); // 자바스크립트로 창 닫기를 요청하면 창을 죽입니다. 그러면 위에 콜백도 함께 실행될겁니다.

return TRUE;

}

int main(int argc, char** argv) {

gtk_init(&argc, &argv);

GtkWidget* mainWindow = gtk_window_new(GTK_WINDOW_TOPLEVEL);

gtk_window_set_default_size(GTK_WINDOW(mainWindow), 800, 600);

// 웹뷰 위젯을 하나 만들어서

WebKitWebView* webView = WEBKIT_WEB_VIEW(webkit_web_view_new());

gtk_container_add(GTK_CONTAINER(mainWindow), GTK_WIDGET(webView)); // 컨테이너에 붙힙니다.

// 콜백들을 등록해주고요.

g_signal_connect(mainWindow, "destroy", G_CALLBACK(destroyWindowCb), NULL);

g_signal_connect(webView, "close", G_CALLBACK(closeWebViewCb), mainWindow);

// 웹페이지를 로딩시킵니다.

webkit_web_view_load_uri(webView, "http://www.jayks.ml/");

gtk_widget_grab_focus(GTK_WIDGET(webView));

gtk_widget_show_all(mainWindow);

gtk_main();

}

이렇게 해주면 되지요. 

컴파일은 아래 명령을 쓰시면 될겁니다.

jaehoon@jaehoon ~ $ g++ webkitex.cpp -o webkitex `pkg-config --cflags --libs gtk+-3.0 webkit2gtk-4.0`

이렇게요. 이렇게 명령을 날리고 나면 경고 하나 없이 컴파일이 잘 될겁니다. webkitex 바이너리를 더블 클릭하거나 터미널에 ./webkitex를 치는 것으로 실행할 수 있는데, 정말 잘 동작하는군요. 허헣... 그 이후에 자바스크립트 쪽에서 네이티브 코드를 사용할 수 있도록 심볼을 집어 넣어 주시거나 자바스크립트 쪽에서 정의한 함수들을 끌어당겨서 쓰시면 서로 상호작용하는 코드를 구성하실 수 있을겁니다.

  일단, 이렇게 만든 웹앱은 타깃 웹페이지와 완벽하게 상호작용할 수 있고, 웹페이지 자체의 반응형 구현들을 완벽하게 트리거해줍니다. 아래처럼요.