카테고리 보관물: Front-End Development

모바일 웹

모바일 애플리케이션

▶ 모바일 애플리케이션의 종류

  • 네이티브 앱(Native Application)
    – 아이폰이나 안드로이드 폰과 같은 모바일 단말기에 설치되어 사용하는 애플리케이션
  • 모바일 웹(Mobile Web)
    – 비교적 낮은 해상도를 가지는 모바일 브라우저로 실행되는 웹
  • 하이브리드 앱(Hybrid Application)
    – 네이티브 앱 + 모바일 웹
    – 모바일 단말기에 설치되지만 내부 기능은 웹으로 구현
  • 모바일 웹앱(Mobile Web Application)
    – 기술적으로는 모바일 웹이지만 UI, UX는 네이티브 앱과 비슷한 형태의 애플리케이션

네이티브 앱(Native Application)

▶ 네이티브 앱이란?

  • 아이폰, 안드로이드 폰, 윈도우 폰 등과 같이 모바일 기기에 설치해서 사용하는 애플리케이션

▶ 특징

  • 플랫폼 전용의 SDK로 개발
  • 앱스토어, 마켓 등을 통해 배포

▶ 장점

  • 플랫폼의 모든 기능(하드웨어, 소프트웨어)에 접근 가능
  • 자유로운 UI 구현 가능
  • 실행 속도가 빠름

▶ 단점

  • 업데이트(배포)가 불편함
  • 플랫폼에 종속적
  • 개발/유지보수 비용이 높음

모바일 웹(Mobile Web)

▶ 모바일 웹이란?

  • 모바일 브라우저로 접속하도록 만들어진 웹

▶ 특징

  • 기존의 웹 기술로 개발
  • 설치할 필요 없이 웹 브라우저로 바로 이용

▶ 장점

  • 업데이트(배포)가 편함
  • 플랫폼에 독립적
  • 개발/유지보수 비용이 낮음

▶ 단점

  • 플랫폼의 기능(하드웨어, 소프트웨어) 접근에 한계
  • UI 구현의 제약
  • 실행 속도가 느림

하이브리드 앱(Hybrid Application)

▶ 하이브리드 앱이란?

  • 네이티브 앱처럼 설치해서 사용하지만 내부 기능은 웹 기술로 구현한 애플리케이션

▶ 특징

  • 플랫폼 전용의 SDK + 웹 기술로 개발
  • 최소한의 기능만 네이티브 앱으로 개발하고 대부분의 기능은 웹으로 개발
  • 앱스토어, 마켓 등을 통해 배포

▶ 장점

  • 플랫폼의 모든 기능(하드웨어, 소프트웨어)에 접근 가능
  • 개발/유지보수 비용이 낮음

▶ 단점

  • 플랫폼에 종속적
  • UI 구현의 제약
  • 실행 속도가 느림

네이티브 앱 vs. 하이브리드 앱

Native vs Hybrid

모바일 웹앱(Mobile Web Application)

▶ 모바일 웹앱이란?

  • 웹 기술을 이용해서 개발하고 서비스 하지만 네이티브 앱처럼 보이는 웹

▶ 특징

  • 웹 기술로 개발(CSS3를 이용하여 네이티브 앱과 같은 UX 제공)

▶ 장점

  • 모바일 웹의 장점과 같음
  • 사용자에게는 네이티브 앱과 같은 UX 제공
  • HTML5 기술을 접목하면 플랫폼의 기능(하드웨어, 소프트웨어)에 접근 가능

▶ 단점

  • 모바일 웹의 단점과 같음

모바일 웹앱 개발 프레임워크

▶ 모바일 웹앱 개발 프레임워크란?

  • 모바일 웹앱의 개발을 지원해 주는 프레임워크

▶ 특징

  • 모바일 웹을 모바일 기기의 네이티브 앱처럼 보이도록 함
  • 불안정한 모바일 네트워크로 인해 발생하는 다양한 예외를 효과적으로 처리할 수 있도록 도와 줌
  • 하나의 표준 라이브러리를 사용하여 다양한 운영체제에 따라 별도로 개발하는 수고를 줄여 줌

▶ 종류

  • jQTouch
  • jQuery Mobile
  • Sencha
  • Jo
  • iUI 등

HTML5 Web Storage

Web Storage란 클라이언트의 디스크에 소량의 데이터를 저장해 두기 위한 저장공간 입니다.
Web Storage가 등장하기 전에는 이러한 임시 저장소를 구현하기 위해 일반적으로 Cookie를 사용하였습니다.
그러나 Web Storage는 Cookie와 비교하여 여러 가지 다른점이 있습니다.

특징

  • key-value 형태의 데이터를 저장하기 위한 스토리지
  • 자바스크립트 객체를 다루듯 사용법이 간단
    – 저장 : 스토리지 속성에 값을 지정
    – 읽기 : 스토리지 속성에 접근
  •  비교적 간단한 형태의 데이터 저장에 알맞음
    – 복잡한 구조의 데이터는 Web SQL Database가 적당
  •  로컬 스토리지와 세션 스토리지로 구분

Web Storage vs Cookie

  • 기본 크기는 5M byte (쿠키는 4k byte – 브라우저별 상이함)
  • 서버로 데이터를 보내지 않음 (쿠키는 요청 헤더에 자동으로 포함)
  • 만료 기간이 없음 (쿠키는 만료기간 지정)
  • 자바스크립트 객체를 저장할 수 있음 (쿠키는 문자열만 저장)

로컬 스토리지

  • 도메인별로 각각 별도로 생성되는 저장 영역
  • 다른 도메인에서는 접근 불가능

세션 스토리지

  • 브라우저(window 객체)와 같은 생존 기간을 가지는 저장 영역
  • 브라우저가 닫히면 세션 스토리지 정보도 사라짐
  • 각각의 브라우저가 같은 도메인에 접속하더라도 세션 스토리지는 각각 생성
  • 브라우저의 기능(새 창, 새 탭 등)을 이용하여 새롭게 창을 열었을 경우에는 세션 스토리지의 값이 복사되며 이후에
    수정된 내용은 각각의 창마다 따로 관리
  • 로컬 스토리지처럼 도메인별로 각각 별도로 저장 영역이 생성되므로 동일 브라우저 창이라고 해도
    도메인이 다르면 접근 불가

스토리지 API

스토리지 접근

  • 로컬 스토리지 : window.localStorage 속성
  • 세션 스토리지 : window.sessionStorage 속성

스토리지에 값 저장

  • key값을 스토리지 객체의 속성의 이름으로, value값을 속성의 값으로 직접 저장
    – localStorage.userInfo = {name: “홍길동”, age: 29};
    – localStorage[“userInfo”] = {name: “홍길동”, age: 29};
  • setItem() 메서드 이용
    – localStorage.setItem(“userInfo”, {name: “홍길동”, age: 29});

스토리지의 값 읽기

  • 스토리지 객체의 속성이름으로 읽기
    – var userInfo = localStorage.userInfo;
    – var userInfo = localStorage[“userInfo”];
  • getItem() 메서드 이용
    – var userInfo = localStorage.getItem(“userInfo”);

스토리지의 값 삭제

  • delete 연산자 이용
    – delete localStorage.userInfo;
    – delete localStorage[“userInfo”];
  • removeItem() 메서드 이용
    – localStorage.removeItem(“userInfo”);

스토리지의 모든 데이터 삭제

  • clear() 메서드 이용
    – localStorage.clear();

스토리지의 주요 속성과 메서드

  • length : 스토리지에 저장된 데이터의 수
  • key(index) : 지정한 인덱스의 키를 반환(없으면 null)
  • getItem(key) : 지정한 키의 데이터를 반환
  • setItem(key, data) : 지정한 키로 데이터를 저장
  • removeItem(key) : 지정한 키의 데이터를 삭제
  • clear() : 모든 데이터 삭제

스토리지의 이벤트

  • 스토리지의 데이터가 변경되면 storage 이벤트 발생
  • 이벤트 리스너 인자의 주요 속성
    – key : 변경된 키
    – oldValue : 변경되기 전의 값
    – newValue : 변경된 값
    – url : 이벤트가 발생한 문서 url
    – storageArea : 변경된 스토리지 참조

HTML5 video

HTML5 이전 웹에서 영상을 표현하기 위해서는 별도 object 또는 embed테그 등을 이용해서
외부 플레이어의 힘을 받아야 영상을 재생할 수 있었습니다.
거기에서 끝나는게 아니라 사용자는 그 동영상을 보기 위해 각종 플러그인(실버라이트, 플레시등)을 설치해야 하는
불편함을 겪어야 했죠. (현재까지도…)

But! HTML5 video테그를 이용한다면 사용자가 별도의 플레이어 설치 없이 비디오를 볼 수 있습니다.
지금부터 간단하게 video테그 사용에 대해 설명 해보겠습니다.

미디어 타입 브라우저 지원 현황 (추가 : 파폭 버전 25에서 MP4플레이 되는것 확인)

브라우저별 지원하는 비디오 타입이 다르기 때문에 타입별로 준비가 필요합니다. (IE 9 이하는 지원하지 않습니다.)

예제

예제코드

<video controls width=”640″ height=”360″ poster=”미리보기이미지”>
<source src=”/contents/media/chrome.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
<source src=”/contents/media/chrome.webm” type=’video/webm; codecs=”vp8, vorbis”‘>
<source src=”/contents/media/chrome.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>
비디오를 지원하지 못하는 브라우저 입니다. <!– 미지원 브라우저에서 출력됩니다 –>
</video>

source테그로 같은 동영상을 브라우저별 지원사항을 고려해서 3개를 놓게 되면 브라우저는 자동으로 지원하는 포맷으로 재생을 하게되고 모두 지원하지 않을경우, 아래의 “비디오를 지원하지 못하..” 텍스트를 출력합니다.

<source> 테그 설명

  • 미디어의 데이터를 지정하는 요소
  • <video>, <audio>의 하위 요소로 사용되며 여러 번 사용 가능
  • 속성
    – src : 미디어 데이터의 URL
    – type : 미디어 데이터의 MIME 타입
    – media : 미디어 데이터의 이용 조건인 미디어 쿼리를 지정

[파이어폭스 지원 현황 – 2014.7]

  • Update 1: Firefox 21 on Windows and Android now supports MP4
  • Update 2: Firefox 30 on Linux now supports MP4

 

HTML5의 시작 (html5 overview)

모바일 웹개발을 위한 HTML5 교육을 들으며, 주요 내용을 한번 정리 해봅니다.

개요

  • HTML4.01의 뒤를 잇는 HTML의 새로운 버전
  • HTML + JavaScript API + CSS3
  • 도큐먼트(HTML)에서 웹 애플리케이션을 위한 플랫폼(HTML5)으로 진화
  • 별도의 플러그인 없이 HTML5 자체에서 지원하는 기능으로 구현이 가능하다.
  • 단순 Mark-up 개선이 아니라, 웹 전반의 표준 어플리케이션의 발전이고, 움직임이다.

 더 풍부한 웹 어플리케이션

  •  비디오/오디오 재생을 위한 요소 (video/audio)
  • 2D, 3D 그래픽 처리(canvas)
  • 오프라인에서도 작동되는 애플리케이션(애플리케이션 캐시)
  • 도메인 간의 통신 구현 가능 (Cross Document Messaging, XMLHttpRequest Level2)
  • 클라이언트 측에 데이터 저장 (Web Storage, Web SQL DB/Indexed DB)
  • 백그라운드 처리 수행(Web Workers)
  • 서버로부터의 데이터 푸시나 서버와의 양방향 통신 수행(Server-Sent Events, Web Sockets)
  • 로컬 파일의 내용을 읽어들임(File API)

 더 시맨틱한 마크업

  • 문서 구조의 의미나 문서 안에 삽입된 데이터의 의미 등을 명확히 하기 위한 사양이 다수 포함되어 시맨틱 웹의 구현
  • 스크린 리더기 또는 검색 엔진이 보다 정확한 정보를 해석 하기 위해 명확한 구분이 필요했다.

 더 높은 접근성(Accessibility)

  • 접근성 : 사용자의 신체적 특성이나, 지역, 성별, 나이, 지식 수준, 기술, 체험과 같은 제한 사항을 고려하여 가능한 많은 사용자가 불편 없이 이용할 수 있도록 제품, 서비스를 만들어 제공하고 이를 평가 할 때 쓰이는 말
  • 시맨틱한 마크업 (기계가 알아보기 쉽게)
  • 폼의 다양한 입력 양식 속성
  • WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) 사양 포함

더 높은 호환성

  • 하위 호환성
    – 상위 브라우저에서도 HTML5에서 폐지된 속성 지원
  • 상위 호환성
    – 하위 브라우저에서 HTML5의 새로운 속성은 무시
  • 브라우저 간 호환성
    – 상세한 스펙 정의를 통해 브라우저간의 다르게 구현되었던 부분을 최소화
    – 상용 스펙을 표준으로 전환 ( innerHTML 속성, canvas 요서 등)

웹 브라우저별 HTML5 지원 여부

아래 HTML5 API들을 만나 볼수 있는 사이트 입니다.  http://slides.html5rocks.com

  • Canvas 2d context
  • Communications
  • Drag & Drop
  • Geolocation
  • Indexed database
  • Microdata
  • Microdata vocabularies
  • Offline web application
  • Rich text edit
  • Server-sent events
  • Web storage
  • Web sql database
  • Web workers
  • Web sockets

(1999년 12월 HTML 4.01 W3C권고 후 2008년 1월 HTML5 초안 발표 2014년 2분기 HTML5 권고 예정)

HTML5는 주요 브라우저에서 점차적으로 지원 범위를 넓혀가는 시점입니다.
당장은 모든 기능을 일반 웹에서 활용하기는 어렵겠지만, 새로운 기술을 알고 점차적으로 활용한다면
브라우저들도 서로 경쟁하며 지원 범위를 넓혀 결국에는 웹이 좀 더 발전해 나갈것으로 예상됩니다.