IT 매니저와 개발 관리자를 위한 HTML5 속성 가이드
HTML5가 무엇이기에 관심을 가져야 하는가?
HTML 5가 엄청난 파도를 몰고 오고 있다 — 그것도 빠른 속도로
HTML5는 이전 세대에서 가장 큰폭으로 발전한 웹 기술입니다. 애플, 모질라, 마이크로소프트와 구글의 폭넓은 지원 덕분에 HTML5 기능은 모든 주요 브라우저에 급속히 통합되었습니다. 애플의 회장 스티브 잡스는 리치 애플리케이션에 대한 개방형 개발 솔루션인 HTML5를 향해 세계가 움직이고 있다고 말한 바 있습니다. 현재 기술 직종 사이트에서 HTML이 가장 짧은 시간 안에 인기 검색어가 되었다는 사실을 알고 있습니까?
그러나 사람들이 HTML5의 예를 들 때 단순한 자바스크립트 애니메이션부터 CSS3 효과에 이르기까지 모든 것을 가리키고 있는 지금, HTML5가 무엇이고 그것이 어떤 의미인지 정리되지 않았을 만도 합니다. 그렇다면… HTML5란 정확히 무엇이고 왜 개발 관리자들이 그것에 관심을 가져야 할까요?
이 문서는 HTML5 핵심 기능을 실질적으로 요약하고, 불과 몇 년 사이에 HTML5가 구글과 애플, 마이크로소프트 같은 업계를 주도하는 기업들의 관심을 끌어 지원을 받은 이유를 설명합니다. HTML5 기술에 대한 센차의 경험을 바탕으로 HTML5 반의 애플리케이션의 이점을 간단히 이야기하고, 센차의 프레임워크와 도구가 어떻게 HTML5 애플리케이션의 개발을 용이하게 할 수 있는지 알아볼 것입니다.
한 눈에 보는 HTML5
일반적으로 미디어에서 말하는 “HTML5”는 현재 세대의 웹 브라우저에 구현된 다양한 차세대 웹 기술의 묶음을 의미합니다. 이런 기술 중 일부는 엄밀히 말해 HTML5 표준안에 포함되지 않습니다. 예를 들어 CSS3는 단 한 번도 HTML5 명세서에 속하지 않았고, 그 외의 다수(예: 웹 워커)는 원래 명세서에 있었지만 나중에 별도의 명세서로 빠져 나왔습니다.
센차(Sencha)에서는 이 기술의 모음을 올바르게 나타내는 말이 “HTML5 패밀리”라고 생각하지만 편의상 이 문서에서는 “HTML5”라고 일컬을 것입니다. HTML5 패밀리의 구성원은 모든 가족이 그렇듯 발달기와 구현 단계에서 큰 차이를 보입니다. 대부분은 최근 수정된 브라우저에 완전히 구현되어 있지만 일부는 아직 초안 상태이고 최종화되기 전에 대폭 수정될 수 있습니다.
[역자주: HTML 비롯한 여러 웹 표준 기술은 기술의 발전과 더불어 W3C를 통해서 끊임없이 표준화가 진행되고 있습니다. 즉 웹기술은 Living Standard 라는 개념으로 새롭게 재정되는 표준기술은 웹브라우저의 새버전에 지속적으로 반영이 됩니다. 웹개발자들은 웹기술의 이런 속성을 잘 유의하며 개발을 진행해야 합니다. 이부분이 다른 언어를 활용한 개발과 웹개발이 차이나는 가장 큰 부분입니다.]
월드와이드웹 컨소시엄(W3C)의 코어 HTML5 명세서는 HTML5 명세서 패밀리의 일부분일 뿐입니다. 명세서의 전체 목록은 다음과 같습니다.
코어 HTML5 명세서(The Core HTML5 spec)
캐스케이딩 스타일 시트 버전 3(CSS3)
웹 워커(Web Workers)
웹 저장소(Web Storage)
웹 소켓(Web Sockets)
지오로케이션(Geolocation)
마이크로데이터(Microdata)
디바이스 API와 파일 API(Device API and File API)
그 밖의 많은 명세서가 준비 중에 있습니다. (참고: 목록에 SVG가 없는 이유는 SVG가 2001년 이후로 표준이 되었지만 아직 많은 브라우저에서 지원되지 않고 있기 때문입니다.)
우리가 중요하게 이해해야 할 사실은 HTML5가 웹 브라우저를 더 풍부한 애플리케이션 플랫폼으로 변환하는 계획에서 출발했다는 것입니다. HTML5의 임무는 웹 애플리케이션이 풍부한 사용자 인터페이스와 오프라인 기능, 깊으면서도 안전한 하드웨어 접근 기능을 갖추도록 구축하는 것이었습니다. HTML5는 웹에 배치되기 때문에 웹이 이미 제공하는 이점들을 다음과 같이 가지고 있습니다.
보편적인 크로스 플랫폼 클라이언트: 웹 브라우저
쉬운 검색 기능과 인덱스 기능(딥 킹링 포함)
제3의 서비스와 매시업을 평범하게 포함하는 능력
전혀 번거롭지 않은 배치와 업데이트(웹에만 존재)
HTML5 의 핵심 기능
HTML5 는 HTML 언어의 많은 면을 상당 부분 바꾸지만 대부분의 변화는 최종 사용자에게 보이지 않습니다. 이렇듯 “사용자에게 보이지 않는” 변화에는 새로운 콘텐츠 모델, 새로운 레이아웃 모델, 그리고 새로운 접근성 기능과 브라우징 환경이 있습니다.
그 밖의 HTML5 의 핵심 기능은 다음과 같습니다.
많은 상황에서 개발자들은 서버의 임시 방편이나 자바스크립트로 현재 하고 있는 작업에 HTML5 를 사용할 수 있습니다. 예를 들어 HTML5 는 여러 가지 콘텐츠 엘리먼트(예: 이메일 주소 엔트리에 대한 폼 필드)에 의미를 부여하는 태그를 추가합니다. 새로 추가된 마크업 덕분에 메뉴와 내비게이션 섹션에서도 HTML 이 더 명료해졌고 가독성이 높아졌습니다. 그 결과 개발자들은 현재의 무수한 <div> 태그를 <nav>와 <aside> 같이 더 의미 있는 마크업으로 대체할 수 있습니다.
폼에 폼 액션 PUT 과 DELETE 가 지원되어 서버 측 프로세싱이 단순해집니다. 또한 폼 엘리먼트의 동적 추가에 대한 지원이 내장되어 있습니다(현재 자바스크립트에 꼭 필요한 것).
사용자에게는 HTML5 의 변화 중에서도 오디오(<audio>) 및 비디오(<video>) 태그와 즉석 모드 2D 비트맵 드로잉 포맷(<canvas>)의 추가가 가장 큰 영향을 줍니다. HTML5 의 audio 와 video 태그는 플러그인을 사용하지 않고도 재생을 가능하게 했고 canvas 태그는 풍부한 2D 그림을 지원합니다.
HTML5 는 <center>와 <font>처럼 이전의 HTML 명세서에 어수선하게 흐트러져 있던 여러 가지 표현적 마크업을 제거합니다. 또한 직접적인 테이블 스타일링을 허용하지 않기 때문에 개발자들은 그 대신 CSS 를 사용해야 합니다.
HTML5 는 <iframe> 인라인 프레임만 제외하고 모든 프레임을 공식적으로 없앴습니다. 코어 HTML5 명세서는 이 외에도 애플리케이션 캔버스 간의 웹 콘텐츠 드래그 앤드 드롭, 데스크톱에서 애플리케이션으로의 파일 드래그 앤 드롭, 크로스 도큐멘트 메시지 전달 지원, 영속적인 콘텐츠 캐싱 지시어, 그리고 사용자가 수정 가능한 콘텐츠 등의 기능을 지원합니다.
코어 HTML5 기능들은 그것만으로도 리치 웹 콘텐츠를 구축하기 위한 강력한 토대가 되어줍니다.
HTML5 과 CSS3 의 관계
“HTML5”가 실제 CSS3 라고 생각하는 사람이 많습니다. 하지만 CSS3 은 HTML5 로 생성된 문서 구조와 협력해 작동하는 하위 명세서 모음입니다. 대부분의 경우 HTML 마크업은 웹 콘텐츠의 구조를 정의합니다. 자바스크립트는 동작을 관리하고 CSS 는 콘텐츠의 시각적 표현을 결정합니다.
CSS3 모듈은 엘리먼트 변형(예: 회전과 크기 조정)부터 이미지 기반의 고급 테두리까지 표현의 거의 모든 측면에 영향을 줍니다. CSS 는 웹 페이지 콘텐츠에 동적으로 포함될 수 있는 글꼴 파일까지 제공하기도 합니다. 개발자들은 CSS3 를 사용해 기기마다 스타일을 명시할 수도 있습니다. 예를 들어 TV 와 모바일 기기, 인쇄 화면마다 스타일을 다르게 하려면 CSS3 의 @media 규칙을 사용합니다. CSS3 의 “selectors” 모듈을 사용해 스타일을 찾고 적용하면 특정 페이지 엘리먼트에 같은 모습을 적용할 수도 있습니다.
애플리케이션 개발자들에게 가장 반응이 좋은 CSS3 모듈은 “전환(Transitions)”과 “애니메이션(Animations)”입니다. 이런 스타일 선언은 페이지 엘리먼트의 프로퍼티가 변경될 때 시간이 지나며 그 엘리먼트의 스타일이 어떻게 바뀌는지 통제합니다.
예를 들어, 전환 선언으로 개발자들은 사용자가 사이트의 링크 위에 마우스를 가져갔을 때 나타나는 반응을 명시합니다. 예를 들자면 링크의 텍스트 색과 글꼴 크기가 순식간에 새로운 스타일로 바뀌는 것입니다. CSS 전환은 자바스크립트로 새로운 CSS 클래스를 적용하거나 다시 작성하면 그 즉시 동적으로 추가될 수 있습니다.
반면 애니메이션 규칙은 CSS 프로퍼티 값에 여러 가지 변화를 줄 수 있습니다. 애니메이션은 제한적으로 반복될 수도, 무한히 반복될 수도 있습니다. 어느 쪽이든 브라우저는 각 상태 사이에서 전환하는 시각적 효과를 자동으로 계산합니다. 모바일의 경우 CSS 애니메이션은 기기의 GPU 에서 가속될 때가 많기 때문에 평범한 자바스크립트 애니메이션과 비교했을 때 성능이 크게 향상됩니다.
CSS3 의 흥미로운 기능에는 더 풍부한 레이아웃도 있습니다. Multi-Column 레이아웃과 Flexible Box 레이아웃을 비롯해 유연하고 유동적인 CSS3 레이아웃은 여러 계층으로 중첩된 <div> 및 테이블과 머리를 복잡하게 만드는 수학 계산에 의존하지 않고도 복잡한 콘텐츠 흐름을 생성하는 새로운 CSS 프로퍼티를 정의합니다.
CSS3 모듈은 그 밖에도 많고, 약속하건대 웹사이트와 애플리케이션 디자인에 있어 필수적인 도구가 될 것입니다. 간단히 말해 CSS3 모듈은 개발자들이 웹 콘텐츠와 시각적으로 커뮤니케이션하는 방식을 바꾸고 있습니다. 다양한 모듈이 함께 작용하며 사용자에게는 더 풍부한 웹 경험을 만들어줍니다. 개발자들은 이미지 효과에 의존하지 않고도 스타일을 쉽게 적용할 수 있습니다. 오늘날 웹 접근에 사용되는 다양한 기기 전반에 CSS3 는 예상대로 기능합니다.
왜 애플리케이션 개발에 HTML5 를 사용하는가?
센차는 더 풍부한 애플리케이션은 물론, 개발자에게 유용한 여러 가지 도구를 보장해주는 HTML5 기반의 개발에 무척 흥분 중입니다. 그리고 하루라도 빨리 브라우저에 도입된 새로운 HTML5 기능을 활용하고 싶습니다. 그러나 서버 기반의 웹 애플리케이션을 만족스럽게 사용하고 있는 기업이라면 이렇게 질문할 만도 합니다. “HTML5 를 도대체 왜 사용하는 거죠?”
간단히 대답하자면 사용자가 오프라인까지 가져갈 수 있는 더 풍부하고 더 반응적인 애플리케이션 경험을 만들 수 있기 때문입니다. 긴 버전의 대답은 다음의 섹션들에 제시되어 있는데, HTML5 의 핵심적인 이점들을 하나씩 살펴볼 것이고 HTML 이 어떤 이유로 앞으로 훌륭한 애플리케이션을 개발하는 데 올바른 도구를 제공할 수 있는지 설명할 것입니다.
웹 경험과 개방형 표준
수년 동안 개발자들은 플래시와 실버라이트 같은 플러그인으로 웹에 부족한 리치 기능들을 만회할 수 있었습니다. 그러나 HTML5 이 등장하면서 더 이상 그렇게 하지 않아도 됩니다. 이것은 플러그인 기술과 관련된 한계가 많다는 점을 감안하면 반가운 소식입니다. 플러그인은 이미 잘 알려진 모바일 플랫폼 성능 문제 외에도 안정성 문제에 보안 문제까지 가져왔기 때문입니다.
HTML5 웹 경험은 개방형 표준을 바탕으로 구축되었습니다. 이제 개발자는 모바일 기기에 주요한 문제인 플러그인 다운로드나 플러그인이 지원되는 기기를 선택한 사람들만을 겨냥하지 않습니다. 그 대신 모든 모바일 기기 브라우저를 망라하는 브라우저 클라이언트에서 리치 웹 경험을 동일하게 제공할 수 있습니다.
리치 웹 경험과 일관적인 크로스 플랫폼, 크로스 디바이스, 클로스 브라우저
HTML5 는 브라우저 클라이언트가 HTML 마크업을 어떻게 해석해야 하는지 명시해서 HTML5 에 포함되어 있는 기능을 일관성 있게 만듭니다. 앞에서 언급한 것처럼 HTML5 기능을 대부분 지원하는 브라우저는 현재 모든 주요 데스크톱과 모바일 기기 플랫폼에서 사용되고 있습니다. 브라우저가 HTML5 를 따르기만 한다면 개발자는 하나의 앱을 만들어 모든 브라우저, 기기, 플랫폼에 배포할 수 있습니다.
리치 웹 애플리케이션은 평범한 웹사이트가 아니다
앞에서 알아본 것처럼 HTML5 는 리치 웹 애플리케이션의 개발을 가능하게 하기 위해 만들어졌지만, 애초에 개발자들이 왜 플랫폼으로서 웹에 고개를 돌렸는 설명부터 해야겠습니다.
처음에 웹은 어디서든 접근할 수 있다는 점으로 관심을 끌었습니다. 네이티브 애플리케이션은 그것이 설치된 기기에 구속되었지만, 웹은 사용자가 전 세계 어디에서나 모든 브라우저를 통해 언제든 콘텐츠에 접근할 수 있습니다. 웹 애플리케이션으로 사용자는 어느 곳에서든 자신이 가장 좋아하는 애플리케이션과 인터랙션할 자유를 얻었습니다.
웹 애플리케이션 개발은 네이티브 애플리케이션 개발과 비교해 수월하기도 합니다. 네이티브 애플리케이션을 개발할 때는 플랫폼마다 각기 다른 언어를 사용합니다. 그 결과 이처럼 번거로운 프로세스는 범위(때로는 비용) 면에서 규모가 커집니다. 반면, HTML5 를 사용한 웹 애플리케이션 개발은 프로세스가 훨씬 간단합니다. 오늘날 리치 웹 애플리케이션을 만들고자 하는 개발자들에게 프로세스를 더 쉽게 만들어줄 훌륭한 개발자 도구는 여러 가지입니다. 예를 들면 센차는 센차 아키텍트(Sencha Architect)라는 사용자 인터페이스 빌더를 제공합니다. 이것은 시각적 드래그 앤드 드롭 시스템을 제공함으로써 개발자들이 리치 웹 애플리케이션을 쉽고 빠르게 구축할 수 있습니다.
[역자주: 사실 이 단락에서 이야기하는 바가 현재 모던 웹 애플리케이션 개발이 가지고 있는 문제점을 잘 설명해 줍니다. 사실 웹기술이라는 것이 존재한지 20년이 넘었고 이미 웹제작이 가능한 수많은 업체들이 존재하는데 갑자기 HTML5 라는 것이 화두가 된 이유는 웹기술을 통해 과거 Client/Server 애플리케이션이나 기존 웹기술로 해결되지 못하던 애플리케이션을 웹으로 대체하려고 하기때문에 생기는 것입니다. UI적으로 단순한 홈페이지나 매거진류의 서비스를 만드는 것이 아니라 UI가 고도로 복잡한 애플리케이션을 만들어야 하기 때문에 기존의 웹제작 방법론에서 벗어나 생산성과 코드 유지보수를 담보할 수 있는 소프트웨어 아키텍쳐를 고민해야하고 그에 걸맞는 UI프레임워크를 선정해야 하는 상황입니다.]
모바일 기기용 리치 웹 애플리케이션
모바일 기기가 날이 갈수록 어디서나 사용 가능해지면서 사람들은 현재 폰, 태블릿을 비롯한 기기들을 사용해 끊임없이 웹에 접근하는 일에 익숙해져 있습니다. 과거에는 데스크톱에서만 가능했던 활용이 지금은 24 시간 내내 어디서든 가능합니다.
시장의 중심에 있는 모바일 플랫폼(예: iOS)에서 플래시를 지원하지 않고 모바일에 최적화된 리치 웹 경험에 대한 대체 기술이 부족한 탓에, 리치 모바일 애플리케이션 경험을 만들고 싶은 많은 개발자는 결국 네이티브 모바일 애플리케이션을 개발하고 맙니다. 그러나 네이티브 앱 배포는 잠재적으로 상당한 대가를 치러야 할 주의 사항이 있습니다. 개발자는 네이티브 앱을 배포하기 위해 앱 스토어 환경에 앱을 제출해야 한다는 것입니다. 네이티브 앱 스토어 환경, 그 중에서도 애플 앱 스토어는 승인 절차가 너무나 길고 제멋대로 애플리케이션을 거부한다는 것으로 악명이 높습니다. 애플리케이션이 받아들여졌다 하더라도 앱 개발자는 일정 판매 수익의 일부를 수수료로 청구받기도 합니다.
HTML5 가 성장하고 다양한 주요 브라우저 클라이언트에 채택되기 전에, 네이티브 앱은 모바일 애플리케이션에 있어 유일한 선택이었습니다. 그러나 오늘날 HTML5 덕분에 개발자는 웹을 데스크톱 플랫폼으로도, 모바일 플랫폼으로도 사용할 수 있습니다. HTML5 기반의 모바일 웹 애플리케이션으로 개발자는 애플리케이션 배포를 스스로 통제하고 앱 스토어의 제약을 피할 수 있습니다. 그뿐만 아니라 개발 주기가 더 짧고 유연해져서 개발자는 플랫폼에 상관없이 어떤 모바일 브라우저 클라이언트에서든 사용자 경험이 일관적인 리치 웹 애플리케이션을 만들 수 있습니다.
[역자주: 이 단락이 이야기하는 내용에 대해서는 많은 반론이 있을수 있습니다. 아래 역자주에서도 이야기 하겠지만 HTML5 모바일 웹으로 만들수 있는 것과 네이티브로 만들수 있는 것에는 분명한 구분이 있습니다. HTML5 로 네이티브앱을 완전히 대체하는 것처럼 이해되서 안되겠습니다.]
위의 사실을 조금 더 자세하게 설명해보겠습니다. 모바일 웹 애플리케이션은 네이티브 애플리케이션보다 개발하고 업데이트하기가 훨씬 유연합니다. 예를 들어 개발자는 사용자의 결정이 없어도 버그 수정과 기능 업그레이드를 즉시 매끄럽게 투입할 수 있습니다. 이 점은 네이티브 개발 주기와 정반대입니다. 네이티브 앱의 경우 애플리케이션에 변동사항이 생기면 다운로드할 수 있는 버전 업데이트에 반드시 통합되어야 하는데, 플랫폼의 소유자는 사용자가 틀림없이 귀찮아 할 업데이트 수를 줄이기 위해 업데이트를 최소화하려 할 것입니다. 결국 개발자들이 사용자에게 새로운 기능을 제공하는 것이 미뤄집니다. 또한 개발자들은 모바일 앱 스토어에 업그레이드를 업로드하고 앱 스토어의 승인을 기다려야 합니다. 이 시점에서 개발자들은 무작정 기다리는 수밖에 없습니다.
애플리케이션은 앱 스토어가 가능할 때 재량에 따라 검토하기 때문에 대기 시간이 몇 주, 심지어 몇 달 걸릴 수도 있습니다. 그리고 업데이트가 거부될 위험도 존재하고 만약 그렇다면 개발자는 앱 스토어의 코멘트를 바탕으로 애플리케이션을 수정하고 전체 프로세스를 다시 거쳐야 합니다. 만약 개발자가 앱 스토어에 업데이트를 홍보할 수 있다고 해도 그가 겨냥한 사용자에게 닿는다는 보장은 없습니다; 사용자는 알아서 업데이트를 승인하고 다운로드해야 합니다.
그러나 HTML5 로 모바일 앱을 개발하는 가장 큰 이유는 보편성과 일관성일지 모릅니다. 개발자들은 HTML5 로 리치 모바일 웹 콘텐츠를 만들 어서 모든 모바일 플랫폼에 동시에 일관성 있게 배포할 수 있습니다. 즉, 안드로이드와 iOS, 블랙베리 OS 의 웹 애플리케이션이 일제히 개발되고 릴리즈될 수 있다는 뜻입니다.
모바일 웹 프로세스가 아무리 발전한다 해도, 모바일 웹의 인터랙티브한 경험을 쉽게 개발할 수 없다면 아무 의미 없었을 것입니다. 제스처 감지와 툴바 위치 고정은 무척이나 바람직한 기능이지만 HTML5 명세서에는 속하지 않습니다. 여기서 툴킷과 프레임워크가 도움이 될 수 있습니다. 데스크톱 측 도구와 프레임워크처럼 HTML 기술 기반의 모바일 웹 툴킷과 프레임워크도 현재 개발자들을 지원할 수 있습니다. 예를 들어, 센차 터치 모바일 웹 프레임워크를 사용해 개발자들은 모바일 웹에서 제스처 감지, 툴바 위치 고정, 비디오 및 오디오 기능을 제공할 수 있고 모든 것이 플러그인 없이 가능합니다
[역자주 : 사실 웹기술을 통해 네이티브 기술을 대체하기 위해서는 Apache Cordova 와 같은 다른 기술들의 도움이 절대적으로 필요합니다. 모든 것이 플러그인 없이 가능하다는 표현은 과장된 것으로 기술검토시 이런 부분들을 섬세하게 살펴보셔야 합니다]
리치 애플리케이션의 짧아진 개발 주기와 더 적어진 리소스
개발자들은 HTML5 로 즉각적인 만족까지 얻을 수 있습니다. HTML5, CSS 와 자바스크립트는 편집 주기가 필요 없는 해석형 언어입니다. 그래서 개발자들은 브라우저 안에서 디버깅을 할 수 있으며 빠르게 수정하고 브라우저 창을 새로고침해 변화를 실시간으로 볼 수 있습니다. 플래시나 실버라이트, 오브젝티브 C 를 사용했던 전통적인 네이티브 및 플러그인 개발과 극명하게 대조되는 부분입니다. 그러한 종류의 개발을 할 때는 수정 사항을 즉시 볼 수 없고 긴 편집 및 배치 프로세스 후에나 볼 수 있습니다. 그리고 수정이 잘못되었을 경우 개발자는 전체 프로세스를 처음부터 다시 시작해야 합니다
그렇다면…어떤 개발 환경이 HTML5와 잘 맞을까?
한정된 리소스로 애플리케이션을 개발할 계획입니까? HTML5 가 적합합니다. HTML 은 가독성이 높고 그것을 사용하는 웹 개발자의 수도 천만 명이 넘습니다(훨씬 적은 수의 네이티브 및 플러그인 개발자와 비교됨). [역자주 : 사실 이부분은 논쟁의 여지가 많은 부분입니다. 단순 웹개발자의 물리적 숫자는 물론 네이티브 개발자보다 많겠지만 소위 말하는 프론트엔드 개발 또는 이 문서에서 이야기 하는 리치 웹애플리케이션 개발이 가능한 개발자가 네이티브 앱 개발자보다 많다고 이야기하기는 힘든 것이 현재(2016년) 우리나라의 현실이라고 개인적으로 생각합니다.
어떤 대상이 타깃입니까? 언제 어디서든 접근 가능한 멀티 플랫폼을 대상으로 애플리케이션을 개발할 계획인가요? HTML5 가 적합합니다. HTML 웹 기반의 애플리케이션이라면 당신의 애플리케이션은 언제 어디서든 접근 가능합니다.
스마트폰과 태블릿 같은 기기들로 사용자들에게 끊임없이 다가갈 계획입니까? HTML5 가 적합합니다. HMTL 웹 기반의 모바일 애플리케이션이라면 당신의 애플리케이션은 앞으로 나올 기기들을 비롯해 모든 모바일 웹 브라우저에 일관적으로 표시됩니다.
모바일 앱 스토어 환경을 거치지 않고 모바일 사용자들에게 다가가려 합니까? HTML5 가 적합합니다. HMTL 웹 기반의 모바일 애플리케이션의 경우 사용자에게 다가가는 데 앱 스토어의 승인은 전혀 필요하지 않습니다. [역자주: 리치 모바일 애플리케이션과 네이티브앱이 필요한 영역은 분명히 구분됩니다. HTML5로 개발한 모바일 웹 애플리케이션이 네이티브앱을 완벽하게 대체하는 것은 아닙니다. 이런 부분에 대한 사전에 전략적인 판단을 가지고 어떤 기술을 선택할지 고민해야 합니다. HTML5 가 만능은 아닙니다]
HTML5 과 훌륭한 지원 도구 덕분에 이제 모든 브라우저, 데스크톱, 모바일 기기에서 언제 어디서든 접근할 수 있는 세련된 최신 웹 애플리케이션을 만들수 있습니다. 더 나아가 개발 경험이 많지 않아도 애플리케이션을 쉽고 빠르게 만들 수 있습니다.
센차는 어떻게 HTML5 로의 성공을 보장하는가
센차는 개발자들이 정확하고 성능이 우수한 크로스 브라우저 애플리케이션 경험을 만들 수 있게 하는 프레임워크와 도구를 만드는 것을 목표로 합니다.
센차에서 만든 애플리케이션 프레임워크로 개발자들은 크로스 플랫폼, 크로스 브라우저 웹 앱을 구축할 수 있습니다. 센차의 제품 포트폴리오는 애플리케이션 프레임워크와 도구와 같이 두 가지 유형으로 구성되어 있습니다. 프레임워크는 IE6 에서 크롬 10 사이의 모든 브라우저에 작동하는 진정한 크로스 브라우저 웹 애플리케이션을 빠르게 만들 수 있는 핵심 시스템입니다. 센차의 도구는 프레임워크를 활용해 사용자 인터페이스와 인터랙션의 시각적 개발을 가능케 함으로써 개발자의 작업 흐름 속도를 훨씬 높여줍니다.
센차가 주력하는 제품은 Ext JS 입니다. (Ext JS 6.2 기준) • ExtJS 클래식은 데스크톱 웹사이트 생성을 위한 제품이고 개발자들이 리치웹 애플리케이션을 쉽게 구축하게 합니다. 또한 Ext JS 가 UI 컴포넌트와 기본 UI 테마의 대규모 라이브러리를 포함하고 있기 때문에 개발자들은 원하는 애플리케이션을 구축하는 데 집중할 수 있습니다.
• Ext JS 모던은 모바일과 터치 웹 애플리케이션 구축에 사용하는 프레임워크입니다. 이것은 가장 뛰어난 기능과 유연성, 최적화를 얻기 위해 HTML5, CSS3, 자바스크립트를 활용하도록 특별히 만들어진 세계 제일의 애플리케이션 프레임워크입니다.
센차 제품들은 HTML5 를 특정 용도로 사용해 오디오와 비디오는 물론 오프라인으로 데이터를 저장하는 로컬 저장소 프록시 같은 컴포넌트를 제공합니다. 그리고 스타일 시트에 CSS3 를 폭넓게 사용해 가능한 한 최고로 견고한 스타일링 레이어도 제공합니다.
센차의 프레임워크들을 보완하기 위해 Sencha Architect 와 Sencha Theme Editor 와 같은 두 가지 도구도 사용할 수 있습니다.
• Sencha Architect 는 사용하기 쉬운 비쥬얼 IDE로서 드래그 앤드 드롭 환경에서 여느 때보다도 빠르게 인터페이스를 만들 수 있게 도와주는 데스크톱 애플리케이션입니다. 기업에서 Sencha Architect를 사용하면 Ext 개발자와 제품 디자이너가 단축된 시간으로 웹 앱의 사용자 인터페이스를 개발할 수 있어 새로운 디자인을 빠르게 내놓을 수 있습니다.
추가 정보
HTML5에 대해 질문이 있거나 HTML5를 활용한 웹 경험 개선에 센차가 어떤 도움을 줄 수 있는지 상담받고 싶다면 온라인으로 www.sencha.com 을 방문해주세요. (국내에서는 미래웹에서 관련 컨설팅을 진행합니다. www.miraeweb.com )
[역자주 : 이문서는 Sencha 사의 아래 문서를 한글로 번역한 것입니다. ]
The Development Manager’s Quick Guide to HTML5. What Is HTML5 – and Why Should You Care?
http://pages.sencha.com/rs/sencha/images/Sencha-WP-Dev-Mgrs-Guide-to-HTML5.pdf
