[CSS3] 새로운 스타일

Posted in 모바일/HTML5 // Posted at 2010. 9. 7. 14:21
728x90

CSSCascading Style Sheets 의 약자로 글자체, 줄간격, 배경색, 위치 지정과 같은 웹 페이지의 전반적인 스타일을 지정하는데 이용되는 문법 규칙이다

엄밀히 말하자면 HTML과 CSS는 그 역할이 서로 다르다고 할 수 있다
그러나 HTML 의 차세대 버전인 HTML5 제안과 함께 CSS3라는 이름으로 새로운 스타일도 개발되고 있다. 즉 HTML5 와 CSS3 둘 다 차세대 웹 개발을 위한 새로운 표준인 것이다
그래서 HTML5를 다루는 많은 자료들에서 이 둘을 같이 설명하는 경우가 많다

어쨋든 CSS3 는 웹 개발자 보다는 웹 퍼블리셔 혹은 코더라고 불리우는 직군에 더 친숙한 언어이다
(뭐.. 이 역할이 명확히 구분되지 않는 경우도 있지만...)

나 역시 개발자라써, 디자인 영역에 더 가까운 스타일을 다루는 데는 익숙하지 않으며 직접적인 영향을 받지 않는 기술이긴 하지만 흥미로운 몇 가지 CSS3 기능을 알아 둬서 나쁠 건 없어 보인다

이 글에서는 CSS3의 새로운 기능 중 일부를 소개하고자 한다

다중 컬럼 레이아웃(Multiple column layout)
CSS3 의 새 스타일 중 제일 처음 눈에 띄는 것이었다
다중 컬럼 레이아웃 스타일을 사용하면 다수의 컬럼(세로단)에 텍스트를 배치 할 수 있어 마치 신문과 같은 레이아웃을 구성할 수 있다

다중 컬럼 레이아웃의 가장 기본적인 적용법은 컬럼 갯수를 정의하는 것이다
컬럼 갯수 정의는 column-count, column-width 두 가지 중 하나의 방식을 이용할 수 있다

column-count : 컬럼의 갯수를 직접적으로 지정한다. 직관적으로 수를 지정할 수 있어 주로 사용된다
                      컬럼의 너비는 컬럼 갯수를 기반으로 (사용 가능한 공간에 따라)자동으로 결정된다
column-width : 각 컬럼의 너비를 지정함으로써 컬럼의 갯수는 자동으로 결정되도록 한다

그리고 컬럼의 레이아웃을 좀 더 세밀하게 조정할 수 있다
column-gap : 컬럼 간 띄워질 공간을 지정한다
column-rule : 컬럼 구분 막대의 Border Style(두께, 색상 등)을 지정한다

브라우저에 따른 구현 규칙
현재 다중 컬럼 레이아웃은 Mozilla 와 WebKit 브라우저에서만 지원된다. 즉 파이어폭스, 크롬, 사파리에서 지원된다. 다중 컬럼 레이아웃을 위한 특성은 각 브라우저의 접두사를 같이 사용해야 하는데 이는 스펙이 완료되기 전에 임시 특성을 이용하는 것이다. 스펙이 완성되면 접두사 없이 특성이름만으로도 적용가능하게 될 것이다

웹킷 브라우저 임시 특성 예: -webkit-column-count
모질라 브라우저 임시 특성 예: -moz-column-count

보통 다중 컬럼 레이아웃을 지정할 때 모질라, 웹킷, 그리고 표준 모두를 다 적용해 두는 것이 좋다
이제 다중 컬럼 레이아웃을 지정한 예를 보도록 하자
뉴스를 div로 감싸고 div에 다중컬럼레이아웃을 적용한다. 웹킷 및 모질라 모두 구현하였으며 향후 표준 완성을 위해 접두어을 뺀 특성도 정의해 두었다. 이렇게 하는 것이 좋은 습관이다

<div id="news">
교육과학기술부와 한국장학재단이 7일 학자금 대출 제한대학을 발표했다. 전국
......
</div>

<style>
  #news {
    #-webkit-column-width : 130px;
    -webkit-column-count: 3;
    -webkit-column-rule: 2px solid blue;
    -webkit-column-gap: 2em;                       
   
    -moz-column-count: 3;
    -moz-column-rule: 2px solid blue;
    -moz-column-gap: 2em;
   
    column-count: 3;
    column-rule: 2px solid blue;
    column-gap: 2em;
  }         
</style

실행 화면(크롬)



참고>
http://www.quirksmode.org/css/multicolumn.html
http://designshack.co.uk/articles/introduction-to-css3-part-5-multiple-columns


다양한 텍스트 효과
웹 페이지의 텍스트에 다양한 효과를 줄 수 있어 기존 이미지로 표현해야 했던 것을 간단한 스타일로 대신할 수 있다

Text-Stroke
웹킷 기반 브라우저에서 텍스트 윤곽에 대한 스타일을 지정할 수 있다
Stroke 의 두께색상을 지정할 수 있다

<style>
  div {
    font-size: 50px;  
    -webkit-text-fill-color: black;
    -webkit-text-stroke: 1.5px red;          
  }         
</style>



참고> http://www.quirksmode.org/css/stroke.html


Text-Shadow
텍스트에 그림자 효과를 줄 수 있다.
현재 IE를 제외한 사파리, 크롬, 파이어폭스, 오페라에서 모두 지원 된다. 그림자의 색상, 수평위치, 수직위치, 그림자 선명도를 지정할 수 있다
text-shadow: 색상 수평위치 수직위치 선명도

<style>
  div {
    font-size:30px;
    text-shadow: rgba(64, 64, 64, 0.5) 10px 5px 2px;
  }     
</style>



참고> http://www.quirksmode.org/css/textshadow.html


Text-Overflow

텍스트 랩핑(Wrapping)과 관련되는 스타일이다
영역을 벗어나는 텍스트를 오버플러된 텍스트라 하는데 이렇게 오버플러된 텍스트를 '생략 부호(…)' 로 처리할 수 있도록 한다. 현재 IE 6 이상, 크롬, 사파리에서 지원된다

아래 그림을 보면 텍스트 길이가 div 사각영역을 벗어 나고 있다(텍스트가 오버플러 되었다)
이 그림은 텍스트 랩핑을 하지 않았을 때(white-space: nowrap)의 모습이다


그리고 텍스트 랩핑을 하면 아래와 같다(white-space: wrap)


이렇게 오버플로된 텍스트는 보기 싫기 때문에 보통 overflow: hidden 으로 영역을 넘어가는 텍스트를 숨기도록 처리한다. 이렇게 하면 보기 싫게 벗어난 텍스트를 숨길 수 있다

하지만 가장 적합한 선택은 Text-Overflow 의 생략기호(...)를 사용하는 것이다
text-overflow: ellipsis 로 처리하면 아래 그림과 같이 숨겨진 텍스트는 생략기호(...)으로 대체되어
보기 싫지도 않으며 사용자에게 추가 텍스트가 있다는 의미를 직관적으로 알리 수 있다



<div>
  CSS3 텍스트 효과, 텍스트 오버플러
</div>
.....
<style>
  div {   
    padding: 10px 10px;  
    border: 1px solid #000000;           
    height: 1.1em;    
    overflow: hidden; 
    white-space: nowrap;     
    width:20%;
    text-overflow: ellipsis;   
  }     
</style>

참고> http://www.quirksmode.org/css/textoverflow.html


Opacity

텍스트의 투명도를 조절할 수 있다. IE를 제외한 파이어폭스,크롬,사파리,오페라에서 모두 지원한다
(IE이 경우 filter 로 유사한 효과를 줄 수 있다)
투명도는 0.0 ~ 1.0 사이의 값을 가진다. 0(완전 투명) ~ 1(완전 불투명)



코드에서는 opacity 와 더불어 IE8과 IE5~7을 위한 각각의 필터 특성도 정의 해 두었다

<div>
  CSS3 텍스트 효과, 투명도 조절
</div>
<div id="op">
  CSS3 텍스트 효과, 투명도 조절
</div>
.....
<style>
  div{
    font-size: 30px;
    font-weight: bold;
    color: blue;
  } 
  #op{       
    opacity: 0.2;
    filter: alpha(opacity=20);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  }     
</style>

참고> http://www.quirksmode.org/css/opacity.html


다양한 테두리 및 백그라운드 효과
테두리와 백그라운드에 다양한 스타일을 적용할 수 있다
이전에 이미지로 가능했던 많은 부분이 간단한 스타일 적용으로 가능하게 된 것이다

Border-Radius
테두리의 각을 조절할 수 있다. 테두리의 양 끝의 각을 0 ~ 50 px까지 조절하여 모서리의 각을 조절한다. IE 9 이전 버전을 제외한 파이어폭스, 크롬, 사파리, 오페라에세 지원된다



<style>
  div{
    font-size: 20px;
    padding: 20px 20px;
    text-align: center;
    border: 1px solid #bbb;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;

  }      
</style>

참고> http://www.quirksmode.org/css/borderradius.html


Box-Shadow
텍스트 뿐만 아니라 테두리에도 그림자 효과를 줄 수 있다
IE9 이전과 오페라를 제외한 파이어폭스, 사파리, 크롬에서 지원된다
box-shadow: 수평위치 수직위치 선명도 색상


<style>
  div{
    border: 1px solid black;
   padding: 10px;
   -webkit-box-shadow: 10px 10px 5px gray;
   -moz-box-shadow: 10px 10px 5px gray;

  }      
</style>

참고> http://www.quirksmode.org/css/boxshadow.html

Gradient
백그라운드에 그라디에이션 효과를 줄 수 있다. 직선 형태(linear) 효과 또는 방사형 형태(radial) 효과를 줄 수 있다. 파이어폭스, 사파리, 크롬에서 지원된다. IE의 경우 filter 로 유사한 효과를 줄 수 있다


<style>
  div{
    border: 1px solid black;
   padding: 10px;
   background: -webkit-gradient(linear, left bottom, right top, from(orange), to(white));  
   background: -moz-linear-gradient(left,  orange,  white);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='orange', endColorstr='white');
  }      
</style>

참고> http://www.quirksmode.org/css/gradient.html

Border-Image
테두리에도 이미지를 깔 수 있게 되었다. 웹킷 기반인 사파리, 크롬과 파이어폭스(-moz-)에서 지원된다

<style>
  div{     
    width:15em;
    height:2em;
    -webkit-border-image: url(mk.gif) 50 25 50 25 repeat stretch;
    -moz-border-image: url(mk.gif) 50 25 50 25 repeat stretch; 
 
    border: solid 25px #f00;   
  }      
</style>

참고> http://css-infos.net/property/border-image
         http://www.css3.info/preview/border-image/

Multiple Background Images
다중 이미지 백그라운드가 가능하다. 즉 백그라운드에 둘 이상의 이미지를 깔 수 있다
이미지의 위치를 조절하여 여러개의 백그라운드 이미지를 처리할 수 있다
IE8 이전 버전을 제외하고 모두 지원된다



두개의 이미지를 백그라운드에 깔고 수직 반복처리 및 각 이미지의 위치를 좌상단,우상단으로 하였다

<style>
  div{
    border: 1px solid black;   
    width: 20em;
    height: 30em;  
    background-image: url(son1.jpg), url(son3.bmp);
    background-repeat: repeat-y;
    background-position: top left, top right;
     
  }      
</style>

참고> http://www.quirksmode.org/css/background.html#multiple


Background-Size

백그라운드에 깔린 이미지의 사이징을 조절 할 수 있다
div 나 textarea의 크기가 변경될 때 백그라운드가 어떻게 반응해야 하는지를 결정할 수 있다
IE8 이전 버전을 제외한 크롬, 사파리, 파이어폭스(-moz), 오페라에서 지원된다
background-size 의 값으로는 다음 중 하나로 지정할 수 있다

- 기본 값(auto): 원본 이미지 크기 그대로 표시된다, background-size: auto;
- 가로,세로 길이 지정: 지정된 크기로 이미지가 조정 된다, background-size: 250px 20px;
- 퍼센트 지정: 개체의 크기가 변경될 때 같은 비율로 확대/축소 된다, background-size: 50% 70%   
- contain: 개체의 가로,세로 크기에 맞춰 이미지 사이즈가 변경된다
                개체의 가로,세로의 같은 변화에만 반응한다
                (ex: 가로만 늘리면 이미지 크기는 확대 되지 않음)

- cover: contain과 유사히지만 개체의 한 방향(가로 혹은 세로) 크기 변화에도 이미지가 조절된다
          (ex: 가로만 늘리면 이미지의 크기도 같이 확대 된다)

아래의 코드로 브라우저에서 직접 테스트 해 보기 바란다
참고로 div 에 resize를 가능하도록 하여 div의 크기를 사용자가 확대 할 수 있도록 하였다
(resize 는 사파리, 크롬에서만 지원된다

<style>
  div{   
    border: 1px solid black;   
    width: 12em;
    height: 17em;  
    background: url(son1.jpg) center center no-repeat;
    background-size: contain;
    resize: both;
    overflow: auto;    
  }      
</style>

참고> http://www.quirksmode.org/css/background.html#size

Box-Reflect
웹 페이지에 표시되는 개체에 대한 반사 효과를 줄 수 있다. 이 특성은 비단 테두리 및 백그라운드에 국한된 것이 아니라 텍스트, 테이블, 이미지, 비디오 등 웹 페이지에 표현되는 모든 개체가 대상이 된다.
웹킷 기반 브라우저인 사파리, 크롬에서 지원된다

-webkit-box-reflect: direction offset mask-box-image;


<style>
img{
  -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.0, transparent), to(white)); 
  -webkit-border-radius: 30px;
   #border-radius: 3px;
   #border: 3px solid #777;        
}
</style>

참고> http://css-infos.net/property/-webkit-box-reflect

CSS3의 새로운 스타일을 적용하면 다양한 효과와 스타일을 줄 수 있어 웹 페이지를 보다 쉽고 편하게 스타일링 할 수 있게 되었다. 특히 UI를 개발하는 사람은 더욱 관심있게 봐야할 주제이다
CSS3와 관련된 더 자세하고 추가된 학습은 아래의 사이트를 확인하기 바란다
http://www.quirksmode.org/css/contents.html
http://css-infos.net/
http://www.css3.info/preview/



728x90
HTML5 와 CSS3 에는 다양한 요소들이 새로 추가되었다

Modernizer 는 새롭게 추가된 이들 요소들을 브라우저가 지원하는지 검사해 볼 수 있는
심플한 스크립트 코드를  제공하는 오픈소스 라이브러리다

대부분의 검사 코드는 true/false 를 반환하는 Modernizr객체의 프로퍼티를 통해 수행된다

예를 들어 현재 실행중인 브라우저가 Canva를 지원하는지 여부는 다음과 같은 코드로 확인 할 수 있다
if(Modernizr.canvas) { // canvas 지원함 }

http://www.modernizr.com/ 에서 최신 버전의 라이브러리를 다운받을 수 있다(현재 버전 1.5)

다운 받은 modernizr-1.5.min.js 파일을 페이지에 스크립트로 추가하면 바로 사용가능하다
<head>
  <script src="modernizr.min.js"></script>
</head>

Modernizr 라이브러리는 HTML5 의 API 뿐만 아니라 CSS3 의 각종 새 기능과 SVG 등 새로운 웹 기술에 대한 전반적인 검사 코드를 포함하고 있다.

자세한 사용법은 다음의 URL을 참고하기 바란다 http://www.modernizr.com/docs/

Modernizr 를 이용하여 몇 가지 테스트 수행 코드를 작성해 보았다
O,X 표현을 위해 div 요소를 정의했는데 이 부분은 생략하고 스크립트 부분만 발췌한다

<script src="modernizr-1.5.min.js"></script>
<script>
  if(Modernizr.canvas) document.getElementById("canvas").innerHTML = "O"; 
  if(Modernizr.draganddrop) document.getElementById("draganddrop").innerHTML = "O"; 
  if(Modernizr.crosswindowmessaging) document.getElementById("crosswindowmessaging").innerHTML = "O"; 
 
  if(Modernizr.localstorage) document.getElementById("localstorage").innerHTML = "O";
  if(Modernizr.sessionstorage) document.getElementById("sessionstorage").innerHTML = "O";
  if(Modernizr.websqldatabase) document.getElementById("websqldatabase").innerHTML = "O";
  if(Modernizr.indexeddb) document.getElementById("indexeddb").innerHTML = "O";
  if(Modernizr.applicationcache) document.getElementById("applicationcache").innerHTML = "O";
 
  if(Modernizr.geolocation) document.getElementById("geolocation").innerHTML = "O"; 
  if(Modernizr.webworkers) document.getElementById("webworkers").innerHTML = "O";
  if(Modernizr.websockets) document.getElementById("websockets").innerHTML = "O";
 
  if(Modernizr.audio) document.getElementById("audio").innerHTML = "O";
  if(Modernizr.video) document.getElementById("video").innerHTML = "O";
 
  if(Modernizr.cssanimations) document.getElementById("cssanimations").innerHTML = "O";
  if(Modernizr.csstransforms) document.getElementById("csstransforms").innerHTML = "O";
  if(Modernizr.csstransforms3d) document.getElementById("csstransforms3d").innerHTML = "O";
  if(Modernizr.svg) document.getElementById("svg").innerHTML = "O"; 
</script>


그리고 구글 크롬에서 실행한 결과 화면은 다음과 같다


728x90
의미 있는 문서?
전 세계에 퍼져 있는 웹 문서의 수는 어마어마하다.
구글 검색을 통해 찾지 못할 정보가 없을 만큼 방대한 웹 문서들이 존재한다

웹 문서를 온라인에 등재하는 목적은,초기에도 그랬지만 현재에도 그리고 미래에도 마찬가지로
정보 공유, 정보 전달에 궁극적인 목적이 있다

웹에 문서를 표현하기 위해 문서 규칙을 마크업 형태로 정의한 것이 HTML 이다
초기 웹, 그리고 웹을 위한 HTML 문서는 약속된 몇명 만을 위한 것이었지만 시간이 갈수록 웹을 기반으로 하는 정보 공유와 취득의 요구는 기하급수적으로 늘어났다. 지금은 웹 없는 정보란 상상할 수 없을 정도이다.

이렇듯 자료가 방대해지는 것은 정보의 소스가 다양해 진다는 긍정적인 측면이 있는 반면,
너무 방대한 자료로 인해 원하는 정보를 정확하게 찾기 힘들다는 부정적인 측면도 존재하는 것이다
특히 모호한 표현과 일관되지 않는 문서구조는 정확한 정보 검색에 걸림돌이 된다

이러한 흐름에 따라 정확하고 가치 있는 정보 탐색을 위한 요구사항이 점점 늘어나고 있는데,

웹 세상에 방대하게 퍼져있는 웹 문서를 보다 쉽게 탐색하고 보다 정확하게 해석하고 보다 의미있게
구분하고 보다 쉽게 조합하기 위한 시맨틱 웹(Semantic Web)도 이런 요구에 부응하기 위해 탄생한
개념이다

시멘틱 웹을 위해서는 정보를 표현하는 문서의 구조가 규칙적이고 일관되어야 한다
HTML5 에서는 문서 구조를 위한 새로운 마크업들이 추가되었는데 이는 바로
시멘틱 웹의 실현을 위한 시멘틱 요소의 추가이다


기존 웹 문서의 한계
HTML5 이전의 웹 문서 즉 HTML 문서는 구조보다는 표현을 위한 수단에 가까웠다
Table 태그, ul, li 태그, div 태그 등으로 문서 구조를 정의할 수 있지만 이것은 의미있는 구조라기
보다는 표현을 위한 구조 잡기에 가까웠다. 다시 말해 각 태그들은 일관된 목적을 위해 사용되는 것이 아니라 문서를 Display하기 위해 제각각의 형태로 사용되어진게 사실이다.

다시 말해 HTML5 이전의 문서 표현 태그들은 문법적 규칙은 있었으나 구조의 규칙은 존재하지 않았다

이러한 문서는 사람이 읽기에는 적합하지만 자동으로 문서 구조를 파악하고 분류 및 탐색하기에는 힘든 구조이다. 즉 시맨틱스럽지 못하다는 것이다

참고로 의미있는 구조의 대표적인 형태가 XML 문서이다
XML 의 탄생 자체가 논리적인 문서 구조를 위한 것이며 텍스트 기반의 표준화된 형식이기 때문에
매우 시맨틱스럽다고 할 수 있다. SOAP, RSS 등에 XML이 이용되는 것도 바로 이러한 측면 때문이다

W3C에서는 이러한 XML의 특징을 HTML로 녹여서 시맨틱 웹을 실현하고자, XHTML 이라는 스펙을 내 놓기도 했다. XHTML HTML XML형식으로 기술할 수 있도록 하여 XML 자체의 장점인 데이터의 구조화 및 의미화 그리고 확장성을 웹 문서에 적용하기 위한 기술이다

W3C는 한때 XHTML 을 차세대 웹 표준으로 추친하고자 했으나 기대만큼 널리 보급되지 못해 중지되었지만 시맨틱 웹을 향한 의지는 꺼지지 않았다


HTML5에 추가된 시맨틱 요소
XHTML 의 보급 실패 이후 제안된 것이 바로 HTML5 이다
XHTML 에 이어 HTML5에서도 시맨틱을 향한 의지가 포함되어
머리글, 바닥글, 탐색줄, 사이드바와 같은 문서 구조를 위한 시멘틱 태그들이 추가되었다


이러한 시멘틱 태그들은 문서의 구조와 영역 그리고 범위를 명확히 함으로써 웹 페이지의 전체 또는 부분에 의미를 부여할 수 있게 하여 HTML 문서를 보다 시맨틱하게 구성할 수 있도록 한다

그럼 이제부터 HTML5에 새로 추가된 시맨틱 태그들을 알아 보자
<header>
웹 문서의 머리글을 정의한다. 페이지 전체 머리글이나 일부분의 머리글을 정의하는데 사용한다

<footer>
웹 문서의 바닥글을 정의한다. 페이지 전체 바닥글이나 일부분의 바닥글을 정의하는데 사용한다

<section>
사전적 의미 그대로 웹 문서의 한 부분, 한 장을 구분하는데 사용한다
문서 내 영역의 범위를 한정하며 문서의 아웃라인을 구성한다

<article>
문서에서 독립적인 하나의 콘텐트을 구분하는데 사용한다
뉴스 항목, 블로그 본문과 같이 자체적으로 배포될 수 있는 독립된 영역을 지정한다

<nav>
문서 전체 혹은 섹션의 네비게이션 영역을 표현한다.
웹 페이지의 탐색 링크를 위한 컨테이너 역할을 한다

<aside>
문서의 주요 콘텐트와는 별개의 영역을 정의하는데 사용한다.
광고 블럭과 같이 주변의 콘텐트와 별도로 다뤄지는 영역을 지정한다

<hgroup>
문서의 제목을 그룹화 하는데 사용한다.  예를 들어 제목과 부제가 동시에 존재하는 문서의 경우 <h1>요소와 <h2> 요소로 제목, 부제목을 정의하며 이들 제목들은 <hgroup>로 그룹화 된다. 이렇게 하여 여러개의 제목을 묶어 하나의 제목으로 취급할 수 있다

<address>
문서를 제공하는 필자의 연락처 정보 등의 부가 정보를 표현한다

<time>
문서를 제작한 시점, 공개한 시점을 지정하는데 사용한다

<blockquote>
문서에서 인용부분을 정의하는데 사용한다

이외에도 도표 영역을 위한 <figure> 와 입력 필드를 그룹화 하는 <fieldset> 등이 추가로 존재한다
HTML5에 새로 추가된 요소들은 다음의 링크를 통해 확인하도록 하자
http://www.w3schools.com/html5/html5_new_elements.asp


브라우저 지원현황
HTML5의 구조 표현을 위한 시맨틱 태그를 지원하는 브라우저 현황을 살펴 보자


그림1. 브라우저별 hTML5 구조태그 지원 현황 (출처: http://caniuse.com/)

표를 보면 IE 9.0 이전버전을 제외하고는 모든 브라우저에서 이를 지원하고 있다는 것을 알 수 있다
그 만큼 시맨틱은 자연스러운 흐름이며 브라우저간 세부 구현의 차이도 크게 존재하지 않는다

IE(Internet Explorer) 를 위한 대안
표에서도 나와 있듯이 IE 8 을 포함한 이전버전에서도 HTML5 의 시멘틱 요소를 지원하지 않는다
IE8에서(그리고 그 이전 버전에서) <section> 이나 <article>와 같은 태그를 사용하면 브라우저는 이를 인식하지 못할 뿐더러 이들 태그에 부여된 스타일도 적용되지 않는다. 따라서 이들 요소에 스타일이 정상적으로 표현되기 위해서는 createElement() 함수를 이용해 새로운 태그를 정의해야 한다

문서에 정의된 HTML5 요소 모두에 이 처리를 다 해주어야 하는데 이를 도와주는 스크립트가 구글 코드를 통해 제공되고 있다 => html5.js 파일 다운로드

이 스크립트를 다운로드 하여 웹 페이지 head 영역에 다음과 같이 정의한다
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
이렇게 하면 IE8 이전 버전에서도 의도했던 스타일이 적용될 것이다

이와 관련된 다음의 글을 참고하기 바라며
http://blog.whatwg.org/supporting-new-elements-in-ie
http://blog.whatwg.org/styling-ie-noscript

IE8에서 이 스크립트를 적용한 예와 그렇지 않은 예는 다음과 같다

IE에서 HTML5 시멘틱 요소를 사용하고 그 요소에 스타일을 적용했는데
html5.js 를 적용한 것과 그렇지 않은 것을 실행한 화면이다

이 데모는 다음의 URL에서 확인 가능하다
http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/section4.html

- html5.js 미 적용

- html5.js 적용

 
시맨틱 태그 데모
HTML5 시맨틱 태그를 활용하여 문서 구조를 정의하는 것은 어떤 획일적인 규칙이 존재하는 것은 아니다. 문서 구조에 맞도록 입맛대로 구성하면 되는 것이다. 다만 각 태그들이 의미하는 바, 정의하는 범주에 맞도록만 구성하면 된다. 따라서 다른 API들 처럼 사용법이 정해진 것이 아닌 만큼 다양한 형태가 있을 수 있으므로 정해진 데모 보다는 일종의 가이드를 제시하는 것으로 대신하고자 한다

일단 시맨틱 요소들의 의미를 정확히 이해하고 문서 구조를 잡아야 한다
요서에 맞도록 문서 구조를 정했다면 배치와 표현을 위해 스타일시트를 활용할 것을 권장한다
아래 그림은 시맨택 요소를 활용한 문서 구조 가이드를 위한 그림이다


출처: http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/

그리고 잘 만들어진 HTML5 문서 구조와 스타일 적용사례는 다음의 링크에서 제공하는 템플릿으로 학습하기를 바란다 => FreeHTML5Templates

이 사이트는 일전에 소개한 바 있는데, HTML5 로 제작된 무료 템플릿을 제공해 주는 사이트이다

실 사례에 가까운 템플릿인 만큼 참조할 만한 충분한 가치가 있다


참고 자료>
http://www.alistapart.com/articles/previewofhtml5
http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/index.html
http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/

'모바일 > HTML5' 카테고리의 다른 글

[CSS3] Transition  (6) 2010.09.09
[CSS3] 새로운 스타일  (0) 2010.09.07
HTML5와 함께 빠른 웹 개발을 위한 최고의 지침  (0) 2010.09.06
[HTML5] Cross Document Messaging  (3) 2010.09.03
HTML5 템플릿 제공 사이트 소개  (0) 2010.09.03
728x90

HTML5Rock 에서 HTML5 개발 시 참고할 만한 유용한 자료를 공개했다

HTML5 와 CSS3 그리고 향상된 스크립트 등을 활용하여 보다 빠른 웹 어플리케이션을 개발하기 위한 실천적 지침을 제공해 주고 있다
Best Practices for a Faster Web App with HTML5

그리고 ETRI 에 근무하시면서 HTML5 관련 주요 활동을 많이 하시는 이원석님이 이 글을 번역해 주셨다. 매우 고마운 일이 아닐 수 없다 ^^;

아래는 이원석님의 번역본 이다
HTML5를 활용하여 빠른 웹 애플리케이션 개발하기

HTML5, CSS3, 자바스크립트 그리고 브라우저의 개선으로 확실히 웹은 향상되고 있다
이들 새로운 기능들을 활용하면 네트워크 대역폭의 효율적 사용은 물론 속도의 개선, 생산성 증가, 자원의 효율적 사용 등을 꾀할 수 있어 결국에는 웹 어플리케이션의 개발과 사용, 양 측면에서의 효과를 볼 수 있다. 번역된 위 블로그 글을 꼼꼼히 살펴 보기 바란다

아래는 위 글을 압축하여 지침과 결과만을 뽑아 본 것이다

쿠키 대신 웹 저장소를 사용하라
- HTTP 헤더 용량이 줄어들어 결국 요청 성능이 향상된다
자바스크립트 애니메이션 대신 CSS Transitions를 사용하라
- 훨씬 적은 코드로 전송 바이트트 수를 줄여 결국 응답 성능이 향상된다
서버와 통신하는 대신 클라이언트측의 데이터베이스를 사용하라
- 서버 통신을 줄여 결국 성능이 향상된다
자바스크립트 개선은 상당한 성능 개선을 제공한다
- 새로 추가된 스크립트 메서드 사용으로 성능이 개선된다
라이브 사이트에 대해서도 캐쉬 매니페스트(cache manifest)를 사용하라
- 어플리케이션 캐싱으로 실행속도를 최적화 시킨다
비주얼 처리를 개선하기 위해서 하드웨어 가속기능을 켜라
- GPU-레벨 가속기능을 활용하여 시각적,동적처리를 자연스럽고 부드럽게 한다
CPU에 부담을 많이 주는 오퍼레이션에 대해서는 웹 워커를 사용하라
- 비동기 처리로 속도와 UI 반응이 개선된다
HTML5 폼 애트리뷰트와 Input 타입
- 새로운 폼요소를 사용하면 코드를 줄일수 있고 성능이 향상된다
이미지 효과를 표현할 때 CSS3 effects를 최대한 활용해라
- CSS3로 이미지 효과를 대체하여 이미지 로딩과 요청을 줄일 수 있어 결국 성능이 향상된다
XHR보다 적은 밴드위스로 빠르게 전달할 수 있는 웹소켓
- Comet대신 웹소켓을 이용하여 훨씬 적은 네트워크 밴드위스를 사용한다
  결국 전송 속도가 빨리진다

[HTML5] Cross Document Messaging

Posted in 모바일/HTML5 // Posted at 2010. 9. 3. 11:50
728x90

페이지끼리 대화 하다
HTML5 에서는 웹 페이지끼리 메세지를 주고 받을 수 있는 커뮤니케이션 API가 제공된다
크로스 도큐먼트 메세징(Cross Document Messaging)이라는 기술을 이용하면
두 개의 웹 페이지가 서로 메세지를 주고 받을 수 있다.

메세지는 비동기로 송/수신 된다
두 페이지가 데이터를 주고 받는 것은 비동기로 진행된다
메시지 송/수신이 UI 흐름을 방해하지 않기 때문에 가치있는 장점이 되겠다

서로 다른 도메인간의 송/수신도 가능하다
'크로스 도큐먼트 메세징' 이라는 이름에서도 알 수 있듯이 서로 다른 도메인에 존재하는 페이지끼리도
메세징이 가능하다. 기존 웹 환경의 대부분의 기술이 '같은 도메인 정책' 이라는 보안 모델을 적용받는 것과는 상반되는 모델이다.

서로 다른 도메인 메세징이 가능하기 때문에 도메인을 넘나드는 연동 구조에 매우 적합하다.
다만 도메인을 넘나 든다는 것은 보안의 위험도 있다는 말이 되니 신경 쓸 부분이다
즉 허가 되지 않는 도메인으로부터의 메시지 수신이나 송신을 주의해야 한다

브라우저 지원 현황
크로스 도큐먼트 메세징은 그 어떤 HTML5 API 보다 브라우저 지원이 빵빵(?)하다
아래 표를 보면 거의 모든 브라우저가 이를 지원하고 있다. 심지어 IE8 조차도...



그림1. 브라우저별 Cross document messaging지원 현황 (출처: http://caniuse.com/)


크로스 도큐먼트 메세징 다루기
이 API는 매우 심플하다. 사실 바로 데모를 보여줘도 이해할 만큼 단순하다
페이지간 대화를 위한 송/수신 방법을 간단히 살펴 보자

데이터 송신(전송)하기
데이터를 송신하기 위해서는 대상 페이지의 window 객체의 postMessage 함수를 사용하면 된다
이 함수의 원형은 다음과 같이 3개의 인자를 취하고 있다

window.postMessage(data, [ports], targetOrigin)

data: 전달할 메세지, 즉 송신할 데이터를 지정한다
ports: 메세지 포트(생략 가능)
targetOrigin: 타켓 도메인,  즉 메세지를 수신받는 도메인을 지정한다
                  대상이 특정 도메인이 아니라면 * 로 지정한다


데이터 수신하기
데이터를 수신하는 측에서는 단순히 window 객체의 message 이벤트를 구현하면 된다

window.onmessage = function(e){
    alert(e.data);
  }

크로스 도큐먼트 메세징의 기본적인 사용법은 이것이 전부이다

조금 더 구체적 지식을 위해 하나만 더 알아보자
메세지 를 수신할 때 전달되는 메세지 객체에 대한 내용이다

MessageEvent 객체
데이터를 수신할 때 전달 받게되는 메세지 객체이다
앞서 데이터 수신에서( window.onmessage = function(e).... ) message 이벤트로 전달되는 객체를 MessageEvent 객체라 한다. 전달받은 이 객체를 통해 데이터를 확인하게 된다
다음은 이 객체가 제공하는 주요 속성에 대한 설명이다
data: 메세지 즉 송신한 데이터이다
origin: 메세지를 보내는 곳의 도메인 정보
         크로스 도메인 환경이라면 상대 도메인을 확인하는 것이 보안상 좋다
source: 메세지를 보내는 윈도우 객체


크로스 도큐먼트 메세징 데모 만들어 보기
API 사용법을 빠르게 익히기 위한 매우 간단한 데모를 제작해 보자
두 개의 다른 페이지가 존재하고 페이지1->페이지2로 메세지를 전송하는 예이다
페이지2는 페이지1에 iframe 로 삽입되어 두 페이지가 통신하는 구조이다

페이지 1(co1.html)
<!DOCTYPE html>
<html>
<head></head>
<body>
  <div id="message"></div>
  <button onclick="sendMessage();">Send-></button>
  <iframe id="co2" src="co2.html" width="200" height="100"></iframe>
</body>
</html>
<script type="text/javascript">  
  function sendMessage(){
    var dest = document.getElementById("co2");
    dest.contentWindow.postMessage("CO1에서 보내는 메세지","*");
  }   
</script>

페지이 2 (co2.html)
<!DOCTYPE html>
<html>
<head></head>
<body>
  <div id="message"></div>   
</body>
</html>
<script type="text/javascript">    
  window.onmessage = function(e){
    document.getElementById("message").innerHTML += e.data;
  }
</script>


실행 화면(크롬)
co1 에서 send버턴을 클릭하면 co2 로 메시지를 전송하며 co2는 message이벤트를 수신하여
전달받은 데이터를 표시힌다




공개된 데모 살펴 보기
또 다른 데모를 살펴 보자. 크로스 도큐먼트 메세징을 다룬 아티클에서 제공하는 데모이다
두 개의 페이지가 서로 데이터를 주고 받는 예이다
이 두 페이지는 컨테이너 역할을 하는 페이지에 iframe 으로 삽입되어 메세지를 송/수신 한다

데모 설명: http://austinchau.blogspot.com/2008/11/html5-cross-document-messaging.html
데모 : http://achau.appspot.com/demo/html5/crossdoc/index.html

실행화면(크롬)
데모를 실행해 보면,
페이지 위에서 마우스를 움직이면 다른 페이지로 마우스 좌표를 전달해 주는 것이다

데모 간단 설명
데모의 소스가 복잡하지 않기 때문에 직접 보면 동작 방식을 이해할 수 있다
간단히 설명하면

컨테이너 역할을 하는 index.html 페이지에서 두개의 iframe (iframe1.html, iframe2.html)을 생성하고
이 두 페이지가 서로 메세지를 송/수신하게 된다

index.html 페이지에서는 우선 브라우저가 크로스 도큐먼트 메세징을 지원하는지 여부를
postMessage 함수의 유효성 여부로 체크하고 있다
if (typeof window.postMessage == 'undefined') { .. //브라우저가 지원하지 않음 .. }

그리고 두개의 iframe를 자신의 페이지에 추가한다
document.body.appendChild(iframe1);
document.body.appendChild(iframe2);

메세지를 주고 받는 두 개의 프레임 페이지에서는 각각,
마우스오버(onmouseover) 이벤트를 구현하여 마우수 X,Y 좌표 데이터를 서로에게 전송한다
window.document.onmousemove = function(e) {
    var x = (window.Event) ? e.pageX : window.event.clientX;
    var y = (window.Event) ? e.pageY : window.event.clientY;
    window.parent.frames[1].postMessage('x = ' + x + ' y = ' + y, '*');      
};

마지막으로 데이터 수신 이벤트인 message 이벤트를 구현하는데, 브라우저 호환성을 고려
다음과 같이 코드가 구성되어 있다

var onmessage = function(e) {
      var data = e.data;
      var origin = e.origin;
      document.getElementById('display').innerHTML = data;
    };

if (typeof window.addEventListener != 'undefined') {
    window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
    window.attachEvent('onmessage', onmessage);
}

이벤트를 등록하는 두 가지 방법(addEventListener , attachEvent)을 사용했는데,
이는 IE와 파이어폭스 그리고 기타 브라우저를 고려한 호환성을 위한 코드이다
따라서 이 데모를 IE8에서 실행해도 정상적으로 동작하게 된다

이 정도면 데모 동작 방식을 거의 다 이해한 것이다
전체 코드를 실제로 다운 받아서 테스트 해 보기 바란다

참고>
http://developer.apple.com/safari/library/documentation/appleapplications/Conceptual/SafariJSProgTopics/Articles/Cross-documentmessaging.html
http://virtuelvis.com/archives/2005/12/cross-document-messaging
https://developer.mozilla.org/en/DOM/window.postMessage
http://www.whatwg.org/specs/web-apps/current-work/#crossDocumentMessages

HTML5 템플릿 제공 사이트 소개

Posted in 모바일/HTML5 // Posted at 2010. 9. 3. 10:36
728x90
마이크로소프트 닷넷을 소재로 한 MKEXDev.NET 는 Darren Hest 라는 사람이 만든
Disigns by Darren 에서 제공하는 무료 템플릿을 이용하였다

이 사이트는 HTML과 CSS의 조합으로 깔끔하고 심플한 템플릿들이 많이 제공된다
마음에 드는 템플릿을 다운받아서 입맛에 맞게 수정하거나 연동하면 제법 그럴싸한
사이트를
손쉽게 만들 수 있다

우연히 알게 된 또 하나의 무료 템플릿 사이트가 있는데,
HTML5 와 CSS3를 조합으로 만든 템플릿을 제공해 주는 사이트이다


FreeHTML5Templates

사이트 템플릿 인 만큼 API적 요소는 없지만, HTML5의 새로운 마크업 태그를 이용하여
제작된 만큼 HTML5 사이트의 기본 구성을 잡거나 학습하기에는 그만이다




브라우저의 HTML5 오디오포맷 지원 여부

Posted in 모바일/HTML5 // Posted at 2010. 9. 2. 11:59
728x90

[HTML5] Video & Audio 글에서 HTML5의 비디오, 오디오 지원에 대해 알아 보았다
코덱의 비표준화 문제로 각 브라우저마다 지원되는 포맷이 상이한 문제도 다루었었다
자신의 브라우저가 어떤 오디오 포맷을 지원하는지 테스트 해 볼 수 있는 사이트를 소개한다

xguru 님 트위터에 소개된, 브라우저의 오디오 지원 테스트 페이지!http://textopia.org/androidsoundformats.html

이 사이트에서는 각 오디오 포맷별로 HTML5 의 <audio> 태그를 사용하여 정의해 두었다.
위 주소로 접속하면 현재 브라우저가 어떤 포맷을 지원하는지 시각적으로 확인 할 수 있다

현재 나의 데스크탑에 설치된 4대 브라우저를 테스트 해 봤다. 각 브라우저와 버전은 다음과 같다
1) 크롬, 버전 5.0
2) 사파리, 버전 5.0
3) 파이어폭스, 버전 3.6.8
4) 오페라, 버전 10.61


테스드 대상 오디오 포맷은 다음과 같이 총 7개이다
- ogg, mp3, 3gp, m4a, wav, amr, mp4

4대 브라우저에서 테스트를 해 보니 아래와 같은 결과가 나왔다

크롬

사파리


파이어폭스


오페라

그리고 아이폰 3 사파리로 테스트한 결과, 데스크탑 사파리와 동일한 결과가 나왔다



정리 해 보면, 각 브라우저 별로 지원되는 오디오 포맷은 다음과 같다
크롬: ogg, mp3, m4a, mp4
사파리: mp3, 3gp, m4a, wav, amr, mp4(아이폰 3GS, 모바일 사파리 동일)
파이어폭스: ogg, wav
오페라: ogg, wav

'모바일 > HTML5' 카테고리의 다른 글

[HTML5] Cross Document Messaging  (3) 2010.09.03
HTML5 템플릿 제공 사이트 소개  (0) 2010.09.03
[HTML5] Server-Sent Events  (4) 2010.08.31
[HTML5] Notifications (알림)  (2) 2010.08.30
[HTML5] 웹 양식(Web Form)의 개선, 폼 태그  (4) 2010.08.26

[HTML5] Server-Sent Events

Posted in 모바일/HTML5 // Posted at 2010. 8. 31. 16:54
728x90
웹에서 서버 푸시(Sever Push) 구현
그 동안 웹에서 서버 푸시(Server Push) 구현을 위해 얼마나 많은(?) 노력이 있어 왔던가?

서버 푸시란 서버에서 클라이언트로 데이터를 (능동적으로) 전송해 주는 통신 방식 즉 통신의 방향과 관계되는 용어이다. 즉 서버 푸시란 데이터 전송 방향이 '서버 -> 클라이언트' 가 되는 것이다

이와 반대되는 개념을 클라이언트 폴링(Polling) 방식이라 한다
클라이언트 폴링은 클라이언트에서 서버로 질의를 하고 서버는 이에 응답만 하는 구조이다
폴링의 데이터 전송 방향은 '클라이언트 -> 서버' 가 된다

TCPIP 한 계층위에 존재하는 HTTP 프로토콜에 기반한 웹 통신은 비연결 지향적 성격을 가지고 있다.
클라이언트는 서버로 요청(Request)을 하고 서버는 이에 응답(Response)을 하고 이후 연결은 닫힌다

물론 HTTP 1.1 부터는 KeepAlive 라는 개념이 추가되어 HTTP 연결을 일정 시간 이상 유지하도록 하는 매커니즘이 추가되었다. 그러나 이것은 매번 새로운 연결(Connection)에 따른 오버헤드를 줄이기 위한 목적이지 소켓 통신과 같은 완전한 연결 유지, 상태유지, 양방향 통신을 위한 것은 아니다
HTTP 연결유지와 관련해서는 다음의 글을 참고하자
[HTTP 프로토콜] Stateless
[HTTP 프로토콜] 연결 유지가 능사인가?

응용 프로그램에서 서버푸시 방식이 필요한 경우가 매우 많다.
가장 이해하기 쉬운 예가 채팅 서비스 이다.
채팅은 서버와 클라이언트가 실시간으로 그리고 지속적으로 데이터를 주고 받아야 한다. 자신의 메시지를 즉시 서버로 전송해야 하며 서버는 이 메시지를 다른 사람에게 바로 전달해야 한다. 즉 서버가 채팅 메시지들를 중계하여 각각의 사용자(클라이언트)들에게 실시간으로 데이터를 뿌려 주는 구조 즉 서버푸시 구조의 대표적인 사례라 하겠다

웹에서도 이러한 서버 푸시의 요구사항은 늘 있어 왔다.
그러나 통신 구조의 한계로 인해 직접적인 서버푸시 구현은 힘들며 대안으로써의 여러 기법이 이용되어 왔다

웹이 서버푸시를 위해 선택한 여러 대안들
순수 웹 기술로는 서버푸시를 구현한다는 것은 현재까지도 불가능 한 것이 사실이다

이전 세이클럽과 같은 웹 사이트에서 제공하는 채팅 서비스는 순수 웹 기술로 구현된 것이 아니라
자바 애플릿과 같은 플로그인 기술로 구현된 것이다. 플러그 인 기술은 추가 실행 엔진을
설치해야 하며 구동되는 환경은 웹이 아니라 별도의 런타임이기에 소켓통신이 가능하다
결국 세이클럽의 채팅은 HTTP가 아니라 소켓 통신을 이용한 서비스 인 것이다


이처럼 지금까지 가장 많이 사용된 대안은 웹 플러그 인 기술을 사용하는 것이었다

플러그 인을 사용하지 않고 서버푸시를 흉내내기 위해서는 앞서 설명한 폴링(Polling) 기법이 이용되었다.숨긴 frame, iframe 을 이용하거나 Ajax 등을 이용하여 주기적으로 매번 서버로 질의를 하는 형태이다

그러나 이와같은 방식은 가장 큰 문제점은 구현이 깔끔하지 못하다는 것과 대역폭의 낭비가 심하다는 것이다. 서버에서 전달할 데이터가 있건 없건 클라이언트는 계속 질의해 보는 수 밖에 없다

서버 푸시는 전달할 데이터가 있을 때에만 클라이언트로 전송하면 되지만,폴링은 서버의 상태를 알지 못하니 계속 호출해 볼 수 밖에 없는 것이다.
그러나 순수 웹 기술로는 서버푸시를 구현할 수 없기에 폴링 방식을 이용해서 푸시 효과를 흉내 낼 수 밖에 없는 것이다

마지막으로 순수 웹 기술로 서버 푸시 효과를 구현하는 비교적 최적의 기술인 Comet 이 있다
Comet는 요청에 대한 연결을 응답시 까지 유지시켜 웹에서의 서버푸시를 효과적으로 구현하기 위한 기술을 일컫는데 사실 나도 Comet 를 실제로 다루어 보지는 않아서 딱히 구체적으로 언급할 것은 없다
다만 Comet이 서버 푸시를 구현하는 통신 구조와 Server-Sent Events가 이것을 표준화 한 하나의 형태라는 것은 알고 넘어가자. 참고로
위키사전과 HTML& API 입문 서적에 정의한 Comet를 옮겨 본다
위키사전>
In web development, Comet is a neologism to describe a web application model in which a long-held HTTP request allows a web server to push data to a browser, without the browser explicitly requesting it

HTML&API 입문>
Comet은 HTTP에서 의사푸시를 구현하는 기술입니다. 클라이언트로부터의 요청에 대해 서버는 응답이 완료되었음을 알려주지 않고 연결을 유지하므로 계속 클라이언트에게 응답을 보낼 수 있습니다
그러나 서버 자원과 대역폭을 효율적으로 사용하려면 서버는 일정 간격마다 응답을 완료하고, 클라이언트는 재접속할 필요가 있습니다.(이 때문에 Comet를 Long-polling이라 부리기도 합니다)


Long-polling 과 기존 polling 의 통신 구조 차이를 다음 그림으로 이해하자



웹에서 서버 푸시를 위한 HTML5의 표준안: Sever-Sent Events
HTML5 의 Server-Sent Events(SSE) 스펙은 웹 환경에서 서버푸시를 구현하기 위해 제안된 
표준 기술이다. 앞서 설명한 의사서버푸시기술인 Comet 을 표준화한 기술이라고도 한다

Java.net 에서 소개하는 Server-Sent Events 설명을 보면 더욱 명확하다

HTML5 also applies the Comet communication pattern by defining Server-Sent Events (SSE), in effect standardizing Comet for all standards-compliant web browsers - java.net

Server-Sent Events 는 서버 푸시를 구현을 위한 심플한 자료구조와 인터페이스, 통신 매커니즘을 정의하고 있으며 일반적인 DOM 이벤트 형태로 수신 데이터를 처리 할 수 있는 등 서버푸시 구현이 매우 간단해 진다

Server-Sent Events 가 완전한 서버푸시?
SSE를 더 알아보기 전에 한가지 집고 넘어가고자 한다
SSE가 완전한 서버푸시인가? 즉 SSE가 소켓통신과 같이 서버->클라이언트로의 능동적인 통신 방식인가? 하는 문제이다. 답은 그렇지 않다

SSE 역시 (이전 다른 대안들처럼) 서버푸시 효과를 내기 위한 기술이다
SSE는 (폴링과 유사하게) 클라이언트에서 서버로 반복적으로 질의를 하는 방식 즉 '클라이언트 -> 서버' 로의 통신 방향이며 소켓통신과 같은 완전히 능동적인 서버푸시 기술은 아니라는 점이다

그렇다고 SSE를 무시할 수는 없다
일단 SSE는 웹 서버푸시를 구현을 위해 귀결되는 표준 기술로 자리매김 할 것이며 간단하고 명료한
프로그래밍 모델과 API 그리고 효과적인 통신을 위한 데이터 포맷 지원 등 여러 장점을 제공 해 준다


브라우저 지원 현황

HTML5 Server-Sent Events 를 지원하는 브라우저 현황을 살펴 보자


그림1. 브라우저별 Server-Sent Events 지원 현황 (출처: http://caniuse.com/)

위 표를 보면 사파리, 크롬 그리고 부분적으로 오페라가 지원한다고 나와있다
그러나 실제 테스트를 해 보면 사파리 에서만 정상 동작한다(아이폰 사파리 포함)

오페라 브라우저의 경우 위 표 하단의 설명처럼 과거 스펙을 지원한다고 나와있다
현재의 SSE 스펙은 정상 동작하지 않는 것을 확인하였다. 오페라에서 과거 스펙의 SSE를 구현하는 예는 다음의 글에서 확인할 수 있다 -> Event Streaming to Web Browsers

Server-Sent Events 다루기

이제부터 SSE를 실제로 다루기 위한 기본적인 개념들을 알아 보도록 하자

EventSource
EevnetSource 객체는 SSE 구현을 위한 핵심 객체이다
이 객체를 통해 자동으로 서버 요청이 주기적으로 일어나며 데이터 수신 이벤트를 정의할 수 있다
즉 EventSource는 서버 요청을 위한 출발점이며 또한 데이터 수신을 위해 정의되는 일종의 EndPoint 라고도 할 수 있다. EventSource 는 요청 대상이 되는 서버 URL을 매개변수로 취하며 객체가 생성되는 순간 이벤트 스트림이 열리게 된다


다음 코드처럼 EventSource 객체를 생성하는 것만으로 주기적인 서버 호출이 일어난다 
var eventSource = new EventSource("server.asp");


데이터 수신 이벤트
서버로 부터 전달받는 데이터를 처리하기 위해 수신 이벤트를 정의한다
이 이벤트 역시 EventSource 객체를 통해 정의하면 된다

다음에 알아볼 서버 데이터 포맷에 특별한 이벤트 이름이 지정되지 않은 경우 기본 값인 message 이벤트로 처리하며 된다. 다음 코드는 EventSource 객체에 message 이벤트를 정의한 것이다
이벤트로 전달되는 data 속성으로 수신 데이터를 액세스 할 수 있다
eventSource.addEventListener("message",
    function(e){          
      alert(e.data);
    }
,false);


서버 데이터 포맷과 규칙
서버측에서 클라이언트로 전달하는 데이터는 일반적인 텍스트 형태이지만 그 포맷이 정해져 있으며 몇 가지 규칙을 따라야 한다

- MIME 타입: 서버 데이터는 text/event-stream 라는 MIME 타입으로 제공되어야 한다
- 문자 인코딩: 서버 데이터의 문자 인코딩은 UTF-8 형식이어야 한다

- 빈줄은 이벤트를 구분하는 역할을 한다
- 주석은 :(콜론)으로 시작한다

- 데이터는 '필드 명: 필드 값' 형식이어야 한다(콜론과 필드 값 사이에 공백 하나를 포함할 수 있다)
  필드 설명> 필드 명에 해당하는 필드 설명을 보자
   data : 서버가 전달할 실제 데이터를 정의한다
   retry: 반복 주기를 설정한다(단위: millisecond)
   event: 이벤트 이름을 지정한다(지정하지 않으면 기본값인 message 가 된다)
   id: 이벤트 id를 지정한다. 클라이언트에서 마지막 이벤트 번호를 저장하기 위해 사용된다

다음은 서버 데이터를 규칙에 맞게 구성한 하나의 예이다. 2초의 반복주기를 가지도록 하며 두 개의 이벤트를 정의하고 있다. 그리고 하나의 이벤트에는 각각 두개의 데이터를 정의하고 있다
retry: 2000

event: firstEvent
data: 이벤트1,데이터1
data: 이벤트1,데이터2

event: secondEvent
data: 이벤트2,데이터1
data: 이벤트2,데이터2
 
실제 환경에서는 데이터가 동적으로 변화하기 마련인데 asp.net 이나 asp,php 등으로 데이터를 적절히 구성하면 된다. 다만 서버데이터 포맷과 규칙을 지키기만 하면 된다

반복 주기
요청을 반복하는 주기는 서버 데이터 포맷에 정의된 retry 시간을 기준으로 한다
retry 2000 이면 2초마다 반복 호출하게 된다
단 서버 데이터 포맷에 retry 정의가 없다면 브라우저 기본 값을 따른다
데스크탑 사파리의 경우 기본 값이 3초이다

개인적으로 가장 특이하고 효과적으로 보이는 것이 바로 이 retry 부분이다
주기적인 호출을 위한 반복 시간을 클라이언트가 아닌 서버에서 지정한다는 것이 매우 고무적이다
이는 서버입장에서 반복 시간을 컨트롤 할 수 있다는 의미이며 기존 폴링 방식에 비해 통신 구조를 보다 효과적으로 설계할 수 있다는 장점을 가져다 준다


Server-Sent Events 데모 만들어 보기
이제 실제 Server-Sent Events 를 이용한 서버푸시 데모를 제작해 보자

서버 데이터 준비
먼저 클라이언트가 수신하게 될 서버 데이터를 규칙에 맞도록 정의한다
서버 데이터를 반환하는 것은 asp,php,asp.net, cgi 등 어떤 것이든 규칙에만 맞으면 된다
이 데모에서는 ASP 기술을 이용하여 server.asp 를 다음과 같이 정의한다
2초 반복 주기와 두개의 이벤트, 한 이벤트에 각각 두개의 데이터를 정의했다
<% Response.ContentType = "text/event-stream" %>
retry: 2000

data: 이벤트1,데이터1
data: 이벤트1,데이터2

data: 이벤트2,데이터1
data: 이벤트2,데이터2

클라이언트 구현
서버 데이터를 수신할 클라이언트를 정의한다
EventSource 객체를 통해 송,수신을 처리하며 기본이름은 message 이벤트로 수신데이터를 처리한다
<!DOCTYPE html>
<html>
<head></head>
<body>
  <button onclick="start();">Start</button>
  <div id="message"></div>   
</body>
</html>
<script type="text/javascript">  
function start(){
  var eventSource = new EventSource("http://mkexdev.net/test/server.asp");      

  eventSource.addEventListener("message",
    function(e){
      var data = e.data.split("\n");
      var one = data[0];
      var two = data[1];
     
      document.getElementById("message").innerHTML += one + two + "<br>";
    }
  ,false);
}
</script>


실행화면
아래 그림은 데스크탑 사파리에서 데모를 실행한 화면이다
한번 호출에 총 두개의 이벤트 데이터가 표시되며 2초 간격으로 반복 호출 된다
아래 그림은 6초 동안 총 3번 server.asp를 호출한 것이며 총 6개의 데이터가 출력된 모습이다
(사파리)


참고> 이벤트 명을 명시하여 클라이언트가 지정 이벤트만을 수신하도록 할 수 있다
앞의 데모에서는 이벤트명을 지정하지 않아 기본값인 message 이벤트를 처리하여 전체 데이터를 수신하도록 하였지만 이벤트 명을 지정하게 되면 클라이언트에서는 특정 이벤트 데이터만 수신할 수 있다

- server.asp
<% Response.ContentType = "text/event-stream" %>
retry: 2000

event
: firstEvent

data: 이벤트1,데이터1
data: 이벤트1,데이터2

event: secondEvent
data: 이벤트2,데이터1
data: 이벤트2,데이터2


- 클라이언트 코드(명시적으로 특정 이벤트명일 지정하여 이벤트 수신합)
function start(){
  var eventSource = new EventSource("http://mkexdev.net/test/server.asp");     
  eventSource.addEventListener("secondEvent",
    function(e){
      var data = e.data.split("\n");
      var one = data[0];
      var two = data[1];
     
      document.getElementById("message").innerHTML += one + two + "<br>";
    }
  ,false);
}

- 실행화면
실행을 해 보면 secondEvent로 정의된 이벤트 데이터만 표시되는 것을 확인할 수 있다


다만 이렇게 특정 이벤트만을 명시적으로 지정하여 수신하더라도 서버데이터는 일부가 아닌 전체가 다운로드 된다. 즉 서버데이터는 모두 가져온 후 클라이언트에서 특정 이벤트만 필터하는 것이다
아래 그림은 이 시나리오에서 Fiddler 로 응답 데이터를 캡쳐한 화면이다




참고 자료>
http://dev.w3.org/html5/eventsource/
http://today.java.net/article/2010/03/31/html5-server-push-technologies-part-1

MobiOne, 아이폰 에뮬레이터

Posted in 모바일 // Posted at 2010. 8. 31. 15:31
728x90
모바일 웹을 개발할 때 실제 아이폰으로 테스트하기에는 여간 불편한게 아니다
아이폰이 있어야 함은 물론이고 3G라도 쓸 요량이면 요금도 신경 쓰인다

그래서 실제 아이폰을 대신할 에뮬레이터를 찾게 된다
지금까지 본 에뮬레이터 중 단연 으뜸은 Genuitec에서 개발한 MobiOne이다
http://www.genuitec.com/mobile/

윈도우에서 아이폰 개발환경을 지원하고 모바일 웹에 대한 뷰 테스트, HTML5, CSS3와 같은
최신 스펙의 웹 기술을 대부분 테스트 해 볼 수 있다




MobiOne 테스트 센터와 디자인 센터 실행 화면



[HTML5] Notifications (알림)

Posted in 모바일/HTML5 // Posted at 2010. 8. 30. 17:57
728x90
데스크탑 알림 창
응용프로그램에서 알림창은 (응용프로그램) 자신의 상태나 변화를 실시간으로 알려주기 위한 장치이다
대표적인 예로 메신저에서 메시지 수신이나 친구 로그인 등의 알려주는 것을 들 수 있다


이러한 알림창은 응용프로그램이 비활성화 되어 있더라도,
사용자에게 중요한 정보를 시각적으로 즉시 알려 주기 위한 유용한 장치이다

HTML5 의 Notifications 은 웹 페이지에서도 이와 같은 데스크탑 알림창을 구현하기 위한 스펙이다

기존 윈도우 응용프로그램의 알림창과 같이, 데스크탑 화면 우측 하단에 작업표시줄 근처에 풍선말 형태로 출력된다. 즉 웹 페이지 범위를 벗어난 영역에 알림창이 표시되며 웹 페이지가 최소화 되어 있거나 비활성화 되어 있어도 상관없이 알림창은 동작한다

아래 화면은 Notifiactions 로 띄운 알림창을 구글 크롬에서 실행한 화면이다
(크롬)


지원되는 브라우저

현재 Notifications 는 Draft 상태로 HTML5 정식 스펙에 포함되지는 않은 듯 하다
구글이 제시한 스펙으로써 지원되는 브라우저 역시 구글 크롬에 한정되어 있다

따라서 현재 시점에 이 기술을 실 서비스에 접목시키기는 어려울 수 있으나 이 글에서는 간단한 사용법 정도를 숙지하는 것으로 하겠다

다시 말하지만, Notifactions 는 현재 구글 크롬 브라우저만 지원되고 있다


if(!!window.webkitNotifications) {
     alert("현재 브라우저는 Notifications를 지원합니다")
}
else{
      alert("현재 브라우저는Notifications를 지원하지 않습니다")
}


Notifications 이 자동알림의 전부는 아니다
간혹 HTML5의 Notifications 에 대한 오해가 있는 듯 하여 집고 넘어가고자 한다
Notification 이 알림창을 띄우는 것이다 보니 이 자체가 자동 알림을 구현하는 전부인 듯 오해를 하기 쉽다. 물론 이 기술이 응용되는 궁극적인 모습은 자동 알림인 것은 사실이지만, Notifications 만으로 자동알림을 구현할 수는 없다는 것을 말하고 싶다

이는 마치 오프라인 웹 응용프로그램 구현이 어플리케이션 캐시와 밀접하게 연관되어 있지만
Web Storage 나 Web SQL Database와 같은 로컬 저장소 기술과 접목해야한 제대로 된 오프라인 웹 응용프로그램이 될 수 있는 개념과 유사하다

다시 말해 웹 서비스에 있어, 알림 대상이 되는 내용 및 이벤트의 대부분은 웹 서버측에서 내려주는 시나리오가 많으며 이럴 경우 Ajax 를 통한 반복적인 비동기 폴링(polling)이나 HTML5의 새로운 스펙인 Server-Sent Events 와 같은 기술이 접목될 때 비로써 제대로 된 자동알림 구현이 가능하다는 것이다

물론 클라이언트의 데이터, 이벤트만을 기준으로 알림창을 띄우는 것이라면 Notifications와 적절한 스크립트의 조합만으로 가능하겠지만 대부분의 시나리오에서는 알림 대상이 되는 이벤트는 서버를 기준으로 발생하기 마련이다

따라서 'Notifications + 적절한 반복 스크립트 + 서버이벤트 감지' 기술 이 복합적으로 구현될 때 자동 알림이 완성된다고 할 수 있겠다


Notifications 다루기
그럼 지금부터 Notifications 의 기술적 구현을 간단히 살펴보자
Notifications 로 데스크탑 알림을 구현할 경우 다음의 절차를 따르는 것이 좋다

Notificatins API 지원 여부 확인 -> 사용자 승인 여부 확인 -> Notificatins 인스턴스 생성

Notificatins API 지원 여부 확인 
이 부분은 앞서 '브라우저 지원 현황' 에서 알아 본 것이다
window 전역 객체에 webkitNotifications 객체가 존재한다면 해당 브라우저는 Notificatins API를 지원 하고 있는 것이다

사용자 승인 여부 확인
사용자가 브라우저를 통해 웹 사이트를 볼 때 성가시거나(?) 보안에 위험이 있는 요소들은 사용자 승인과정을 따르게 되어 있다. 예를 들어 쿠키(Cookie)나 팝업 창의 경우 사용자가 활성화 여부를 결정할 수 있으며 HTML5 에서는 위치 정보 확인(Geolocation)과 같은 개인 정보 취득시 사용자 승인을 받도록 되어 있다. Notifications 역시 알림창을 띄울 것인지에 대한 사용자 승인 과정이 필요하다

이는 webkitNotifications 객체의 checkPermission() 함수로 확인 가능하다
이 함수의 반환 값은 0,1,2 중 하나인데 다음과 같다
0: 승인 됨, PERMISSION_ALLOWED
1: 승인 하지 않음, 승인 전, unknown, PERMISSION_NOT_ALLOWED
2: 거부 됨, PERMISSION_DENIED

Notificatins 인스턴스 생성
브라우저 지원 여부와 사용자 승인 여부의 확인 이후,
실제로 데스크탑 알림창을 띄우기 위해 Notificatins 인스턴스 생성해야 한다

Notificatins 인스턴스는 두 가지 버전으로 생성이 가능하다
createNotification(in DOMString iconUrl, in DOMString title, in DOMString body);
: 일반 텍스트 형식의 알림 창. 알림 창에 표현될 아이콘, 제목, 내용을 설정한다

createHTMLNotification(in DOMString url)
: HTML 형식의 알림 창. 알림 창에 표현될 유효한 웹 주소를 설정한다


Notifications 이벤트
Notifications 에는 알림창과 관련한 몇 가지 이벤트를 제공하고 있다
이 이벤트들을 이용하면 알림창이 표시될 때, 닫힐 때 특정 로직을 수행할 수 있다
Display 이벤트
: 알림창에 표시될 때 발생한다
  notification.ondisplay = function() { setTimeout(notification.cancel(), 15000); }

Close 이벤트
: 알림창에 닫힐 때 발생한다
  notification.onclose = function() { cancelReminders(event); }

Error 이벤트
 : 알림창과 관련한 오류가 있을 시 발생한다
   notification.onerror =function(e){ alert('error')};


Notifications 데모
Notifications 구현 절차에 따른 간단한 데모를 제작해 보자
두 가지 버전의 Notificatins 인스턴스를 생성하여 알림창을 동시에 띄우는 예제이다
그리고 브라우저 지원 여부와 사용자 승인 여부를 확인하고 알림 창을 띄우고 있다

<!DOCTYPE html>
<html>
<head></head>
<body>
  <button onclick="showNotification();">알림실행</button>
</body>
</html>
<script type="text/javascript">   
function showNotification(){
  if(!!window.webkitNotifications) { //브라우저 지원현황 확인하기
    if(window.webkitNotifications.checkPermission() == 0 ){ //사용자 승인 여부 확인하기 
      var picture = 'http://mkexdev.net/img/mkex.jpg';
      var titleStr = 'MKEX의 HTML5';
      var bodyStr = 'HTML5 Notification 데모입니다';     
      var noti1 = window.webkitNotifications.createNotification(picture, titleStr, bodyStr);
      var noti2 = window.webkitNotifications.createHTMLNotification("http://m.mkexdev.net");
      noti1.show();
      noti2.show();     
    }
    else{
     requestPermission(showNotification);
   }   
  }
  else{
    alert("현재 브라우저는Notifications를 지원하지 않습니다");
  }
}
function requestPermission (callback) {
  window.webkitNotifications.requestPermission(callback);
}
</script>



데모를 실행하면 최초 알림을 활성화 할지를 묻는 사용자 승인과정을 거친다
(이 데모는 mkexdev.net 도메인에서 서비스 되도록 하였다. 아래 승인에 해당 도메인에 대한 알림 승인 여부를 묻고 있다)


사용자가 승인하면 아래와 같이 데스크탑 우측 하단, 작업 표시줄 영역에 알림 창이 두개 생성된다
(구글 크롬)


참고: 한번에 표시되는 알림창의 갯수
데모에서 '알림실행' 버턴을 계속 클릭하면 그 만큼 알림창이 생성된다
그러나 한정된 화면을 가진 데스크탑에서 이것을 다, 한번에 표현하기는 힘들다

크롬 브라우저에서는 최대 5개까지 알림창을 동시에 띄우며 6개부터는 큐에 보관하여
다른 알림창에 숨겨졌을 때 하나씩 표시된다


참고: 트위터 최신 글 알림창
HTML5 Notifications 를 소개하는 외국 블로그를 보면 대부분 관련 데모로 트위터 최신글에 대한 알림창을 구현하고 있다.

트위터는 오픈API를 제공해 외부 개발자가 트위터 대부분의 기능을 사용할 수 있도록 하고 있다
데모에서는 트윝의 오픈 API를 이용해 Notifications 와 연동하는 구조이다

데모 URL: http://html5.firejune.com/demo/notification.html

소스의 핵심 부분을 잠깐 살펴 보자
function readTweets() {
  var username = document.getElementById('username').value;
  if (username == 'username') {
    alert('Enter a username first');
    return;
  }
  var script = document.createElement("script");
  script.src = 'http://twitter.com/statuses/user_timeline/'+ username+'.json?
                   count=1&callback=fetchTweets';
  document.body.appendChild(script);

}
function fetchTweets(data) {
  var tweet;
  var i = data.length;
  while (i--) {
    tweet = data[i];
    if (window.webkitNotifications.checkPermission() == 0) {      
      window.webkitNotifications.createNotification(tweet.user.profile_image_url,
                                                                      tweet.user.name, tweet.text).show();
    } else {      
      alert('You have to click on "Set notification permissions for this page" first to be able to
               receive notifications.');
      return;         
    }
  }
}

트위터에 특정 계정에 대한 최신 글을 불러오는 오픈 API를 다음과 같이 호출하고 있다
(사용자 계정 mkex , 글 수 1, 수신 콜백 함수 fetchTweets 지정)
script.src = 'http://twitter.com/statuses/user_timeline/mkex.json?count=1&callback=fetchTweets'; 

이렇게 호출하면 트위터 오픈 API는 JOSN 포맷의 데이터를 반환한다. 대략 다음과 같은 구조이다
[{"in_reply_to_screen_name":null,
 ....
"created_at":"Mon Aug 30 06:26:11 +0000 2010",
 ....
"source":"web","place":null,"contributors":null,
"geo":null,"retweeted":false,"coordinates":null,
"user":{
  "statuses_count":35,"profile_sidebar_border_color":"87bc44",
  "description":"Programmer ","screen_name":"mkex",
  ......  "profile_image_url":"http://a0.twimg.com/profile_images/1037935868/mkex_naver.com_9652dc86_normal.bmp",
  "id":161155360,"listed_count":6,"utc_offset":null,"followers_count":30,
  "url":"http://mkexdev.net"
  },
  "favorited":false,"id":22502412596,
  "text":"HTML5 \ub3d9\uc601\uc0c1 \ud45..... ....4\ub8cc\ub85c \uc804\ud658\u2026\uc65c? http://is.gd/eJgps"
}]


그리고 Notifications를 이용해 트위터 내용을 알림 창에 표시하고 있다
트위터 오픈API가 반환한 JSON 구조에서 프로필이미지와 이름, 글 내용을 알림창에 표시한다
window.webkitNotifications.createNotification(tweet.user.profile_image_url,tweet.user.name, tweet.text).show(); 


참고 자료>
http://dev.w3.org/2006/webapi/WebNotifications/publish/#requirements
http://html5.firejune.com/doc.html#notification
http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification
http://www.html5rocks.com/tutorials/notifications/quick/

H.264 무료 선언?

Posted in 일상 // Posted at 2010. 8. 30. 15:33
728x90
[ZD NET Korea] H.264 코덱, 완전 무료로 전환…왜?

HTML5 동영상 표준의 걸림돌이었던 코덱 전쟁이 예상보다 빨리 종결될 분위기인가?

애플과 더불어 구글의 영향력을 다시 한번 느끼게 하는 대목이다
WebM 을 의식한 MPGE LA가 동영상 코덱 H.264 를 무료로 제공한다는 기사이다

그동안, 표준 기술에 왠 특허료? 라는 생각으로 H.264 코덱을 반대했던 진영이 있었던만큼
이번 H.264 코덱의 무료화는 시사하는 바가 크다

개발자 입장에서는 하루라도 빨리 표준정립이 되길 기대해 본다

모바일 웹 마켓(오픈앱마켓,OPENAPPMKT)

Posted in 모바일 // Posted at 2010. 8. 30. 14:56
728x90

이제 모바일 환경에서도,
네이티브(Native) 어플 뿐만 아니라 웹(Web) 어플을 위한 마켓이 형성되었다

지난 달(7월) 오픈 한 오픈앱마켓(http://www.openappmkt.com/)이다
애플의 앱스토어가 네이티브 앱을 위한 장터라면 오픈앱마켓은 웹 앱을 위한 장터이다
그것도 전세계 고객을 대상으로 말이다

오픈앱마켓은 기존 웹구현의 한계를 뛰어 넘을 수 있는 HTML5 기반 모바일 웹 서비스를 모아 소개한다

대부분의 앱마켓과 유사한 기능을 제공한다
웹 앱들을 카테고리화 시키고 인기도와 유/무료를 구분하며 앱 실행화면과 설명, 리뷰 등을 제공한다
일반 앱스토어처럼 개발자 등록과정이 있으며 수익분배 모델고 가지고 있다
애플 앱스토어가 7:3 인 것에 비해 오픈앱마켓은 8:2 분배를 원칙으로 한다
비자,마스터 카드등 해외결제가 가능한 신용카드가 있어야 유료앱 결제가 가능하다

앱 설치도 네이티브 환경과 최대한 유사하게 보이려 노력했다
다만 웹 앱은 네이티브처럼 아이폰 OS에 설치되는 것이 아니라 웹 사이트 바로가기 형태로
바탕화면에 아이콘이 설치된다. 물론 고객은 네이티브 앱 설치와 유사한 느낌을 받는다

자세한 내용은 BLOTER.net 에 소개된 다음의 글을 참고하자
http://www.bloter.net/archives/36636

모바일 트랜드는 소프트웨어의 유통구조를 확연히 변화시키고 있는 듯 하다
참.. 세상은 흥미롭게 변하고 있다.
이런 세상에 개발자로써의 업적(?)을 하나 정도는 남겨야 하지 않을까?

'모바일' 카테고리의 다른 글

Code Syntax Highlighter 툴 소개  (0) 2010.09.30
MobiOne, 아이폰 에뮬레이터  (5) 2010.08.31
오픈페인트(OpenFeint)  (0) 2010.07.30
아이폰 에뮬레이터?  (0) 2010.07.21
트위터, new tweet 갱신 알림 프로세스 조사  (0) 2010.07.21

[HTML5] 웹 양식(Web Form)의 개선, 폼 태그

Posted in 모바일/HTML5 // Posted at 2010. 8. 26. 17:31
728x90

웹 양식(Web Form)의 개선
웹 양식을 지원하는 태그를 폼 태그(Form Tag)라 한다
보통 회원가입이나 게시판 글쓰기 같은 UI를 만들 때 사용되는 태그로
input 박스, select 박스, button, checkbox , radio 버턴 등이 있다

이러한 폼 태그는 HTML 문서에서 사용자 입력을 위해 제공되는 양식 태그이다
물론 폼 태그는 HTML5 이전에도 제공되어 왔다. 다만, HTML5 에서는 기존 폼 태그와 더불어 대폭 개선된 형태를 새로 추가하였다

기존 폼 태그는 텍스트, 버턴, 선택박스, 체크박스 등 단순한 형태의 입력 양식만을 제공했지만 HTML5에서는 달력양식, Range 양식, email 등 새롭고 실용적인 양식이 추가 되었으며 입력 보조 수단이나 입력 값 검증 등 기존에는 스크립트에 의존할 수 밖에 없었던 기능적 요소도 폼 태그에 추가 되었다
이러한 향상된 웹 폼을 Web Forms 2.0 이라 한다


이러한 다양하고 실용적인 양식 태그들이 추가됨으로써 좀더 쉽고 빠르게 개발을 할 수 있게 된 것이다

브라우저 지원 현황

아직까지 대부분의 브라우저에서는 모든 폼 태그를 지원하지는 않는 것 같다
각 브라우저가 폼 태그의 부분적인 것을 지원하며 그 부분적인 것은 브라우저마다 조금씩 상이하다
예를 들어 range input 요소의 경우 크롬에서는 지원되지만 파이어폭스에서는 지원되지 않는다

일단 caniuse.com 에서 제공하는 지원표를 보도록 하자



그림1. 브라우저별 새 폼 태그 지원 현황 (출처: http://caniuse.com/)

위의 표에서도 알 수 있듯이 대부분의 브라우저가 부분적으로 새 폼 태그를 지원하고 있다
다만 오페라는 모두 지원한다고 나와 있는데 확인해 볼 일이다

현재 시점에 브라우저 지원현황은 부분적이며 일관적이지도 않아 만족스럽지 못하기는 하다
(브라우저 호환성을 확보하기 힘드니 실 서비스 적용이 꺼려지는 것이다)
그러나 머지 않은 시기에  모든 요소가 지원되지 않을까 하고 기대 해 본다

Google's WebForms2 라이브러리
http://code.google.com/p/webforms2/

HTML5 의 Canvas를 지원하지 않는 IE8 이전 버전을 위해
ExplorerCanvas(http://code.google.com/p/explorercanvas/) 라이브러리가 제공되듯이
HTML5 확장 폼을 지원하지 않는 브라우저의 경우 WebForm2 라이브러리를 사용할만 하다

라이브러리를 다운받고 아래와 같이 라이브러리를 참조한다
<script type='text/javascript' src='webforms2.js'></script>

WebForms2 라이브러리는 HTML 폼 확장에 대해 각 브라우저마다 다르게 동작하는 문제점을 극복하기 위해 제공되며 Cross Broswer HTML5 Form 구현을 가능하도록 해 준다.
이와 관련한 다음의 글을 참고해 보기 바란다
http://nz.pe.kr/wordpress/programming/html5/번역-지금-바로-cross-browser-html5-form-만드는-방법


웹 양식 다루기
그럼 이제 HTML5 에서 추가되거나 개선된 웹 양식을 하나 씩 살펴보자
참고로 브라우저마다 웹 양식의 지원 범위가 다르기 때문에 각 요소를 설명할 때 지원되는 브라우저를 각각 달리하여 테스트 할 것이다(예제 실행 화면 옆에 브라우저를 명시한다)

새로운 입력 양식(새로 추가된 i
nput 타입)
input 태그에 다양한 타입이 새로 추가되었다.
기존에 제공되었던 text, button,checkbox 등은 여전히 유효하며 다음과 같은 양식이 추가되었다

1) range
일정한 범위의 숫자를 입력 받기 위한 양식이다
min, max 속성에 범위의 최소, 최대값을 지정하고 step 으로 범위 이동 크기를 지정한다
아래 예는 0 ~ 10 까지의 범위를 가지는 2칸식 이동 가능한 Range 컨트롤이다(기본값은 2)

<input type="range" min=0 max=10 step=2 value=2>

(크롬)

2) number
숫자를 입력 받기 위한 양식이다
range 양식과 마찬가지로 min, max, step 속성을 가진다

<input type="number" min=1 max=10 step=1 value=5>

(오페라)

3) date
날짜를 입력 받기 위한 양식이다. 날짜 선택을 위한 달력이 표시된다
역시 min, max, step 속성이 제공된다

<input type="date" min="2001-01-01" max="2010-08-31" step=1 value="2010-08-26">

(오페라)

날짜와 시간관련 양식은 data 외에데 몇 가지가 더 있다. 다음을 참고하자

<input type="datetime"><input type="datetime-local"><input type="month">
<input type="week"><input type="time">




4) 기타 새로운 타입들
검색을 위한 search 타입, 전화번호 입력을 위한 tel 타입, 리소스 주소 입력을 위한 url 타입, 이메일 입력을 위한 email 타입, 색상 입력을 위한 color 타입 등이 새로 추가되었다
현재 데스크탑 브라우저들에서는 이들 타입이 지원되지 않거나 평범한 text 타입처럼 보이기 때문에
설명으로만 대체하겠다

다만 특이한 점은 이러한 타입이 아이폰과 같은 모바일 기기에서는 해당 타입에 맞춰 UI가 다르게 보이기도 한다. 아래 글을 참고 바란다

iPhone의 모바일 Safari 브라우저에서는 이러한 새 유형을 일부 사용하여 사용자에게 표시되는 키보드 유형을 변경한다. 예를 들면, 이메일 유형과 함께 @ 기호와 .com 단축 아이콘이 표시된다. 또한, Opera에서는 숫자 유형을 선택할 수 있는 스피너와 날짜 관련 유형을 선택할 수 있는 날짜 선택도구와 같은 다양한 제어를 구현하는 데 필요한 새로운 위젯을 일부 제공한다
- IBM Developer Works HTML5 컬럼 중... -

참고: 새로운 입력(input) 양식에 대한 다음 글을 참고하기 바란다
http://www.w3schools.com/html5/html5_form_input_types.asp

개선된 폼 양식
새로운 양식의 추가는 물론이고 기존 양식의 기능적 요소들도 상당 부분 개선되었다
 
1) 입력 보조 수단
새로운 양식의 추가 이외에도 자동 포커싱이나 PlaceHolder 와 같은 입력 보조 수단도 제공된다
자동 포커싱은 페이지가 로딩될 때 특정 양식으로 포커스를 주는 것이며 PlaceHolder은 텍스트기반 입력양식이 비어있을 경우 표시하는 텍스트를 지정할 수 있도록 한다
중요한 것은 이전 환경에서 이들 기능을 구현하려면 자바스크립트에 의존했어야 했지만 HTML5는 양식태그의 속성만으로 해결해 준다

<input type='search' autofocus>
<input type='email' placeholder="이메일 주소 입력">
<input type='tel' placeholder="전화번호 입력">

 

(크롬)


2) 파일 선택 양식의 개선
웹 페이지에서 서버로 파일을 업로드 하기 위해서 사용되던 것이 파일 input 박스이다
이는 이전에도 제공되는 것이지만 HTML5 에서는 기능적으로 보다 개선되었다

- 다중 파일 업로드(multiple 속성)
HTML5 이전 환경에서는 하나의 파일 박스에는 하나의 파일만 선택 가능했었다
다중 파일을 업로드 하기 위해서는 여러개의 파일박스를 두거나 서드파티업체의 제품을 이용했어야 했다. 그러나 HTML5 에서는 하나의 파일박스에 여러개의 파일을 지정할 수 있도록 개선되었다

<input type='file' multiple>

- 파일 필터링(accept 속성)
파일 선택 창에서 파일 형식을 제한할 수 있다
기본적으로 모든 파일 형식이지만 MIME 타입을 지정하여 특정 형식으로의 제한이 가능하다

<input type='file' accept="image/gif">

- 파일 정보 액세스(files 속성)
선택된 파일(들)의 정보를 조회하려면 파일박스 DOM 객체의 files 속성을 이용하면 된다
files 속성은 선택된 파일(들)의 정보를 배열형태로 담아 두고 있다. 각 배열의 요서가 특정 한 파일의 정보가 되며 name 및 size 속성등으로 파일 정보를 액세스 할 수 있다

<script type="text/javascript">
  var selectedFiles = document.getElementById("file").files;
  selectedFiles[0].name; //파일이름
  selectedFiles[1].size; //파일사이즈 
</script>


3) submit(폼 전송) 버턴의 개선

input 타입 중 submit , image 는 폼 전송을 수행하는 버턴이다
폼을 전송하기 위해 전송할 곳(action), 전송방식(get or post),enctype 등을 명시해야 하는데
이전 환경에서는 <form> 태그에 이들 속성을 지정하였다
HTML5 에서는 폼 전송 버턴인 submit, image 버턴에도 이들 속성을 지정할 수 있게 되었다

<form>
    <input type="submit" formmethod="POST" formaction="/formOk.html">
</form>

만일 <form> 과 submit 버턴 둘 다 action 이 지정되면 submit 에 지정된 action 값이 우선 적용 된다
(현재 오페라 브라우저에서만 정상 동작함)

 
추가된 폼 양식
input 타입에 새로운 양식이 추가된 것과 더불어 새로운 폼 요소들도 몇 가지 추가되었다

1) Progress 요소
진행 상태를 알려 주는 프로그레스 바를 나타낸다
max, value 를 이용하여 진행량의 최대값과 초기값을 지정할 수 있으며 position 속성을 참조하여 진행률을 계산할 수 있다. 현재 시점에 progress 요소를 지원하는 브라우저는 없다

<progress max="1" value="0"></progress>


2) Output 요소
새로 추가된 폼 출력요소이다. Input 요소가 폼 입력을 담당한다면 Output 요소는 폼 출력을 담당한다
보기에는 단순한 텍스트처럼 보이지만 실제로 폼 전송시 Output 요소의 값도 같이 전송된다. 이런 의미에서 눈에 보이는 히든 요소라는 표현도 있다. 읽기전용 폼 전송 요소를 정의한다고 보면 된다

<output name="sum">100</output>


3) DataList 요소
input (입력) 양식에 대한 옵션 리스트를 제공한다
즉 입력 양식에 들어갈 내용을 미리 제공하여 input 박스에 포커스가 오면 이 리스트를 보여준다
input 박스의 list 속성에 datalist id를 지정하여 둘을 매핑 시킨다

<input type="url" list="url_list" />
  <datalist id="url_list">
  <option label="모바일플랫폼" value="http://m.mkexdev.net" />
  <option label="MKEX의닷넷" value="http://www.mkexdev.net" />
  <option label="Microsoft" value="http://www.microsoft.com" />
  </datalist>

(오페라)

4) Keygen 요소
암호 키를 생성해 주는 폼 요소이다.
공개키기반의 키 쌍을 생성하며 폼 전송 시 공개키가 서버로 전송된다
다음은 RSA 키를 생성하는 코드이며 브라우에 이 요소가 표시될 때 키의 길이를 선택하도록 표시된다

<keygen name="key" keytype="rsa"></keygen>

(크롬)


5) Meter 요소
디스크 사용량과 같은 용량과 임계치가 존재하는 상황에서 현재 사용량을 보여주는 UI를 표시한다
min, max 로 최소값과 최대값(임계치)를 설정하며 현재 사용량의 정도(낮음, 높음, 적정)을 나타내는 low, high, optimum 속성이 제공된다. 현재 시점에 progress 요소를 지원하는 브라우저는 없다

<meter min="0" max="10"></meter>


폼 유효성 검사(입력값 검증)
HTML5 의 폼은 자체적으로 입력 값 검증을 수행하도록 되어 있다
예를 들어 <input type=email>에 입력된 값이 이메일 패턴과 다를 경우 폼은 전송되지 않고 에러 메시지를 표시해 준다. 그리고 입력 양식에 required 속성을 부여하면 빈 값이 허용되지 않는다
또한 입력 양식에 pattern 속성으로 정규표현식으로 입력 패턴을 지정할 수 있다
지정한 패턴과 다른 형태의 값은 입력이 허용되지 않는다

ex) 우편번호 패턴
<input type="text" name="postCode" pattern="/^\d{3}-?\d{3}$/" title="123-123">

이전 환경에서는 이 모든 것을 스크립트 영역에서 별도로 처래해 줘야 했다

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" required /><br />
  Last name: <input type="text" name="lname"  /><br />
  E-mail: <input type="email" name="email" /><br />
  <input type="submit" />
</form>


(오페라)
 
이렇듯 폼이 자동으로 입력 값 유효성을 검사하는 것은 폼에 validate 가 기본적으로 활성화되었기 때문이다. 만일 폼의 자동 유효성 검사를 꺼두고 싶다면 폼에 novalidate 를 부여하면 된다

<form novalidate action="demo_form.asp" method="get">
   .....


개선된 폼 이벤트(Event)
HTML5 에서는 폼과 관련한 몇 가지 이벤트도 추가되었다
대표적으로 forminput 이벤트와 formchange 이벤트를 들 수 있다

이 이벤트들은 폼의 하위 요소가 아닌, 폼 자체에 걸 수 있는 이벤트로써 폼에 포함되어 있는 각종 요소들을 특정 이벤트로 연계시키기 좋은 구조를 제공한다

간단한 예를 보자
폼에 3개의 요소가 있고 특정 한 요소의 입력 변화를 감지해 다른 두 요소를 제어하는 샘플이다
<form onforminput="ta2.value = ta1.value;textLength.value=ta1.value.length;">
  <textarea id="ta1"></textarea> <br>
  글자 복사 ↓<br> 
</form

<textarea id="ta2"></textarea>
글자 수:<output id="textLength"></output>

폼에 forminput 이벤트를 구현하여 글이 입력될 때 마다 아래로 복사하고 글자 수를 표시하는 코드이다
참고로 코드에서는 폼에 하나의 요소(textarea)만 존재하지만, forminput 이벤트는 폼에 포함된 모든 요소의 변화를 감지한다. 아래는 실행화면이다
(오페라)

이렇듯 forminput, formchange 이벤트를 이용하면 폼의 각 요소를 쉽게 연계할 수 있다

'모바일 > HTML5' 카테고리의 다른 글

[HTML5] Server-Sent Events  (4) 2010.08.31
[HTML5] Notifications (알림)  (2) 2010.08.30
HTML5 관련 유용한 레퍼(참조) 사이트  (0) 2010.08.26
[HTML5] Video & Audio  (6) 2010.08.24
[HTML5] Canvas  (3) 2010.08.19

HTML5 관련 유용한 레퍼(참조) 사이트

Posted in 모바일/HTML5 // Posted at 2010. 8. 26. 11:28
728x90

HTML5 가 웹 개발의 새로운 지평을 열어 놓은 것만은 분명한 것 같다

이러한 흐름을 반영이라도 하듯이,
양질의 HTML5 레퍼 사이트가 속속 등장하고 굉장히 좋은 정보를 제공하고 있다.
아래 소개되는 사이트들을 참고하면 HTML5 를 보다 빨리 그리고 정확하게 습득할 수 있다

HTML5 학습 참조 사이트

W3C HTML5
소개: HTML5 표준화 작업을 진행하는 주체인 W3C에서 제공하는 HTML5 스펙 소개
URL: http://www.w3.org/TR/html5/

WHATWG(Web Hypertext Application Technology Working Group) HTML5
소개: HTML5 스펙을 실질적으로 주도하고 있는 워킹그룹에서 제공하는 HMLT5 사양서
URL: http://www.whatwg.org/specs/web-apps/current-work/multipage/

HTML5 ROCKS (구글)
소개: 구글에서 제공하는 HTML5 관련 학습 및 데모 제공 사이트
URL: http://www.html5rocks.com/
       http://playground.html5rocks.com/ (실제 데모 실습을 해 볼 수 있음, so cool~) 


HTML5 Showcase (애플)
소개: 애플에서 제공하는 HTML5 관련 학습 및 데모 제공 사이트
URL: http://www.apple.com/html5/
        http://developer.apple.com/safaridemos/

Mozilla 개발자 센터(MDC) HTML5
소개: 모질라에서 제공하는 HTML5 학습 사이트
URL: https://developer.mozilla.org/en/HTML/HTML5
        https://developer.mozilla.org/ko/HTML/HTML5 (한국어버전)

Opera 개발자 센터(Dev.Opera) HTML5
소개: 오페라에서 제공하는 HTML5 학습 사이트
URL: http://dev.opera.com/articles/tags/open%20web/

w3schools
소개: HTML, CSS, HTML5, JavaScript 와 같은 클라이언트 기술은 물론 asp,php 와 같은
        서버스크립트, 웹서비스, SVG, Flash 등 거의 모든 웹 관련 레퍼런스를 제공하는 사이트
URL: http://www.w3schools.com/

Dive Into HTML5
소개: Oreilly 출판사의 HTML5 Up and Running 라는 책의 근간이 되는 사이트
URL: http://diveintohtml5.org/

<html>5 doctor
소개: 몇몇 개발자들이 모여서 만든 HTML5 학습 사이트
URL: http://html5doctor.com/

html5demoes
소개: FF(Full Frontal) 컨퍼런스 모임에서 제공하는 HTML5 데모 사이트
URL: http://html5demos.com/

Caniuse
소개: HTML5, CSS, SVG 등의 브라우저 호환성 테이블 제공 및 데모사이트로의 연결 제공
URL: http://caniuse.com/

       
 IBM Developer Works 에 실린 HTML5 컬럼
- HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기
http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/index.html

- HTML5를 사용하여 모바일 장치 웹 애플리케이션 작성하기
https://www.ibm.com/developerworks/kr/library/wa-offlineweb/

- HTML 5로 모바일 웹 애플리케이션 작성하기
https://www.ibm.com/developerworks/kr/library/x-html5mobile1/

- HTML5를 사용하여 웹 애플리케이션 빌드하기
http://www.ibm.com/developerworks/kr/library/wa-html5webapp/


HTML5 로 제작된 사이트 소개


HTML Games

소개: HTML5 로 개발된 온라인 게임을 모아놓은 사이트, 일면 HTML5 게임 포탈
URL: http://html5games.com/

<html>5 gallery

소개: HTML5 로 개발된 사이트를 소개하는 사이트
URL: http://html5gallery.com/

mr.doob
소개: HTML5 , Javascript Deom
URL: http://mrdoob.com/

js do.it
소개: HTML5, Javascript, CSS 공유 사이트(일본)
URL: http://jsdo.it/


Darkroom
소개: HTML5 로 제작된 그래픽 툴
URL: http://mugtug.com/darkroom/

littlecoogie
소개: HTML5 로 제작된 쇼핑몰
URL: http://www.littlecoogie.com/

9elements.com
소개: HTML5 Canvas로 제작, HTML5 관련 데모 링크 제공
URL: http://9elements.com/io/projects/html5/canvas/

'모바일 > HTML5' 카테고리의 다른 글

[HTML5] Notifications (알림)  (2) 2010.08.30
[HTML5] 웹 양식(Web Form)의 개선, 폼 태그  (4) 2010.08.26
[HTML5] Video & Audio  (6) 2010.08.24
[HTML5] Canvas  (3) 2010.08.19
[HTML5] Web SQL Database  (0) 2010.08.17

향상된 브라우저 환경

Posted in 일상 // Posted at 2010. 8. 26. 10:51
728x90

마이크로소프트에서 자사의 차기 브라우저인
IE9 Preview 버전의 자바스크립트 실행 성능 결과를 제시했다


출처: http://ie.microsoft.com/testdrive/benchmarks/SunSpider/Default.html

크롬이 빠른 것은 개발자들이라면 다들 경험해 보았을테구, 오페라, 파이어폭스, 사파리 역시
대동소이해 보인다. 지금 보니 IE8 은 참 느린 브라우저였구나 싶다


RIA 환경에서 자바스크립트의 중요성은 점점 증가하고 있다
브라우저의 성능 개선은 시간에 따라 제품이 업그레이드 되는 당연한 수순이지만,
특히 스크립트의 활용이 점점 증가해가는 추세에 더욱 의미가 있어 보인다