ݺߣ

ݺߣShare a Scribd company logo

Sencha Touch 구축사례 : 포드 쇼룸 앱

•
•
미래웹기술연구소 (MIRAE WEB)
미래웹기술연구소 (MIRAE WEB)

Sencha Touch 를 활용한 포드 쇼룸 앱 구축 사례

1 of 2
Download to read offline
문의 : 미래웹기술연구소 영업전화번호 : 070-4335-1749 이메일 : sales@miraeweb.com 풍부한 UI 컴포넌트는 물론 내장된 MVC 시스템과 크로스 플랫폼 지원으로 고도의 몰입형 모바일 앱을 보장한다. 기회 버로우즈(Burrows)는 클라이언트가 구매 결정을 알려 주기 위해 핵심 정보와 창의적 인 컨텐트를 고객에게 제공하도록 돕는 커뮤니케이션 종합서비스회사다. 버로우즈는 포드(Ford)와 합작해 포드 자동차 모델의 이미지와 정보를 보여주는 포털 애플리케이 션 ‘포드 쇼룸(Ford Showroom)’ 을 만들었다. 이 앱의 주목적은 딜러들의 자동차 판 매를 돕고 고객들이 포드 브랜드에 푹 빠지게 하는 것이었다. 솔루션 포드 쇼룸 앱을 개발하기로 계획한 버로우즈는 자바스크립트 프레임워크를 선정하기 위해 철저한 테스트를 실시했다. 영&루비캠(Young & Rubicam)의 한 부문인 버로우 즈의 프론트엔드 개발자 리키 클레그(Ricky Clegg)는 이렇게 설명한다. “저희가 모바 일 프레임워크로 센차 터치를 선택한 이유는 센차 터치가 자바스크립트 프레임워크 시 장에서 독보적인 위치에 있었고, 센차 터치의 훌륭한 API가 저희 회사의 플래시 플랫 폼(Flash Platform) 개발자들이 자바스크립트로 전환하는 데 큰 도움이 되었기 때문 입니다. 회사 차원에서 저희는 모든 솔루션에 맞는 ‘단일 코드베이스’를 진정한 목표로 삼고 있고 센차는 그 목표를 달성하기에 가장 좋은 기회였습니다.” 버로우즈는 프로젝트의 개발 단계로 나아가기 시작하면서 애플리케이션 최적화에 있 어 센차 터치 2의 이점을 여러 가지 경험했다. “센차 터치 2가 최고의 컴포넌트와 기능 을 제공한다는 것을 깨달았습니다.”라고 리키는 말했다. “객체 지향적 자바스크립트를 작성하고 싶을 때 센차 터치만큼 시작하기 쉬운 것은 없어요. ‘extends’, ‘requires’, ‘statics’와 ‘constructor’는 자바스크립트 초보자든 전문가든 누구나 바라지 않을 수 없는 최고의 기본 요소들입니다. 이번 작업을 통해 저희는 바이트 하나하나가 중요하 고, 센차 터치 2에서 AJAX와 JSONP를 레이지 로딩해 자바스크립트 파일과 데이터 를 요청하는 기능은 메모리를 적게 유지하면서 코드를 필요할 때만 요청하는 방법으로 훌륭하다는 것을 알았습니다.” 결과 버로우즈는 포드 쇼룸 앱을 고객 경험과 딜러 경험 두 가지 버전으로 만들었다. 리키는 각각의 경험을 특별하게 만드는 기능들을 설명한다. “딜러 버전에서는 센차 터치 웹 API Sencha Touch 고객 사례 포드 쇼룸 앱(Ford Showroom App) 제품 센차 터치 산업 분야 자동차 기회 딜러들의 자동차 판매를 돕고 고객들이 포드 브랜드에 푹 빠지게 하는 해상도 독립형의 모 바일 쇼룸 애플리케이션을 만드는 것. 솔루션 고성능 모바일 HTML5 프레임워크인 센차 터치는 크로스 브라우저 호환성으로 풍부한 UI 컴포넌트와 레이아웃을 제공하고 빌트인 MVC 시스템으로 애플리케이션 개발 시간을 단축한다. 결과 · 단일 코드베이스 구축으로 개발 시간과 비용 절약했다. 프로토타입을 며칠이 아닌 몇 시간 만에 개발했다. · 센차 VBox와 HBox 레이아웃으로 해상도 독립형 크로스 플랫폼 애플리케이션을 만들 었다. · 빌트인 MVC 기술을 사용해 코드를 정리 했고, 손쉽게 뷰 사이를 전환하고 데이터를 얻도록 만들었다. · 커스텀 컴포넌트를 만들고 CSS3 애니메이 션을 활용해 사용자가 앱을 내비게이션하기 쉬워졌다.
문의 : 미래웹기술연구소 영업전화번호 : 070-4335-1749 이메일 : sales@miraeweb.com 로 서버와 커뮤니케이션할 수 있기 때문에 딜러가 대리점의 대형 텔레비전 화면에 고화질 이미지와 비디오를 전송할 수 있습니다. 고객 경험 버전은 태블릿 컴퓨터가 제공하는 영 역을 충분히 활용하고 전체 화면 이미지를 통해 사용자에게 몰입형 경험을 선사합니다. 또한 비디오와 풍부한 정보도 제공합니다. 이 애플리케이션에는 자동차 브랜드가 최대 10 개까지 들어 있습니다.” 이 애플리케이션은 안드로이드(Android)와 iOS를 모두 지원한다. 버로우즈는 센차 터치 2를 이용해 레이아웃과 크로스 브라우저 호환성 조건을 처리했을 뿐만 아니라 센차 MVC 로 코드를 정리했다. “센차 터치 2의 레이아웃은 크로스 플랫폼 애플리케이션을 만드는 유연성을 갖춰서 활용도가 가장 높은 기능입니다.”라고 리키는 말했다. “앱을 해상도 독립 형으로 만드는 작업에 유연한 configuration 프로퍼티와 더불어 VBox와 HBox 레이아웃 을 아주 많이 활용했습니다. 레이아웃은 앱이 어떤 크기로든 늘어나 컨테이너 안의 컨텐 트를 처리하게 해 줍니다. 그리고 프레임워크에 곧바로 내장된 센차 MVC 기술을 사용하 면 뷰 사이를 전환하고 데이터를 얻기가 쉽죠.” 버로우즈는 센차 터치의 도움으로 커스텀 컴포넌트도 만들 수 있었다. “저는 DotNaviga- tion을 가장 좋아합니다.”라고 리키는 말했다. “단순한 툴바 인디케이터인데, 저희는 사 용자가 어느 페이지를 보고 있는지 알려 주는 방법으로 그것을 카드 레이아웃이나 캐러셀 레이아웃에 사용했죠. CSS3 애니메이션을 활용해 사용자가 뷰를 앱과 같은 방식으로 쉽 게 이동하게 도와줍니다.” 버로우즈는 센차 터치를 사용하면서 상당한 시간과 비용을 절약했다. “기업들이 iOS 기 반의 애플리케이션만을 원하던 시절은 갔습니다.”라고 리키는 설명했다. “지금은 크로스 플랫폼과 지원 가능한 안드로이드 태블릿 및 아이패드 수에 모든 것이 달렸습니다. 개발 작업을 두 번 반복하지 않음으로써 절감하는 비용이 수십 만에 달하고 불황기에는 한푼 한푼이 중요하잖아요. 저희 회사 개발자들의 효율이 얼마나 높아졌는지는 헤아릴 수 없 을 정도입니다. 센차 터치가 없었다면 아직도 가속도 기반의 터치 스크롤러를 만드는 방 법을 찾고 있었겠죠. 저희는 그러는 대신 센차 기술을 사용함으로써 며칠이 아닌 몇 시간 만에 프로토타입을 만들고, 빠른 시간에 프로토타입을 완전한 기능을 하는 애플리케이션 제품으로 발전시킵니다.” 버로우즈가 모바일 프레임워크로 센차 터치를 선택한 이유는 개발 속도 증가와 비용 절 감이다. “버로우즈는 모든 회사와 개발자에게 센차 터치 2를 권하고 싶습니다. 속도나 여 러 플랫폼 확산이라는 면에서든, 그저 다른 언어를 사용하는 개발로 쉽게 전환하는 수단 으로 자바스크립트가 필요한 경우든 말이죠. 센차에는 훌륭한 지원 포럼과 멋진 커뮤니 티가 있습니다. 센차 터치는 완전한 기능을 갖추고 있고, 저희 버로우즈가 모바일 애플리 케이션을 만드는 유일한 자바스크립트 프레임워크입니다.” 이렇게 리키는 말을 맺었다. 센차는 애플리케이션 개발자가 웹표준 기술을 사용해 멋진 애플리케이션 경험을 만들도 록 돕는 애플리케이션 프레임워크와 툴, 클라우드 서비스를 만들고 있다. 센차의 주력 상 품인 센차 터치와 Ext JS는 풍부한 인터넷 애플리케이션을 만드는 크로스 브라우저 자바 스크립트 프레임워크다. 그 안에는 성능이 뛰어나고 커스텀할 수 있는 UI 구성요소들과 구조가 훌륭하고 확장 가능한 컴포넌트 모델, 직관적이고 사용하기 쉬운 API가 포함된다. 전 세계적으로 15만여 회사에서 200만 명이 넘는 개발자가 센차 제품군으로 매우 기능적 이고 견고한 애플리케이션 경험을 만들고 있다. 미래웹기술연구소 서비스 · Sencha 라이센스 판매 · Sencha 공인교육 · 프로페셔널 컨설팅 · 온라인 기술지원 문의 미래웹기술연구소 070-4335-1749 sales@miraeweb.com 버로우즈는 각 컴포넌트에 센차 VBox와 HBox 와 박스 플렉스 세트를 이용해 iOS와 안드로이 드 모두에 적합하고 완벽하게 유연한 메뉴 시스 템을 만들었다. 버로우즈는 카드 레이아웃과 뷰포트가 떠 있는 새 패널 시스템을 사용해 오버레이를 생성했다. 센차 터치 스와이프 이벤트 덕분에 빠르고 부 드럽게 페이지 사이를 내비게이션할 수 있다.

More Related Content

Sencha Touch 구축사례 : 포드 쇼룸 앱

  • 1. 문의 : 미래웹기술연구소 영업전화번호 : 070-4335-1749 이메일 : sales@miraeweb.com 풍부한 UI 컴포넌트는 물론 내장된 MVC 시스템과 크로스 플랫폼 지원으로 고도의 몰입형 모바일 앱을 보장한다. 기회 버로우즈(Burrows)는 클라이언트가 구매 결정을 알려 주기 위해 핵심 정보와 창의적 인 컨텐트를 고객에게 제공하도록 돕는 커뮤니케이션 종합서비스회사다. 버로우즈는 포드(Ford)와 합작해 포드 자동차 모델의 이미지와 정보를 보여주는 포털 애플리케이 션 ‘포드 쇼룸(Ford Showroom)’ 을 만들었다. 이 앱의 주목적은 딜러들의 자동차 판 매를 돕고 고객들이 포드 브랜드에 푹 빠지게 하는 것이었다. 솔루션 포드 쇼룸 앱을 개발하기로 계획한 버로우즈는 자바스크립트 프레임워크를 선정하기 위해 철저한 테스트를 실시했다. 영&루비캠(Young & Rubicam)의 한 부문인 버로우 즈의 프론트엔드 개발자 리키 클레그(Ricky Clegg)는 이렇게 설명한다. “저희가 모바 일 프레임워크로 센차 터치를 선택한 이유는 센차 터치가 자바스크립트 프레임워크 시 장에서 독보적인 위치에 있었고, 센차 터치의 훌륭한 API가 저희 회사의 플래시 플랫 폼(Flash Platform) 개발자들이 자바스크립트로 전환하는 데 큰 도움이 되었기 때문 입니다. 회사 차원에서 저희는 모든 솔루션에 맞는 ‘단일 코드베이스’를 진정한 목표로 삼고 있고 센차는 그 목표를 달성하기에 가장 좋은 기회였습니다.” 버로우즈는 프로젝트의 개발 단계로 나아가기 시작하면서 애플리케이션 최적화에 있 어 센차 터치 2의 이점을 여러 가지 경험했다. “센차 터치 2가 최고의 컴포넌트와 기능 을 제공한다는 것을 깨달았습니다.”라고 리키는 말했다. “객체 지향적 자바스크립트를 작성하고 싶을 때 센차 터치만큼 시작하기 쉬운 것은 없어요. ‘extends’, ‘requires’, ‘statics’와 ‘constructor’는 자바스크립트 초보자든 전문가든 누구나 바라지 않을 수 없는 최고의 기본 요소들입니다. 이번 작업을 통해 저희는 바이트 하나하나가 중요하 고, 센차 터치 2에서 AJAX와 JSONP를 레이지 로딩해 자바스크립트 파일과 데이터 를 요청하는 기능은 메모리를 적게 유지하면서 코드를 필요할 때만 요청하는 방법으로 훌륭하다는 것을 알았습니다.” 결과 버로우즈는 포드 쇼룸 앱을 고객 경험과 딜러 경험 두 가지 버전으로 만들었다. 리키는 각각의 경험을 특별하게 만드는 기능들을 설명한다. “딜러 버전에서는 센차 터치 웹 API Sencha Touch 고객 사례 포드 쇼룸 앱(Ford Showroom App) 제품 센차 터치 산업 분야 자동차 기회 딜러들의 자동차 판매를 돕고 고객들이 포드 브랜드에 푹 빠지게 하는 해상도 독립형의 모 바일 쇼룸 애플리케이션을 만드는 것. 솔루션 고성능 모바일 HTML5 프레임워크인 센차 터치는 크로스 브라우저 호환성으로 풍부한 UI 컴포넌트와 레이아웃을 제공하고 빌트인 MVC 시스템으로 애플리케이션 개발 시간을 단축한다. 결과 · 단일 코드베이스 구축으로 개발 시간과 비용 절약했다. 프로토타입을 며칠이 아닌 몇 시간 만에 개발했다. · 센차 VBox와 HBox 레이아웃으로 해상도 독립형 크로스 플랫폼 애플리케이션을 만들 었다. · 빌트인 MVC 기술을 사용해 코드를 정리 했고, 손쉽게 뷰 사이를 전환하고 데이터를 얻도록 만들었다. · 커스텀 컴포넌트를 만들고 CSS3 애니메이 션을 활용해 사용자가 앱을 내비게이션하기 쉬워졌다.
  • 2. 문의 : 미래웹기술연구소 영업전화번호 : 070-4335-1749 이메일 : sales@miraeweb.com 로 서버와 커뮤니케이션할 수 있기 때문에 딜러가 대리점의 대형 텔레비전 화면에 고화질 이미지와 비디오를 전송할 수 있습니다. 고객 경험 버전은 태블릿 컴퓨터가 제공하는 영 역을 충분히 활용하고 전체 화면 이미지를 통해 사용자에게 몰입형 경험을 선사합니다. 또한 비디오와 풍부한 정보도 제공합니다. 이 애플리케이션에는 자동차 브랜드가 최대 10 개까지 들어 있습니다.” 이 애플리케이션은 안드로이드(Android)와 iOS를 모두 지원한다. 버로우즈는 센차 터치 2를 이용해 레이아웃과 크로스 브라우저 호환성 조건을 처리했을 뿐만 아니라 센차 MVC 로 코드를 정리했다. “센차 터치 2의 레이아웃은 크로스 플랫폼 애플리케이션을 만드는 유연성을 갖춰서 활용도가 가장 높은 기능입니다.”라고 리키는 말했다. “앱을 해상도 독립 형으로 만드는 작업에 유연한 configuration 프로퍼티와 더불어 VBox와 HBox 레이아웃 을 아주 많이 활용했습니다. 레이아웃은 앱이 어떤 크기로든 늘어나 컨테이너 안의 컨텐 트를 처리하게 해 줍니다. 그리고 프레임워크에 곧바로 내장된 센차 MVC 기술을 사용하 면 뷰 사이를 전환하고 데이터를 얻기가 쉽죠.” 버로우즈는 센차 터치의 도움으로 커스텀 컴포넌트도 만들 수 있었다. “저는 DotNaviga- tion을 가장 좋아합니다.”라고 리키는 말했다. “단순한 툴바 인디케이터인데, 저희는 사 용자가 어느 페이지를 보고 있는지 알려 주는 방법으로 그것을 카드 레이아웃이나 캐러셀 레이아웃에 사용했죠. CSS3 애니메이션을 활용해 사용자가 뷰를 앱과 같은 방식으로 쉽 게 이동하게 도와줍니다.” 버로우즈는 센차 터치를 사용하면서 상당한 시간과 비용을 절약했다. “기업들이 iOS 기 반의 애플리케이션만을 원하던 시절은 갔습니다.”라고 리키는 설명했다. “지금은 크로스 플랫폼과 지원 가능한 안드로이드 태블릿 및 아이패드 수에 모든 것이 달렸습니다. 개발 작업을 두 번 반복하지 않음으로써 절감하는 비용이 수십 만에 달하고 불황기에는 한푼 한푼이 중요하잖아요. 저희 회사 개발자들의 효율이 얼마나 높아졌는지는 헤아릴 수 없 을 정도입니다. 센차 터치가 없었다면 아직도 가속도 기반의 터치 스크롤러를 만드는 방 법을 찾고 있었겠죠. 저희는 그러는 대신 센차 기술을 사용함으로써 며칠이 아닌 몇 시간 만에 프로토타입을 만들고, 빠른 시간에 프로토타입을 완전한 기능을 하는 애플리케이션 제품으로 발전시킵니다.” 버로우즈가 모바일 프레임워크로 센차 터치를 선택한 이유는 개발 속도 증가와 비용 절 감이다. “버로우즈는 모든 회사와 개발자에게 센차 터치 2를 권하고 싶습니다. 속도나 여 러 플랫폼 확산이라는 면에서든, 그저 다른 언어를 사용하는 개발로 쉽게 전환하는 수단 으로 자바스크립트가 필요한 경우든 말이죠. 센차에는 훌륭한 지원 포럼과 멋진 커뮤니 티가 있습니다. 센차 터치는 완전한 기능을 갖추고 있고, 저희 버로우즈가 모바일 애플리 케이션을 만드는 유일한 자바스크립트 프레임워크입니다.” 이렇게 리키는 말을 맺었다. 센차는 애플리케이션 개발자가 웹표준 기술을 사용해 멋진 애플리케이션 경험을 만들도 록 돕는 애플리케이션 프레임워크와 툴, 클라우드 서비스를 만들고 있다. 센차의 주력 상 품인 센차 터치와 Ext JS는 풍부한 인터넷 애플리케이션을 만드는 크로스 브라우저 자바 스크립트 프레임워크다. 그 안에는 성능이 뛰어나고 커스텀할 수 있는 UI 구성요소들과 구조가 훌륭하고 확장 가능한 컴포넌트 모델, 직관적이고 사용하기 쉬운 API가 포함된다. 전 세계적으로 15만여 회사에서 200만 명이 넘는 개발자가 센차 제품군으로 매우 기능적 이고 견고한 애플리케이션 경험을 만들고 있다. 미래웹기술연구소 서비스 · Sencha 라이센스 판매 · Sencha 공인교육 · 프로페셔널 컨설팅 · 온라인 기술지원 문의 미래웹기술연구소 070-4335-1749 sales@miraeweb.com 버로우즈는 각 컴포넌트에 센차 VBox와 HBox 와 박스 플렉스 세트를 이용해 iOS와 안드로이 드 모두에 적합하고 완벽하게 유연한 메뉴 시스 템을 만들었다. 버로우즈는 카드 레이아웃과 뷰포트가 떠 있는 새 패널 시스템을 사용해 오버레이를 생성했다. 센차 터치 스와이프 이벤트 덕분에 빠르고 부 드럽게 페이지 사이를 내비게이션할 수 있다.