sakuragi's miscellaneous space

 그 제대로 해보지 않은 기술이라는 것이 Google Web Toolkit(이후, GWT)이다. 그리고 이 GWT를 이용해서 좀 더 확장되고 일관된 UI를 제공해 주는 외부 라이브러리가 SmartGWT이다. SmartGWT의 데모 사이트는 다음과 같다. http://www.smartclient.com/smartgwtee/showcase/

 그렇다면 GWT라는 것이 무엇인가 하면, Java로 소스 코드(Source Code)를 작성하면 이 Java 코드를 순수 JavaScript로 변환해 주는 일종의 컴파일 엔진이다. GWT의 장점이라면, JavaScript에서 가장 어렵게 느껴지는 디버깅을 상당 부분 해결해 준다는 것이다. Java로 코딩한다는 이야기인즉슨, Eclipse라는 막강한 IDE를 사용할 수 있다는 얘기며, 그 말은 컴파일 이전에 코드의 오류를 발견할 수 있다는 얘기가 된다.

 물론 실제로 써보면 이런 꿀 같은 달콤한 장점만 있는 것은 아니다. 결국, 결과물은 JavaScript이기 때문에 JavaScript의 본연의 단점을 완전히 극복할 수는 없다. Java 소스 코드 상으로는 아무런 문제가 없는 것처럼 보이지만, 컴파일 후에 UI의 객체가 나타나지 않는 문제가 발생할 수 있고, 서버와 비동기 통신(Ajax)으로 여러 가지 고민거리도 생긴다. 하지만 Java 스타일로 UI 코딩을 할 수 있고, 디버깅 도구도 존재하기 때문에 사이트가 커지고 복잡해지면 충분한 장점이 될 수 있다고 본다. 게다가 이름에서도 볼 수 있듯이 Google의 프로젝트이기 때문에 소리소문없이 사라질 가능성도 적어 보인다.

 그러면 SmartGWT는 무엇이냐 하면 이런 GWT를 이용해도 모든 브라우저와의 호환성을 보장할 수는 없다. 왜냐하면, 각 브라우저에서 기본적인 Html Tag를 처리하는 방식이 조금씩 다르기 때문이다. 즉 <input type="text" /> 라는 태그는 모든 브라우저에서 똑같은 모양으로 보이지 않는다.

 이때 SmartGWT의 필요성이 생긴다. SmartGWT는 대부분 브라우저에서 거의 똑같게 보이는 UI 컴포넌트를 제공해 준다. 즉, 한 번의 코딩으로, 아니 하나의 소스 코드로 IE, Firefox, Chrome, Safari등의 브라우저에서 똑같이 보이고, 똑같이 동작하는 사이트를 만들어 낼 수 있다는 것이다. 물론 이렇게 4개 브라우저에서 똑같이 보이게 하려면 개발 시에도 어느 정도 신경 써서 맞추어 가면서 코딩을 해야 하지만, 그냥 HTML/JS/CSS로 작업할 때 써야 하는 각종 꼼수 및 브라우저 특화 CSS, JS등의 작업은 사라진다. 개발자는 Java 언어, 하나의 코드만 작성하면 된다. 각 브라우저와의 호환성은 GWT나 SmartGWT의 책임이 된다. 물론 직접 개발을 해보면 생각처럼 간단하지 않은 문제가 발생하긴 한다.

 어쨌든 이렇게 해서 개발을 완료한 화면이 아래의 화면들이다. 개발은 3명이 2달 정도의 시간을 투자했고, 난 GWT/SmartGWT를 이용한 UI 부분만 전담해서 개발했고, 서버와 DB에 각각 1명의 개발자가 개발을 담당했다(개발 이전, SPEC 작업에 들어간 인원도 있지만 여기서는 제외했다). 아래 스크린 샷은 MacOS Lion의 Safari 5.1.2에서 찍은 것이며, IE, Firefox, Chrome에서도 거의 동일하게 보이고, 동일하게 동작한다.

 참고로 로그인 화면의 배경 이미지와 메뉴 상단의 로고 이미지만이 디자이너의 손길이 닿은 부분이며, 나머지 아이콘 등은 순수 GWT/SmartGWT에서 제공하는 것(기능? 이미지?)으로 구현했다.

오늘도 노오란(?) 택배 박스가 나를 찾아왔다.

지름은 지름을 부르고...