[Go언어 윈도 GUI] walkmgr에 WebView2(크로미움) 추가

오랜만에 walkmgr 에 새로운 기능을 추가하였습니다. 기존에 WebView 가 walkmgr 에 존재하였습니다. 이건 walk 에서 구성되어 있는 것이고 윈도의 OCX기반 WebView를 사용해 보신 분들은 잘 아시겠지만 .. 레거시 중에 레거시죠 .. 마지막 IE에 비해서도 기능이 허접하며 표준따윈 개나 줘버린 과거의 유산입니다.

최신 HTML, CSS, JS등을 이용 못하는건 둘째 치더라도 오만가지 JS관련 오류들을 비롯해서 많은 불편함을 감수해야지만 사용 가능한 놈이긴 한데요 ..

MS에서는 기존의 엣지 브라우져를 크로미움 기반으로 바꾸고 현재 업데이트를 제때 받은 윈도10이나 윈도11의 경우 기본적으로 크로미움 기반의 엣지를 탑재하고 있습니다. 이 크로미움 엣지를 출시하면서 MS에서는 오랜 숙원인 윈도의 내장 웹뷰를 크로미움 기반의 콤포넌트로 교체하는 작업을 진행 했습니다.

초기에는 관련 런타임을 직접 따로 설치를 해야 했습니다만 최근에는 이런저런 프로그램을 사용하는 과정에서 설치되거나 윈도 10이상의 경우 윈도 업데이트와 함께 기본적으로 설치, 업데이트 되어서 이미 시스템에 관련 구성요소들이 존재하는 컴퓨터들이 늘고 있습니다.

물론 런타임임 자체를 만들어서 배포하는 프로그램에 포함해서 배포하는 방법도 있습니다만, 일단 웹뷰 런타임의 크기만 100메가를 훌쩍 넘어 서는 대다가 .. 아무래도 윈도 업데이트등과 함께 주기적으로 관리되는 공용 객체를 끌어다 이용하는게 좀더 이상적일 순 있겠습니다.

서론이 좀 길었는데요 ..

github.com/pirogom/walkmgr 에 webview2.go 파일이 추가 되었습니다.

webview 와는 달리 webview2는 walkmgr 패키지에 추가된 기능입니다. 한마디로 walk 패키지와는 별개로 동작하지만 기존 walkmgr의 사용성을 유지하기 위해 포함시킨 겁니다.

GitHub – jchv/go-webview2: WebView2 bindings for pure Go, without CGo, based on the webview/webview bindings.

WebView2 bindings for pure Go, without CGo, based on the webview/webview bindings. – GitHub – jchv/go-webview2: WebView2 bindings for pure Go, without CGo, based on the webview/webview bindings.

go언어에서 WebView2 콤포넌트를 사용하기 위해 위의 jchv/go-webview2 패키지를 사용해서 .. 저는 그저 둘러 쌌을 뿐이구요 .. 제가 만들어 배포하는 walkmgr 과 통합해서 사용 할 수 있도록 간단히 몇 가지 작업을 한게 다입니다.

github.com/pirogom/walkmgr_example 에도 webview2 관련 예제 코드를 추가 해뒀습니다.

func TestWebView2Example(t *testing.T) {
	wm := walkmgr.NewWin("WebView2 Test1", 800, 600)

	var wv *walkmgr.WebView2
	wv = wm.WebView2(os.TempDir(), func() {
		wv.Navigate("https://modu-print.com")
	}, func() {
		walkmgr.MsgBox("WebView2 런타임을 찾을 수 없습니다.")
	})

	wm.StartForeground()
}

기존 walkmgr 의 여러 객체들과 사용방법은 같습니다. 레이아웃상 배치하고 싶은 위치에서 WebView2 메소드를 호출하시면 됩니다.

WebView2 메소드의 첫번째 인자는 데이터가 저장될 경로를 지정하면 되는데 이 경로의 의미는 흔히 말하는 인터넷 임시파일이나 쿠키데이터 등이 저장될 경로를 지정하시면 되겠습니다. 결국 웹 브라우져를 임베딩 시키는 것이기 때문에 이 웹뷰에서 로그인을 했다던지 하는 정보들 캐시정보들 그런것들을 저장할 위치를 지정하시면 되겠습니다. 예제코드에서는 편의상 OS의 임시폴더를 지정했습니다만, 특정 폴더를 지정해서 사용할 경우 웹뷰를 사용한 프로그램에서만 독립적으로 쿠키, 캐시 등이 유지되는 상태로 사용 할 수 있습니다.

두번째 인자는 실행되는 컴퓨터에 크로미움 엣지 런타임이 존재하지 않을 수도 있기 때문에 WebView2를 구성하는데 성공했을 경우에 호출되는 콜백 메소드이고 마지막 인자는 WebView2의 구성에 실패 했을 경우 호출되는 콜백 메소드를 지정하시면 되겠습니다.

위 예제를 실행하면 아래와 같습니다.

WebView라 함은 한 화면에 여러개의 웹뷰도 포함이 가능해야 겠지요 ..

func TestWebView2Example2(t *testing.T) {
	wm := walkmgr.NewWin("WebView2 Test2", 800, 600)

	wm.VGroupBox("웹뷰 그룹1")

	var wv1 *walkmgr.WebView2
	wv1 = wm.WebView2(os.TempDir(), func() {
		wv1.Navigate("https://modu-print.com")
	}, func() {
		walkmgr.MsgBox("WebView2 런타임을 찾을 수 없습니다.")
	})

	var wv2 *walkmgr.WebView2
	wv2 = wm.WebView2(os.TempDir(), func() {
		wv2.Navigate("https://teus.tistory.com")
	}, func() {
		walkmgr.MsgBox("WebView2 런타임을 찾을 수 없습니다.")
	})

	wm.End()

	wm.HGroupBox("웹뷰 그룹2")
	var wv3 *walkmgr.WebView2
	wv3 = wm.WebView2(os.TempDir(), func() {
		wv3.Navigate("https://google.com")
	}, func() {
		walkmgr.MsgBox("WebView2 런타임을 찾을 수 없습니다.")
	})

	var wv4 *walkmgr.WebView2
	wv4 = wm.WebView2(os.TempDir(), func() {
		wv4.Navigate("https://naver.com")
	}, func() {
		walkmgr.MsgBox("WebView2 런타임을 찾을 수 없습니다.")
	})

	wm.End()

	wm.StartForeground()
}

상단은 VGroupBox로 상하로 나누어 2개의 웹뷰를 추가하고 하나는 제 블로그를 하나는 구라제거기 블로그를 표시하도록 하였으며 하단에는 HGroupBox 로 좌우로 나뉜 레이아웃 안에 구글과 네이버를 표시하도록 해서 총 4개의 WebView2를 한 화면에 포함시켰습니다.

그 외에 웹뷰에 적용 가능한 여러 옵션들 .. 예를들어 개발자 도구를 사용 못하게 한다던지, 자바스크립트를 비활성화 한다던지, User-Agent 값을 가져오거나 변경하는 등의 짓들이 가능한 메소드들도 walkmgr/webview2.go 에 작업을 해 두었습니다. 관련 정보는 ..

/**
 * get_IsScriptEnabled
 *
 * https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/win32/icorewebview2settings?view=webview2-1.0.1901.177#get_isscriptenabled
 */
func (wv2 *WebView2) GetIsScriptEnabled() (bool, error) {
	if !wv2.inited {
		return false, Webview2InitErr
	}

	cfg, err := wv2.wv.GetSettings()

	if err != nil {
		return false, err
	}

	return cfg.GetIsScriptEnabled()
}

/**
 * put_IsScriptEnabled
 *
 * https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/win32/icorewebview2settings?view=webview2-1.0.1901.177#put_isscriptenabled
 */
func (wv2 *WebView2) PutIsScriptEnabled(isScriptEnabled bool) error {
	if !wv2.inited {
		return Webview2InitErr
	}

	cfg, err := wv2.wv.GetSettings()

	if err != nil {
		return err
	}
	return cfg.PutIsScriptEnabled(isScriptEnabled)
}

walkmgr/webview2.go 파일을 보시면 Get이나 Put으로 시작하는 메소드들이 있고 주석에 get_IsScriptEnable 같이 MS의 문서에서 찾아 볼 수 있는 메소드명을 주석으로 달아 두었습니다.

WebView2 Win32 C++ ICoreWebView2Settings

Defines properties that enable, disable, or modify WebView features.

위 링크를 가보시면 아래와 같이 관련 메소드들에 대한 상세한 설명을 보실수 있습니다.

WebView2 – Microsoft Edge Developer

Learn more about WebView2

최근에는 이런저런 프로그램들에서 WebView2 를 사용하기 때문에 사용자 컴퓨터에 런타임이 설치된 경우가 많지만 만약 구성에 실패한 경우에는 위 주소등에 가서 런타임을 설치하도록 유도할 필요는 있겠지만.. 그런 부분은 알아서들 하셔야 겠지요..

Distribute your app and the WebView2 Runtime – Microsoft Edge Development

How to distribute the WebView2 Runtime when releasing an app that uses Microsoft Edge WebView2, either by distributing the automatically updated Evergreen Runtime, or distributing a Fixed Version of the WebView2 Runtime.

MS가 제공하는 WebView2 런타임 배포 관련 글도 참고 하시구요.

대여섯 줄이면 사용 가능한 구조이기 때문에 큰 설명은 필요 없을것 같습니다.

이상입니다.