Sencha Ext JS를 활용한 클릭타임 구축 사례

1. 문의 : 미래웹기술연구소 영업전화번호 : 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로
사용자에게 종합적인 정보를 제공한다는
기준을 지켰다.
템플릿형 그리드를 사용한 덕분에, 유저 인터랙션이 요청되면 컨트롤들이 셀의 위쪽에 뜨기 때
문에 로딩 시간이 굉장히 빠르다.

2. 문의 : 미래웹기술연구소 영업전화번호 : 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