Sencha Ext JS 구축사례 : 클릭타임
0 likes1,468 views
Sencha Ext JS를 활용한 클릭타임 구축 사례
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