[VB.NET] 차근차근 크롬 브라우저 만들기 - 1. 프로젝트 생성

예전 VB6 시절에는 인터넷 익스플로러를 폼에 추가해서 브라우저를 커스터마이징 했었는데 이제 IE는 더이상 지원이 안되고, 더 나아가서 아예 MS에서 만든 새로운 브라우저인 Edge 조차도 크롬기반이니 전세계 브라우저는 크롬밖에 없다고 해도 과언이 아닐 정도로 브라우저 세계를 평정해버렸다.

그러니 뭐 별 수 있나? 우리도 크롬을 사용해야지.

브라우저를 커스터마이징해서 사용해야 되는 이유는 여러가지가 있다. 단순히 흥미위주로 만들어본다는 개념으로 접근할 수도 있지만 내부 인트라넷 페이지등 폐쇄된 고객에게만 전문 서비스를 제공하기 위해 브라우저를 직접 만들어 배포하는 경우도 제법 많다. 크롬 익스텐션을 사용해도 웬만큼은 사용이 가능하지만 브라우저 자체를 만드는게 DB 사용이나 기타 확장성 면에서 훨씬 나을때가 많다.

우선 간략하게 동작하는 브라우저를 만들어보자. 티스토리를 좀더 편리하게 사용하기 위해 직접 브라우저를 만든다는 상황을 가정해보자. 웬만한 기능은 다 자동화가 가능하지만, 약간 회색지대의 영역이 있으니 우리는 공부하는 개념으로 반자동 정도만 만들어보자. 강좌용 테스트 프로그램이니 유저의 사용 편의성보다는 기능 구현에 초점을 맞춰서 설명하도록 하겠다.

이 강좌에는 Visual Studio 2017이 사용되었다. 프로젝트 이름은 TBrowser라고 만들었고, 프레임워크는 .NET Framework 4.6.1 로 만들었다. 아래 캡처이미지 참고하자.

프로젝트 종류, 이름, 프레임워크

메뉴 [도구 > NuGet 패키지 관리자 > 솔루션용 NuGet 패키지 관리...] 에서 CefSharp.Winforms 를 현재 프로젝트인 TBrowser에 설치하자.

NuGet - CefSharp.Winforms

CefSharp.Winforms을 설치하게 되면 아래 캡처이미지처럼 도구상자에 CefSharp 그룹이 추가되며 이 그룹 하위에 ChromiumWebBrowser 라는 브라우저 컨트롤이 추가된다. 우리는 이 브라우저 컨트롤을 사용할 예정이다.

도구상자에 ChromiumWebBrowser 컨트롤이 추가됨

이제 메인폼에 아래 속성으로 컨트롤을 추가하자.

종류	Name	Text
메인폼	FormBrowser	TBrowser
TextBox	TextURL	https://www.tistory.com
Button	ButtonNavigate	...
ChromiumWebBrowser	BrowserMain	해당사항없음

이렇게 추가후 BrowserMain의 Dock 속성을 None으로 변경하면 아래 화면과 같이 나온다. 아래 화면을 보고 마우스로 적절하게 위치와 크기를 조절하자.

메인폼에 ChromiumWebBrowser 컨트롤 추가

폼의 WindowState 속성을 Maximized 로 설정해서 실행시 전체화면으로 실행되도록 만든 후 Form에 아래 소스를 추가한 후 실행하자.

Public Class FormBrowser

    Private Sub FormBrowser_Load(sender As Object, e As EventArgs) Handles Me.Load
        BrowserMain.LoadUrl(TextURL.Text)
        Randomize()
    End Sub

    Private Sub FormBrowser_Resize(sender As Object, e As EventArgs) Handles Me.Resize
        ButtonNavigate.Left = Me.Width - ButtonNavigate.Width
        TextURL.Width = ButtonNavigate.Left
        BrowserMain.Width = Me.Width : BrowserMain.Height = Me.Height - TextURL.Top - TextURL.Height
    End Sub

End Class

이제 실행해보자. 아래 화면과 같이 나와야 정상적으로 실행된것이다. 혹시 뭔가 다른 부분이 있다면 위 설명을 다시한번 꼼꼼히 읽어보자.

크롬브라우저를 포함한 프로젝트 실행화면

1. Form_Load 이벤트

Line 1 : BrowserMain.LoadUrl(TextURL.Text)

브라우저에 URL을 로드해준다. 브라우저 컨트롤의 가장 기본적인 사용법이다. 브라우저가 하는 일이 엄청 많지만 그 시작은 무조건 원하는 주소를 불러오는 것이다.

Line 2 : Randomize()

이건 사실 이 프로젝트와 직접 연관된건 아니지만 어떤 프로젝트를 만들든 메인폼의 Form_Load 이벤트안에는 무조건 Randomize()를 넣어주는 것이 좋다. Randomzie() 함수는 랜덤값을 진짜 랜덤하게 발생시키는 역할을 하는 함수이다. 말이 좀 우습기는 한데 정말 중요한 함수이니 이번 한번만 설명해보자.
예를 들어서 Int(Rnd() * 10) 이라는 구문을 사용해서 0~9 사이의 랜덤값을 그때그때 출력하려 한다고 생각해보자. 일반적으로 생각하기에는 랜덤이니까 계속 다른 값이 나올 것이라 생각하지만, Randomize() 함수를 사용하지 않으면 랜덤하게 나오는 값들이 실행시 매번 동일한 랜덤값이 나온다.
이걸 말로 설명하려니 어려운데 프로젝트에서 이 구문을 5회 실행했을때 3,7,0,1,5 가 나왔다고 치자. 0~9 사이의 랜덤값이 출력됐다. 원하는 대로 됐다. 이제 프로젝트 종료후 다시 실행해서 또 5회를 실행해보자.
Randomize() 함수를 사용하지 않은 프로젝트에서는 또 3,7,0,1,5가 나온다. 랜덤은 랜덤인데 실행할때마다 동일한 랜덤이다. 이걸 진짜 우리가 원하는 랜덤으로 출력하기 위해 Randomize() 함수를 Form_Load시 한번 실행해 줘야 하는 것이다. 잘 이해가 안되면 어떤 프로젝트를 만들든 메인폼의 Form_Load 이벤트 안에는 무조건 Randomize()를 넣고 시작하도록 하자.

2. Form_Resize 이벤트

Line 1 : ButtonNavigate.Left = Me.Width - ButtonNavigate.Width

화면 우상단에 있는 페이지 이동 버튼을 폼의 크기가 변하더라도 항상 화면 우상단에 위치하도록 설정한다.

Line 2 : TextURL.Width = ButtonNavigate.Left

화면 상단에 있는 페이지 입력 텍스트박스의 크기 조절

Line 3 : BrowserMain.Width = Me.Width : BrowserMain.Height = Me.Height - TextURL.Top - TextURL.Height

화면크기에 따라 ChromiumWebBrowser의 크기 조절

이번 강좌는 맛보기로 여기까지만 하자. 이제 프로젝트의 틀을 만들었으니 다음번 강좌부터는 이 틀을 다듬으면서 필요한 기능을 하나하나 추가해서 웬간히 쓸만한 브라우저를 만드는게 최종 목표다. 여기에 어느정도 자동화를 하려면 스크립트에 대한 지식도 필요하고, 마우스 클릭등 윈도우 이벤트에 대한 지식도 필요하니 하나씩 차근차근 알아보자.

강좌 시작시 언급했지만, 예쁘게 만들거나 아이콘등 사용자 위주의 기능, 혹은 tabstop등 여러 편의기능은 이번 강좌에 포함되지 않는다. 오로지 기능만을 중점적으로 만들어보도록 하겠다.