문의 : 미래웹기술연구소 영업전화번호 : 070-4335-1749 이메일 : sales@miraeweb.com

웹 기반 소프트웨어 툴의 성공 비결은 확장성과 세련된 디자인

기회

클릭타임은 웹 기반의 시간-비용 기록 툴이다. SaaS(서비스형 소프트웨어) 제품으로

서 전 세계 1,000여 개의 기업과 비영리단체, 정부기관에서 사용하고 있다. 고객들은

클릭타임을 이용해 인건비를 기록하고 청구 가능한 시간을 청구서로 변환하며 외부 회

계 감사 조건을 준수한다. 비자(Visa)와 제너럴일렉트릭(GE), 리얼네트웍스(RealNet-

works), 적십자사(Red Cross)가 대표적인 고객 기업이다.

솔루션

클릭타임이 v2부터 Ext JS를 사용해 온 것은 발군의 크로스 브라우저 UI 컴포넌트와 통

합적인 DOM/CSS 조종 기능이 훌륭히 어우러졌다는 이유였지만 그 밖의 혜택도 있었

다. 클릭타임의 CEO 알렉스 맨(Alex Mann)은 이렇게 설명한다. “지난 4년간 컴포넌트

와 위젯 모음은 크게 발전하고 개선되었습니다. 그러나 Ext JS를 사용하면 할수록 다양

한 컨트롤뿐만이 아니라 디자인과 확장성에 감탄할 수밖에 없었습니다.”

Ext JS 고객사례

클릭타임(ClickTime)

제품

Ext JS

산업 분야

서비스형 소프트웨어

기회

웹 기반의 시간 및 비용 기록 툴을 만드는 것.

솔루션

Ext JS는 발군의 크로스 브라우저 UI 컴포넌

트와 통합적인 DOM/CSS 조종 기능이 훌륭

히 어우러졌다.

결과

·Ext JS를 사용하면서 개발팀이 시간을

거의 50% 절약했다.

·컴포넌트를 쉽고 빠르게 확장하고 마음

대로 재사용함으로써 개발비를 절감했다.

·사용하고 쉽고 스타일이 세련된 작업 시간

기록표를 만들면서 단순하고 보기 좋은 UI로

사용자에게 종합적인 정보를 제공한다는

기준을 지켰다.

템플릿형 그리드를 사용한 덕분에, 유저 인터랙션이 요청되면 컨트롤들이 셀의 위쪽에 뜨기 때

문에 로딩 시간이 굉장히 빠르다.

문의 : 미래웹기술연구소 영업전화번호 : 070-4335-1749 이메일 : sales@miraeweb.com

알렉스는 Ext JS 컴포넌트의 확장성에 관해 최근에 겪었던 일화를 이야기한다. “저희

의 작업 시간 기록표 뷰 페이지는 사용자가 작업 시간 기록표 전체를 한눈에 보고 기록

표에서 기록표로 이동하거나 다른 사람의 기록표를 검토할 수 있게 합니다. 게다가 사용

자의 허용 범위에 따라서 여러 가지 관리자 기능을 아주 빠르고 간편하게 수행할 수 있

죠(근무 시간 기록표 제출, 승인, 잠금 등). 아시겠지만 이런 페이지는 순식간에 정말로

복잡해질 수 있는데, 저희는 단순하고 보기 좋은 UI를 표준으로 유지하면서도 사용자에

게 다량의 정보는 물론이고 어쩌면 권한까지도 제공할 방법을 찾고 있었습니다. Ext JS

는 그 목적을 이뤄 주었고요.”

결과

Ext JS로 클릭타임은 사용하고 쉽고 스타일이 세련된 작업 시간 기록표를 만들면서 컴

포넌트를 확장하고 재사용해 개발 비용을 절감할 수 있었다. 알렉스는 다음과 같은 방

법으로 깔끔한 디자인을 만들고 개발 속도를 급증시켰다고 한다. “시간 데이터의 성격

이 계층적(예: “어떤 클라이언트를 위해 어떤 작업을 했다”)이라는 점과 실제 보여줘야

할 시간의 양(어떤 기록표는 1개월치 데이터를 포함해야 한다)을 함께 고려해, 저희는

이 정보를 가장 잘 보여 줄 방법은 잠금 가능한 트리 그리드 패널이라는 결론을 내렸습

니다. 간편한 UX 트리 그리드 패널을 금방 찾을 수 있었고, 기존에 사용하던 잠금 가능

한 그리드 패널의 버전과 UX 트리 그리드 패널을 결합해 일주일 안에 효과적인 프로토

타입을 만들었습니다. 또 일주일 후에는 3면에서 잠기고 스타일이 아름다운 패널을 만

들어 냈고, 많은 양의 데이터를 단순하고 보기 좋게 보여 준다는 기준에 부합할 수 있었

습니다. 이후 하루도 지나지 않아서 왼쪽에 상호작용적 잠금 메뉴를 추가할 수 있었어

요.”라고 데이비드는 말했다.

클릭타임은 Ext JS로 개발 시간을 크게 단축해 애플리케이션을 더욱 빠르게 시장에 내

놓을 수 있었다. “종합적으로 봤을 때 Ext JS를 사용하면서 개발팀이 시간을 거의 50%

절약했습니다. 곧바로 사용 가능한 컨트롤이 정말 잘 문서화되어 있고(어떤 부분이 불확

실할 경우 그냥 소스를 찾아보는 것도 좋아하지만요) 원하는 대로 확장하고 재사용할 수

있었기 때문이죠.” 알렉스는 이렇게 말했다.

앞으로도 클릭타임에 Ext JS를 사용할 것인지에 대해 알렉스는 이렇게 말했다. “저희는

Ext JS로 성공을 거두고 있습니다. 센차 제품들의 미래를 무척 기대하고 있고, 센차 커

뮤니티의 일원이 되어 기쁩니다.”

센차는 개발자가 웹 표준 기술로 흥미진진한 경험을 만들어 사용하고 최적화하도록 돕는

애플리케이션 프레임워크를 만든다. 센차의 주력 상품인 Ext JS와 센차 터치는 데스크톱

과 모바일 기기용 인터넷 애플리케이션을 풍부하게 제공하는 크로스 브라우저 자바스크

립트 프레임워크다. 전 세계적으로 15만여 회사에서 100만 명이 넘는 개발자가 센차 제

품군으로 날마다 멋진 애플리케이션을 만들고 있다.

Ext.grid.GridView의 커스텀 변형에 접을 수

있는 트리 구조와 헤더 및 합계를 잠그는 방법

을 결합함으로써 사용자가 중앙에 있는 열들을

스크롤할 수 있다.

Ext.grid.GridView의 잠금 가능한 변형을 사

용해서 사용자가 오른쪽 데이터를 스크롤해도

왼쪽 열이 계속 보인다.

미래웹기술연구소 서비스

· Sencha 라이센스 판매

· Sencha 공인교육

· 프로페셔널 컨설팅

· 온라인 기술지원

문의미래웹기술연구소

070-4335-1749

sales@miraeweb.com