WebGL-012: GwtGL 설정

현재 글을 작성하는 시점에서 gwtGL의 최종 버전은 2011년 03월 21일에 릴리즈된 GwtGL Release 0.3이다. 잠깐 사용해 본 결과 몇 가지 문제가 발견되었기 때문에 다운로드 후 조금 수정하여 사용해야 한다. http://code.google.com/p/gwtgl/에서 gwtgl에 대한 튜토리얼과 라이브러리를 다운 받을 수 있다. gwtgl을 사용하기 위해서 갖춘 환경은 아래와 같다.

• JDK1.6.0_24
• Eclips3.6(Helios)
• Google Plugin for Eclipse 3.6
• Google App Engine Java SDK 1.5.0 (옵션)
• Google Web Toolkit 2.3.0

우선 JDK과 Eclipse가 준비 되었으면 Google Web Toolkit Downloads에서 Eclipse Plugin과 GWT SDK 설치 방법을 확인한다. Eclipse3.6(Helios)의 설치 방법은 여기에서 확인할 수 있다.

Eclipse3.6(Helios)에서의 설치 방법.

JDK1.6.0_24 및 Eclipse3.6이 설치된 환경에서 아래의 작업을 진행하였다.

1. Eclipse를 실행 시키고, Help > Install New Software… 을 선택하면 아래와 같은 대화상자가 나타난다.

위의 대화상자가 나타나면 Work With 라고 이름 붙여진 콤보박스에 http://dl.google.com/eclipse/plugin/3.6 를 입력하고 엔터를 입력한다.

2. 아래의 그림과 같이 중앙에 위치한 리스트박스에 Plugin과 SDKs를 선택할 수 있는 체크박스를 볼 수 있다.

Plugin과 SDKs 모두 선택하고 설치를 진행해도 되지만, 아래의 그림과 같이 Google Plugin for Eclipse 과 Google Web Toolkit 만 선택하고 진행해도 된다. google에서 설명하는 방법대로 모두 선택 하고 다음 단계로 넘어 간다.

3. 아래의 그림과 같이 어떤 항목이 설치될 것인지를 알려주는 대화상자가 나타난다. Next 버튼을 눌러 다음 단계로 넘어 간다.

4. 아래의 그림과 깉이 Licenses를 확인하는 대화상자가 나타난다.

우측하단과 같이 I accept the terms of the licenses agreements를 선택하고 다음 단계로 넘어간다.

5. 아래의 그림과 같이 설치 진행 상황을 보여주는 대화상자가 나타난다.

상당한 시간이 소요되었다.

설치 도중 아래의 그림과 같은 보안 경고 창이 나타날 수 있는데, OK를 선택하고 계속 진행한다.

6. 설치가 완료되면 아래와 같은 대화상자가 나타나고 Restart Now 버튼을 클릭하여 Eclipse를 다시 시작한다.

설치가 완료되고 Eclipse를 다시 시작하면 아래의 그림과 같이 Google Web Toolkit 관련된 메뉴가 추가되어 있을 것이다.

이제 GWT을 이용한 Web Application을 개발할 준비가 완료 되었다. GWTGL을 사용하기 전에 우선 GWT가 제대로 동작 하는지 테스트해 볼 것은 추천한다.

샘플코드

GWT동작 테스트 ( 샘플 코드 컴파일 및 실행 )

1. File > New > Web Application Project를 선택하면 아래와 같은 대화상자가 나타날 것이다.
   • ① Project name 과 package에 적당한 이름들을 입력.
   • ② Use Google Web Toolkit을 체크.
   • ③ Generate GWT project sample code를 선택.
   • ④ Use Google App Engine는 체크 해제(체크해 두어도 무방)
   • ⑤ Finish 버튼 클릭

2. 아래의 그림과 같이 새로운 프로젝트가 하나 생성되었다. 윗 단계에서 Generate GWT project sample code를 선택하였으므로, 이 샘플을 Ctrl+F11로 프로젝트를 빌드 및 실행 시킨다.

3. 아래의 그림과 같이 Development Mode라는 이름의 탭이 활성화 된 것을 확인할 수 있다. 붉은색 밑줄로 표시된 주소를 복사하여 웹 브라우저에 붙여 넣거나, 더블 클릭하여 실행 시킨다.

4. 아래의 그림과 같이 GWT Developer Plugin을 설치 할 것을 요구한다. 파란색 버튼(혹은 링크)를 클릭하여 플러그 인을 다운 받고 설치한다.

5. 아래 그림과 같이 Sample Web Application의 실행 결과를 확인할 수 있다.

6. 위의 프로그램은 java로 작성되었고 아직 javascript로 컴파일 되지 않았다. Eclipse의 오른쪽에 있는(통상 오른쪽에 있는) Package Explorer에서 방금 작성한 프로젝트에서 우클릭 > google > GWT compile을 선택한다. 또는 도구 상자에 있는 붉은색의 버튼(GWT compile project)을 선택한다.

7. Compile 버튼을 클릭한다.

8. 아래의 그림과 같이 Console탭에 컴파일에 관련된 메세지가 출력되면서 컴파일이 진행되는 것을 확인할 수 있다.(DualCore E2200 2.2GHz에서는 1분, i7 920에서는 30초 정도의 상당한 시간이 소요되었다.)

9. 이번에는 Debug mode가 아닌, javascript를 이용한 실행을 하기 위해 3번에서 보았던 어플리케이션 주소에서 파라미터 부분을 제외한 주소만 입력한다. http://127.0.0.1:8888/GWTGL_Prac01_HelloGWT.html?gwt.codesvr=127.0.0.1:9997

10. 그러면 아래와 같은 결과를 볼 수 있다. 결과는 5번과 같지만, 입력된 주소가 다르고, 5번과는 달리 디버그 모드로 실행되지 않았다.