미래웹기술연구소는 왜 Sencha 를 채택하였는가? Sencha는 한국 상황에서 SI나 웹애플리케이션 제작업체들에게 적합한 툴이다.

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

2. 소개
§ (현) 미래웹기술연구소㈜ 대표이사
§ (현) W3C 대한민국 사무국 Business and Technology Specialist
§ (전) 오페라소프트웨어 Presales Engineer 부장
§ (전) 유니퀘스트 경영기획실
§ (전) 나모인터랙티브 웹개발팀
§ 2014년 미래창조과학부장관 표창수여 인터넷진흥공로
Page 2

3. 미래웹기술연구소 소개
§ HTML5 및 웹표준 기술 전문 연구 강
의, 교육
§ HTML5 모바일 개발 및 앱개발
§ Sencha 한국 총판
§ 웹기술과 가전제품의 융합 선행연구
Page 3

4. 미래웹기술연구소가 해온일
§ 2011년 창업 직후부터 국내 HTML5 기술 소개 시작하였음
§ 2011년 부터 2014년까지 HTML5 관련 총 56회의 컨퍼런스 및 세미나 발표하였음
§ 수십여개의 HTML5 도입을 원하는 고객사 미팅 및 컨설팅 진행 하였음.
§ 이런 과정을 통해 상당히 다양한 업계의 현황과 고민들 그리고 피드백들을 듣게 되었음
Page 4

5. HTML5 는 누가 도입하려 하는가?
§ Tier 1 : 전통적인 웹 산업계
- 포털
- 쇼핑몰
- 웹서비스 제공사
§ 이 기업들은 웹기술을 오래 다뤄왔으며 장단점에 대해 잘 알고 있음
- 웹표준 기술의 웹브라우저 파편화 이슈
- 크로스 브라우징 이슈
- 웹표준과 접근성
- 이상에 대한 높은 지식 보유
§ 결론적으로 HTML5 를 부분적으로 자사의 전략에 맞게 현명하게 도입
- 이상의 기업들은 크로스 브라우징 이슈에 능통한 전문적인 인력보유
- Front-End 개발자로 대변되는 마크업과 자바스크립트에 뛰어난 엔지니어 보유
- 큰 문제가 없음
Page 5

6. HTML5 는 누가 도입하려 하는가?
§ Tier 2 : 앱개발 업체
§ HTML5 는 스마트폰 시대와 함께 각광을 받음
- HTML5 를 통한 하이브리드 앱 개발 전략이 몇년전부터 주목받음
- 아이폰, 안드로이드 앱 개발 업체들이 HTML5 개발 전략에 주목
- 네이티브 개발자들이 새롭게 웹기술에 관심 갖는 계기
- 마크업 언어와 자바스크립트 학습에 대한 부담
- 모바일 웹 프레임워크로 관심 이동 : Sencha Touch, jQuery mobile 등등
- 네이티브 언어 대비 웹개발은 개발 생산성이 높지 않은 것을 깨달음 : 통합 개발도구의 부재
- 국내 안드로이드폰의 과도한 점유율로 멀티플랫폼 앱개발 전략의 요구 높지 않음
- 다만 네이티브 앱 내부에 웹기술을 로드하는 하이브리드 전략은 여전히 유효
- 네이티브 앱으로 대응할 앱(게임류)과 하이브리드 앱(쇼핑몰, SNS류)으로 분화 되어 적용됨.
§ 웹기술 기반 하이브리드 앱 제작시 난이도는 낮지 않음
- 모바일 웹 프레임워크 선정에 따른 개발 방법론과 팀구성이 달라져야 함
- 마크업 의존성이 높은 프레임워크 선정시 웹브라우저 호환성에 대한 부담은 계속 가져가야 함
Page 6

7. HTML5 는 누가 도입하려 하는가?
§ Tier 3 : SI 업체
- 이부분도 전통적으로 웹기술을 다뤄 왔으나 포털이나 대형 쇼핑몰 대비 상대적으로 웹기술 전
문가들의 보유도가 낮음
- SI 프로젝트의 특성상 웹UI의 중요도가 높게 평가되지 않음
- 섬세한 화면 기획이나 UI 기획없이 프로젝트 진행
- 백엔드의 웹서비스의 기능적인 요소에 중점을 둠
- Front-End 개발자의 비중이 낮음
- jQuery 기반으로 웹 인터페이스를 많이 개발
- 기획 -> 디자인 -> 마크업 코딩 -> 백엔드 프로그래밍으로 이어지는 단계에서 마크업 코딩과
백엔드 프로그래밍 사이의 커뮤니케이션 코스트가 높음
- UI 개발 업무와 백엔드 개발 업무가 클리어하게 구별이 되기 힘든 구조
- 최근 기업들의 HTML5 기반의 업무 환경 전환에 대한 요구사항을 받고 있음(ActiveX 배제)
Page 7

8. HTML5 는 누가 도입하려 하는가?
§ 기타 업체들
- 가전 업계 : 삼성전자와 엘지전자와 같이 웹플랫폼을 대안 기술로 가져가려는 업체들, 일부 국내
셋탑 박스, 네비게이션 제작 업체도 마찬가지
- 웹플랫폼이 확산되려면 생태계 구축이 필수적이나 1차적으로 웹기술기반 앱을 만드는 업체들
자체가 조성이 안되고 있음.
- 웹플랫폼 기반 앱스토어의 성공 가능성이 현재는 불투명
- 모바일 단말 웹브라우저의 웹표준 준수율이 일정하지가 않아 개발 난이도 높음
- 뛰어난 네이티브 개발자들을 많이 보유하고 있으나 웹기술은 낯설은 분야
- 그러나 여전히 웹플랫폼은 대안플랫폼으로 관심 : 타이젠 TV, webOS TV
Page 8

9. HTML5 개발관련 기업들의 고민사례
§ “난 자바개발자인데 내가 HTML/CSS 를 배워야 하나요?”
§ “크로스 브라우저 이슈는 미처 경험해 보지 못한 분야”
§ “수많은 웹 UI 프레임워크가 존재하나 무얼 선택해야 할지 고민”
§ “모든 기대를 충족시켜주는 것이 없거나 기술 자체의 성숙도가 낮음”
§ 고도로 복잡한 앱 혹은 데스크탑용 웹애플리케이션 개발시 UI 개발을 어떻게 해야할지
방법론에 대한 고민이 많음
§ “우리 전산실에는 웹개발자가 없어요” (차세대는 HTML5 로 가라고 위에서 지시)
Page 9

10. 미래웹기술연구소가 타겟팅한 대상
§ 웹기술의 응용범위가 넓어 짊으로서 웹기술이 필요없던 기업들이 웹기술을 도입하게
됨
- 웹기술에 대한 전문성이 낮고 웹기술을 처음 도입하는 기업들
- HTML, CSS, Javascript 와 같은 기술에 대한 지식이 낮은 기업
- 좀 더 진일보한 웹 UI 개발을 원하는 기업
- 그러나 늘 일정과 시간은 촉박한 기업들.
Page 10

11. Sencha ExtJS 프레임워크를 제안하는 이유
§ Sencha 프레임워크의 Javascript 문법 체계를 익히면 그걸로 끝.
- HTML/CSS에 대한 학습 부담이 줄어듬
- HTML5 개발이 확산되는 한국적 상황에 적합하다고 판단
- 이 부분은 개발자에 따라 호불호가 있는 부분
§ Sencha Architect 강력한 비쥬얼 저작도구의 존재
- 에디터로 작성시 대비 현격한 UI 개발 속도
- 기존의 마크업 개발자들이 화면을 그리고 백엔드 프로그래머에게 넘기는 현재의 웹개발 프로
세스를 그대로 가져갈 수 있음
- 화면을 그리는 업무 담당자는 Sencha Architect 로 화면 그리는 것에 집중가능
- Sencha Architect 만으로도 UI 개발파트 전체 프로젝트 진행 가능
§ Restful API 형태로 동작하여 UI부와 백엔드부간의 클리어한 작업 구분
- UI 개발자는 UI 개발에 집중하고 백엔드 개발자는 백엔드에서 비즈니스 로직과 데이타 생성
부분만 신경쓰면 됨
- 기존의 백엔드를 Restful 형태로만 추가 개발해주면 기존의 비즈니스 로직 전체를 건드릴 필
요가 없음
Page 11

12. Sencha 프레임워크를 제안하는 이유
§ 다른 웹 프레임워크 대비 많은 부분이 이미 개발되어 있음
- 수많은 추가 라이브러리나 별도 플러그인이 필요없이 ExtJS 내에서 대부분 해결
Page 12

13. Sencha ExtJS 프레임워크를 제안하는 이유
§ Angular JS 와의 비교
Page 13

14. Sencha ExtJS 프레임워크를 제안하는 이유
§ jQuery+jQuery UI+Plugins 과의 비교
Page 14

15. Sencha ExtJS 프레임워크를 제안하는 이유
§ 웹브라우저 호환성 고민 해결
§ IE6, 7, 8, 9, 10, 11
§ Opera
§ Chrome
§ Safari
§ Firefox

16. Sencha 프레임워크의 장점
§ 장점
- 이미 만들어진 고수준의 UI 컴포넌트(위젯)
- 강력한 차트와 그래프
- 뛰어나 그리드 성능
- 비쥬얼 저작도구를 통한 뛰어난 생산성
- 이클립스와 같은 에디터를 통한 개발 가능
Page 16

17. Sencha ExtJS UI 컴포넌트
Page 17

18. Sencha 프레임워크가 적합한 부분
§ PC용 웹애플리케이션 개발 (ExtJS)
- 웹 ERP,
- 인트라넷,
- 관리자화면
- CRM 등
- 모니터링 화면
- 통계시스템
- UI 복잡도가 높은 웹서비스 개발
§ 모바일용 웹앱 또는 앱개발 (Sencha Touch)
- 폰갭과 함께 사용
Page 18

19. 결론
§ Sencha 프레임워크는 HTML5 개발을 새로 시작하려는 업체들을 위한 좋은 선택이 될
수 있다
§ ExtJS 문법은 초기 러닝커브가 존재하나 고수준의 UI 컴포넌트들은 높은 생산성을
보장한다
§ 강력한 비쥬얼 저작도구는 초기 개발 난이도를 낮춰 준다
§ 기존의 ActiveX 기반의 솔루션을 대체하기 위해서는 최적의 HTML5 솔루션이다
Page 19

20. 문의
§ 미래웹기술연구소
§ http://miraeweb.com
§ contact@miraeweb.com
Page 20