ExtJS를 기반 라이브러리로 사용한 새로워진 TISTORY 관리자 화면

Develope/ExtJS 2008/09/19 23:34
티스토리 관리자 화면이 변경되었다. 메뉴 구성 자체는 이전 관리와 유사하나 세세한 UI 가 많이 변경되었고, 브라우저 호환성이 상당히 개선되었다.
어떤 자바스크립트 라이브러리를 사용하였을까? 자체 제작이라면 상당한 수준이라 생각되었다. 사용된 소스를 살짝 보니.. prototypejs 도 아닌 JQuery도 아닌 ExtJS 아닌가..
ExtJS 로 구현한 수많은 사이트를 돌아다녔지만 이정도로 많은 걷모양을 수정한 사례는 보지 못했었다. 물론 core 만 사용한다면 걷모양과는 관계가 없겠지만 티스토리의 경우 위젯까지 사용하고 있다.
관심을 가지고 자세히 살펴보니 단순히 테마만 변경한 것이 아니고, 위젯중 많은 부분을 수정, 확장하여 사용하여 Grid, Tree, Tab 은 물론 각종 Form Element 까지 완전히 다른 모습으로 탈바꿈 해 놓았다.
이정도면 ExtJS 공식 블로그에 적용사례로 소개되어도 될 듯 싶다.


ExtJS 는 사실 좀 무겁다. 용량도 큰 편이고 수많은 엘리먼트를 동적으로 조작하다 보니 실행속도도 느린편이다. 당연히 어느정도 클라이언트 환경을 특정할 수 있는 인트라넷 기반 RIA 제작에나 적당하다고 생각했는다. 티스토리 개발팀은 불특정 다수가 사용하는 대중적인 사이트에 과감히 적용해냈다.
다른면으론 이것은 또한 ExtJS 가 대형 포탈에 적용할 만큼 충분히 안정화 되었다는 것을 의미하기도 한다.

마지막으로 새로운 관리자화면을 개발 및 테스트 하느냐고 불철주야 고생한 모든 분들에게 박수를 보내는 바이다.
저작자 표시 비영리 변경 금지
Posted by 호리우스
TAG Extjs, JavaScript, 티스토리
트랙백 0개, 댓글 0개가 달렸습니다

트랙백 주소 :: http://horious.net/trackback/29

댓글을 달아 주세요

구글 크롬 웹애플리케이션 바로가기 만들기

Software 2008/09/03 08:33
구글 크롬 (Google Chrome)
드디어 구글 크롬 베타버전이 출시되었다. FF3 쓰는 재미에 한참 빠져든 나에게 새로운 즐거움이 또 하나 늘어나는 구나. 사용자 입장에서 성능 좋은 공짜 브라우저가 자꾸만 늘어가는 것은 반가운 일이 아닐 수 없다!!

웹애플리케이션 바로가기 만들기??
여러가지 기능들을 테스트 하던 중 크롬의 재미있는 기능을 발견하였다. 이름하여 웹애플리케이션 바로가기
사실 이 기능은 FF3에도 부가기능 Prism for Firefox (이하 Prism)를 통해 똑같이 구현할 수 있다. 다만 구글 크롬에서는 그 기능을 직접 내장한 것이 특징이다. 그 밖에도 몇몇 차이점이 있는데 차차 소개하도록 하겠다.
그럼 Prism 혹은 웹애플리케이션 바로가기 만들기 기능은 무엇인가? 한번 써보면 금방 알겠지만 웹애플리케이션을 마치 데스크탑 애플리케이션 인냥 그동할 수 있게 해준다. 바탕화면이나 빠른실행줄에 바로가기를 만들 어 줄 뿐만 아니라 브라우저에 당연히 붙어있는 주소검색, 탭, 가타 패널등을 없애서 윈도우에 바로 웹애플리케이션을 띄어준다.

애플리케이션인가? 웹사이트인가?

위 스크린샷을 보면 알겠지만 주소창과 몇몇 패널들이 사라진 것 만으로도 충분히 데스크탑 애플리케이션 스러운 효과를 줄 수 있다. (ExtJS 를 사용하여 구현중인 웹애플리케이션이다.)

뭐가 좋은데?
별거 아닌 것 같은 기능이지만 바탕화면 바로가기 클릭만으로 해당 웹애플리케이션을 로딩 할 수 있고, Prism 같은 경우에는 전용 캐쉬에 웹 리소스들을 보관함으로 네트웍 비용이 대폭 절감된다. (다만 원하지 않는 캐쉬가 남아있어 갱신되지 않는 경우도 있긴 한다.) 브라우저 인터페이스도 전용 데스크탑 애플리케이션을 돌리는 기분뿐만 아니라 공간도 효율 적으로 쓸 수 있다.

FF3 Prism과 Chrome 의 미묘한 차이
지금까지 발견한 말하기도 애매한 미묘한 차이점을 살펴보면
  1. 아이콘을 만들 때 FF3 는 원본 favicon.icon 을 쓰지만 크롬은 다운사이징한 아이콘을 쓴다. 따라서 크롬은 큰 아이콘으로 봤을 때 깨진다.
  2. FF3 가 Chrome 보다 캐쉬를 보다 적극적으로 활용하는 듯 하다. 웹페이지가 갱신되어도 FF3 의 Prism 은 간혹 반영하지 못하는 현상이 생긴다. (사실 버그인지, 서버 캐쉬 설정 문제인지 정확하게 확인하지 못했다.)
  3. 애플리케이션을 생성할때 FF3 의 Prism 은 applcation name을 영어로밖에 지정하지 못하여 단축아이콘이 영어로 생성되지만 크롬의 바로가기 만들기는 index page 의 title 을 단축아이콘 명으로 지정해 버린다.

그렇지만 결국 웹페이지 바로가기일 뿐
그러나 Prisim 이나 웹애플리케이션 바로가기 만들기나 생김새만 데스크탑 애플리케이션 일뿐 사실 인터넷이 되지 않는다면 아무것도 할 수 없다. 단지 주소줄이 없는 브라우저에 사용자가 설정한 웹사이트를 로딩해 주는 역할만 하는 그야말로 바로가기 이기 때문이다.

진정한 데스크탑 애플리케이션
그렇다면 대안이 되는 기술이 있는가? 그렇다 바로 Adobe Air 다.
Air는 서버상의 리소스를 아예 패키징 하여 클라이언트로 다운로드 하여 Air 에 내장된 브라우저로 웹리소스를 보여준다. 게다가 Air에서 제공하는 각종 라이브러리를 통해 native window, sound, file system, local database 등의 제어도 가능하니 그야말로 html로 만드는 데스크탑 애플리케이션이 되겠다. 다만 flex 나 flash 로 Air를 만드는 것에 비해 제약이 좀 많은 편이다.
쓰다보니 Air 얘기까지 흘러와 버렸다. ㅋㅋ

그밖의 이야기
구글 크롬은 ExtJS와 궁합이 환상이다. 몇몇 무거운 위젯의 렌더링 타임이 IE 와 비교했을 때 엄청 빠르고 FF3 보다 다소 빠르다. 애플의 사파리, 구글의 크롬, 어도비의 에어 모두 Webkit 엔진을 사용했는데 사실 Javascript 엔진이 ExtJS 성능과는 더 밀접한 관련이 있지 않나 싶다. 그런면에서 크롬은 Javascript Virtual Machine V8 이라는 놈을 내장했다고 하는데 이놈이 발군의 실력을 발휘하는 것인가?? 곧 조만간 성능 비교한 자료가 국내외에서 포스팅 될 터인데 빨리 보고 싶다.

저작자 표시 비영리 변경 금지
Posted by 호리우스
TAG Adobe AIR, Extjs, google, Google Chrome, JavaScript, 브라우저
트랙백 0개, 댓글 2개가 달렸습니다

트랙백 주소 :: http://horious.net/trackback/26

댓글을 달아 주세요

  1. dudtn 2008/09/04 10:01  댓글주소  수정/삭제  댓글쓰기

    예전에 어디서 듣기로는 Google Gears가 오프라인에서도 작동하는 웹어플을 생성해주는 것으로 들은 것 같은데 그건 아닌것 같더군요,,,

    크롬을 깔아놓고 웹어플 바로가기 키를 만들고 오프라인상에서 클릭해보니,,, 페이지를 못찾는다고 나오더군요 +_+ 혹시나 해서 firefox에 google gears add-on을 설치하고 prism으로 만든 웹어플 시도를 해봤지만 역시 마찮가지구요(프리즘으로 만든 웹어플에는 부가기능이 작동안한다는 것을 깜빡+_+),,, ,,,

    오프라인상에서 웹어플이가능하게 해주는 건 언제쯤 나올까요 +_+

    air... 예전에 미투데이 open api 포스팅에서 한 번 써보긴 했는데,,, 이걸로 구글 app들을 사용할수 있을까요??? 정확하게 어떤건지 잘 몰라서.... ...

    extjs가 정확하게 먼지 모르겠는데 저도 어디서 들어본듯한... 제 블로그 테마가 ext js theme 더군요 ㅋㅋㅋㅋ

    포스팅에 나오는 용어들이 다들 한 번씩 들어봤는데 다 따로따로노는 듯한 느낌이네요 ㅋ

    하여간 글 잘 읽고 갑니다.^ㅡ^,,,,

    오프라인 어플로 가능하게 하는 것 좀 나왔으면 좋겠어요 +_+

    • 호리우스 2008/09/05 07:47  댓글주소  수정/삭제

      안녕하세요 댓글 감사합니다.
      사실 동적으로 페이지들을 생성해 내는 이른바 웹 애플리케이션 에서는 사실상 오프라인 에서 구동하는 것이 아무 의미가 없을지 모릅니다. 그렇지만 개발시에 오프라인 구동을 염두하고 Adobe Air 나 말씀해 주신 Google Gears 와 같은 플랫폼을 사용하여 개발한다면 불가능 한 것은 아닙니다.
      예를들어..
      오프라인 일 때에는 자체 저장소를 쓰다고 온라인일 시에 서버와 동기화를 하여 서버의 저장소를 쓴다던가 하는 행위가 가능해 지는 겁니다.
      제가 알기로는 Google gears 개발자 지원 사이트에 위 상황에 해당하는 여러가지 예제가 있는 것으로 알고 있습니다. 그리고 ExtJS 사이트에 가시면 간단한 일정관리 프로그램을 Google Gears + ExtJS 로 구현한 버젼과 Adobe Air + ExtJS 로 구현한 버젼 모두 있습니다. 관심 있으시면 한번 살펴 보세요.