VB.Net으로 만드는 첫 웹 응용 프로그램

"웹 응용 프로그램을 만든다"라고 생각하면 ASP, PHP, JSP와 같은 서버 측 스크립트와 HTML, 자바스크립트와 같은 클라이언트 스크립트를 동원하고 아파치나 IIS와 같은 웹서버를 통해서 복잡하게 개발해야 한다고 생각했었는데, 이런 복잡한 과정을 비주얼스튜디오에서 윈도우 폼 응용을 개발하는 것 처럼 손쉽게 만들 수 있도록 한 것이 "WPF 브라우저 응용"입니다.

 

 

 

첫 WPF 브라우저 응용 만들기

WPF(Windows Presentation Foundation)는 닷넷 프레임워크 3.0부터 채용된 시스템으로 XML기반의 언어인 XAML(Extensible Application Markup Language)를 이용해서 표현하는 다양한 수준의 사용자 인터페이스 표현을 담당하는 그래픽 기반 시스템입니다. WPF 응용은 일반 윈도우 폼 응용 처럼 사용할 수도 있고 이번 포스팅에서 다룰 WPF 브라우저 응용은 웹 서버를 통해서 배포되고 웹 브라우저에서 동작합니다. WPF 브라우저 응용을 기반으로 웹 서비스를 제공하면 개발도 용이할 뿐만아니라 사용자에 좀더 미려한 디자인으로 인터페이스를 제공할 수 있는 장점이 있습니다.

 

WPF 브라우저 응용은 프로젝트 템플릿에서 "WPF Browser Application"을 선택하여 제작을 시작합니다.

 

템플릿을 통해서 프로젝트가 생성되면 아래의 그림과 같이 디자이너가 폼(Form) 단위가 아니라 페이지 단위로 동작을 하고 각 페이지는 XAML로 표현됨을 확인할 수 있습니다. Toolbox 또한 WPF 연관 컨트롤을 보여주므로 개발자는 윈도우 폼의 디자인 및 개발 방법과 동일한 형태로 페이지를 디자인하고 연관 코드를 작성하면 됩니다.

 

윈도우 폼 응용 제작 때와 동일하게 툴박스에서  버튼과 레이블 컨트롤을 각각 한개씩 페이지에 작성합니다. 디자이너에서 개별 컨트롤을 추가하고 수정할 때 마다 하단의 XAML을 살펴보면 아래와 같이 해당 내용을 XML 형식으로 표현하고 있음을 확인할 수 있습니다.

    <Grid>

        <Button Content="Button" Height="39" HorizontalAlignment="Left" Margin="90,40,0,0" Name="Button1" VerticalAlignment="Top" Width="202" />

        <Label Content="Label" Height="33" HorizontalAlignment="Left" Margin="76,173,0,0" Name="Label1" VerticalAlignment="Top" Width="267" />

    </Grid>

 

버튼 이벤트에 코드를 작성하기 위하여 버튼을 더블 클릭하고 아래의 그림과 같이 레이블의 "Content"속성에 출력 문자열을 입력합니다. 폼에서는 "Text"속성에 문자열을 입력했지만 WPF에서는 "Content"속성을 사용합니다. 

 

프로젝트를 저장한 다음 F5(Start Debugging)로 실행시키면 폼 응용의 경우에는 프로그램을 빌드하고 해당 응용을 실행시켰지만 WPF 브라우저 응용에서는 웹브라우저를 가동시키고 브라우저 안에서 기능을 수행합니다. 응용에 대해서 아직 인증 정보등을 입력하지 않았기 때문에 아래의 그림과 같은 보안 경고 창이 2회 정도 나오는데 이때 "Run"으로 가동을 허락해 주면 디자이너에서 작성한 페이지가 나오고 버튼을 클릭하면 페이지 상단의 그림과 같이 문자열을 레이블에 출력합니다.

 

 

실행전에  인터넷 익스플로러가 기본 웹브라우저가 되도록 설정하는 것이 원활한 개발에 도움이 됩니다. 이런 개발 과정이 끝나면 WPF 브라우저 응용은 서버에 게시하게 되고 다수의 사용자를 대상으로 웹 브라우저를 통한 간편한 배포와 설치 및 유용한 사용자 인터페이스를 제공하게 됩니다.