728x90
기사원문: 어도비, HTML5 콘텐츠 플랫폼 공개...'양다리 걸치기'?

아... 듣던 중 반가운 소리다. 드디어 HTML5 도 디자인 개발툴이 나온다뉘...
개인적으로 매우 목말라 있던 사건이다

누군가 빵!~ 하고 터뜨리기를 기대하고 있었는데,
예상보다 빨리 그것도 HTML5 와 기술 경쟁 위치에 있는 어도비가 터뜨릴 줄이야...


플래시 CS5 를 통한 iOS 변환 기능에 이은 HTML5 그래픽 도구까지!!!
이 모든것이 어도비 자사의 이익을 위한 결정이겠지만, 훌륭하다!

양다리든 뭐든 상관없다. 훌륭한 결정이다.

MS의 실버라이트, 어도비의 플래시와 같은 RIA 개발 업체의 (어쩔수 없는?) HTML5 사랑?이 엿보인다 ㅎ

나. 어도비를 사랑?하게 될 것만 같은 ㅎㅎㅎ.. 플래시 개발자도 아닌데 말이쥐...

HTML5 컨텐츠를 쉽고 빠르게 개발할 수 있는 디자인 툴은 반드시 필요하며 이 툴의 보급은
HTML5의 성장에 큰 도움이 될 것으로 본다

이제 HTML5 날코딩은 안뇽!~~~
728x90
jQTouch 에서는 페이지를 전환시킬 때 다양한 시각적 효과를 지원한다. 그것도 매우 간단히!
링크 태그인 a 태그에 class 속성의 설정으로 뷰 전환 효과를 지정할 수 있는데 슬라이드 효과에서 부터 페이드효과 그리고 큐브 형태의 에니메이션 효과까지 다양하게 지원된다

마치 파워포인트의 각 슬라이드가 넘어갈 때 줄 수 있는 효과와 유사하다
매우 간단한 사용법이라 블로깅 하기가 민망한 수준이다. 단지 class 속성 정의 뿐이니...

뷰 전환의 기본값은 'slide' 이다.
slide는 왼쪽으로 미끄러지듯 페이지가 전환되는 효과이다.

그리고 누구나 흥미를 가질만한 효과는 flip, swap, cube 정도라 생각된다
이 세 효과는 시각적으로 매우 동적인 전환 효과를 보여준다

아래 화면은 차례대로 flip, swap, cube 효과로 뷰를 전환시키는 모습이다
flip 는 화면을 뒤집는듯한 효과, swap 은 두 화면이 시각적으로 교체되는 효과, cube는 입방체모양희 전환효과를 보여주고 있다. 이런 화려한 효과가 단지 몇자만으로 가능하다니, 다시한번 jQTouch에게 고마울 따름이다

 
 



기타 다른 전환 효과도 앞선 예 보다는 정적이지만 보편적인 전환 효과로써 가치가 있을 것이다
slide : 기본값. 오른쪽에서 왼쪽으로 미끄러지 듯 전환
slideup: slide와 유사. 단 방향은 아래에서 윗쪽으로 미끄러지 듯 전환
dissolve: 점차 밝아지는 효과
fade: 점차 뚜렷해지는 효과. dissolve와 시각적으로 유사
pop: 팝업처럼 쏟아 오르는 효과

간단하기 때문에 일부 코드 조각만 제시한다
<ul class="rounded">
    <li><a href="#animdemo">slid(default)</a></li>
    <li><a href="#animdemo" class="slideup">slideup</a></li>
    <li><a href="#animdemo" class="dissolve">dissolve</a></li>
    <li><a href="#animdemo" class="fade">fade</a></li>
    <li><a href="#animdemo" class="flip">flip</a></li>
    <li><a href="#animdemo" class="pop">pop</a></li>
    <li><a href="#animdemo" class="swap">swap</a></li>
    <li><a href="#animdemo" class="cube">cube</a></li>   
  </ul>

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

[jQTouch] GET, POST 전송  (0) 2010.10.27
[jQTouch] 페이지 전환 이벤트  (0) 2010.10.27
[jQTouch] 페이지 전환  (0) 2010.10.26
[jQTouch] 목록 스타일  (1) 2010.10.25
[jQTouch] jQTouch - 기본 환경 설정  (0) 2010.10.25

[jQTouch] 페이지 전환

Posted in 모바일/Javascript // Posted at 2010. 10. 26. 12:38
728x90
프로그래밍 학습 방식은 상향식하향식이 있다
상향식은 원리와 하부구조와 같은 원리를 먼저 이해하고 응용기술을 학습하는 방식이며
하향식은 응용기술을 구현하면서 원리와 하부구조를 이해해 가는 방식을 말한다

이를테면 OS원리와 메모리구조, 알고리즘과 같은 하부구조나 원리를 먼저 학습하고 C언어, 닷넷을 공부하는 방식을 상향식이라 할 수 있는데 대체로 정석 공부법으로 통하며 프로그램을 제대로 시작하고 싶은 시간많고 의지충만한 이들에게 권하는 방법이다. 반면 언어의 문법을 빠르게 학습하고 웹 사이트나 응용프로그램을 개발하면서 부딪히는 이슈를 해결하면서 부족분을 채워나가는 방식을 하향식이라 할 수 있는데 대체로 많은, 비 전공이면서 빠르게 개발을 하고 싶은 이들에게 권장하는 방식이다

물론 이 분류는 순수히 개인적인 구분이다. 그러나 대체로 개발자라면 무슨 말인지 이해가 될 것이다.
수 많은 개발자들이 하향식으로 접근하고 있으며 안타깝게도 하향식에서 머물러 있기도 한다

대체로 상향식이 정도로 통하며 막 시작하는 입문자에게 권장하기도 한다
심지어 경력이 꽤 쌓인 개발자들도 자조 섞인 목소리로 하향식에 머문 자신과 다른 개발자들을 비판하곤 한다
물론 그런 비판 속에 필자 역시 100% 떳떳할 수 없다고 고백한다

이 글에서 이런 말을 언급하는 이유는, 개발자의 학습 형태나 자질은 논하고자 하는 것은 아니다
원론적인 측면에서 비판받고 있는 하향식 학습이, 경우에 따라선 의미 있기도 하다는 것을 말하려 한다

지금 빠르게 학습 중인 jQTouch 가 그에 해당한다. 일주일에 어느정도 끝을 보려 하는 이 공부는 사용법에 초점을 맞추고 있다. 내부적으로 jQTouch 가 어떤 코드로 돌아가는지 (매우 궁금하지만) 당장 필요하지는 않다.
특히 jQTouch와 같은 원천기술을 몇 단계 랩핑한 라이브러리는 그 원리의 이해가 꼭 필요하지도 않다.
따지자면 브라우저, 자바스크립트, jQuery, jQTouch 로 이어진 원리와 그 사용법의 학습으로 이어질 수 있는데 jQTouch 를 이용하는 목적에 비해 너무 많은 노력을 할애해야 한다는 것이다. 

그리고 또, 흔히 비판받는 코딩 기법인 'Code and Fix' 형태의 학습방식도 취하고 있다
Code and Fix는 일단 코드부터 짜 보고 고친다는 뜻인데, 제대로 설계하지 않고 무작정 코드부터 짜고 적당히 버그를 고치면서 일하는 방식을 말한다. 대단히 비판받는 업무 방식으로 제대로된 설계와 잘 짜여진 코드의 중요성을 강조할 때 언급된다. 그러나 이 방식 역시 간단한 테스트나 프로토타입 수준의 학습에는 일면 효율적이기도 하다

뭐, 잡설이 길었지만 핵심은 한가지 이다
현재 개인적으로 빠르게 진행중인 jQTouch 학습은 다분히 하향식 그리고 Code and Fix 형태로 진행하고 있지만 주제와 학습 목적에 비추어 보면 나름 적절하다는 것이다
(물론 그 어떤 좋은 포장이라도, 개발이 매우 생소한 입문자라면 정도를 따르는 것이 좋다)


이제 주제로 들어가자. jQTouch 를 통한 페이지 전환이다
대부분 웹 개발자들은 '페이지 이동' 개념이 명확하다. A페이지 -> B페이지로의 이동은 링크로 통한다
웹의 하이퍼텍스트, 하이퍼링크 구조에 기반한 명백한 개념이지만 이 개념이 다른 환경에서는 걸림돌이 되기도 한다. 간혹 웹 개발자가 윈도우응용개발을 할 때 혼란을 느끼는 부분이기도 하다.

jQTouch는 다분히 웹앱에 초점이 맞춰진 개발 플랫폼이며 페이지라는 개념보다 뷰(View) 라는 개념이 더 어울린다. 즉 순수 웹 환경에서의 화면은 페이지인 경우가 많으며 화면의 전환은 곧 페이지의 이동을 의미하는 반면 웹앱에서의 화면은 뷰라 할 수 있으며 화면 전환은 뷰의 교체를 의미한다고 할 수 있다. 다시말해 뷰의 활성화(Show) 그리고 비활성화(Hide)의 개념이라 할 수 있겠다. 물론 jQTouch 에서도 링크를 통한 페이지 이동이 지원된다. 다만 기본적으로는 뷰의 전환이라는 개념이 사용된다.

내부 div 의 전환
jQTouch 가 지원하는 페이지 이동의 개념은 기본적으로 div 요소의 전환을 의미한다. 즉 다음과 같이 A라는 div 에서 B라는 div 로의 링크가 곧 화면의 전환이다. 이런 형태가 jQTouch 에서 매우 보편적인 화면 전환방법이다.
즉 jQTouch 기반 웹앱은 이런 형태의 화면 전환 처리를 권장한다.
<div id="A">
  <a href="#B">Div Switch</a> <!-- A 화면에서 B화면으로의 이동 -->
</div>
...
<div id="B"> ... </div>


외부 링크
내부 div 전환이외에도 일반적인 페이지 링크가 지원된다. 외부 링크를 사용할 땐 target 을 명시하여 이동대상을 지정할 수 있다. 다음 코드는 새창으로 새 페이지를 연다는 의미이다
<a href="SecondPage.html" target="_blank">Page Transfer(_blank)</a>

만일 새창을 열고 싶지 않다면 target="_webapp" 을 설정하면 된다. 또 다른 방법으로는 rel 속성을 지정할 수 있다. 다음코드와 같이 링크태그에 rel 속성을 지정하면 페이지 이동이 가능하다
<a href="SecondPage.html" rel="external">


Back 버턴
jQTouch 에서는 div 로 화면을 전환했을 때 '뒤로가기' 기능을 자동으로 지원한다. 다음과 같이 a 태그 class 속성에 "back" 을 지정하면 이동 전 div로 다시 돌아간다
<a class="back" href="#">Back</a>

이때 사용되는 이미지는 jQTouch 객체 생성때 지정한 다음의 이미지가 이용된다
preloadImages: [
                    '../../themes/jqt/img/back_button.png',
                    '../../themes/jqt/img/back_button_clicked.png',
                      ......................................
                    ]


마지막으로 여기서 설명한 내용을 포함하는 데모이다. 차례대로 첫페이지와 div 전환, 페이지 이동을 캡쳐한 것이다
 
 



<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon: 'jqtouch.png',
        addGlossToIcon: false,
        startupScreen: 'jqt_startup.png',
        statusBar: 'black',
        preloadImages: [
                    '../../themes/jqt/img/back_button.png',
                    '../../themes/jqt/img/back_button_clicked.png',
                    '../../themes/jqt/img/button_clicked.png',
                    '../../themes/jqt/img/grayButton.png',
                    '../../themes/jqt/img/whiteButton.png',
                    '../../themes/jqt/img/loading.gif'
                    ]
    });       
</script>
</head>
<body>
<div id="home">
  <div class="toolbar">
   <h1>First Page</h1>
  </div>       
  <ul class="rounded">
    <li class="arrow"><a href="#secondDiv">Div Switch</a></li>
    <li class="forward"><a href="SecondPage.html" target="_blank">Page Transfer(target="_blank")</a></li>
    <li class="forward"><a href="SecondPage.html" target="_webapp">Page Transfer(target="_webapp")</a></li>
    <li class="forward"><a href="SecondPage.html" rel="external">Page Transfer(rel="external")</a></li>
  </ul>  
</div>  
<div id="secondDiv">
  <div class="toolbar">
    <h1>Second Page</h1>
    <a class="back" href="#">Back</a>
  </div>
  <ul class="rounded">
    <li class="arrow"><a href="#home">Back</a></li>
  </ul>  
</div>    
</body>
</html>

[jQTouch] 목록 스타일

Posted in 모바일/Javascript // Posted at 2010. 10. 25. 16:59
728x90

아이폰과 같은 스마트폰의 가장 기본적인 UI 구성은, 박스가 세로로 나열된 목록형태를 많이 띄고 있다
게임과 같은 엔터테인먼트 어플은 컨텐트의 특성상 독창적인 UI구성을 가지지만 설정화면과 같은 정적인 화면 구성은 대부분 아래와 같이 목록 형식으로 구성된다



따라서 목록형식은 가장 흔하게 사용되는 UI 구성이라 할 수 있으며 jQTouch 에서도 이를 지원하고 있다
기존 HTML 태그 중  '순서없는 목록'에 해당하는 ul 그리고 li 목록을 이용하여 아이폰 스타일의 UI를 손쉽게 구현할 수 있다. 

기본 목록
아무런 치장없이 ul 태그와 li 태그만 간단히 정의해도 jQTouch에 의해 자동으로 아이폰 스타일의 변환된다
다음의 코드를 생각해 보자. HTML 태그로 순서 없는 목록을 정의하는 것이다
<ul><li>AAA</li><li>BBB</li><li>CCC</li></ul> 

이 코드는 jQTouch 에 의해 아이폰 스타일로 자동 변환된다.

아래 화면은 일반 웹 화면과 jQTouch 결과 화면을 비교한 것이다
 


단지 목록만 정의했을 뿐인데, 이처럼 아이폰 스러운 화면을 만날 수 있다니, 매우 고마운 일이 아닐 수 없다


추가 목록
기본 목록을 그대로 사용해도 되지만 좀더 아이폰스럽고 미려한 UI를 위해 몇 가지 방법이 제공된다
jQTouch 에서는 ul 태그에 class 속성을 정의하도록 하여 목록의 스타일을 변화시키게 한다.
class 속성에 rounded, form , metal, individual, plastic, edgetoedge 등 5가지 서로 다른 스타일을 적용할 수 있다. 아래 화면은 'ulclass 속성'에 차례로 rounded, form, metal, individual 을 적용한 결과이다

rounded 는 둥근 모서리형태의 목록, form은 각지고 높이가 좀더 작은 목록, metal 은 메탈스러운 목록 마지막으로 individual 가로로 나열된 모습이다.
 
 
 


그리고 edgetoedge 각이 없는 딱딱한 사각형 모양의 스타일이며 하위 li 태그에 sep 속성을 부여해 다음과 같이 일종의 목록 그룹 효과를 줄 수 있다

  
목록 치장하기
목록의 전체 스타일이외에도 각각의 목록에 추가 스타일을 지정할 수 있다. 'li class 속성'으로 이를 지정할 수 있는데 아래 화면은 li의 class 속성에 arrow, forward를 각각 적용한 결과이다. 이 효과는 목록을 터치하면 추가 컨텐트가 존재함을 의미할 때 주로 사용된다


 그리고 li 태그 안에 small 태그의 의 class 속성에 counter 를 부여하면 목록에 숫자를 추가할 수 있다
또한 목록 링크 이후 정의된 텍스트는 아래와 같이 밑글자로 처리된다. 아래 화면을 참조하자



마지막으로 글에서 설명된 목록 스타일을 한 페이지에 모두 적용해 보자
아래 화면은 코드를 실행한 결과화면이며 화면 이후 전체 코드를 제시한다



<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon: 'jqtouch.png',
        addGlossToIcon: false,
        startupScreen: 'jqt_startup.png',
        statusBar: 'black',
        preloadImages: [
                    '../../themes/jqt/img/back_button.png',
                    '../../themes/jqt/img/back_button_clicked.png',
                    '../../themes/jqt/img/button_clicked.png',
                    '../../themes/jqt/img/grayButton.png',
                    '../../themes/jqt/img/whiteButton.png',
                    '../../themes/jqt/img/loading.gif'
                    ]
    });       
</script>
</head>
<body>
<div id="home">
  <div class="toolbar">
   <h1>jQTouch List Demo</h1>
  </div>     
  <ul class="rounded">
    <li class="arrow"><a href="#">AAA</a><small class="counter">5</small></li>
    <li class="forward"><a href="#">BBB</a><em>bbb</em></li>  
  </ul> 
  <ul class="metal">
    <li class="arrow"><a href="#">AAA</a></li>
    <li class="arrow"><a href="#">BBB</a></li>  
  </ul> 
  <ul class="form">
    <li class="arrow"><a href="#">AAA</a></li>
    <li class="forward"><a href="#">BBB</a></li>
  </ul>
  <ul class="plastic">
    <li class="arrow"><a href="#">AAA</a></li>
    <li class="forward"><a href="#">BBB</a></li>
  </ul>

  <ul class="individual">
    <li class="arrow"><a href="#">AAA</a></li>
    <li class="forward"><a href="#">BBB</a></li>
  </ul> 
</div>
</body>
</html>

[jQTouch] jQTouch - 기본 환경 설정

Posted in 모바일/Javascript // Posted at 2010. 10. 25. 15:04
728x90

일전에 jQTouch 를 간단히 언급했었다 => [JQTouch] 모바일 웹 UI 라이브러리

이번주에 jQTouch 를 조금 살펴 볼 예정인데, 그 첫글로 기본적인 사용 환경 설정을 다루고자 한다.
웹 개발 환경은 다른 응용개발 환경보다 훨씬 심플하다는 것이 매력적이다

다른 응용 환경 구성과 같은 구구절절한 개발툴과 Add-In 형태의 프로그램, 까탈스러운 구성파일의 설정 과정이 없어 쉽게 시작할 수 있고 개발모델 역시 심플하여 접근하기 매우 용이하다. 맘에 든다 ㅎㅎ

jQTouch 역시 심플한 웹 개발모델을 제시하며, 결국에는 자바스크립트, CSS, HTML 과 같은 기본적인 웹 개발 요소들이 사용될 뿐이다. 물론 jQTouch 라이브러리를 참조해야 하지만 이것 역시 자바스크립트의 범주이다

1. jQTouch 라이브러리 다운로드
흔히 jQTouch 를 플러그인이라 표현 하지만 라이브러리라 표현해도 무방할 것이다
가장 먼저 시작할 것은 이 라이브러리를 개발 PC에 다운로드 하는 것이다. 아래의 링크에서 최신버전의 jQTouch 라이브러리를 다운받는다. 현재시점(2010.10.25) 기준 1.0 beta 2 버전을 다운받는다
: http://www.jqtouch.com/

다운받은 파일의 구성은 jQTouch 라이브러리 파일, 테마 스타일 파일, 확장팩 파일, 데모파일 등이다
여기서 데모를 확인해 보면 참으로, 아이폰 앱 스타일에 적합하다는 것을 느낄 것이다


2. 테마 선택(적용)하기

jQTocuh 는 jQuery 기반의 UI 라이브러리이다. 따라서 스크립트파일과 더불어 스타일을 정의한 CSS파일도 포함되어 있다. 스타일은 총 두개로 나누어져 있는데 jQTouch 테마Apple 테마가 그것이다
jQTouch 고유 테마는 검정색 바탕에 회색톤과 하얀 글자가 특징이다. 반면 Apple 테마는 아이폰 UI와 유사하게 청색 계열의 느낌과 흰 바탕 그리고 검정색 글자로 구성된다. 아래 두 화면에서 그 차이를 느낄 수 있다



두 테마 중 하나를 선택할 수 있는데 다운로드 받은 파일 중 theme 폴더에 각각 다음처럼 정의되어 있다
Apple 테마    : themes > apple > theme.css
jQTouch 테마: themes >   jqt   > theme.css 

jQTouch 를 적용하는 우리의 웹 페이지에 (경로를 맞춰) 다음과 같이 스타일을 정의하면 된다

<style type="text/css" media="screen">@import "./theme.min.css";</style>

그리고 기본적인 jQTouch 스타일을 정의한 파일은 jQTouch 폴더에 있는 jqtouch.css 파일이다
이 파일 역시 웹 페이지에 스타일로 정의해 둔다


3. jQTouch 라이브러리 참조하기
일종의 핵심 엔진을 참조하는 것으로 jQTouch 스크립트 라이브러리에 대한 참조이다
jQTouch 폴더의 jqtouch.js 파일이 그것이다. 또한 jQTouch 가 jQuery 기반으로 작성되었기 때문에 jQuery 라이브러리의 참조도 필수이다. jQTouch 를 다운받은 폴더에는 친절하게도 jQuery 라이브러리가 포함되어 있다. 현재 jQTouch 버전은 jQuery 1.3.2 버전을 사용하고 있다. 아래와 같이 스크립트를 참조한다

<script src="./jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>


4. jQTouch 객체 생성으로 시작하기
각종 기본 설정을 정의하는 일종의 초기화 과정을 객체 생성 코드로 정의할 수 있다
이 초기화 객체에 사용되는 매개변수를 보면 jQTouch 가 하이브리드 형태의 웹앱에 초점이 맞춰진 라이브러리라는 것을 간접적으로 알 수 있다. 예를 들어, 아이폰 바로가기 아이콘이라던지 로딩 화면등 웹앱의 구성요소 정의가 그것이다. 

<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon: 'jqtouch.png',
        addGlossToIcon: false,
        startupScreen: 'jqt_startup.png',
        statusBar: 'black',
        preloadImages: [
            './jqtImg/back_button.png',
            './jqtImg/back_button_clicked.png',
            './jqtImg/button_clicked.png',
            './jqtImg/grayButton.png',
            './jqtImg/whiteButton.png',
            './jqtImg/loading.gif'
            ]
    });       
</script>


5. 설정 끝, 지금부터는 div 엘리멘트와 id, class 속성들과의 잔치?이다
jQTouch 의 적용을 위한 기본 설정은 이것으로 끝이다. 이제부터는 Div 엘리멘트의 정의와 각종 HTML 요소 그리고 id, class 속성을 통한 형식 지정, 스타일 정의로 화면을 jQTouch 답게 구성할 수 있다. 지금부터가 jQTouch 라이브러리의 구체적 사용법을 알고 진행해야 하는 과정이다.

위 설정들을 포함한 가장 기본적인 jQTouch 기반 웹 페이지의 구성은 아래와 같다

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />

<style type="text/css" media="screen">@import "./jqtLib/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "./jqtLib/theme.min.css";</style>

<script src="./jqtLib/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jqtLib/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
    var jQT = new $.jQTouch({
        icon: 'jqtouch.png',
        addGlossToIcon: false,
        startupScreen: 'jqt_startup.png',
        statusBar: 'red',
        preloadImages: [
            './jqtImg/back_button.png',
            './jqtImg/back_button_clicked.png',
            './jqtImgg/button_clicked.png',
            './jqtImg/grayButton.png',
            './jqtImg/whiteButton.png',
            './jqtImg/loading.gif'
            ]
    });       
</script>
</head>
<body>
<div id="home">
  <div class="toolbar">
   First jQTouch Demo
  </div> 
  <div>
    Hello World!!!
  </div> 
</div>
</body>
</html>

실행 화면




참고> jQTouch 관련 파일 경로에 대하여..
일부 웹 개발자들은 jQTouch 를 자신의 웹 프로젝트에 적용하고자 할 때 디렉터리와 파일 경로를 자신의 입맛대로 구성하고 싶어한다. 나 역시 마찬가지로...

그러나 jQTouch 는 테마를 정의한 스타일시트 파일에 이미지 경로가 포함되어 있어 주의를 요한다
ex) background: url(img/toolbar.png) #000000 repeat-x;
위 코드는 theme.css 파일에 정의된 이미지 경로를 보여준다. 하위 img 폴더를 기준으로 하고 있다

이 코드는 기본적으로 다운로드 한 jQTouch의 경로로써, 만일 개발자에 의해 이 경로가 해석되지 않는다면 의도하지 않는 결과를 보여줄 수 있다.  따라서 자신만의 경로를 정의할 때 이 부분을 감안해야 할 것이다. 제일 편한 것은 처음 다운로드 받은 jQTouch 의 폴더,파일 구조를 그대로 사용하는 것이다


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

[jQTouch] 페이지 전환  (0) 2010.10.26
[jQTouch] 목록 스타일  (1) 2010.10.25
페이지 요소(Element) 탐색  (0) 2010.10.12
자바스크립트 메뉴를 추가하며...  (2) 2010.10.07
JSON (JavaScript Object Notation)  (0) 2010.10.06

[CSS3] Media Queries

Posted in 모바일/HTML5 // Posted at 2010. 10. 25. 12:10
728x90
멀티 스크린 시대에 걸맞는 CSS 의 기능이다

CSS3에서는 출력되는 미디어의 종류와 조건에 맞도록 스타일을 설정할 수 있는 Media Query 라는 것을 제공한다. 이미 CSS2 에서 스크린모드(screen) 와 프린트모드(print)에 따른 서로 다른 출력 스타일을 지정할 수 있는 Media Type이 제공되었으나 세세한 조정을 할 수 없어 활용도가 높지 않았다고 한다.

그러나 CSS3에서 개선된 Media Query는 보다 더 세밀한 설정이 가능해 높은 활용도가 기대된다
특히 요즘처럼 멀티 디바이스, 멀티 스크린 시대에는 더욱 그 활용가치가 높지 않을까 생각한다

이에 대한 이론적 내용과 사용법은 W3C와 다른 훌륭한 블로그의 글을 링크함으로 대신 하려 한다
http://www.w3.org/TR/css3-mediaqueries/
http://manyoung.tistory.com/tag/media%20query
http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/
http://firejune.com/1580
http://www.webdesignerwall.com/tutorials/css3-media-queries/


미디어쿼리가 적용된 데모는 다음의 링크에서 확인할 수 있다
지원되는 브라우저에서 창 크기를 조절하면서 확인해 보기 바란다

http://disruptive-innovations.com/zoo/hmo/CSSMQdemo.html
http://test.unintentionallyblank.co.uk/media.html
http://css-tricks.com/examples/ResolutionDependantLayout/example-one.php
http://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/

2011년 8개 IT 메가 트렌드, HTML5 역할 언급

Posted in 모바일/HTML5 // Posted at 2010. 10. 21. 16:44
728x90
기사원문: 삼성SDS, 내년 IT 이끌어 갈 8개 트렌드 발표

삼성SDS가 2011년 IT 메가트랜드를 발표했다

소셜, 개방, 스마트, 클라우드, 하이브리드 등이 핵심키워드로 선정되었는데 이중 하이브리드 웹이라는 주제에서 HTML5 의 역할이 정의 되어 있다

[현상]
HTML5와 같은 차세대 웹 표준의 등장으로 기존의 RIA 플랫폼 기능들이 표준웹으로 통합되며, Web기반 OS, Web App Store등장 등으로 Web이 점차 App과 유사해 지고 있다.

[발전방향]
HTML5는 궁극적으로 오디오, 동영상, 쌍방향 플러그인 등을 필요 없게 만들 것이며, App과 Web은 서로 간의 장단점을 보완하며 궁극적으로 하나의 시스템으로 통합되어 갈 것이다
HTML5 가 가까운 미래 IT 환경에서 요직(?)을 차지하게 될 것이라는 분석에 동의한다

원소스 멀티플랫폼을 위한 기술적 현황

Posted in 모바일 // Posted at 2010. 10. 21. 15:09
728x90
아이폰 플랫폼이 대단하기는 하다.
각종 거대 개발사에서 아이폰 플랫폼에 포팅하기 위한 여러 시도만 봐도 그러하다.
특히 버림 받은(?) 어도비의 애플 사랑이란... 측은하기 까지 하다 ㅎㅎ

다양한 스마트폰, 다양한 태블랫 PC, 다양한 스마트TV, 그외 다양한 가전 플랫폼이 속속 등장하고 있는 요즘과 미래 상황에 이기종 플랫폼의 부담은 날이 갈수록 증가한다

과연 하나의 소스로 다양한 플랫폼에 얹힐 수 있는 날이 올까?
기술의 통합, 표준은 자본주의 환경에서의 기업들의 이해관계를 따진다면 실현은 불가능해 보인다
음.. 그렇다고 정부가 나서나? 우리나라 위피 사례는 섣부른 정부 개입의 문제점을 보여줬다
또, 그렇다고 소프트웨어를 위한 전세계적인 범정부가 있을 수 있나...
그럼 별도의 표준화 기구 정도는 예상해 볼 수 있겠다. 그러나 말했듯이 다양한 이해관계.. 음. 될리 없지..

물론, 꼭 그렇게 될 필요가 있나? 라는 원초적 질문이라면 패스~~

여하튼 플랫폼 이식, 멀티플랫폼화에 대한 요구는 환경의 다양성,발전과 더불어 끊임없이 제기될 것이다


원소스 멀티플랫폼을 위한 기술적 현황

 

2010.10.21

 

현재의 소프트웨어 플랫폼은 그 어느 때보다 멀티 플랫폼에 대한 요구가 강하게 나타나고 있다

 

스마트폰의 열풍과 참신한 모바일기기의 보급, 성장세는 소프트웨어 생태계에 많은 순 기능적 변화를 주고 있다. 이러한 성장세는 거대 업체들의 비즈니스 기회로 활용되고 있으며 그 만큼 다양한 플랫폼이 출시되기에 이른다. 애플의 iOS, 구글의 안드로이드, 마이크로소프트의 윈도모바일7등을 대표적인 이기종 플랫폼 사례로 들 수 있으며 이와 더불어 기존 PC OS환경도 여전히 유효한 플랫폼으로 자리하고 있다.

 

이들 이기종 플랫폼은 각기 다른 개발 언어와 런타임 환경을 제공하고 있어 하나의 제품을 다른 플랫폼에 이식하기 매우 어려운 구조를 띄고 있다. 따라서 소프트웨어 개발사() 입장에서는 하나의 소스가 여러 플랫폼에 쉽게 이식될 수 있는 환경을 간절히 원하고 있으며 이는 시장의 기술적 흐름을 통해서도 명백히 알 수 있다

 

이 글에서는 원소스 멀티플랫폼화를 실현하기 위한 몇 가지 기술적 움직임을 살펴보기로 한다

 

(모바일 웹, 하이브리드 앱)

멀티 플랫폼 실현을 위한 가장 보편적이고 잘 알려진 환경이 바로 웹이다. 이기종 플랫폼이라도 브라우저에 의존하는 웹 어플리케이션은 표준만 준수한다면 동일하게 구동된다. 즉 하나의 소스로 여러 플랫폼에 구동 가능하므로 멀티 플랫폼의 대안으로써 많이 활용된다.

다음과 같은 기술들이 웹의 한계를 극복시켜 줌으로써 앱으로써의 웹을 실현 가능케 한다

HTML5

웹의 기능을 대폭 향상시키는 차세대 표준 스펙. 전용 앱 못지 않은 어플 개발 가능

 

PhoneGap(Bondi, Titanium)

흔히 웹앱으로 불리는 하이브리드 앱 개발을 위한 프레임워크
웹에서도 장치의 고유 기능(가속도 센서, 기울기 센서 사진, 연락처 등)에 접근 가능

 

WebGL

OpenGL 프로젝트 중 하나로 별도의 플러그인 없이 웹에서 3D처리가 가능케 함

 

SVG

XML기반 2차원 백터 그래픽 언어로 표준 웹 기술임

 


플래시] Applications for iPhone

애플의 아이폰, 아이패드등의 제품에서는 플래시가 구동되지 않는다.플래시 개발사인 어도비는 거대한 애플 앱스토어 시장에 진입하기 위해 플래시 어플리케이션을 iOS 전용 어플리케이션으로 포팅해 주는 툴을 개발하였다

플래시 CS5 버전에 포함된 이 기능은 액션스크립트3로 개발된 플래시코드를 iOS 전용코드로 변환하여 앱스토어에 전용 앱으로 배포할 수 있도록 지원한다

 

관련 내용: http://labs.adobe.com/technologies/packagerforiphone/

Pdf: http://www.adityabansod.net/wordpress/wp-content/uploads/2009/11/iPhoneAppsCS5.pdf

사례: Chroma Circuit, Trading Stuff, Fickleblox, Just Letters, Red Hood, South Park

 


일러스트레이터] HTML5 Pack

대표적인 그래픽 저작 툴이 일러스트레이터는 CS5 버전에서 그래픽 결과물을 HTML5, CSS3, SVG등 웹 표준으로 포팅하는 기능을 포함 시켰다. HTML5 등의 표준 기술로 포팅된 결과물은 이기종 플랫폼에 구애 받지 않고 웹으로 구동시킬 수 있다. 이것 역시 원소스 멀티플랫폼을 위한 움직임이라 하겠다


관련 기사
: http://www.macworld.com/article/154033/illustratorcs5_html5.html

 


Java] AlcheMo for iPhone

애플의 아이폰, 아이패드등의 제품에서는 자바프로그램 역시 구동되지 않는다

AlcheMo for iPhone J2ME기반에서 개발된 자바코드를 아이폰에서 해석 가능한 C++ 코드로 포팅해 준다. 이 툴은 모바일 게임 개발툴을 제공하는 Innaworks Development Limited사에서 개발했다

관련내용: http://tech.gaeatimes.com/index.php/archive/how-to-install-compile-run-java-on-iphone/

 


Java] JVM for iPhone

자바를 개발한 SUN 사에서는 애플의 제품에 자사의 자바응용프로그램을 구동시키기 위해

J2ME에 기반한 아이폰용 JVM을 개발하겠다고 발표한적이 있다. 이것은 몇 년 전에 발표된 내용으로 애플의 코드를 해석하는 소프트웨어 불가방침에 그 행보가 확실치 않다. 다만 원소스 멀티플랫폼 위한 SUN사의 노력을 엿볼 수 있다


관련 기사
: http://www.infoworld.com/d/developer-world/sun-well-put-java-iphone-042

 

지금까지 소개한 사례들은 대체로 아이폰 포팅을 주제로 하고 있다.이는 현재 대세가 되는 플랫폼을 향한 업계의 반응이며 다른 플랫폼이 부각된다면 여전히 관련 포팅 기술이 출시될 것이다.

결국 이러한 움직임이 멀티플랫폼화를 위한 업계의 노력이라 할 수 있겠다.
또한 이런 노력과 시도들은 그만큼 시장의 요구가 있다는 반증이 될 것이다

 

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

필요악? ActiveX  (0) 2010.11.25
IE 8, 웹 조각(Web Slices)  (0) 2010.11.11
차세대 웹을 바라보는 차세대 시각이 필요하다  (0) 2010.10.07
Code Syntax Highlighter 툴 소개  (0) 2010.09.30
MobiOne, 아이폰 에뮬레이터  (5) 2010.08.31
728x90

HTML5 에는 로컬 자원을 활용하는 유용한 기능들이 포함되어 있다
대표적인 예로 웹 스토로지, 웹 데이타베이스, 어플리케이션 캐시등을 들 수 있다

이 블로그에서 이 들 스펙에 대해 간략하게 다루었었다
: [HTML5] Web Storage
: [HTML5] 오프라인 웹 어플리케이션
: [HTML5] Web SQL Database

이와같은 로컬 자원을 활용하면 웹 응용프로그램의 사용성, 응답성, 성능등과 같은 전반적인 효율성을 꾀할 수 있어 많은 활용도가 기대된다

이들 기술의 기능적 구현에 대한 이해와 더불어 환경에 대한 이해도 같이 해 두면 유용할 것이다
이전 글에서는 기술의 개요와 구현에 대해 살펴보았다면 이 글에서는 로컬 자원의 저장 위치와 한계 용량, 지속 기간 등의 환경적 요인들을 살펴 보고 이들 기술의 이해의 폭을 넓히고자 한다

그럼 이제부터 HTML5에서 로컬 자원을 어디에, 얼마나, 언제까지 저장하는지 살펴 보도록 하자.
참고로 로컬 영역에 대한 내용이다 보니 클라이언트 PC의 OS와 브라우저의 종류, 버전에 따라  내용이 조금씩 다를 수 있음을 밝혀 둔다. 그리고 가정을 하건대, 로컬 디스크의 용량은 무제한이라고 가정해 둔다. 기술별 최대 용량을 따져보는 와중에 컴퓨터 하드디스크 자체에 여유공간이 없다면 아무런 소용이 없기 때문이다

이 글은 윈도우 XP를 사용하고 IE8, 그외 브라우저(크롬,사파리등)은 현재시점(2010.10.19) 최신버전을 사용하고 있는 것을 기준으로 하고 있다

어디에 저장되는가?
대부분의 로컬자원은 OS의 사용자별 어플리케이션 데이터 공간에 저장된다
윈도우 XP에서는 'C:\Documents and Settings\사용자계정\Local Settings\Application Data' 가 어플리케이션 데이터를 저장하는 공간이며 이 디렉터리 하위에 있는 각 브라우저별 폴더에 로컬자원이 저장된다
윈도우에서 'C:\Documents and Settings\사용자계정' 의 경로는 %userprofile%로 대체 된다

LocalStorage
크롬: %userprofile%\Local Settings\Application Data\Google\Chrome\User Data\Default\Local Storage
사파리: %userprofile%\Local Settings\Application Data\Apple Computer\Safari\LocalStorage
파폭: %userprofile%\mkex\Application Data\Mozilla\Firefox\Profiles\xxx.default\webappsstore.sqlite 파일
오페라: %userprofile%\Application Data\Opera\Opera\pstorage
IE8: %userprofile%\Local Settings\Application Data\Microsoft\Internet Explorer\DOMStore

SessionStorage
세션스토로지의 경우 브라우저 프로세스의 메모리 영역에 저장되므로 물리적인 시스템 디렉터리에 저장되지 않는다. 따라서 데이터 저장을 위한 별도의 디렉터리 경로가 없다

Web SQL Database
크롬: %userprofile%\Local Settings\Application Data\Google\Chrome\User Data\Default\databases
사파리: %userprofile%\Local Settings\Application Data\Apple Computer\Safari\Databases
파폭: 지원되지 않음
오페라: %userprofile%\Application Data\Opera\Opera\pstorage

Application Cache
크롬: %userprofile%\Local Settings\Application Data\Google\Chrome\User Data\Default\Application Cache
사파리: %userprofile%\Local Settings\Application Data\Apple Computer\Safari\ApplicationCache.db 파일
파폭: %userprofile%\Local Settings\Application Data\Mozilla\Firefox\Profiles\xxxxx.default\OfflineCache
오페라: %userprofile%\Local Settings\Application Data\Opera\Opera\application_cache


얼마나 저장되는가?
LocalStorage
로컬스토로지의 경우 브라우저마다 최대 저장용량이 다를 수 있다. 더 엄밀히 말하면 브라우저, 도메인마다 최대 용량이 다를 수 있다. 로컬스토로지는 같은 도메인 정책보안을 따르기 때문에 최대 용량 역시 도메인별로 한정을 하고 있다. 예를 들어 파이어폭스는 도메인당 최대 5MB 까지 가능하다
표준 스펙에 의하면 5MB를 최대 용량으로 권장하고 있으니 대체로 다른 브라우저도 이와 비슷할 것으로 보인다. 만일 한 도메인에 localStorage의 값을 5MB 이상 저장해야 한다면 브라우저가 이를 지원하는지 따져봐야 한다. (IE8의 경우 도메인당 10MB를 지원하는 것 같다)
(기존 쿠키가 4KB로 제한을 둔 것에 비하면 5MB 공간은 웹 환경에서 상당량이라 할 수 있다) 

SessionStorage
세션스토로지의 경우 전역적인 공간이 아닌 브라우저 컨텍스트 영역에 저장되므로 브라우저 프로세스, 메모리와 연관이 있다. 이런 특징에 기인했는지 최대용량에 대한 언급을 찾을 수 없다. 다시 말해 브라우저 자체적으로 용량에 대한 제한을 두는지 localStorage 와 합쳐서 도메인당 용량을 계산하는지 아니면 브라우저 컨텍스트에서 사용 가능한 시스템의 메모리 크기에 의존하는지 등에 대한 언급은 없지만 개인적으로는 후자, 즉 브라우저 프로세스가 사용하는 시스템 메모리 크기에 의존하지 않을까 예상해 본다

Web SQL Database
웹 데이터베이스 용량의 기준은 LocalStorage와 개념적으로 유사하다.
즉 브라우저별로 최대 용량이 다를 수 있으며 도메인 단위로 관리된다.
그러나 LocalStorage 비해 용량의 유연성이 더 크다. 다시말해 더 큰 크기의 데이터저장이 가능하다는 것이다
HTML5 표준 사양에는 DB 용량에 대한 규정을 별도로 두지 않고 있으며 브라우저의 정책에 따라  DB용량의 기준이 다를 수 있다는 것을 명심하자DB를 생성하는 openDatabase 함수의 estimatedSize 매개변수에 생성하고자 하는 DB의 크기를 바이트 단위로 지정할 수 있는데 이 크기는 DB의 대략적인 크기를 지정하는 것으로 브라우저마다 그 적용이 다를 수 있다는 것이다.
openDatabase(in DOMString name, in DOMString version, in DOMString displayName, 
                                         in unsigned long estimatedSize, in optional DatabaseCallback creationCallback);


사파리 브라우저를 통해 DB 용량에 대한 내용을 체크 해 보자
다음 코드와 같이 기가(GB)단위의 큰 DB를 생성한다

var db = window.openDatabase("myDB","1.0", "테스트용DB", 1024*1024*1024);

사파리에서 위 코드를 실행하면 다음 그림과 같이 허용할 것인지 대화상자가 나오고 사용자가 허용하면 정상적으로 DB가 생성된다. (심지어 크롬과 오페라는 허용 여부를 묻지도 않고 생성해 준다)



그러나 브라우저마다 기본적으로 설정한 기본 크기는 있다. 사파리의 경우 기본 5MB 이며 환경설정에서 이를 변경할 수 있다. 아래화면은 '사파리의 기본설정->보안탭 화면' 인데 기본 5MB 설정에, 500M까지 변경 가능하다. 여기에서 설정한 기본크기 보다 작은 크기의 DB를 생성하면 자동으로 기본크기가 적용되며 반대로 기본크기보다 큰 DB를 생성하면 앞서 본것과 같이 허용을 묻는 대화상자가 나타나는 것이다
이때 openDatabase에서 명시한 DB크기가 설정되는 것이 아니라 브라우저의 임의의 계산식에 의해 좀더 넉넉한 공간을 확보하게 되는데 위 예에서 1G DB를 생성했는데 1.2G 로 잡힌 이유도 여기에 있다


이렇듯 사파리에서는 DB크기를 유연하게 관리하는 것으로 미루어보건대, 만일 기존에 생성된 DB의 크기보다 더 큰 데이터를 입력하려고 하면 자동으로 크기가 일정부분 확대될 것으로 예상된다
(일반적인 DBMS 가 그러한 것 처럼...)

참고로 기존에 생성된 DB의 크기를 다음과 같이 수동으로 변경이 가능하다.
아래 화면은 사파리에의서 기존에 생성된 DB를 도메인별로 나타내고 각 DB의 현재 크기와 최대 크기를 명시하고 있는 화면이다. 여기서 도메인별 DB 최대 크기를 사용자가 변경할 수 있다


크롬브라우저는 '옵션->고급설정탭->컨텐츠설정->쿠키->쿠키및기타사이트데이터표시'에서 확인 가능하다


오페라브라우저는 '설정->환경설정->고급설정탭->저장공간'에서 확인 가능하다


결론적으로 웹 데이타베이스의 용량은 특별히 제한을 가해 두지 않은 듯 하며 유연한 확장이 가능해 보인다
다만 브라우저마다 그 기준이 다를 수 있기 때문에 필요할 경우 브라우저 사양서을 확인하면 좋을 것이다

용량에 특별히 제한을 가해 두지 않았다는 것이 무제한으로 사용가능하다는 의미는 아니다.
당연하겠지만 하드디스크의 용량을 넘어설 수 없으며 그게 아니더라도 너무 무리한 용량은 예상치 않은 동작을 유발할 수도 있다. 사파리의 경우 자동으로 계산되는 최대크기가 매우 가변적인다.

예를들어 10G로 생성하면 2.3G로 잡고 7G로 생성하면 3.4G로 잡고 100G로 잡으면 최대크기는 오히려 기본크기로 잡히는 등 예측할 수 없는 결과를 보여 주고 있다. 따라서 너무 무리한 크기 설정은 피하는 것이 좋으며 서버급 DB가 아닌 로컬 DB에서 이와같이 과도한 크기를 이용하는 시나리오가 있다면 설계를 잘 못한 것일 수도 있다. 그리고 최대크기라는 기준이 큰 의미가 없을 수도 있다. 사파리에서 최대크기를 명시하더라도 실제 데이터를 저장하고 있는 시스템 디렉터리 파일은 현재크기로만 존재한다. 그리고 데이터 입력이 증가할 수록 용량은 점점 확장된다.

결론적으로 특별히 제한을 가해 두지 않았다는 의미는 사용할 만큼의 충분한 공간을 제공한다 라는 의미로 해석하기 바란다


Application Cache
어플리케이션 캐시의 저장 용량을 따져보는 것은 어찌보면 무의미 할 수 있다
로컬스토로지나 웹데이타베이스와 같은 것은 저장소라는 개념이 명확해서 사용 가능한 공간, 용량이라는 개념을 적용시킬 수 있으나 어플리케이션 캐시는 이런 개념과는 조금 다르기 때문이다.
그러나 이것 역시 로컬의 어딘가에 저장되어 캐시 되기에 굳이 용량에 대한 관점으로 본다고 하면, 어플리케이션 캐시가 저장되는 시스템 하드디스크의 크기라고 말할 수 있겠다.

다만 IE의 임시인터넷파일과 같이 저장공간에 제한을 둘 수도 있는데 이것과 관련해서도 역시 각 브라우저 정책에 따른다는 것이다.

HTML5 스펙에서는 어플리케이션 캐시에 대한 디스크 공간을 다음과 같이 설명하고 있다.
User agents should consider applying constraints on disk usage of application caches.
User agents should allow users to see how much space each domain is using, and may offer the user the ability to delete specific application caches.
 


언제까지 저장되는가?
LocalStorage
로컬스토로지는 특수한 상황이 아니라면 영구적으로 데이터를 보관한다
특수한 상황이라 하면, 사용자가 직접 데이터를 삭제하거나 브라우저를 제거하거나 OS를 재설치하는 것을 말한다. 이러한 특수한 상황이 아니라면 데이터는 영구적으로 보관된다

SessionStorage
세션스토로지는 브라우저 창이 닫힐 때 까지 보관된다. 엄밀히 말하면 브라우저컨텍스트라는 일종의 프로세스 도메인이 활성화되어 있는 동안만 데이터가 유지된다. 쉽게 말해 브라우저 창이 열려 있는 동안 데이터가 보관 된다고 생각하면 되겠다

Web SQL Database
웹 데이터베이스는 LocalStorage와 같이 특수한 상황이 아니라면 영구적으로 데이터를 보관한다

Application Cache
어플리케이션 캐시에 보관되는 데이터의 유효기간을 따지는 것은 앞서 용량을 따지는 것보다 더 무의미하다
앞서 다른 기술들과 마찬가지로 특수한 상황이 아니라면 영구적으로 보관될 것이며 캐시를 업데이트 하거나 캐시 저장공간이 꽉 찾을 경우 덮어 쓰는 등의 시나리오에서 일부 갱신되거나 유실될 수 있을 것이다

728x90
태생적으로 웹은 로컬 혹은 네이티브 환경보다 느릴 수 밖에 없는 구조이다

HTML5 의 등장으로 웹이 응용프로그램화가 가능해졌다고는 하지만 웹이라는 환경에 기인하는 이상 네이티브 응용프로그램의 속도나 성능을 기대하기는 어렵다는 것이 사실이다

HTML5를 적극 지지하는 한 사람인 필자 역시 이 부분은 냉정하게 생각해봐야 한다고 본다
혹여 누군가, HTML5만 이용하면 기존 응용프로그램의 수준과 동일하게 구현할 수 있다고 한다면 일단 의심해 봐야 한다. 그 수준이라는 것이 기능적인 측면에서만 바라본다면 그럴 수 있으나 속도나 보안성과 같은 응용프로그램의 기능,비기능적 측면을 모두 따져 본다면 결코 만만한 것이 아니다

예컨대 오프라인 어플리케이션 캐시, 웹 워커, 웹 스토로지, 웹 데이타베이스를 활용해 응용프로그램의 성능을 향상시킬 수 있으며 현재 가속화되고 있는 브라우저 성능 개선도 웹 응용프로그램의 성능향상에 상당부분 기여한다. 하지만 저 건너편, 웹에 있는 원격지의 데이터에 많은 부분 의존할 수 밖에 없는 환경과 OS위에서 동작하는 브라우저 환경, 인터프리터 방식의 해석 환경, 전송계층보다 한단계 위인 응용계층의 통신 활용이 빈번한 웹이 네이티비의 그것과 완전성을 같이 한다는 것은 어불성설이다

이러한 문제는 시각의 차이에서 기인하기도 한다.
과연 웹 응용프로그램이 네이티브응용프로그램과 그 성격이 같으냐는 문제를 고려해 봐야 한다
HTML5가 추구하는 바가 웹이 모든 네이티브 응용환경을 대체하겠다는 것은 아니다
기존의 웹 보다 그 경계를 낮출 수 있는 수단으로써의 웹이 어찌보면 더 적합할 수도 있다
물론 웹이 네이티브 환경보다 더 많이 가진 여러 장점들은 일일이 논하지 않겠다

HTML5에 대한 업계, 개발자, 사용자의 기대가 큰 것은 좋은 현상이다
태생적으로 다른 두 환경을 동일시 하기는 힘들지만 그럼에도 불구하고 이런 기대를 져버리지 않기 위해 분명 고래해 볼 점은 있겠다.

넘을 수 있는 벽인가 아닌가를 따지는 것도 중요하지만 그 전에 HTML5 그리고 웹환경이 가진 일종의 단점을 집어 보자. 대표적으로 다음의 3가지를 들 수 있겠다

- 느린 속도
이건 HTML5의 단점이 아니라 웹의 단점이다. 오히려 HTML5는 느린 웹을 향상시켰다
그러나 여전히 네이티브의 그것과 비교하면 느릴 수 밖에 없다.
전용 앱이 아닌 모바일 웹을 채택하지 못하는 많은 이유가 여기에 기인하기도 한다

- 불안한 호환성
이건 언젠가 해결될 문제이기도 하다
현재 HTML5 를 지원하는 브라우저마다 조금씩 다른 지원형태를 보인다
상용 서비스를 개발하는 입장에서 참으로 피곤한 문제라 하겠다

- 느린 대응
예전부터 HTML5 표준화 시점에 대해 말이 많았다
한 업체에서 주도적으로 개발하는 다른 제품과는 달리 여러 업체가 그것도 표준화 기구와 맞물려 작업을 하다 보니 느릴 수 밖에 없다. 실시간 환경, 급변하는 환경에서는 어울리지 않는다
표준화가 완료되더라도 이후 환경변화에 대한 빠른 대응이 가능할지 의문이 드는 대목이다


그래서 최적이 중요하다
웹의 장점, 웹의 단점, 웹의 이상, 웹의 한계, 그리고 비즈니스의 접목...
모든 것이 가능하지도 모든 것이 불가능하지도 않다는 시각. 다만 최적의 방안만이 존재한다는 시각.
이런 시각을 위해서는 정확한 지식과 유연한 지혜가 필요하다

HTML5 가 대세이며 그가 할 수 있는 일은 매우 많으며 우리 비즈니스를 이렇게 해결할 수 있겠다라는 청사진을 제시할 수 있으려면 HTML5의 한계, 나아가 웹의 한계에 대해서도 정확히 집어 낼 수 있어야 하겠다

=> [m오피스 프레임워크③]MEAP 도입의 고려 사항그리고 느린 표준화?
728x90

MKEXDev.NET 의 로고가 필요하게 된 적이 있었다

대학생에게 무료로 개발도구를 배포하는 마이크로소프트의 DreamSpark 이벤트에 후원 커뮤니티로 선정되어 사이트 로고를 보내줘야 했다. 당시 내 사이트에는 특별한 로고가 없었으나 MS 프로모션 담당자는 이미지로 된 로고를 원했다. 그래서 급조하기로 했는데 개발을 주제로 한 사이트라 뭐.. 특별한 디자인을 하고 싶지는 않았다. 그냥 텍스트에 간단한 효과를 줘서 깔끔하게만 보이면 되겠다 싶었다.

그래서 아는 디자이너에게 매우 심플하게 만들어 달라고 부탁해서 나온 로고가 바로 아래와 같은 모습니다.
심플하면서도 깔끔한 텍스트 기반의 로고로 개인적으로 흡족하며 지금까지 사이트 로고로 사용하고 있다



이를 계기로 문득, 텍스트를 입력하면 간단한 효과만 처리해서 이미지로 변환해 주는 툴이 있으면 좋겠다는 생각이 들었는데 마침 HTML5를 접하면서 간단하게라도 데모격으로 한번 만들어 보자고 맘을 먹었다

목표는 완성도가 아니라 기능을 구현하면서 HTML5를 익히자는 것이므로 툴의 완성도는 기대하지 말기 바란다

CSS3 ?  Canvas ?
텍스트에 효과를 주는 방법은 많다. HTML5 관련 스펙만 봐도 CSS3 혹은 Canvas 를 이용할 수 있다
CSS의 Transform 이나 text-stroke, opacity, Gradients 등과 같은 기능만으로도 화려한 텍스트 효과처리가 가능하다. 그러나 앞서도 밝혔지만 CSS 보다는 HTML5 주요 기능을 익히는 것이 목적이므로 Canvas를 이용하기로 결정했다. Canvas를 이용해도 텍스트 크기, 그라디에이션, 색상, 폰트, 그림자, 투명도 등 처리가 가능하다
게다가 Canvas의 내용을 이미지로 변환할 수 있으니 더욱 적합하다는 생각을 하게 되었다


데모 실행
코드를 보기 전에 먼저 데모 실행화면을 살펴 보자


하단 텍스트상자에 글자를 입력하면 상단의 캔버스에 표시되며 몇 가지 텍스트 효과를 줄 수 있다
이 모든 텍스트 효과처리는 HTML5 Canvas 관련 기능을 이용한 것이며 캔버스의 최종 결과를 이미지로 변환시켜 주는 기능이 지원된다. 텍스트상자에 글이 입력되거나 삭제될 때 바로바로 그 내용이 캔버스로 반영되며 텍스트 효과도 즉시 적용되어 캔버스에 나타난다.

참고로 텍스트 효과는 데모에 적용된 기능 이외에도 그림자 효과, 그라디에이션 효과 등 더 다양한 처리가 가능하지만 데모에서는 기본적인 효과만 집중했음을 밝힌다

IE8 이전 버전을 제외한 크롬, 사파리, 오페라에서 실행 가능하며, 다음의 주소에서 확인할 수 있다
http://mkexdev.net/m/textToImageByCanvas.html


구현 하기
전체 코드를 보기 전에 몇 가지 핵심적인 내용을 살펴 보자

자바스크립트 키 관련 이벤트
HTML5 Canvas API 설명전에 먼저 자바스크립트의 키 관련 이벤트를 짚고 넘어가자
자바스크립트에는 키보드 입력과 관련된 총 3개의 이벤트가 제공된다.

keydown, keyup, keypress 가 그것인데 이들 이벤트는 키 입력에 반응하는 것이 조금씩 다르다
keydown 과 keyup 은 유사하지만하지만 keypress 는 이 둘과 약간 차이가 있는데 데모 제작과 관련해 주목해야 할 것은 keypress 는 백스페이스키(<-) 에 반응하지 않는다는 것이다.

그리고 keydown 과 keyup 의 경우 이벤트로 넘겨진 keyCode 에는 영문 대/소문자를 구분하지 않고 모두 대문자로 취급한다는 것이다. 제작하고자 하는 데모는 대/소문자를 구분해야 하며 백스페이스키로 글자를 삭제해야 하기 때문에 하나의 이벤트로 만족할 수 없었다. 즉 keypress 이벤트로 문자 입력을 처리하고 keyup으로 백스페이스와 Delete키에 반응하도록 처리했다는 것을 먼저 알린다

아래 코드와 같이 두 이벤트를 동시에 정의해서 문자 키 입력에 두 이벤트가 반응하지만, 백스페이스와 Delete 키 등의 특수키에는 keyup 이벤트만 반응한다. keyup 이벤트는 일반 문자 입력은 무시하도록 처리한다.
<input type="text" id="myText" size="60" onkeypress="inputText(event.keyCode);"   onkeyup="inputBackSpace(event.keyCode);">


캔버스 지우기
캔버스의 내용을 모두 지우기 위해서는 몇 가지 방법이 있지만,
기본적으로 캔버스의 너비 혹은 높이 정보를 다시 설정하면 캔버스내용이 모두 지워진다고 알려져 있다
canvas.width = canvas.width;

그러나 이 방법은 현재 사파리와 파이어폭스에서만 정상 동작한다
브라우저마다 HTML5 지원 현황이 달라서 발생하는 문제로 보인다.따라서 모든 브라우저에서 동작하도록 하려면 clearRect 로 캔버스 내용을 명시적으로 지워줘야 한다

아래 코드와 같이 (0,0) 부터 캔버스의 너비,높이만큼이 사각형 영역을 지움으로써 캔버스를 초기화 할 수 있다
context.clearRect(0,0,canvas.width, canvas.height);


캔버스에 텍스트 그리는 방법
Canvas의 2D Context 를 통해 각종 그리기 작업을 할 수 있는데 텍스트의 경우 fillText 와 strokeText 메서드를 통해 그릴 수 있다. fillText는 속이 찬 텍스트, strokeText는 테두리만 있는 텍스트를 그릴 수 있다

데모에서는 텍스트상자에 글자가 입력될 때 마다 바로바로 캔버스에 그리기를 수행하는데,
이때 입력된 글자 하나씩 캔버스에 그리는 방법과 캔버스를 지우고 텍스트상자에 지금까지 입력된 전체 내용을 다시 그리는 방법 중 하나를 택해야 한다

전자의 경우 텍스트가 입력되는 위치를 직접 지정해 줘야 하기 때문에 조금 복잡하며 후자의 경우 매번 캔버스를 지우고 다시 그리는 작업을 해 줘야 하기 때문에 조금 비효율적이다

따라서 데모에서는 전자의 경우처럼 텍스트 입력 시 마다 글자 하나씩 캔버스에 입력하기로 했으며 이때 알아야 하는 입력 위치는 다음과 같이 measureText 메서드를 통해 전체 문자열의 길이를 구함으로써 해결하였다
(텍스트 상자가 멀티라인을 지원하지 않기 때문에 Y 좌표는 필요치 않다)
var textWidth = context.measureText(text).width;
context.fillText(text, textWidth  , 0);  //글자가 위치할 캔버스 X 좌표를 설정한다

다만 백스페이스키(<-)와 Delete 키를 눌렀을 때 글자가 지워지는 것은 심플한 처리를 위해,캔버스 내용을 지우고 다시 입력하는 후자의 방식을 따르기로 했다.
(글자 지우기 역시 clearRect 를 통해 정해진 글자 영역만 지울 수 있지만 이 경우 x 좌표의 변화와 폰트 크기에 따른 clearRect 크기 변경 등 신경 쓸 부분이 많아 오히려 버그 유발 요인이 될 수 있어 사용을 피하기로 했다)
context.clearRect(0,0,canvas.width, canvas.height);  //캔버스를 지우고
context.fillText(text, 0, 0);                                    //다시 전체 글자를 그린다


그리고 텍스트에 폰트, 색상과 같은 효과 처리는 2D Context의 속성들을 통해 이뤄지는데 이미 입력된 내용은 반영되지 않기 때문에 이때도 역시 캔버스를 지우고 다시 그리는 방식을 취한다 


기타 살펴볼 내용
캔버스를 통한 텍스트 효과 처리시 다음의 주요 코드가 이용 되었다

: context.textBaseline = "top"
 캔버스에 텍스트가 위치하는 수평 기준선을 top 으로 해 줌으로써  글자가 기준선 아래로 표시되도록 한다

: context.font = "20px  'Tahoma'"
font 속성을 통해 캔버스에 표시될 텍스트 폰트를 처리하는데 css 의 폰트 속성과 같이 정의할 수 있다

: context.fillStyle = "red"   , context.strokeStyle
fillStyle 속성을 통해 채우기 스타일을 지정할 수 있다. 기본은 검정이다. strokeStyle 속성은 선의 색상을 지정하는데 이용한다

: String.fromCharCode(keyCode)
HTML5 , Canvas와는 무관하지만 데모에서는 유용하다. 키 이벤트로 넘여온 keyCode 를 문자로 변환해 주는 자바스크립트 내장 함수이다. 한 글자씩 입력 할 경우 필요하다

: 캔버스 내용을 이미지로 변환하기
이미 살펴본 내용이다. 캔버스의 toDataURL 메서드를 통해 이미지데이터문자열을 기반으로 이미지객체를 생성한다. [HTML5 실습] Canvas에 그린 그림을 이미지로 만들기

이것으로 구현을 위한 핵심적인 내용을 대략 살표 보았다. 이제 전체 코드를 제시한다
전체 코드는 http://mkexdev.net/m/textToImageByCanvas.html 의 소스보기를 통해서도 볼 수 있다

<!DOCTYPE html>
<html>
<head></head>
<body>
  <form name="myForm">
  <canvas id="cv" width="400" height="70" style="position: relative; border: 1px solid #000;"></canvas> 
  <button onclick="clearCanvas()">Clear</button>
  <input type="button" onclick="convertImage()" value="이미지로변환">
  <img id="myImage">
  <br>   
  <input type="radio" name="isFill" value="Fill" onchange="chkFill();" checked>Fill
  <input type="radio" name="isFill" value="Stroke" onchange="chkFill();">Stroke
  <br> 
  Font: <input id="fontSize" type="range" min="10" max="60" step="5" value="50" onchange="changeFont();" />
        <select id="fontFace" onchange="changeFont();">
         <option value="Tahoma" selected>Tahoma</option>
         <option value="Verdana">Verdana</option>
         <option value="Gulim">Gulim</option>
         <option value="Georgia">Georgia</option>
         <option value="Symbol">Symbol</option>
         <option value="Terminal">Terminal</option>
        </select>
  <br>
  Fill Color: <select id="fontColor" onchange="changeColor(1);">
         <option value="Black" selected>Black</option>
         <option value="Red">Red</option>
         <option value="Blue">Blue</option>
         <option value="Green">Green</option>
         <option value="Yellow">Yellow</option>
        </select>
  Stroke Color: <select id="strokeColor" onchange="changeColor(2);">
         <option value="Black" selected>Black</option>
         <option value="Red">Red</option>
         <option value="Blue">Blue</option>
         <option value="Green">Green</option>
         <option value="Yellow">Yellow</option>
        </select>
  <p>
  <input type="text" id="myText" size="60" onkeypress="inputText(event.keyCode);" onkeyup="inputBackSpace(event.keyCode);">
  <div id="msgDiv"></div> 
  </form>
</body>
</html>
<script type="text/javascript">
if(window.addEventListener){
    window.addEventListener('load', Init, false);
}
var canvas, context, myText,msgDiv
var isFill = true;
function Init() {    
  canvas = document.getElementById('cv');
  context = canvas.getContext('2d');    
  context.font = eval("'"+ document.getElementById('fontSize').value +'px '+ document.getElementById('fontFace').value+"'");   
  context.textBaseline = "top";  
  myText = document.getElementById('myText');
  myText.focus(); 
  msgDiv = document.getElementById("msgDiv"); 
}
function inputText(keyCode){   
  msgDiv.innerText = keyCode;    
 
  //글자의 가로위치를 구하기 위해 현재 입력된 문자열의 너비를 구한다
  var textWidth = context.measureText(myText.value).width;     
  drawText(String.fromCharCode(keyCode), textWidth);     
}    
function inputBackSpace(keyCode){
  if(keyCode == 8 || keyCode == 46){ //백스페이스 키와 Delete키를 받기 위한 함수
    clearCanvas();
    drawText(myText.value,0);    
  }
}
function drawText(text, posX){ 
  if(!isFill){ context.strokeText(text, posX  , 0); }
  else{ context.fillText(text, posX  , 0); }
}
function chkFill(){
  isFill = myForm.isFill[0].checked;
  clearCanvas();
  drawText(myText.value,0);
}
function changeFont(){
  clearCanvas();
  context.font = eval("'"+ document.getElementById('fontSize').value +'px '+ document.getElementById('fontFace').value+"'");
  drawText(myText.value,0); 
}
function changeColor(flag){
  clearCanvas();
  if(flag == 1){
    context.fillStyle = document.getElementById('fontColor').value;
  }
  else{
   context.strokeStyle = document.getElementById('strokeColor').value;
 }
 drawText(myText.value,0); 
}
function clearCanvas(){
   //canvas.width = canvas.width;   //사파리, 파폭에서만 동작(크롬, 오페라 X)    
   context.clearRect(0,0,canvas.width, canvas.height);  
}
function convertImage(){
  var image = new Image();
  var myImage = document.getElementById('myImage');
  myImage.src = canvas.toDataURL();
}
</script>


HTML5 Canvas+Text Example
한참 삘(feel) 받아서 데모를 제작하다가 이 사이트를 알게 되었다
=> http://whatdo.net/html5/example/#2

내가 구현하고자 했던 대부분의 기능이 제공되고 있었다.
사실 데모의 완성도를 꽤 올리고자 맘 먹고 시도하던 도중에 이 사이트를 보게 되었고 동기가 한풀 꺽였다
이미 제공되고 있는 사이트가 있으니 내가 만들고자 하는데모에 새로움은 별로 없기에 받았던 삘(feel)이 사그러져 버렸다 ㅎㅎ. 그래서 적당한 선에서 데모 제작을 완료하고 포스팅 하게 된 것이다

이 사이트를 보면 조금은 다른 방식으로 구현하고 있지만 더 많은 canvas 기능이 활용되었고 구현 방식 역시 배울점이 많아 보인다. 소스보기를 통해 분석해 보면 많은 도움을 얻게 될 것이니 반드시 참고 바란다

페이지 요소(Element) 탐색

Posted in 모바일/Javascript // Posted at 2010. 10. 12. 13:49
728x90

기본적으로 웹 페이지는 요소(Element)라고 부르는 개체들의 모음이다
div, table, img 등 각각의 태그는 특정 요소를 정의하기 위한 마크업 규칙이며 이 요소들이 모여 웹 페이지를 구성한다. 이들 요소는 기본적으로는 페이지에 정적으로 표시되지만 스타일 처리와 동적 구현을 위해 자바스크립트와 같은 언어로 핸들링 할 수 있다

이러한 핸들링을 위한 가장 첫 단계가 바로 페이지에 존재하는 요소를 찾아내는 일이다. 이를 '페이지 요소 탐색'이라 한다. 이 글에서는 페이지 요소 탐색을 위한 과거와 현재의 기술적 이슈를 다루고자 한다

document.all
아마 필자와 같은 구식(?)  웹 개발자들은 제일 먼저 document.all 을 떠 올렸을 것이다
요소에 부여된 id를 기반으로 탐색하는데 매우 낡은 방법이다.

아래와 같이 페이지의 div 요소에 "myDiv" 라는 id를 부여했다고 가정한다
<div id="myDiv">ABCD</div>

그리고 다음과 같이 이 요소를 탐색한다
var element = document.all["myDiv"]; alert(element1.nodeName);

그러나 요즘 시대에 이런 낡은 문법을 사용한다면 욕 듣기 딱 쫗다 ㅎㅎ
왜냐하면 비표준 스크립트라는 이유에서이다

document.all 은 과거 마이크로소프트의 인터넷 익스플로러에 채택된 DOM 스크립트이다.당시 넷스케이프에서는 document.layers 와 대응되는 문법이었다. 이러한 비표준 스크립트는 크로스브라우저 환경에 큰 걸림돌이기 때문에 사용을 권장하지 않는다

모든 브라우저에서 사용가능한 document.all ??
document.all 은 MS 가 IE를 위한 비표준 탐색 스크립트지만 현재 존재하는 대부분의 최신 브라우저에서 이를 지원하고 있다.  즉 IE는 물론 크롬, 사파리, 파이어폭스, 오페라에서 잘 동작한다.그럼 표준인가?? ...
그렇지 않다. 표준이라기보다는 워낙 유명한(?) 문법이라 IE호환성을 위해 각 브라우저에서 이를 지원하게 된 것일 뿐이다. 이와 관련한 다음의 글을 참고하기 바란다
=> Mozilla, document.all 부분 지원 시작!   ,  document.all 문제 해결법


document.getElementById
아마 모든 웹 개발자가 알고 있는 문법일 것이다
비표준 탐색 스크립트를 평정하고 W3C 에서 표준으로 정한 탐색 스크립트가 바로 document.getElementById 이다. 앞서 document.all을 다음과 같이 대체할 수 있다. 그리고 표준이기 때문에 브라우저 호환성이 보장된다
var element = document.getElementById("myDiv");

이제 document.all 은 잊어 버리고 document.getElementId 를 사용하자. 이미 오래전에 잊었겠지만...


document.getElementsByTagName
getElementById 와 쌍을 이루는 유명한 문법일 것이다.
getElementsByTagName는 getElementById와 마찬가지로 표준 스크립트이며 딱 두가지 차이점이 존재한다.

1) 하나 이상의 요소 즉 요소의 배열을 반환한다
getElementsByTagName 이 반환하는 것은 요소배열이다.
비록 반환되는 요소가 단 1개라도 배열 접근 형식(ex element[0]) 을 취해야 한다.

2) 요소에 부여된 ID가 아닌 태그에 기반한다
getElementById 가 요소에 부여된 ID를 기반으로 탐색을 수행한다면, getElementsByTagName는 요소의 태그명에 기반한다. 즉 div, table, img 와 같은 요소태그를 대상으로 탐색을 수행한다

이런 특징은 일종의 유연성을 제공해 준다. getElementById와 같이 ID를 기반으로 한다는 것은 일종의 규칙이다. 즉 미리 정의된 ID가 있어야 한다는 규칙이 성립해야 한다. 만일 웹 문서 파서(parse)와 같은 범용적인 외부 제작툴을 개발한다면 이런 규칙을 적용할 수 없기 때문에 공통적인 태그를 기반으로 한다는 것이 유연성이 있다는 예기이다

페이지에 다음과 같이 두개이 div가 정의되어 있다면,
<div>First Div</div>  <div>Second Div</div>

다음과 같이 전체 div요소를 탐색할 수 있다
var element = document.getElementsByTagName("div");    

for(var i = 0; i < element.length; i++){
   alert(element[i].nodeName);  
}


document.getElementsByClassName
웹킷(webkit) 기반 브라우저에서 적용한 탐색 스크립트이다.
getElementByID의 경우 ID가 부여된 단 하나의 요소만을 탐색할 뿐이며 getElementsByTagName의 경우 동일 태그의 모든 요소를 반환한다. 만일 임의의 이름이 부여된 특정 그룹을 탐색하고자 할 경우 이 두가지만으로는 한번에 만족시킬 수 없다. getElementsByClassName 은 그 이름에서도 알 수 있듯이 className 이 부여된 요소(그룹)을 반환한다.

페이지에 다음과 같이 동일한 class가 부여된 div 요소가 정의되어 있다면,
<div class="myDivClass">First Div</div>
<div class="myDivClass">Second Div</div>

다음과 같이 class 명으로 div 요소 그룹을 탐색할 수 있다

var element1 = document.getElementsByClassName("myDivClass");    
    
for(var i = 0; i < element1.length; i++){
   alert(element1[i].nodeName);  
}

참고로 아래 그래프는 getElementsByClassName 과 이와 같은 기능을 xPath, 혹은 커스텀 스크립트로 개발할 대의 스크립트 속도차이를 보여준다. 브라우저 차원에서 제공하는 네이티브 getElementByClassName의 수행 속도가 현저히 빠르다는 것을 보여주고 있다


getElementsByClassName 은 현재 IE8(이하) 를 제외하고는 대부분의 브라우저에서 지원된다
그러나 이 함수는 HTML5 스펙에 포함되었으며 IE 버전 9 부터는 같이 지원될 예정이다


document.querySelectorAll
CSS Selector 규칙을 그대로 이용할 수 있는 방법이 생겼다
W3C 에서는 보다 유연한 탐색을 지원하기 위해 CSS 규칙을 기반으로 하는 Selectors API 를 표준화 시켰다
querySelectorAll 함수를 통해 CSS 탐색 규칙을 맘껏(?) 적용할 수 있다

페이지에 다음과 같이 div 안에 p 요소가 정의되었다고 가정할 때,
<div id="myDiv">
   <p>First paragraph.</p>
   <p>Second paragraph.</p>
</div>

다음과 같이 CSS 규칙을 이용하여 요소를 쉽게 탐색할 수 있다
var element = document.querySelectorAll("#myDiv p");

for(var i = 0; i < element.length; i++ ) {  
    element[i].style.backgroundColor = "red";
}

또한 querySelector 을 통해 특정 요소를 다음과 같이 탐색할 수 있다
var element = document.querySelector("#myDiv > p:first-child")
alert(element.nodeName);

중요한 것은 CSS 탐색 규칙 즉 CSS Selector 을 이용하여 보다 강력한 탐색이 가능하다는 점이다

참고로 querySelectAll 은 IE8 을 포함한 크롬, 사파리, 오페라, 파이어폭스에서 모두 지원하지만
다른 브라우저가 CSS 3 Selector 까지 지원하는 반면 IE8은 CSS 2.1 Selector 까지만 지원된다

다음의 링크를 통해 CSS Selector 에 대한 자세한 정보를 확인하자
- CSS 2.1 Selector
- CSS 3 Selector
- CSS Selector 상세 브라우저 지원 현황
- CSS 3 selectors explained


Selector 라이브러리를 통한 탐색
근래 웹을 개발하는 거의 모든 사람이 추천하는 jQuery, Prototype 과 같은 자바스크립트 라이브러리에서는 훌륭한 탐색 기능을 제공해 준다. 이들 라이브러리는 브라우저 호환성을 제공하고 빠른 수행 속도가 보장되기 때문에 그 사용이 권장되고 있는 추세이다. 다만 스크립트 해석이 한번 더 랩핑된 형태라 아무래도 브라우저 차원에서 제공되는 네이티브(Native) 보다는 수행속도가 조금 떨어지는 것은 사실이다
그러나 비용 대비 효과면에서는 충분히 수용할 만한 아니 그 이상의 성능을 보여주고 있기 때문에 권장된다
다음 그림은 각각의 탐색 API를 활용할 경우 수행 속도의 차이를 보여준다

출서: FireFox3.5의 DOM selectors API

다음 글은 탐색과 관련한 유용한 정보를 제공해 주니 읽어보기 바란다
참고: FireFox3.5의 DOM selectors API

728x90
HTML5, Canvas 에는 그려진 내용을 URL 문자열로 반환해 주는 함수가 제공된다

Canvas 객체의 toDataURL() 함수를 통해 캔버스에 그린 그림을 문자열 형태로 변환할 수 있는데,
이 문자열에는 이미지 MIME 타입과 인코딩 방법 그리고 인코딩 된 이미지 데이터 문자열이 포함된다

대략 다음과 같은 모습이다
https://t1.daumcdn.net/cfile/tistory/226CDB4956E6D5F802"FONT-FAMILY: Tahoma">그럼, 실제 Canvas 내용이 문자열로 변환된 것을 확인해 보자
아래 그림은 Canvas에 적당히 그림을 그리고 toDataURL() 함수를 이용해 URL문자열을 띄워 본 것이다


toDataURL() 로 반환된 것이 문자열이라는 것은 다음과 같이 타입조사를 해 보면 알 수 있다
alert(typeof canvas.toDataURL()); //string 이 출력됨

이 문자열은 Canvas에 그려진 내용을 Data URL로 변환한 것이기 때문에 그 자체로 이미지 정보가 된다

따라서 이 문자열을 이미지 객체에 바인딩하거나 다른 이미지로 생성할 수 있게 된다

Canvas 에 그린 그림을 이미지로 변환하기
한 가지 간단한 샘플을 만들어 보자.
Canvas 로 그린 내용을 문자열로 변환하여 img 요소의 src 로 사용하는 것이다
Canvas 에 그리기 작업을 수행하는 코드는 이전 글인 [HTML5] Canvas '마무로 데모' 코드를 이용하므로 구현 코드는 생략하도록 한다. 이 글에서는 Canvas 결과를 이미지 소스로 바인딩하는 것을 제시한다

다음 코드와 같이 Canvas와 버턴, 그리고 img 요소를 정의한다
Canvas에 그림을 그리고 버턴을 클릭하면 오른쪽 img 요소에 그 내용이 이미지 소스로 활용되는 예이다

<canvas id="drawCanvas" width="200" height="200" style=" position: relative; border: 1px solid #000;"></canvas>
<button onclick="toDataURL();">이미지로 변환=></button>     
<img id="myImage">
.....
<script type="text/javascript">
function toDataURL(){
  var myImage = document.getElementById('myImage');
  myImage.src = canvas.toDataURL();
}
</script>

데모를 실행하고 캔버스에 적당히 그림을 그린 후 이미지 변환을 클릭하면 오른쪽에 이미지가 표시된다
이렇게 생성된 이미지는 완전한 하나의 이미지 객체 이므로 로컬에 이미지로 저장하는 등의 이미지 작업이 가능하다


참고로 이렇게 생성된 이미지의 HTML 코드는 아래와 같다



Canvas 에 그린 그림을 다른 Canvas 로 복사하기
이번에는 Canvas에 그린 내용을 다른 Canvas로 옮기는 즉 복사하는 예를 살펴보자.
복사 방법이야 여러 가지가 있을 수 있겠지만 여기서는 toDataURL() 함수로 반환된 이미지데이터문자열을 이용해서 복사하는 방법을 알아보자

언뜻 생각하기에 toDataURL() 함수가 있다면 fromDataURL() 함수가 있지 않을까 생각이 든다
다시말해 캔버스 내용을 URL 문자열로 반환해 주는 함수가 있다면 역으로 URL 문자열을 캔버스 내용으로 사용할 수 있는 함수 말이다. 그런데 찾아 보니 그런 함수는 없어 보인다. 아쉬운 부분이다

그렇다면 우리가 직접 fromDataURL 함수를 만들어 보기로 하자
아래 코드와 같이 두 개의 Canvas를 정의하고 왼쪽 캔버스의 내용을 오른쪽 캔버스로 복사하기 위해 toDataURL()로 얻어진 문자열을 이미지 객체의 소스로 바인딩하고 이미지가 로딩될 때 복사 대상 캔버스의 drawImage 함수를 이용해 이미지를 그리는 로직이다.
<canvas id="drawCanvas" width="200" height="200" style=" position: relative; border: 1px solid #000;"></canvas>
<button onclick="fromDataURL();">캔버스 복사=></button>                  
<canvas id="copyCanvas" width="200" height="200" style=" position: relative; border: 1px solid #000;"></canvas>
...
<script type="text/javascript">
function fromDataURL(){       
  var copyCanvas = document.getElementById('copyCanvas');    
  var copyContext = copyCanvas.getContext('2d'); 
 
  var image = new Image();
  image.src = canvas.toDataURL(); 
 
  image.onload = function(){
    copyContext.drawImage(image,0,0);
  } 
}
</script>


데모를 실행한 결과 화면은 아래와 같다


어떻게 보면 fromDataURL() 함수는 끼워 맞춘 듯한 느낌이다
하지만 toDataURL()로 얻어진 이미지데이터문자열을 이런 형태로도 이용할 수 있다는 힌트만 가지면 되겠다

2010.11.24 추가>>
위에서, Canvas 그림을 다른 Canvas로 복사할 때 이미지객체를 생성하는 단계가 있었다
확인 해 보니, 이미지객체를 경유하지 않고 대상 Canvas에 원본 Canvas를 drawImage 해 주면 된다
따라서 단지 복사가 목적이라면 중간 경유로 사용된 이미지객체의 생성은 불필요 하겠다

fromDataURL 함수는 아래와 같이 수정하면 된다
function fromDataURL(){       
  var copyCanvas = document.getElementById('copyCanvas');    
  var copyContext = copyCanvas.getContext('2d'); 
  copyContext.drawImage(canvas,0,0);  
}


Canvas 내용을 문자열로 얻을 수 있다는 것은...
웹에서 다양한 시나리오를 구현할 수 있다는 의미가 된다
글에서 알아본 것과 같이 캔버스 내용을 이미지로 변환하여 로컬 컴퓨터에 저장할 수 있으며
또 다른 예로 캔버스 내용을 서버로 업로드 하여 다른 사람과 공유하거나 관리할 수 있게 된다
또한 캔버스 내용을 쿠키나 localStorage 등에 저장하여 계속 사용할 수 있으며 페이지 통신을 통해 두 페이지간 캔버스 내용을 교환할 수도 있다. 

결론적으로  문자열로 처리 가능한 모든 시나리오에 캔버스를 이용할 수 있다는 의미가 된다
다만 이렇게 생성한 이미지는 일반 이미지 파일과는 달리 브라우저에 캐시되지 않기 때문에
쇼핑몰 이미지 리스트와 같은 많은 이미지를 서버에서 불러와 캐시되는 시나리오에는 적합하지 않을 수 있다

자신만의 다양한 시나리오를 구상해 실현해 보기 바란다

....

참고로 toDataURL() 함수는 두개의 매개변수를 가지는데, 첫번째 인수는 이미지MIME 타입을 지정하는데 이용되며 나머지 인수는 이미지 품질 정도와 같은 추가 이미지 효과를 지정하는데 사용된다
이전 샘플과 같이 매개변수 없이 호출하게 되면 기본적으로 image/png 타입으로 설정된다
만일 jpeg 를 원한다면 다음의 코드가 가능하다

canvas.toDataURL("image/jpeg");

그러나 테스트를 해 보니 브라우저별로 지원되는 부분이 조금씩 다르니 참고하기 바란다

toDataURL 에 대한 더 자세한 내용은 다음의 W3C 스펙 설명을 확인 하자
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#todataurl-method

W3C, HTML5 도입 이르다?

Posted in 모바일/HTML5 // Posted at 2010. 10. 8. 11:51
728x90

오늘 연속적으로 기사만 두 건 포스팅하네..
W3C가 HTML5 행보에 찬물을 끼얹는 발언을 했구나!
이건 뭐.. 주최측이라고는 하지만.. 달라도 너무 다른거 아닌가...

기사원문: W3C "HTML5, 도입 이르다"... 브라우저 업체와 노선차이

사실 현재시점에 어느 누가 HTML5를 전면 도입 가능하다고 생각하고 있을까?

Mark Pilgrim 이 언급했듯이 HTML5는 한 덩어리의 기술이 아니다
HTML5는 여러 기술 스펙의 조합이며 최신 브라우저에서는 이미 많은 부분 적용되어 있는것이 현실이다

물론 아직 표준화가 완료되지 않아서 브라우저간 조금씩 상이한 구현과 향후 변경 가능성을 내포하고 있어 불완전하다는 측면은 분명 존재한다.

W3C의 발언이 이런 우려를 내비친 보수적인 입장이라는 점은 이해하지만 표준화를 주도하는 입장에서 굳이 이런 발언을 할 필요가 있나 싶다. HTML5 의 가능성과 빠른 표준화를 공표하고 그사이 발생할 수 있는 호환성 문제를 조심스레 제기하는 수준이라면 모를까... 마치 찬물을 끼얹는 듯한 발언에 아쉬움이 든다

기사 중 다음의 글에 공감한다

일부 웹 전문가들은 기술이 표준화되기 이전에 이미 업계에 널리 확산돼 실용성을 검증받는 과정이 자연스러운 수순이라는 입장이다

 

자바스크립트 메뉴를 추가하며...

Posted in 모바일/Javascript // Posted at 2010. 10. 7. 18:05
728x90
자바스크립트 메뉴가 '기타 웹 스킬' 로 변경되었습니다

블로그에 자바스크립트 메뉴를 추가할 지 고민이 되었다

이미 많은 메뉴가 있고 그 메뉴의 글에서 적당히 자바스크립트를 다루면 되겟다 싶어서이다
사실 고백하자면, 그간 자바스크립트라는 언어에 대한 가치(?)를 낮게 평가했었다

2000년대 초반 한창 웹 개발을 하던 시절 나름대로 자바스크립트를 자유자재로 구사한다고 착각한 적이 있었다. 그도 그럴 것이 웹 페이지에 동적인 효과를 주기 위한 많은 스크립트를 직접 다루었으며 나름대로 만족할 만한 수준의 결과가 냈기 때문이다

그러나 지금 돌이켜보면 참으로 황당한 착각이다
당시 대부분의 스크립트는 JASKO와 같은 스크립트 소스 제공 사이트나 유사 기능이 구현된 다른 사이트의 소스를 참조하여 개발했다. 물론 그 소스들이 요구하는 기능과 정확히 매칭되지 않았지만 적당한 수준의 수정으로 원하는 기능을 구현할 수 있었다. 당시 이것을 커스터마이징이라 불렀다. 어이 없게시리...

언어에 대한 체계적인 지식없이 소스를 가져와서 적당히 수정하고 몇 차례 테스트하고 완성했다는 자부심을 가지다니.. 10년이 지난 지금 돌이켜보니 참으로 어이가 없다

아마 많은 웹 개발자들이 이와 같은 경험을 했을 것으로 안다. 그리고 나와 유사한 착각도 가졌으리라 본다.
이런식의 스크립트 오용은 버그를 양산할 가능성이 크며 브라우저 호환성을 철저히 무시하는 결과를 자주 보인다. 그리고 잠시나마 스크립트의 동적효과에 매료되어 사용을 난무하게 되고 결국 의도와는 달리 사용자에게 외면받는 결과를 초래하기도 한다. 수 많은 오픈 창과 얼럿창, 이리지러 움직이는 효과들을 상상해 보라... 

그리고 왠지 자바스크립트는 누구나 쉽게 할 수 있는 코드 블럭 쯤으로 생각해서 언어로써의 수준을 낮게 평가했었다. 프로그래머라면 다 알 것이다. 마치 출신 성분을 구분하듯이 프로그래밍 언어별로 조금 씩 서열이 있다는 것을.. (언어 서열 착각은 이 글과는 다른 주제지만 역시 매우 황당한 착각이다. 혹시 누군가 그런 생각이 있다면 집어 치우기 바란다. 요즘 시대에... ㅎ)

그간 등한시(?) 했던 자바스크립트를 본격적으로 그리고 체계적으로 공부하고 싶어졌다
모바일 웹, 표준 웹, HTML5 에 관심을 두게 되면서부터 스크립트의 중요성을 다시 한번 깨닫게 되었고 높은 수준의 웹을 개발하기 위해서는 높은 수준의 스크립트 개발실력이 갖춰져야 한다는 생각이 들었다
블로그에 메뉴를 추가한 이유도 바로 이것이다

이 메뉴에 많은 글을 올리지는 못해도 중요한 몇 가지는 정확히 알고 포스팅 해 볼까 한다

마지막으로 꽤 오래된 기사지만, MSDN에 자바스크립트와 관련한 좋은 글이 있어 링크 걸어 둔다
=> 개체 지향 기술을 이용한 고급 웹 응용 프로그램 만들기

위 MSDN 컬럼의 필자가 언급한 스크립트에 대한 경험이 매우 와 닿아 몇자 옮겨 본다

많은 개발자들이 C/C++/C#에 대해 알고 있거나 프로그래밍 경험이 있다는 이유만으로 자신이 JavaScript에 대해 많은 것을 알고 있다고 착각하곤 합니다. 필자 역시 최근까지 그러했습니다

사실 최근까지도 필자는 JavaScript에 대한 짧은 지식과 MSDN® DHTML 참조, 그리고 C++/C# 경험을 활용하여 필요한 작업을 수행할 수 있었습니다. 필자의 JavaScript 실력이 부족하다는 것을 느끼게 된 것은 현실적인 AJAX 응용 프로그램을 작성하기 시작하면서부터였습니다. 이 신세대 웹 응용 프로그램의 복잡성과 상호 작용성은 JavaScript 코드를 작성하는 데 있어 완전히 다른 방식을 요구하고 있습니다. 이것은 본격적인 JavaScript 응용 프로그램이며 지금까지 스크립트를 작성하던 느슨한 방법으로는 이러한 응용 프로그램을 작성
할 수 없습니다.


필자는 스스로 원해서 JavaScript를 배운 것은 아니었으며 JavaScript를 사용하지 않고 현실적인 AJAX 응용 프로그램을 개발한다는 것이 불가능하다는 것을 깨달은 후에야 배우기 시작했습니다. 처음에는 필자의 프로그래머 수준이 몇 단계가 떨어지는 것이 아닌가 하는 생각도 들었습니다. (JavaScript라니! C++를 사용하는 친구들이 뭐라고 말할까?) 그러나 처음 가지고 있던 거부감을 떨쳐내자 JavaScript가 상당히 강력하고 인상적이며 콤팩트한 언어라는 사실을 깨달았습니다.