2011년 12월 23일
UI를 Java 코드로 작성하고, 결과물은 JavaScript로... GWT/SmartGWT
대략 한 달 반 동안, 거짓말 조금 보태서 자고 밥 먹는 시간을 제외하고 회사 일에 투자 한 느낌이다. 애초에 만만하게 보고 시작한 일이, 생각보다 꼬이면서 끝까지 일을 어렵게 만들었다. 그래도 내가 하겠다고 한 일이라서 뭐라고 할 수도 없었고, 그동안 제대로 접해보지 못한 기술(툴? 라이브러리?)이라 그나마 참으며 할 수 있었다. 그저 그런 지루한 일이었다면 벌써 회사를 때려치웠을 것이다.
그 제대로 해보지 않은 기술이라는 것이 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에서 제공하는 것(기능? 이미지?)으로 구현했다.
참고로 로그인 화면의 배경 이미지와 메뉴 상단의 로고 이미지만이 디자이너의 손길이 닿은 부분이며, 나머지 아이콘 등은 순수 GWT/SmartGWT에서 제공하는 것(기능? 이미지?)으로 구현했다.
# by | 2011/12/23 02:31 | :: C space :: 컴퓨터 | 트랙백 | 덧글(9)
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
요새 웹 플젝때문이 돌아버리겠어요 ㅠ.ㅠ
python django로 하는데 브라우저마다 다 달라......크흑 ㅠ.ㅠ
한번의 코딩으로 모든 브라우저에서 동일한 동작을 보장 받는다는 것이 신경 쓸 일은 많아도...
완성해 놓으면 좋은 것 같아요. :D
UI 관련 부분(화면 구성)은 SmartGWT의 Showcase를 참고로 했습니다. 달리 참고할만한 사이트가 없다고 봐도 무방할 정도로 자료가 없었습니다.
http://www.smartclient.com/smartgwt/showcase/
서버와 UI의 통신은 아래 URL에 있는 remote service를 사용해서 구현했습니다. Wizard를 사용하진 않았지만 구현 방법은 동일하네요.
http://developers.google.com/web-toolkit/tools/gwtdesigner/wizards/gwt/remoteservice
현재 SmartGWT는 4.0 이하 버전에서 IE 10 호환성에 문제가 있으니, 되도록이면 4.0으로 개발하시는게 좋습니다. 저 사이트는 2.5로 구현했는데, IE 10에서 문제가 생겨 현재 4.0으로 업그레이드가 계획되어있습니다.
그러면 위의 GWT를 이용하면 avior을 javascript로 변화해서 단순히 Floodlight model에 추가시키기만하면 flow push기능을 수행할 수 있는 건가요??
프로그래밍에 대한 기초지식없이 프로젝트를 진행하려고하니 어려움이 많이 따릅니다. 조언부탁드립니다. 감사합니다.
http://www.smartclient.com/smartgwtee/showcase/#multi_file
저희는 SmartGWT의 기능을 이용한 것은 아니고, 서버에서 multipart로 받도록 별도로 구현했습니다.