모든 소프트웨어에 붙여진 이름은 나름의 의미와 가치를 내포하고 있다.
훌륭한 프로그래머는 변수이름 하나도 쉽게 정하지 않는다고 하는데 완제품이야 더 말할 것도 없다

아침에, 웹 브라우저 `3라운드` 기사를 보면서 역시 독점보다는 경쟁이 발전을 부추긴다는 생각을 확인하게 된다. 기사와 관련은 없지만 문득 각 브라우저들의 로고의 의미가 궁금해 졌다. 더불어 그 이름의 유래도...

현재 5대 웹 브라우저는 다음과 같다
- 마이크로소프트, 인터넷익스플로어
- 모질라, 파이어폭스
- 애플, 사파리
- 구글, 크롬
- 오페라, 오페라브라우저




우선 마이크로소프트 인터넷익스플로어의 경우 그 이름과 로고의 의미가 단순,직관적이다
전자통신, 인터넷을 뜻하는 접두어 'e' 를 행성띠와 같이 둘러싼 모습이다
이름 역시 터넷탐색기,탐험가 정도의 무난한 해석이다. 이름과 로고의 의미를 해석하고 자시고 할게 없다
직관적이나 개성은 전혀 없다고 하겠다

다음으로 직관적인 것은 오페라이다
오페라소프트웨어는 브라우저만 만드는 특이한(?) 회사다. 간혹 이 회사는 뭘로 그렇게 잘 먹고 살까? 하는 생각도 해봤다. 모바일 장치에 점유율이 꽤 높은건 알겠지만, 그래도 굉장히 독특한 회사로 보인다
오페라 브라우저는 제품명과 제품 로고를 회사의 그것과 그대로 일치시킨 예이다.
다음의 블로그에서 오페라라는 회사의 면면을 엿볼 수 잇다 => 웹브라우저 ‘오페라’를 아시나요?

그 다음으로는 애플의 사파리를 보자.
사파리 하면 언뜻 야생동물 탐험 여행이 떠오른다. 사파리라는 어원 역시 '여행' 이라는 뜻이다
수렵과 탐험을 위한 원정 여행이라는 뜻의 '사파리'는 인터넷의 이곳 저곳을 탐험하고 여행하는 의미로 해석될 수 있겠다. 로고 역시 탐험에 어울릴법한 나침반 모양을 하고 있다

다음으로 구글의 크롬이다
크롬(chrome) 을 사전에서 찾아보면, 크롬이라는 금속으로 나온다. 웹 브라우저로써의 크롬과 연결고리를 찾기기 쉽지 않다. 해서 찾아보니 다음의 블로그에서 그 유래를 알 수 있었다
=> [구글 크롬] 이름과 로고의 탄생 배경~!!!!

브라우저를 디자인할 때 사용된 개발자간의 공용 명칭이 제품명으로 자연스레 녹아든 사례라 하겠다
또한 위 블로그를 보면 크롬 로고에 대한 몇 가지 해석이 있다. 그 중 매우 설득력(?) 있고 재미있는 유래에 대한 그림은 아래와 같다 ㅎㅎ. 마이크로소프트의 윈도우가 탐탁치 않아 다시 조물딱거려서 만든 것?



마지막으로 모질라의 파이어폭스를 보자. 이름과 로고가 가장 private한 의미를 지녔다 할 수 있다

평상시 잘 몰랐지만 오늘 자세히 들여다 보니, 지구에 붉은 여우가 둘러 앉아 있는 모습이구나.
파이어폭스? 단어 해석 그대로 하면 '불타는 여우'? 이다. 또는 '불여우' 이다
왜 여우라는 동물을 제품명과 로고에 사용된 것일까? 아래 블로그에서 그 유래를 알 수 있다.
=> 'Firefox'는 왜 '불여우'인가?

Thunderbird(천둥새) -> Phoenix(불사조) -> Firebird(꾀꼬리, 하지만 불사조와 유사한 의미로 사용) -> Firefox 로 이어진 이름의 변천사를 엿볼수 있다
게임사이트에서 웹 런처는 거의 필수에 가깝다.
이것은 인식의 문제가 아니라, 게임과 웹의 시너지를 통해 게임 이용 전반의 생태계 조성에 필요하기 때문이다.

표준과 멀티 브라우저 시대가 열렸지만, 국내는 여전히 IE 가 절대강자로 군림하고 있다.
이 말은 적어도 아직까지는 국내 대상 게임서비스에서 웹 런처를 위한 ActiveX 사용을 할만(?) 하다는 것이다
(그래서 필요악이다)

문제는 해외 서비스에 있다. 해외는 갈수록 IE 점유율이 떨이지고 있다.
해외 게임사이트에 웹 런처를 고려 한다면 브라우저 호환성은 보다 심각한 문제가 된다.

이와 관련하여 넥슨의 사례를 보고자 한다.
넥슨 사이트 역시 웹 런처를 제공한다. 하지만 ActiveX 설치는 존재하지 않고 심지어 4대 브라우저를 모두 지원한다. (IE, 파이어폭스, 사파리, 오페라)

신기하던 차에 살짝 살펴보니, 웹 런처를 브라우저별 플로그인 기술로 구현된 듯 하다
그리고 플래시를 통해 설치된 플러그인 파일을 실행시키는 구조이다

즉 IE는 여전히 내부적으로는 ActiveX를 이용하고 있는 것이다. 
그러나 명시적으로 ActiveX 설치는 없는 방법으로.....

설치 및 구동방식을 대략 살펴 보면,
1) 먼저 Setup.exe 파일을 수동으로 다운로드해서 설치해야 한다. 여기서 뭔가 감이 잡힐 것이다.
   브라우저에서 ActiveX 를 바로 설치하는 것이 아니라 수동 설치 과정이 필요한 것이다.
   이 수동설치를 통해 내부적으로 ActiveX가 설치되는 것이다



2) 이후 플래시로 만든 웹 런처 버턴을 클릭하면 수동으로 설치된 ActiveX가 실행되는 것이다
 알아본 바로는 플래시의 fscommand 기능을 통해 브라우저 플러그인 실행파일을 구동시킬 수 있다고 한다.   



재미있는 구조다. IE에 설치된 ActiveX는 브라우저의 추가기능관리에서 확인할 수 있다
그리고 이 파일의 위치는 아래와 같다
'C:\Documents and Settings\All Users\Application Data\Nexon\NGM'
아마도 플래시에서 접근하기 위한 영역이 필요하지 않았나 싶다



다른 브라우저를 보면 브라우저 확장기능인 플로그인으로 등록된 것을 확인할 수 있다
아래 그림은 파이어폭스에 설치된 플러그인 화면이다


그리고 아래는 구글 크롬에 설치된 모습니다



브라우저별 플러그인 기술을 각각 개발해야 하는 것인지 ActiveX 를 수동으로 설치하는 과정으로 모든 브라우저에서 가능한지 실제 구현 및 운영상 치명적인 단점은 없는 지 등 등 구체적인 내용은 아직 파악되지 않았으나 두 가지 중요한 힌트를 얻을 수 있는 좋은 기회였다

1) 웹 런처의 브라우저 호환성을 확보할 수 있다 
   호환성을 위한 최적의 방법론은 아닐 수 있으나 하나의 주요한 대안이 될 수 있다

2) 구현 측면에서 플래시를 이용하면 ActiveX 로 제작된 실행파일을 구동시킬 수 있다

이 방법이 좋고 나쁨이나 맞고 틀림, 혹은 꽁수이냐 등을 떠나서,
해외 서비스를 위한 웹런처 구현에 한쪽 눈을 트이게 한 좋은 소식이다

이 서비스에 대한 더 자세한 구현 방법론을 아는 분이 있다면 과감하게 댓글로 알려 주기 바란다~

필요악? ActiveX

Posted in 모바일/모바일 플랫폼 // Posted at 2010. 11. 25. 13:51
마이크로소프트의 ActiveX 는 언젠가부터, 그리고 요즘은 더욱더 비판받는 존재이다.

비판의 시작은 ActiveX의 보안 취약점 때문이었다. 다시 말해 ActiveX의 너무 과도한 권한이 문제였다.
순진한 사용자들은 ActiveX가 뭔지도 몰랐다. 그냥 설치하라니깐, '해야 되나 보다' 했다
그리고 이렇게 설치된 ActiveX를 통해 사용자 PC에서 못된 짓(?)을 하는 사례가 늘어났다

그 다음은 호환성 문제
요즘과 같이 멀티 디바이스, 표준을 외쳐대는 시류에 IE 에서만 가능한 ActiveX는 완전 찬밥 신세다
찬밥을 넘어 굉장한 비판 대상이 되고 있다. 불쌍하게도 ActiveX는 자신을 개발 해 준MS에게게도 버림받을 상황이다

간혹 이 두 개념이 혼재되어 혼란을 야기시킨다.
ActiveX를 왜 반대하는가? 보안 취약점 때문인가 아니면 호환성 때문인가?
아마 둘다라고 하는 사람이 많을 듯 하다. 근데 간혹 이 두 개념이 혼재되어 원인과 결과가 이상하게 흐르기도 한다.

예로, ActiveX의 대안 중 하나라고 하는 Signed Applet 은 어떤가? ActiveX의 대안으로 심심찮게 언급되고 있다. 근데, 이 역시 웹의 특징을 넘어서는 권한을 가지려 한다. Signed Applet과 같은 대안 기술이 호흥을 얻는 이유는 바로 호환성이다. IE 뿐만 아니라 다른 브라우저에서도 자바 애플릿이 구동되기 때문에 대안기술로 등장한 것이다. 즉 여기서 대안이라는 측면은 보안성과는 무관하게 호환성에 초점이 맞춰진 것이다.


일단 보안 부분은 이렇다. 핵심은 웹의 샌드박스 보안 모델로 인한 제한적인 권한이다. 일반 웹 기술로는 로컬 PC 자원에 액세스 할 수 없다. 게임런처와 같은 ActiveX는 로컬 PC의 자원에 접근해야 하는데 방법이 없다. 그래서 얼씨구나 ActiveX 했다. 즉 핵심은 ActiveX가 아니라 로컬자원에 대한 권한이다. ActiveX와 Signed Applet 모두 웹의 샌드박스 이상의 권한을 부여받을 수 있기 때문에 사용하는 것이다.
그리고 절대 다수 IE 사용자들의 환경에서 ActiveX는 자연스러운 선택이었던 것이다.

이제 시대가 많이 변해서 호환성이 큰 이슈가 되고 있다.
웹 표준의 중요한 원칙도 호환성을 위한 표준 정립이다. 이런 환경에서 ActiveX는 정말 골치거리가 아닐 수 없다. 재미있는 것은 플래시나 애플릿 역시 어느정도 호환성은 보장되지만 그 역시나 웹 표준은 아니다.
즉, IE 만 가능한 ActiveX와 다른 브라우저에서 가능한 애플릿,플래시의 차이일 뿐이다.

결과적으로 간혹 ActiveX 는 애매한 해석으로 공격 당하고 있는 느낌이 든다.
(나 역시 반 ActiveX 주의자다. 말하고자 하는 것은 해석의 혼란에 있다)

그러나 개발자라면 이런 해매한 해석의 내면을 아는 사람이 꽤 많을 것이다.
문제는 트랜드를 외치는 사람들, 그리고 일반 사용자들의 애매한 해석을 꼬집고 싶다.


게임회사에 일하다 보니 웹런처로써의 ActiveX가 말그대로 필요악일때가 많다.
근래 새로운 게임 포털을 구상하는 단계에서도 이 문제는 여전히 대두되고 있다.

웹을 통한 게임 접근성의 향상과 웹의 활성화를 위해 웹 런처는 거의 필수에 가깝다.
웹런처이다!!! 즉 ActiveX가 필요한게 아니라 웹 런처가 필요한 것이다
그런데 이런 웹 런처가 가능하기 위해서는 웹의 보안 한계를 넘어서는 뭔가가 필요하다
그것이 바로 ActiveX이다(혹은 Signed Applet과 같은 것이다)

국내 사용자만을 생각한다면 더 말할 것도 없이 ActiveX 다. 외국에 비해 국내은 아직까지 IE 사용자들이 절대 다수이다. 그러나 해외를 염두한다면 상황은 달라진다. 간단하게 그냥 다운로드 시켜서 독립 exe로 하겠지만, 역시 문제는 웹의 활성화가 걸림돌이다. 여기서 호환성 대안 기술을 고려해 볼 수 있다

결국 게임으로의 접근성을 향상시키고 웹의 활성화를 위해 웹 런처가 필요악에 가깝다
그러나 사양기술인 ActiveX 를 고집하는 것도 왠지 꺼림직하다. 또한 표준화, 접근성, 호환성, 범용성이 중시되는 정신 문화에 좋은게 없는 것도 사실이다.

오늘 이런 글을 봤다.
ActiveX 와 게임회사의 공생관계.

글과 댓글을 매우 흥미롭게 읽었으며 느끼는 바가 있다.
현실과 이상의 문제라고 봐야 하나? 아니면 얻는게 있으면 잃는게 있다는 양면성의 문제인가?
그도저도 아니면 웹의 본래 철학을 넘어 서버린 ActiveX의 태생 자체가 문제였던가?
혹은 웹이 네이티브의 그것과 같이 동작하기를 바라는 비즈니스의 문제인가?


음.. 공생하고 공론해야죠. 상생인가? ㅎ


IE 8, 웹 조각(Web Slices)

Posted in 모바일/모바일 플랫폼 // Posted at 2010. 11. 11. 16:41

인터넷이 조각으로 배달된다?
IE9가 주목받는 요즘 IE8에 추가 된 기능을 언급하려하니 좀 늦은감이 없지 않다
하지만 이전에 소식으로만 접했던 IE8의 웹 조각을 다시 음미(?)해 보니 꽤 쓸만한 도구로 보인다

IE8의 웹조각은 그 이름에서 유추할 수 있듯이 웹을 조각으로 관리할 수 있는 기능이다
다시말해, 웹 페이지 중 일부 영역을 따로 떼어 그 부분만을 구독할 수 있게 해 준다

뉴스나 증권정보, 날씨정보와 같이 주기적인 업데이트가 필요한 콘텐트에 적용하기에 알맞은데,
사용자 입장에서, 그 내용을 확인하기 위해 매번 해당 웹사이트로 이동하는 불편을 해소해 준다.
웹조각을 설명한 (별로 재미는 없는) 만화가 제공된다. 아래 그림을 클릭해서 크게 보기 바란다


(출처: Internet Explorer 8 만화 5편 “웹조각")


사용자 입장, 웹 조각 사용하기
웹 조각은 사용자 편의를 위해 제공되는 IE8의 새로운 기능이다.
마치 특정 기능을 구현해 독립적인 작은 프로그램 형태로 제공하는 위젯과 유사한 기능이다.
일종의 IE8 즐겨찾기 위젯이라고도 할 수 있겠다

방문한 웹 사이트에서 웹 조각을 제공하면, IE8 도구모음에 있는 웹조각 아이콘이 활성화된다. 또한 웹 페이지의 웹 조각영역에 마우스를 올리면 역시 웹조각 아이콘이 활성화 된다. 아래 그림은 PlayNC 의 예이다
 


이렇게 활성화 된 웹조각 아이콘을 클릭하면 웹조각을 즐겨찾기에 추가할 수 있다. 이후 업데이트 되는 정보는 사이트에 직접 방문하지 않고 즐겨찾기 모음에 추가된 웹조각을 통해서 받아볼 수 있게 된다



개발자 입장, 웹 조각 적용하기
웹 조각은 웹 사이트를 운영하는 측에서 제공해야 이용할 수 있는 기능이다
따라서 사이트를 개발할 때 웹 조각을 위한 (매우 간단한) 코드가 정의되어 있어야 한다
아래는 가장 간단한 형태의 웹 조각 정의이다

<div class="hslice" id="myWebSlice">
  <div class="entry-title" style="display:none">새소식 제목</div>
  <div class="entry-content">
    <a href="http://m.mkexdev.net">새소식 내용</a>
  </div>
</div>

태그의 class 특성을 정의하면 IE8 브라우저는 이를 웹 조각으로 해석하게 된다
hslice는 하나의 웹조각 영역을 뜻하며 entry-title 와 entry-content 는 웹조각에 표시될 제목과 내용을 뜻한다

여기서 지정한 제목이 즐겨찾기에 표시되는 타이틀 제목이 되며, 예에서 숨김 처리를 한 것은 굳이 본문에 제목이 표시되지 않아도 되기 때문이다(이것은 선택이다. 제목도 웹 조각 본문에 포함되기 원한다면 보이게 하면 된다)

그리고 웹 조각은 한 페이지에 여러 개 존재할 수 있다. 다만 ID를 반드시 다르게 해 주어야 한다.
IE8이 웹 조각을 인식하는 기준은 아래와 같은 URL이기 때문에 ID를 중복해서 지정할 수 없다 
따라서
웹조각 마다 각기 다른 ID를 부여해야 하며 ID만 다르다면 여러개의 웹 조각을 정의할 수 있다
http://domain/slice.html#myWebSlice

참고로 제목은 중복될 수 있지만, 즐겨찾기 항목에 동일 제목이 나열되므로 중복되지 않게 하는 것이 좋다

더불어 웹 조각 적용시 기본 크기에 따른 최적의 콘텐트 구성, 웹 조각 링크 수동 제공, 웹 조각을 위한 인증처리 등 더 세밀한 프로그램 작업이 가능하다. 이 부분은 관련 자료를 찾아보기 바란다


웹 조각, 업데이트 알림
웹 조각의 가장 큰 장점 중에 하나는 업데이트 된 정보를 쉽게 취득할 수 있다는 것이다
IE8은 웹 조각 콘텐트를 일정한 주기로 확인하여 업데이트 여부를 시각적으로 알려 주는데 아래와 같이 그 주기를 설정할 수 있다(기본: 15분)
고급설정에서는 웹 조각에 대한 보다 섬세한 설정을 할 수 있으니 참고해 보기 바란다



업데이트를 인지하는 기준?
웹 조각이 업데이트를 인지하는 기준이 뭘까?
일반적으로 웹 브라우저가 서버의 파일 변경을 감지하기 위해서는 HTTP 헤더 정보를 참조한다
즉 HEAD 요청을 통해 해당 파일의 헤더에 있는 수정 날짜가 기준이 된다
브라우저가 웹 파일을 캐시하는 것도 이런 매커니즘이 적용된다

그러나 웹 조각은 파일이 아니라 파일 내 특정 영역에 대한 업데이트이다
개념적으로는 파일의 수정 날짜가 아니라 웹 조각 영역에 대한 변경이 감지되어야 하는데 간단하게 테스트를 해 보니 일관성이 없어 보인다. 파일 변경에 따른 업데이트는 명확히 알려 지는 반면 (파일 변경을 수반하지 않는) 웹 조각 영역내의 변경은 알림이 지연되는 느낌이다. 그러나 이것은 웹 조각의 정신(?)에 위배되지 않는가..

바빠서.. 더 이상의 테스트는 그만 두고, 다음에 알아 보기로 한다
이 테스트에 사용된 코드는 아래와 같이 매우 간단한 날짜 업데이트 코드이다
즉 파일은 더 이상 수정되지 않은채 내부적으로 내용만 업데이트 되도록 하였다

<div class="hslice" id="notice">
  <div class="entry-title" style="display:none">새소식 제목</div>
  <div class="entry-content">
    현재시간: <%=Now() %>   
  </div>   
</div>

급 추가>>>
이런, 이 글을 쓰고 저장하려고 하는 시점에, 웹 브라우저에서 업데이트 알림을 보내 왔다.
그리고 이후 쭈욱 지켜보니 나름대로 일관되게 알림을 보내준다. 이전 테스트는 내 마음이 급해서 인가 보다.

.. 위의 코드, 즉 웹 조각 영역에 있는 내용에 대한 업데이트도 제대로 알림이 되는 것을 확인 하였다
그렇지. 이렇게 되어야 웹 조각의 알림이라 할 수 있겠지... 괜찮은 웹 조각 ㅎㅎ


웹 조각의 범용성?
IE8에 도입된 웹 조각이 꽤 쓸만한 도구로 보이지만 가장 문제는 범용성이다
IE8 이상의 브라우저에서만 가능하기 때문에 요즘처럼 표준과 범용성이 중시되는 환경에서는 큰 단점이다

파이어폭스3 에서도 IE8의 웹 조각을 수용하기 위해,
웹청크(WebChunks, https://addons.mozilla.org/ko/firefox/addon/8494/)라는 것을 선보였다
IE8의 구현을 그대로 계승할 수 있어 두 브라우저의 범용성이 보장되는 셈이다.
그러나 현재 최신 버전의 파이어폭스(3.6.12)에서는 이 확장 기능이 설치 되지 않는다
 
그리고 맥의 사파리에도 이와 유사한 개념의 '웹클립' 이라는 위젯이 제공되는데
 개념적으로만 유사할 뿐 적용 방법과 기술이 달라 범용적으로 적용하기 힘든 구조이다

오페라의 경우 웹조각을 구현한다는 썰이 있는데 단지 루머수준에 머물러 있는 듯 하다
Rumor: Opera 10 to Include Web Slices

결국 웹 사이트의 사용성을 증대 시킨 '웹 조각'은 그 자체로는 유용한 면이 있지만,
실제 현업에서 적용하기에는 범용성이라는 걸림돌에 부딪히게 되는 것이다

만일 대상 고객이 IE에 한정되어 있거나 IE 사용자들에게만 부여되는 옵셔널한 기능이라면 적용할 만한 가치가 있겠다

ps. 글이 매우 급하게 작성되었다. 정신적으로 여러 현안이 겹쳐 있어 이 주제에 집중하기가 힘들다
내용에 오류가 있다면 즉시 지적 바란다

HTML5 개발을 도와주는 도구들

Posted in 모바일/HTML5 // Posted at 2010. 11. 1. 10:38

소프트웨어 개발의 생산성은 개발 도구에 많이 의존한다.
흔히 개발도구는 삽 대신 포크레인으로 땅을 빠는 것과 비교된다. 그 만큼 개발 효율성을 높인다는 예기이다

HTML5 기반의 개발 역시 우수한 도구가 지원되면 개발의 생산성 향상은 물론이며 아직 표준이 완성되지 않아 업계 불안감이 내재된 특수성에도 긍정적인 효과를 줄 수 있다.

이 글에서는 지금까지 발표된
HTML5 개발 도구들을 정리해 볼까 한다

Adobe Edge
얼마전 블로그를 통해 소개했었다. 어도비에서 HTML5 개발 플랫폼을 공개했다.
기존 툴에서의 컨버팅 내보내기 같은 포팅 기능이 아니라 자체적인 HTML5 개발툴이다.
아직 본 모습은 보지 못했지만 개인적으로 매우 기대하고 있는 툴이기도 하다
: 어도비, HTML5 디자인 개발툴 엣지(Edge) 공개
: Adobe vows the "best" HTML5 tools

Flash To HTML5
아이폰 등장으로 가장 곤혹을 치런 것은 플래시이다. 잡스의 공공연한 비판과 HTML5 지원세에 어도비가 좀 흔들렸드랬다. HTML5 등장으로 가장 민감했을 것 같은 플래시가 HTML5 변환 기능을 제공하기로 했다
: 어도비, 플래시→HTML5 변환툴 공개
 

일러스트레이트, HTML5 Pack
얼마전 작성했던 원소스 멀티플랫폼을 위한 기술적 현황 에서도 소개한 바 있다
일러스트레이트에서도 결과물을 HTML5 관련 기술로 변환하는 일종의 포팅기능을 제공하기로 했다
: 어도비 일러스트레이터, HTML5 Pack 배포


드림위버, HTML5 Pack
웹 페이지 개발 도구로 꽤 유명한 어도비의 드림위버에서도 HTML5를 지원한다
HTML5 문서 타입과 태그를 지원하며 HTML5 기반 동영상 표현을 위한 확장 위젯도 제공된다
: 어도비, HTML5 지원에 날개를 펴다


Aptana Studio
개인적으로는 잘 몰랐지만 웹 클라이언트 개발자들에게 꽤 유명한 개발툴인 Aptana 에서도 HTML5 개발을 지원하게 된다. HTML5 용 태그의 자동완성과 브라우저 지원현황 등이 표시된다
: Aptana, HTML5를 지원하는 웹 개발 툴


Sencha Animator
HTML5 스펙과 조금 무관할 수 있으나 CSS3 역시 HTML5 계열(?)로 종종 같이 소개된다
CSS3 기반의 에니메이션 제작 툴이다.
: CSS3 애니메이션 생성기 - Sencha Animator


기타 (개발을 도와주는 유틸리티)
직접적인 개발 툴이나 포팅툴은 아니지만 HTML5기반 콘텐트 개발시 유용하게 사용될 많은 유틸리티가 제공된다.
이 블로그에서도 한번씩 언급한 내용이지만 다시 한번 모아 둔다
: jQuery Visualize, HTML5 차트 라이브러리 소개
: RGraph, HTML5 그래프 라이브러리 소개
: Modernizr 라이브러리: HTML5, CSS3 새요소 지원여부 검사
: Raphael, 자바스크립트 (벡터) 그래픽 라이브러리
: Gordon, 자바스크립트로 만든 플래시 런타임


여기까지가 개인적으로 알고 있는 HTML5 관련 개발툴이며 미처 소개하지 못한 다른 제품도 있으리라 본다.
중간중간에 새로 알게 되는 유용한 개발도구가 있다면 계속해서 블로그에 추가할 예정이다

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

CSS3 3D Effect  (0) 2013.08.02
...  (0) 2013.07.23
주요 브라우저 HTML5 지원 점수  (0) 2010.10.27
어도비, HTML5 디자인 개발툴 엣지(Edge) 공개  (0) 2010.10.26
[CSS3] Media Queries  (0) 2010.10.25

[jQTouch] Demos 훓어보기

Posted in 모바일/Javascript // Posted at 2010. 10. 28. 15:10
이전 글([jQTouch] Extensions (확장기능))에 이어 이번에는 jQTouch가 제공하는 Demo를 살펴보자
역시 데모를 따라 제작하기 보다는 데모에서 사용된 코드와 흐름을 간략히 분석하는 것으로 훓어보자.

총 두개의 데모가 제공되는데, Clock app 과 To-Do app 이다. 이 두 데모는 각각 세계시간과 할일 목록을 관리하는 앱이다. 데모에서는 jQTouch 기반으로 작성되었으며 jQuey를 이용해 로직을 정의하였다

무엇보다 데모의 유용성은 jQTouch기반 웹앱의 아이디어를 보여준다는데 있다.
즉 코드의 구성보다는 웹앱에 걸맞는 jQTouch 앱의 사례를 보여준다는데 의미가 더 크다.

jQTouch가 모바일 웹앱에 초점을 맞춘 만큼 이 두 데모도 데스크탑보다는 스마트폰에서의 활용도가 높은 특징을 보여준다. 모쪼록 jQTouch를 이용하는 개발자들도 이 데모로 출발하여 가치있는 웹앱에 도전해 보기 바란다.

Clock app
GMT를 기준으로 세계시간을 표시하는 시계앱이다. 참고로 GMT는 영국의 그리니치 천문대를 중심으로 한 시간대로 그리니치 평균시라하며 대한민국의 경우 그리니치 평균시 보다 9시가 빠른 GMT+9 시간대에 속한다.

먼저 UI 구성을 살펴보면,
아래와 같이 시계 표현을 위한 각각의 이미지들이 존재하며 clock.css에서 div요소와 이미지를 매칭시키고 있다.



최초 시계구성은 addClock 함수에서 div 요소를 생성하는 것으로 처리하며 시간이 흘러가는 것은 updateClocks 함수가 1초마다 반복실행되면서 처리하도록 한다. 이때 시계의 분침,시침,초침등의 움직임은 CSS3의 transform 기능으로 정의하였다
...
$('.sec', $el).css('-webkit-transform', 'rotate(' + ( second * 6 ) + 'deg)');

앱이 처음 실행될 때 기본값으로 두 개의(필라델피아,로스앤젤레스) 시계가 표시되며 setInterval() 을 통해 매 1초마다 시계를 갱신시킨다
addClock('Philadelphia', -5.0);      //필라델피아 시계 초기화
addClock('Los Angeles', -8.0);     //로스앤젤레스 시계 초기화
updateClocks();                          //시계 업데이트
setInterval(updateClocks, 1000);  //매 1초마다 갱신

그리고 시계를 추가하기 위해 폼(form)을 이용하는데, 이전 글([jQTouch] GET, POST 전송) 의 POST로 submit 하는것이 아니라 자체 스크립트 호출로 처리하고 있다
<form id="time"> ..... </form>

$('#time').submit(function(){
                    addClock($('#label').val(), Number($('#timezone').val())); //시계추가
                    $('input').blur();                                                            //포커스 제거
                    $('#add .cancel').click();                                                 //cancel 클릭
                    this.reset();                                                                  //폼리셋
                    return false;
                });

아래 화면은 데모를 실행한 화면이며 각각 처음화면, 시계추가, 추가된 화면이다
 
 


소스가 비교적 어렵지 않으니 직접 살펴보고 음미(?)해 보기 바란다


To-Do app

두번째 데모는 '할일 목록'을 관리하는 앱이다.
우선 데모 실행화면부터 보자.아래 실행화면을 보면 지금까지 스타일로 사뭇 달라 보인다.


이 데모에서는 기본 jQTouch 화면과 다른 스타일을 위해 css에 많은 할애을 하고 있는 것이 특징이다. 
특히 타이틀바와 중간영역에 있는 짙은 밤색 처리는 백그라운드 이미지로 처리하였는데 이미지파일이 아닌 이미지 데이터 문자열로 처리하고 있다.
toolbar { background: url(https://t1.daumcdn.net/cfile/tistory/256CA34056E6D64F1D"FONT-FAMILY: Tahoma">  }

나머지는 일반적인 CSS 스타일 지정이며, 이와 같이 얼마든지 앱스타일을 변경할 수 있다는 것을 느끼면 되겠다

할일 목록을 추가하는 것은 submitForm 함수에서 처리하는데, incomplete 라는 ul 요소에 li를 새로 추가하는 로직이다. 앞의 체크박스도 같이!
function submitForm(){
        $el = $('#add form');
        if ($('#todo', $el).val().length > 1) {
            var itemid = $('#home ul li').length + 1;
            $('#home .incomplete').append($('<li><input type="checkbox" /> <span>' + $('#todo', $el).val() + '</span></li>'));
         }
          jQT.goBack();
          $el.get(0).reset();
          return false;
}

할일 앞의 체크박스를 클릭하면 to do 와 completed 사이를 오가는데 다음과 같은 코드로 처리한다
$('input[type="checkbox"]').live('change', function(){
          var $el = $(this);
          if ($el.attr('checked')) {
              $el.parent().prependTo('.complete');
          } else {
              $el.parent().appendTo('.incomplete');
          }
});

참고로 Completed 하위 목록은 가운데 줄이 그어져 있는데 다음의 css로 처리된 것이다
.complete span { text-decoration: line-through; }

다음은 할일 추가와 일부 제거한 모습이다.
 



마치며...
데모를 살펴 보면서 느낄 수 있겠지만, jQTouch를 이용한 웹앱 역시 자바스크립트, jQuery 와 같은 기본적인 웹 클라이언트 기술에 능숙한 것을 요구한다. jQTouch 가 아이폰 앱에 걸맞는 UI 구성은 도와주지만 앱의 로직 부분까지 담당하지는 않기 때문이다.

[jQTouch] Extensions (확장기능)

Posted in 모바일/Javascript // Posted at 2010. 10. 28. 11:08
지금까지 총 여섯번에 걸쳐 jQTouch의 기본적인 내용을 살펴 보았다.
jQTouch 에서 제공하는 데모를 기준으로 빠르게 훓어보았지만 기본적인 사용법은 거의 다룬셈이다

지금까지 살펴본 내용은 UserInterface, Animations, AJAX, Callback Events 정도인데 이 이상의 내용은 jQTouch 기본 사용법과 더불어 일반 웹 개발 스킬과 아이디어가 접목되어야 그럴싸한 웹앱이 탄생할 것이다

jQTouch 데모를 기준으로 남은 것은 Extensions 와 Demo 부분인데, 먼저 Extensions 를 살펴보자
Extensions 은 말그대로 일종의 jQTouch 확장 기능인데 이 글에서는 데모 코드를 따라 작성하기 보다는 jQTouch 기본 데모를 소개하는 수준에서 글을 마칠까 한다.

jQTouch 는 기본적인 라이브러리 기능에 추가해서 덧 붙일 수 있는 확장 기능을 정의할 수 있도록 구조화되어 있는데, 마치 플러그인과 유사한 느낌이다. jQTouch 객체에 addExtension 함수를 통해 확장 함수를 등록할 수 있으며  이 함수가 정의된 js 파일은 떼었다 붙일 수 있도록 별도의 파일로 정의하기를 권장한다.

ver1 beta2 에서는 총 4개의 확장 기능을 제공하며 extensions 폴더에 각각 독립된 js파일로 구성되어 있다
jQTouch 가 제공하는 4개의 확장 기능을 간략히 살펴보자

Auto Titles
먼저 자동 타이틀이다. 말 그대로 타이틀을 자동으로 구성해 주는 확장기능인데 링크로 페이지 이동시 링크 제목을 타이틀 내용으로 사용한다. 아래 화면처럼 Oranges링크를 클릭하면 타이틀의 내용이 자동으로 Oranges가 된다.
 


Auto Titles 확장 기능을 정의한 파일은 jqt.autotitles.js 파일인데 div 요소가 교체될 때 발생하는 pageAnimationStart 이벤트를 통해 해당 기능을 구현하고 있다


Floaty Bar
페이지에 둥둥 떠서 스크롤에 따라 자동으로 이동하는 보조 바(bar)인 플로티 바를 제공한다.
아래 화면처럼 플로티바가 페이지 위에 나타나며 스크롤 이동에 자동으로 반응한다. 그리고 Bar를 숨기거나 토글시킬 수 있다. jqt.floaty.js 파일에 로직이 정의되어 있으며 플로티 바로 사용할 div 요소에 makeFloaty, scrollFloaty, toggleFloaty, hideFloaty 등의 함수를 구성해 준다



GeoLocation
현재 위치를 위도와 경로로 반환하는 확장 기능인데 내부적으로 HTML5의 Geolocation 스펙을 이용하고 있다
참고: [HTML5] Geolocation

단말기가 Geolocation 기능을 지원해야 하며 사용자가 위치정보 제공에 동의해야 사용이 가능하다.
아래 화면은 크롬 브라우저에서 실행한 결과이다. jqt.location.js 파일에 로직이 정의되어 있다



Offline
인터넷 연결이 끊긴 오프라인 상태에서도 웹앱을 이용할 수 있도록 지원하는 확장기능인데 내부적으로 HTML5 의 Application Cache 스펙을 이용하고 있다
참고: [HTML5] 오프라인 웹 어플리케이션

서버에 캐시될 파일을 정의한 메니페스트파일(.manifest) 파일이 존재해야 하며 MIME타입이 설정되어 있어야 한다.
jQTouch 에서는 이 모든 파일을 제공해 주므로 서버설정만 맞춰주면 된다. 그리고 자동으로 캐시 업데이트 및 캐시 관리를 수행해 주기 때문에 오프라인 환경을 쉽게 개발할 수 있다.

아래는 데모 화면인데 페이지의 모든 리소스를 로컬에 저장했으며 오프라인 상태에서도 실행할 수 있다는 안내이다



이것으로 jQTouch 가 제공하는 4가지 확장 기능에 대해 간략히 살펴 보았다.
참고로 이 확장기능도 좋지만 더 유용한 기능이 있다면 얼마든지 커스텀하게 확장할 수 있을 것이다.
jQTouch 는 기능을 쉽게 확장할 수 있도록 구조화되어 있으며 아이디어만 있으면(그리고 자바스크립트, jQuery 에 대한 지식) 개발자 개개인이 참신한 확장기능을 구현하여 널리 사용자를 이롭게(?) 할 수 있을 것이다

[jQTouch] GET, POST 전송

Posted in 모바일/Javascript // Posted at 2010. 10. 27. 17:09
jQTouch 의 GET, POST 전송을 대략 살펴 보니 참.. 재미있는 구조다!

POST 전송부터 살펴보자.
POST 전송은 웹 페이지의 폼(form) 양식을 서버로 전송하는 규칙인데, jQTouch 에서는 POST전송을 내부적으로 Ajax 호출로 처리한다. 그리고 POST 처리 결과를 받아서 자동으로 페이지요소를 생성, id를 부여하여 자연스럽게 jQTouch 화면으로 구성해 준다. 이 결과 처리 부분이 참으로 독특하다

우선 데모를 보자. 아래는 POST 전송을 위한 클라이언트 측 코드이며 폼양식이 정의되어 있다
코드에서는 전형적인 웹 페이지의 폼 요소 정의를 볼 수 있으며 일부 jQTouch용 class 속성이 이용되었다

<!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>POST Demo</h1>
  </div>       
  <ul class="rounded">
    <li><a href="#form1">Form</a></li>   
  </ul>  
</div>  
<form id="form1" action="server.asp" method="POST" class="form">
    <div class="toolbar">
        <h1>Post Demo</h1>
        <a class="back" href="#">Back</a>
    </div>
    <ul class="rounded">
        <li><input type="text" name="param" value="" placeholder="Typed Post Message" /></li>
    </ul>
    <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="submit whiteButton">Submit</a>
</form>
</body>
</html>

폼을 전송할 대상은 server.asp 이다.
server.asp 는 폼 데이터를 전송받아 처리하는 서버측 파일로 php, jsp, asp, aspx 등 어떤 것을 사용해도 무방하다. 여기서는 폼 데이터를 전달받아서 출력하는 매우 단순한 코드를 정의하였다
<%
  param = request.form("param") 
  Response.Write param
%>
<div>
    <div class="toolbar">
        <h1>Server</h1>
        <a class="back" href="#">Back</a>
    </div>
    <ul class="rounded">
      <li href="#"><%=param %></li>
    </ul>
</div>

참고로 jQTouch가 제공하는 데모에서는 서버코드로 php를 이용하였다.
이 코드 역시 매우 단순한 형태로 전달받은 데이터를 출력하고 일부 목록을 생성하여 출력하는 형태이다
서버측코드를 해석하기 위한 웹서버가 존재해야 하며 필자의 경우 IIS 기반이라 asp 를 이용하였다


다음은 데모를 실행한 화면이다. 텍스트상자에 글을 입력하고 전송하면 결과를 출력한다
 


신기한것은 server.asp 의 결과화면이다
server.asp 코드 그 어디에도 jQTouch 관련 설정이 없다. 그런데도 결과화면은 보는 바와 같이 jQTouch 화면으로 나오고 있다. 그래서 내부 구조를 좀 확인하고자 jQTouch 핵심 엔진인 jqtouch.js 파일을 들여다 봤다.

아니나 다를까 결과 화면은 jQTouch 로직에 의해 자동으로 생성되는 것을 확인할 수 있었다
그리고 호출은 jQuery 용 Ajax 가 이용되었고 결과화면 링크는 page-1, page-1... 형태로 자동 부여 된다

jqtouch.js 파일을 보면 POST 전송의 시작은 submitForm() 함수이며 showPageByHref() 함수를 거쳐
$.ajax({ ... }); 로 전송이 이루어지며 결과화면의 자동 생성을 위해 insertPages() 함수로 이어진다
insertPages() 함수에서 페이지 요소를 생성하고 자동 증가 id를 부여하고 결과화면으로 구성한다

따라서 결과화면의 요청 URL을 보면 아래와 같이 자동으로 부여된 id page-(number++)형태가 된다
http://yourdomain/jQTouch/demos/test/formNpost.html#page-1

참. 재미있는 구조다.


GET 요청도 거의 유사한 매커니즘이다.
jQTouch 는 <a href="targetPage.asp"> 와 같은 기본 링크는 모두 Ajax 호출로 처리하고 결과 화면을 자동으로 구성해 준다. 이전에 jQTouch 페이지 전환에 대한 내용을 다룬적이 있는데 그 글에서는 완전한 외부링크를 다루었었다. 즉 target 설정으로 '_blank' , '_webapp' 혹은 rel='external' 속성을 줘서 jQTouch 에서 완전히 분리된 외부링크를 호출하는 것이다 => [jQTouch] 페이지 전환

반면 Ajax를 통한 GET 요청은 jQTouch 의 내부 알고리즘에 의해 Ajax호출로의 변환, 결과화면 자동구성이 지원되는 것이다. 사실 jQTouch 에서 외부링크로 호출하는 경우는 많지 않을 것으로 보인다.

코드는 거의 유사하여 일부 코드 조각만 제시한다. a 태그에 target, rel 속성이 없다는 것을 확인하자
<ul class="rounded">
   <li><a href="serverGet.asp?param=Hello! GET Request~">GET Request</a></li>
 </ul>

서버측 코드는 GET 요청이므로, requery.form 대신 request.querystring로 전달받는다.
실행화면은 다음과 같다
 



[jQTouch] 페이지 전환 이벤트

Posted in 모바일/Javascript // Posted at 2010. 10. 27. 13:48
jQTouch 환경에서의 페이지 전환은 일반적인 웹페이지의 링크 개념보다는 뷰의 교체에 가깝다고 했었다
: [jQTouch] 페이지 전환

보통 웹 페이지는 자신이 처음 로드될 때 그리고 페이지를 빠져나갈 때 각각 이벤트를 걸 수 있다
즉 페이지가 처음 표시될 때 load 이벤트, 페이지를 이탈할 때 unload 이벤트가 발생하여 원하는 작업을 처리할 수 있다.

jQTouch 에서 일반적으로 사용하는 페이지 전환은 뷰의 교체 즉 페이지내 div 요소로의 이동이다.
즉 하나의 페이지에 정의된 div의 교체이기 때문에 위와 같은 한 페이지 기반의 로드,언로드 이벤트 처리가 적합하지 않다. 따라서 div 가 교체될 때 그리고 div 를 이탈할 때 발생하는 이벤트가 따로 존재해야 한다

jQTouch 는 이와같은 당연한 논리구조를 알고 있으며 적절한 이벤트를 제공해 주고 있다
바로 pageAnimationStart, pageAnimationEnd 이벤트가 그것이다

페이지 전환 즉 div 의 교체는 slide, slideup 과 같은 에니매이션효과로 전환되며 이 에니매이션 효과에 대해 이벤트를 추가하는 방식이다

페이지 전환, 이탈 두 시점에 pageAnimationStart, pageAnimationEnd 모두 발생하며 각각 전환 에니매이션의 시작과 끝을 알린다. 또한 이벤트 함수로 전달되는 매개변수의 direction 속성을 통해 페이지의 전환, 이탈을 구분할 수 있다.  (direction가 in 인 경우: 페이지 전환 , out 인 경우: 페이지 이탈)

아래 화면은 차례대로 페이지를 처음 이동한 것과 뒤로갔다가 다시 돌아왔을대의 결과 화면이다
첫 이동 시 에니매이션 시작과 끝을 알리는 두 이벤트가 모두 발생하였고 Back 했을 때 역시 두 이벤트가 발생하였다. 다만 direction 속성이 in 과 out 으로 페이지의 전환,이탈을 구분하고 있다. 이로써 일반적인 웹페이지 링크 모델에서의 페이지 로딩,언로딩 이벤트 효과를 jQTouch div 교체 모델에서도 적용할 수 있는 것이다.

 
 


코드는 jQTouch가 제공하는 데모코드와 동일하며 jQuery 문법이 사용 되었음을 알 수 있다
<!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'
                    ]
    });       
    $(function(){
      // Page animation callback events
      $('#pageevents').
          bind('pageAnimationStart', function(e, info){
              $(this).find('.info').append('Started animating ' + info.direction + '&hellip; ');
          }).
          bind('pageAnimationEnd', function(e, info){
              $(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');
          });          
    });     
</script>
</head>
<body>
<div id="home">
  <div class="toolbar">
   <h1>Page Switch Event</h1>
  </div>       
  <ul class="rounded">
    <li><a href="#pageevents">Page Switch Event</a></li>   
  </ul>  
</div>  
<div id="pageevents">
  <div class="toolbar">
   <h1>Page Switch Event</h1>
   <a class="back" href="#">Back</a>
  </div> 
   <div class="info" style="font-weight: normal;">
</div> 
</body>
</html>


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

[jQTouch] Extensions (확장기능)  (0) 2010.10.28
[jQTouch] GET, POST 전송  (0) 2010.10.27
[jQTouch] 페이지 전환 효과 (에니메이션 효과)  (0) 2010.10.26
[jQTouch] 페이지 전환  (0) 2010.10.26
[jQTouch] 목록 스타일  (1) 2010.10.25

주요 브라우저 HTML5 지원 점수

Posted in 모바일/HTML5 // Posted at 2010. 10. 27. 10:42

이전에 브라우저별 HTML5 호환성 점수를 살펴 본 적이 있다
=> 브라우저의 HTML5 호환성 점수

현 시점에 주요 브라우저들이 최신 버전을 속속 내 놓고 있다
브라우저들의 HTML5 지원 점수를 계산해 준 글이 있어 소개한다
: HTML5: Internet Explorer 9 (IE9) vs. Google Chrome 8 vs. Firefox 4 vs. Opera 11 vs. Safari 5



Internet Explorer 8 – 32
Internet Explorer 9 Beta – 80
Firefox 3.6.10 – 145
Firefox 4 Beta 6 – 235
Google Chrome 7.0.517.41 – 248
Google Chrome 8.0.552.11 Beta – 262
Opera 11 Alpha – 223
Opera 10.63 – 203
Safari 5.0.2 – 178
WebKit r70433 – 196

377 만점 기준으로 나온 점수이다
크롬 브라우저가 가장 높은 점수를 보이며 기대했던 IE9 는 베타라고는 하지만 예상보다 실망스럽다

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

...  (0) 2013.07.23
HTML5 개발을 도와주는 도구들  (4) 2010.11.01
어도비, HTML5 디자인 개발툴 엣지(Edge) 공개  (0) 2010.10.26
[CSS3] Media Queries  (0) 2010.10.25
2011년 8개 IT 메가 트렌드, HTML5 역할 언급  (0) 2010.10.21