미래웹기술연구소는 왜 Sencha 를 채택하였는가? 조만영 대표이사

미래웹기술연구소(주)

소개

§  (현) 미래웹기술연구소㈜ 대표이사

§  (현) W3C 대한민국 사무국 Business and Technology Specialist

§  (전) 오페라소프트웨어 Presales Engineer 부장

§  (전) 유니퀘스트 경영기획실

§  (전) 나모인터랙티브 웹개발팀

§  2014년 미래창조과학부장관 표창수여 인터넷진흥공로

Page 2

미래웹기술연구소 소개

§  HTML5 및 웹표준 기술 전문 연구 강의, 교육

§  HTML5 모바일 개발 및 앱개발

§  Sencha 한국 총판

§ 웹기술과 가전제품의 융합 선행연구

Page 3

미래웹기술연구소가 해온일

§  2011년 창업 직후부터 국내 HTML5 기술 소개 시작하였음

§  2011년 부터 2014년까지 HTML5 관련 총 56회의 컨퍼런스 및 세미나 발표하였음

§ 수십여개의 HTML5 도입을 원하는 고객사 미팅 및 컨설팅 진행 하였음.

§ 이런 과정을 통해 상당히 다양한 업계의 현황과 고민들 그리고 피드백들을 듣게 되었음

Page 4

HTML5 는 누가 도입하려 하는가?

§  Tier 1 : 전통적인 웹 산업계

-  포털

-  쇼핑몰

-  웹서비스 제공사

§ 이 기업들은 웹기술을 오래 다뤄왔으며 장단점에 대해 잘 알고 있음

-  웹표준 기술의 웹브라우저 파편화 이슈

-  크로스 브라우징 이슈

-  웹표준과 접근성

-  이상에 대한 높은 지식 보유

§ 결론적으로 HTML5 를 부분적으로 자사의 전략에 맞게 현명하게 도입

-  이상의 기업들은 크로스 브라우징 이슈에 능통한 전문적인 인력보유

-  Front-End 개발자로 대변되는 마크업과 자바스크립트에 뛰어난 엔지니어 보유

-  큰 문제가 없음

Page 5

HTML5 는 누가 도입하려 하는가?

§  Tier 2 : 앱개발 업체

§  HTML5 는 스마트폰 시대와 함께 각광을 받음

-  HTML5 를 통한 하이브리드 앱 개발 전략이 몇년전부터 주목받음

-  아이폰, 안드로이드 앱 개발 업체들이 HTML5 개발 전략에 주목

-  네이티브 개발자들이 새롭게 웹기술에 관심 갖는 계기

-  마크업 언어와 자바스크립트 학습에 대한 부담

-  모바일 웹 프레임워크로 관심 이동 : Sencha Touch, jQuery mobile 등등

-  네이티브 언어 대비 웹개발은 개발 생산성이 높지 않은 것을 깨달음 : 통합 개발도구의 부재

-  국내 안드로이드폰의 과도한 점유율로 멀티플랫폼 앱개발 전략의 요구 높지 않음

-  다만 네이티브 앱 내부에 웹기술을 로드하는 하이브리드 전략은 여전히 유효

-  네이티브 앱으로 대응할 앱(게임류)과 하이브리드 앱(쇼핑몰, SNS류)으로 분화 되어 적용됨.

§ 웹기술 기반 하이브리드 앱 제작시 난이도는 낮지 않음

-  모바일 웹 프레임워크 선정에 따른 개발 방법론과 팀구성이 달라져야 함

-  마크업 의존성이 높은 프레임워크 선정시 웹브라우저 호환성에 대한 부담은 계속 가져가야 함

Page 6

HTML5 는 누가 도입하려 하는가?

§  Tier 3 : SI 업체

-  이부분도 전통적으로 웹기술을 다뤄 왔으나 포털이나 대형 쇼핑몰 대비 상대적으로 웹기술 전문가들의 보유도가 낮음

-  SI 프로젝트의 특성상 웹UI의 중요도가 높게 평가되지 않음

-  섬세한 화면 기획이나 UI 기획없이 프로젝트 진행

-  백엔드의 웹서비스의 기능적인 요소에 중점을 둠

-  Front-End 개발자의 비중이 낮음

-  jQuery 기반으로 웹 인터페이스를 많이 개발

-  기획 -> 디자인 -> 마크업 코딩 -> 백엔드 프로그래밍으로 이어지는 단계에서 마크업 코딩과 백엔드 프로그래밍 사이의 커뮤니케이션 코스트가 높음

-  UI 개발 업무와 백엔드 개발 업무가 클리어하게 구별이 되기 힘든 구조

-  최근 기업들의 HTML5 기반의 업무 환경 전환에 대한 요구사항을 받고 있음(ActiveX 배제)

Page 7

HTML5 는 누가 도입하려 하는가?

§ 기타 업체들

-  가전 업계 : 삼성전자와 엘지전자와 같이 웹플랫폼을 대안 기술로 가져가려는 업체들, 일부 국내 셋탑 박스, 네비게이션 제작 업체도 마찬가지

-  웹플랫폼이 확산되려면 생태계 구축이 필수적이나 1차적으로 웹기술기반 앱을 만드는 업체들 자체가 조성이 안되고 있음.

-  웹플랫폼 기반 앱스토어의 성공 가능성이 현재는 불투명

-  모바일 단말 웹브라우저의 웹표준 준수율이 일정하지가 않아 개발 난이도 높음

-  뛰어난 네이티브 개발자들을 많이 보유하고 있으나 웹기술은 낯설은 분야

-  그러나 여전히 웹플랫폼은 대안플랫폼으로 관심 : 타이젠 TV, webOS TV

Page 8

HTML5 개발관련 기업들의 고민사례

§  “난 자바개발자인데 내가 HTML/CSS 를 배워야 하나요?”

§  “크로스 브라우저 이슈는 미처 경험해 보지 못한 분야”

§  “수많은 웹 UI 프레임워크가 존재하나 무얼 선택해야 할지 고민”

§  “모든 기대를 충족시켜주는 것이 없거나 기술 자체의 성숙도가 낮음”

§ 고도로 복잡한 앱 혹은 데스크탑용 웹애플리케이션 개발시 UI 개발을 어떻게 해야할지 방법론에 대한 고민이 많음

§  “우리 전산실에는 웹개발자가 없어요” (차세대는 HTML5 로 가라고 위에서 지시)

Page 9

미래웹기술연구소가 타겟팅한 대상

§ 웹기술의 응용범위가 넓어 짊으로서 웹기술이 필요없던 기업들이 웹기술을 도입하게 됨

-  웹기술에 대한 전문성이 낮고 웹기술을 처음 도입하는 기업들

-  HTML, CSS, Javascript 와 같은 기술에 대한 지식이 낮은 기업

-  좀 더 진일보한 웹 UI 개발을 원하는 기업

-  그러나 늘 일정과 시간은 촉박한 기업들.

Page 10

Sencha ExtJS 프레임워크를 제안하는 이유

§  Sencha 프레임워크의 Javascript 문법 체계를 익히면 그걸로 끝.

-  HTML/CSS에 대한 학습 부담이 줄어듬

-  HTML5 개발이 확산되는 한국적 상황에 적합하다고 판단

-  이 부분은 개발자에 따라 호불호가 있는 부분

§  Sencha Architect 강력한 비쥬얼 저작도구의 존재

-  에디터로 작성시 대비 현격한 UI 개발 속도

-  기존의 마크업 개발자들이 화면을 그리고 백엔드 프로그래머에게 넘기는 현재의 웹개발 프로세스를 그대로 가져갈 수 있음

-  화면을 그리는 업무 담당자는 Sencha Architect 로 화면 그리는 것에 집중가능

-  Sencha Architect 만으로도 UI 개발파트 전체 프로젝트 진행 가능

§  Restful API 형태로 동작하여 UI부와 백엔드부간의 클리어한 작업 구분

-  UI 개발자는 UI 개발에 집중하고 백엔드 개발자는 백엔드에서 비즈니스 로직과 데이타 생성부분만 신경쓰면 됨

-  기존의 백엔드를 Restful 형태로만 추가 개발해주면 기존의 비즈니스 로직 전체를 건드릴 필요가 없음

Page 11

Sencha 프레임워크를 제안하는 이유

§ 다른 웹 프레임워크 대비 많은 부분이 이미 개발되어 있음

-  수많은 추가 라이브러리나 별도 플러그인이 필요없이 ExtJS 내에서 대부분 해결

Page 12

Sencha ExtJS 프레임워크를 제안하는 이유

§  Angular JS 와의 비교

Page 13

Sencha ExtJS 프레임워크를 제안하는 이유

§  jQuery+jQuery UI+Plugins 과의 비교

Page 14

Sencha ExtJS 프레임워크를 제안하는 이유

§ 웹브라우저 호환성 고민 해결

§  IE6, 7, 8, 9, 10, 11

§  Opera

§  Chrome

§  Safari

§  Firefox

Sencha 프레임워크의 장점

§ 장점

-  이미 만들어진 고수준의 UI 컴포넌트(위젯)

-  강력한 차트와 그래프

-  뛰어나 그리드 성능

-  비쥬얼 저작도구를 통한 뛰어난 생산성

-  이클립스와 같은 에디터를 통한 개발 가능

Page 16

Sencha ExtJS UI 컴포넌트

Page 17

Sencha 프레임워크가 적합한 부분

§  PC용 웹애플리케이션 개발 (ExtJS)

-  웹 ERP,

-  인트라넷,

-  관리자화면

-  CRM 등

-  모니터링 화면

-  통계시스템

-  UI 복잡도가 높은 웹서비스 개발

§ 모바일용 웹앱 또는 앱개발 (Sencha Touch)

-  폰갭과 함께 사용

Page 18

결론

§  Sencha 프레임워크는 HTML5 개발을 새로 시작하려는 업체들을 위한 좋은 선택이 될 수 있다

§  ExtJS 문법은 초기 러닝커브가 존재하나 고수준의 UI 컴포넌트들은 높은 생산성을 보장한다

§ 강력한 비쥬얼 저작도구는 초기 개발 난이도를 낮춰 준다

§ 기존의 ActiveX 기반의 솔루션을 대체하기 위해서는 최적의 HTML5 솔루션이다

Page 19

문의

§ 미래웹기술연구소

§  http://miraeweb.com

§  contact@miraeweb.com

Page 20