2011년 12월 23일
UI를 Java 코드로 작성하고, 결과물은 JavaScript로... GWT/SmartGWT
대략 한 달 반 동안, 거짓말 조금 보태서 자고 밥 먹는 시간을 제외하고 회사 일에 투자 한 느낌이다. 애초에 만만하게 보고 시작한 일이, 생각보다 꼬이면서 끝까지 일을 어렵게 만들었다. 그래도 내가 하겠다고 한 일이라서 뭐라고 할 수도 없었고, 그동안 제대로 접해보지 못한 기술(툴? 라이브러리?)이라 그나마 참으며 할 수 있었다. 그저 그런 지루한 일이었다면 벌써 회사를 때려치웠을 것이다.
SmartGWT/GWT 스크린 샷
그 제대로 해보지 않은 기술이라는 것이 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에서 제공하는 것(기능? 이미지?)으로 구현했다.
SmartGWT/GWT 스크린 샷
# by | 2011/12/23 02:31 | :: C space :: 컴퓨터 | 트랙백 | 덧글(9)
2008년 07월 03일
Eclipse 성능 테스트 플러그인 TPTP... Test & Performance Tools Platform
무늬만 개발자이기에 Eclipse를 설치해 놓고도 거의 쓰는 일이 없었는데, 최근 잠시 Eclipse를 쓸 일이 생겨서 이래 저래 만져보다가 이전에 설치에 실패했던 TPTP(Test & Performance Tools Platform)가 불현듯 생각 나서 다시 설치를 시도 해보았다. 회사에서는 MS Windows 상에서 Eclipse를 사용 하기에 이전부터 쓰고 있던 WTP(Eclipse 3.3.2 Europa)에 TPTP 4.4.x All TPTP plugin Runtime을 설치해 주었더니 잘 동작했다.
집에서는 더욱 더 Eclipse를 쓰는 일이 없지만, MS Windows에도 구축한 환경이라, 우분투가 깔린 내 노트북에도 설치해 보았다. 근데 이게 만만치 않았다. 설치를 성공하는 데 3일이 걸렸다. Eclipse 3.3도 써 보고, 3.4도 써보고 이래 저래 삽질을 한 끝에 결국은 TPTP All-in-One Package를 설치하고, 이런 저런 삽질을 더 해준 후에야 TPTP가 정상적으로 동작하는 것을 볼 수 있었다.
테스트를 위해 몇분 만에 후딱 짠 프로그램을 TPTP로 성능 측정을 해보았다. 테스트한 프로그램은 num(초기값:0)이라는 변수를 1000번 임의로 +1 혹은 -1 하는 프로그램이다. Console에 찍힌 것 처럼 num 결과값은 32, +1을 516번, -1을 484번 했다. TPTP에 찍힌 메소드 호출 횟수 역시 결과값과 동일하다. 그리고 각 메소드가 프로그램의 총 실행시간 중 어느정도의 비중을 차지하고 있는지도 알 수 있다.
최근 Socket을 이용해서 다른 프로그램과 데이터를 주고 받는 모듈(?)을 만들 기회가 있었는데, 처음에는 데이터가 발생할 때 마다 Connect해서 데이터를 전송하고, Close하는 방식으로 짰다. 그리고는 TPTP를 통해서 테스트를 해보니 Connect 시 엄청난 부하(시간의 Delay)가 발생하는 것을 보고는 연결을 유지한 채로 데이터를 받는 방식으로 고쳤다. TPTP를 실행해 보기 전까지는 Connect 시 부하가 생길 것은 예상했지만, 그 정도로 실행 속도에 영향을 줄 것이라고는 미쳐 생각을 하지 못했다.
요즘 빨라진 컴퓨터의 성능으로 프로그램을 짜고 난 후 테스트를 간단하게만 할 경우, 프로그램의 성능에 대한 문제를 알아채기란 쉽지 않다. 그럴 경우 이 TPTP를 이용하면 눈에 보이는 수치로써 성능을 측정해 주고, 더욱 많은 데이터를 처리할 경우에는 얼마나 문제가 될 것인지도 예측할 수 있다. 그런 면에서 Eclipse로 개발을 한다면 필수적으로 함께 사용해야 할 플러그인이라는 생각이 든다.
설치한 환경은 Ubuntu 8.04 Hardy Heron, Eclipse 3.4 Ganymede(TPTP All-in-One Package) 이다. 가장 힘들었던 삽질은 libstdc++2.10-glibc2.2 패키지의 설치였다.
TPTP는 실행시 libstdc++-libc6.2-2.so.3 파일이 필요한데, 이 파일이 TPTP 실행 시 필요하다는 것을 아는데 이틀이 걸렸다. 또 이 파일이 Feisty인지 Gutsy를 마지막으로 사라졌기에 Feisty에 있는 패키지를 받아서 설치했다. 그리고 나서 리부팅을 하지 않고 하루종일 삽질하다가 내일하자고 포기하고 컴퓨터를 끄고 잔 후, 회사를 다녀와서 다시 부팅을 해보니 문제가 해결되었다.
요약하자면 'TPTP All-in-One 설치 후, libstdc++2.10-glibc2.2 패키지 설치, 그리고 재부팅'으로 30분도 안 걸릴 작업이다. 난 3일이나 걸렸지만...
libstdc++2.10-glibc2.2 패키지는 아래 주소를 /etc/apt/sources.list에 추가한 후, 찾아서 설치하면 된다.
집에서는 더욱 더 Eclipse를 쓰는 일이 없지만, MS Windows에도 구축한 환경이라, 우분투가 깔린 내 노트북에도 설치해 보았다. 근데 이게 만만치 않았다. 설치를 성공하는 데 3일이 걸렸다. Eclipse 3.3도 써 보고, 3.4도 써보고 이래 저래 삽질을 한 끝에 결국은 TPTP All-in-One Package를 설치하고, 이런 저런 삽질을 더 해준 후에야 TPTP가 정상적으로 동작하는 것을 볼 수 있었다.
최근 Socket을 이용해서 다른 프로그램과 데이터를 주고 받는 모듈(?)을 만들 기회가 있었는데, 처음에는 데이터가 발생할 때 마다 Connect해서 데이터를 전송하고, Close하는 방식으로 짰다. 그리고는 TPTP를 통해서 테스트를 해보니 Connect 시 엄청난 부하(시간의 Delay)가 발생하는 것을 보고는 연결을 유지한 채로 데이터를 받는 방식으로 고쳤다. TPTP를 실행해 보기 전까지는 Connect 시 부하가 생길 것은 예상했지만, 그 정도로 실행 속도에 영향을 줄 것이라고는 미쳐 생각을 하지 못했다.
요즘 빨라진 컴퓨터의 성능으로 프로그램을 짜고 난 후 테스트를 간단하게만 할 경우, 프로그램의 성능에 대한 문제를 알아채기란 쉽지 않다. 그럴 경우 이 TPTP를 이용하면 눈에 보이는 수치로써 성능을 측정해 주고, 더욱 많은 데이터를 처리할 경우에는 얼마나 문제가 될 것인지도 예측할 수 있다. 그런 면에서 Eclipse로 개발을 한다면 필수적으로 함께 사용해야 할 플러그인이라는 생각이 든다.
설치한 환경은 Ubuntu 8.04 Hardy Heron, Eclipse 3.4 Ganymede(TPTP All-in-One Package) 이다. 가장 힘들었던 삽질은 libstdc++2.10-glibc2.2 패키지의 설치였다.
TPTP는 실행시 libstdc++-libc6.2-2.so.3 파일이 필요한데, 이 파일이 TPTP 실행 시 필요하다는 것을 아는데 이틀이 걸렸다. 또 이 파일이 Feisty인지 Gutsy를 마지막으로 사라졌기에 Feisty에 있는 패키지를 받아서 설치했다. 그리고 나서 리부팅을 하지 않고 하루종일 삽질하다가 내일하자고 포기하고 컴퓨터를 끄고 잔 후, 회사를 다녀와서 다시 부팅을 해보니 문제가 해결되었다.
요약하자면 'TPTP All-in-One 설치 후, libstdc++2.10-glibc2.2 패키지 설치, 그리고 재부팅'으로 30분도 안 걸릴 작업이다. 난 3일이나 걸렸지만...
libstdc++2.10-glibc2.2 패키지는 아래 주소를 /etc/apt/sources.list에 추가한 후, 찾아서 설치하면 된다.
deb http://archive.ubuntu.com/ubuntu/ feisty universe
# by | 2008/07/03 02:28 | :: C space :: 컴퓨터 | 트랙백 | 덧글(4)
◀ 이전 페이지 다음 페이지 ▶
:+: sakuragi's Steam :+:
