안녕하세요. 정상현입니다.: 2010

2010년 12월 28일 화요일

신년계획

0. 아내와 아이에게 끊임없는 사랑 주기

1. 담배 끊기(담배값이 오른데요..;; 아이도 태어나는데;;)

2. 블로그 관리좀 제발 하기

3. 개인사이트 만들기(블로그 폐쇄-_-;;)

4. 개인모바일사이트만들기

5. 위에것들을 만들기 위한 php공부-_-.........

6. flax 와 javascript 그리고 actionscript3.0 제발 공부좀하기

7.하코사 번개 및 모임에 제발좀 나가기..ㅠ,.ㅜ;;

2010년 11월 3일 수요일

플래시 액션스크립트 xml연동시 캐싱 문제

액션스크립트를 이용해 xml과 연동하여 게시글 및 메뉴 등을 불러오는 스크립트를 짜고 테스트중 문제에 봉착했다.

인터넷 임시 파일에(로컬에) 최초 저장된 xml 파일이 서버에 올라가있는 xml 파일로 안덥히고 계속적으로 로컬꺼를 가져다 쓰는 문제였다. 이런젠장...

xml 파일을 asp 로 바꾸고(개발언어가 asp였음) 난리 부르스를 쳐도 안됨.ㅡㅡ;

해결은 플래시 에서 XML 을 로드 할때 패러미터 값에 랜덤함수를 뿌려 새로운 파일인듯 받아 오는것이다.

네이버에서 검색질을 좀 하니 비슷한 문제로 고민하시던 분들이 계시더라.

윈도우 비스타 이상 운영체제에서는 같은 파일을 되풀이 해서 읽을경우 로컬에 캐싱해 뒀다가 읽어 준다고 한다.

Math.round(Math.random() * 100000000);

변수 하나에 랜덤값을 넣고(혹시 모르니 수를 크게 보냈다.)고때 고때 불러 왔다.

사이트 전체url 및 메뉴이미지 등을 하나의 xml 파일에 쑤셔 넣고 돌리는 방식으로 작업 했기때문에 위에 방법이 아니었으면 액션스크립트 작업을 처음부터 다시해야 할 뻔 했던...

운영 및 개발의 편의 성을 위해 3일간 작업한 것 이 물거품이 될뻔했다..ㅡㅡ;

2010년 7월 8일 목요일

html5 의 찬양반론

간만에 시간이 나서 주저리주저리 적어 봅니다.(아..정말 간만이네요-0-;)

요 앞전에 html5 와 웹퍼블리셔 라는 직군에 대항 긍정적 견해를 적은적이 있습니다.

그래서 이번에는 여러 악플과 의견들이 달릴 것 을 각오하고 부정적인 측면에서 바라 보았습니다.

많은 의견 기대하고 있겠습니다...ㅠ,.ㅜ;;

얼마전 저의 주관으로 회사의 wp팀 내부 세미나를 아주 짧막하게 진행 했습니다.

저도 한 두군데 정도 세미나를 둘러 보고, 구글링 등과 관련 서적을 통해 공부를 한터라, 또한 아직 개발중인 언어인지라 뭔가 주관한다기 보다는 토론에 가까운 세미나가 되었는데요.

세미나를 하면서 드는 몇가지 의문점에 대한 열띈(?) 토론이 이어졌습니다.

1. 대체 왜 아직 개발중인, 그리고 당장 쓸지 말지 의문인 html5 에 대해 우리나라는 이렇게 열정적으로 나서는가?

얼마전 윤석찬씨와 함께 한 질의 응답 식 세미나에 간적이 있었습니다.

국내에서 html5관련 세미나를 한다고 공지를 띄우자 마자 자리가 만석이 되었다고 모질라 커뮤니티 사람들에게 말했더니 (외국분들 이겠죠?)모두 놀랐다고 합니다. 외국에서는 아마 이정도로 뜨거운 반응은 아직 아닌가 봅니다.

아마도 외국은 몇몇 개발자 및 좀 앞서가시는 분들께서 집중적으로 여러가지 테스트와 실험적인 것 들을 생산해 내서 그것들을 블로그등을 통해 공유를 많이 하시는 듯 합니다. 여기서 중요한것은 몇몇 이겠죠.

국내에서는 일단 활활 타오르고 있습니다. html5 와 css3라는 신 기술에 대해서 말이죠.

스티브 잡스가 IOS 에서 플래시를 지원을 하던지 말던지 사실은 모바일 사이트를 따로 제작하는 국내에서 작은 휴대폰으로 풀브라우징 웹사이트를 보지 않는이상 용량도 그렇고 사용자 편의성도 그렇고 그닥 플래시를 끼워 넣을 일도 별로 없는데 말입니다.

당장 내일 출근해서 html5의 장점에 대해 목이 터져라 얘기해도 실상 회사에서 html5를 어디서부터 얼마나 어떻게 사용을 해야 할지도 의문이구요. 명확하게 개발이 완료되고 거기에 맞춰 샘플이 생성된 뒤에 공부해도 늦지는 않을 것 같다는 느낌이 드는 html5 에 대한 국내 웹개발자 들의 과도한 관심에 대한 결과가 저는 몹시 흥미롭게 보입니다. 아시는 분들은 아시겠지만 세미나를 두세군대 따라다녀 보면 비슷비슷 한 이야기들이죠. 얼마 전까지만 해도 저역시 html5 의 선두에 서겠다는 일념하나로 열공 했지만 오늘 문득 드는 생각은 이것이 어쩌면 거품일 수 있겠다 라는 것 입니다.

2. 모바일 브라우저에 html5 와 css3 를 적용할 수 있다. 그리고 구글은 웹사이트를 html5로 해뒀잖아!!!

네. 모바일브라우저에서 아주 유용하게 사용할 수 있습니다.

하지만 사실 모바일 접근자가 아이폰, 안드로이드폰 사용자만 있는 것 은 아닙니다.

또, 국내 대형 포털등도 아직은 적용하지 않고 있구요.

네이버 모바일(http://m.naver.com/)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

다음 모바일(http://m.daum.net/)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

파란 모바일(http://m.paran.com/)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

네이트 모바일(http://m.nate.com/)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

sk-w 모바일(http://m.sk-w.co.kr/)

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN""http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">

<html>

기아 자동차 모바일(http://m.kia.co.kr/)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

아쉽게도 국내 모바일 사이트 조차 아직 html5에 대한 적용은 실시 하지 않고 있는듯 합니다.

css3조차도 말이죠. 자바스크립트 라이브 러리 를 통한 html5 적용은 시도조차 되지 않고 있네요. 아마도 업체에서 html5로 구축 하는 것 보다는 리소스 측면에서 기존 방식을 이어 가는 편이 더 이득이라는 판단을 했을 것이라고 생각 됩니다.

아시다시피 구글에서 메인 페이지를 html5로 적용했다고 합니다(저도 몰랐다가 웹서핑 중 알았는데요..)

구글 메인은..

<!DOCTYPE html><html>

와!! 놀랍습니다. 정말이었네요!!

하지만 아쉽게도 우리가 알고 있던 header, footer, nav 등의 새로운 요소들은 찾아 볼 수 없었습니다.

아니..못찾은 것일 수도 있겠군요. 그렇다면 지금 바로 구글 메인에서 소스보기를 시도 해 보세요. 검색엔진이라 그런지 여백들이 거의 없이 압축되어 있는 소스를 보실 수 있을 것 입니다.

사실 구글 같은 경우 국내 포털 사이트와 레이아웃 부터 디자인적인 요소까지 너무도 다릅니다.

가장 대표적인 포털 검색엔진인 네이버 같은 경우를 보더라도 뭔가 시도를 하기에는 위험요소가 많아 보입니다. 국내 사용자 측면에서는 구글 보다 네이버 같은 포털 사이트에 더 관심을 갖겠죠. 이것은 구글이 국내에서 많은 사용자 층을 확보하지 못하는 이유중 하나 일 수 있겠습니다.

3. 과거 CSS2.1을 이용한 레이아웃으로의 변화도 쉽지 않을 것 이라 했지만 결국 됐잖아!!!

네. 맞습니다. 과거에 분명 테이블로 레이아웃을 잡고 드림위버 같은 이지윅 툴이 없으면 홈페이지 자체를 만든다는 것 은 어려울 정도 였던 시절이 있었습니다. 99년도즈음 처음 홈페이지를 만들어 보겠다며 무작정 html을 이용해 홈페이지를 만들었던 때가 기억 나네요. 이지윅도 모르고 css도 몰랐습니다. 순전히 html태그만을 이용해서 홈페이지를 만들어 댔죠. 붉은 배경에 제가 그린 그림 몇장을 올리고, 검색해서 퍼온 소스로 배경음악도 넣었던 기억이 납니다. 친구들은 옆에서 스타크레프트를 할때 저는 열심히 html로 뭔가를 만들겠다고 열을 올렸죠. 그러던중 나모웹 에디터를 만나고..뭐...주절주절....

네스케이프가 망하고 익스플로러가 독자적으로 살아남을즈음...그리고 윈도우 98이 없어지고, 윈도우 XP가 거의 모든 국내 컴퓨터에 설치 될 즈음 익스플로러 5.5는 서서히 사라져 갔을 것 입니다. 그리고 대부분의 사용자가 익스플로러6.0을 사용할 즈음 익스5.5를 맞추는 일이 점점 사라져갈 즈음입니다.
이미 익스플로러6.0이 나온지 9년이 다되어 갑니다. 지금 사용하고 있는css가 약 10년 정도 됐다고 하니까 거의 비슷하네요. 익스 6은 css를 지원했고, 대부분의 사용자가 이미 css를 지원하는 브라우저를 사용했습니다. 테이블 레이아웃에서 css를 이용한 레이아웃으로의 이동은 새로운 기술을 배워야 하고 사이트 자체를 뒤엎어야 하는 번거로운 일이었으며, 그로인한 반론들은 많았지만 이미 지원하는 브라우저를 많은 사용자가 사용중인 시점에서의 시도는 가능 했을 것이라고 생각 합니다.
실제로 이런 사이트 들이 하나 둘 생겨나고 장점들이 부각 되면서 이젠 css가 표준이 되었지요.
물론 클라이언트는 잘 모르겠지만요. 사용자가 알아체지 못하는 사이에 이미 웹은 한번 진화 했습니다.
사용자들은 그것을 지원하는(문제점은 있었지만) 브라우저를 사용하고 있었기 때문입니다.
하지만 지금은 아닙니다.
아직도 익스플로러 6 사용자가 50% 이상이고, 그외에도 7,8 브라우저 이용자가 많이 있습니다.
인터넷 익스플로러9가 나온다고 해도 사용자가 익스플로러9 이상의 브라우저를 사용하기 위해서는 꽤 많은 시간이 걸리지 않을까 라는 생각입니다. 네이버, 다음과 같은 포털에서 굿바이 익스6 캠페인등을 펼쳐 사용자 층의 인식개선을 위한 노력을 하는 것은 굉장히 좋은 일입니다. 덕분에 익스6을 다른 브라우저로 갈아타는 동시에 인터넷브라우저 라는 개념을 약간이라도 갖게 되기 때문이죠.
지금 우리는 약10%~15% 되는 사용자(크롬,사파리,오페라,파폭..)를 위해 크로스 브라우징을 열심히 하고 있습니다. 익스9 혹은 그외에 html5지원 브라우저 사용자가 80%이상 된다면 자바스크립트 라이브러리를 추가해서라도 html5의 편리한 기능을 널리 알리고 싶어 하겠으나 현실은 좀 어둡지요.
css레이아웃 적용 전파 시점과 현재는 시기적으로 조금 아니지 않을까 라는 생각이 듭니다.

4. 그럼 이렇게 html5 세미나도 많이 하고 사람들이 열광하는 이유는 뭐야!! 어쩌라고!!?
네..지금 html5 는 국내와 국외에서 열광하고 있습니다.
새롭고, 편하기 때문입니다. 우리가 원하는 장점을 많이 가지고 있습니다.
이렇게 좋은게 나와도 많은 개발자들이 알아야 사용합니다. 그래서 많은 새로운 시도들을 계속해서 우리들에게 노출시켜 줍니다. 그리고 이미 많은 사람들이 html5에 대해 알고 있습니다.
앞에서 말했듯 아이폰이나 안드로이드 폰과 같은 스마트폰 브라우저 에서 html5를 많이 지원하고 있습니다. 반대로 말해 개발자가 아닌 사용자 측면에서 html5 에 대해 아는 사람도, 관심 갖는 사람도 없습니다.
스마트폰이 대중화 되고 있지만 아직까지 피쳐폰 사용자가 더 많습니다. 그 많은 스마트폰 사용자 역시 서울 경기등 수도권에 밀집 되어 있지요. 우리가 느끼기에 모바일 웹이 엄청나게 커진것 같아 보이지만 그렇지 만은 않습니다. 분명 굉장히 많이 발전 되었고 성장했고 성장 중입니다. 중요한 것은 일부라는 것 입니다. 지금 이글을 보고 계신 당신이 스마트폰을 갖고 있다면 그 스마트 폰으로 웹브라우저를 열었을때 자주 가는 사이트는 정해져 있을 것 입니다. 지금 수없이 많은 모바일 사이트 들이 우후죽순 생겨나고 있는데 말이죠. 회사 입장에서 보면 (을의 입장) 단가가 그렇게 높지도 않은 웹페이지를 만들기 위해 html5까지 써가기엔 리소스나 효율면에서 적용하기 쉽지많은 않을 것 입니다.
개인적으로 제가 생각했던 모바일 웹은 일반 브라우저로 접근했을때의 페이지를 모바일로 접근했을때 좀더 보기 편한 css를 적용해서 만들어져 있는 방식입니다만 회사의 입장에서는 그것 역시 아니었나 봅니다.

html5와 css3를 이용하여 멋진 웹어플리케이션을 만들어 낼 수 있습니다. 이것은 스마트폰 사용자들을 주 대상으로 하는 어플리케이션 이기 때문에 인터넷 홈페이지와는 약간 다른 계념의 것 이군요.
하지만 홈페이지를 만드는데 있어서는 아직까지 너무나 넘어야 할 벽과 산이 많습니다. 홈페이지는 여러분이 지금 하고 계신 접근성 을 준수해야 하기 때문입니다. 이러한 산과 벽이 하루빨리 사라졌으면 하는 바램이 있지만 언제가 될지는 의문입니다.

html5에 대해서 많은 글들을 읽어 봤지만 하나같이 긍정적이고 희망적이어서 그 반대의 입장에서 개인적인 얼마안되는 지식을 짜내서 요렇게 긴 글을 써 봤습니다.

html5 에 대한 너무 많은 기대와 거품이 있지 않을까 라는 생각에서 말이죠. 저역시 html5에 대한 많은 기대를 하고 있습니다. 감사합니다.

2010년 6월 17일 목요일

테이블을 위한 자바스크립트 샘플

게시판, 자료실 등에 테이블을 자주 사용합니다.

하지만 테이블의 디자인은 만만하지 않게 산출되어 나오지요.

오늘 제가 만들어 놓은 테이블은 대충 이런 식입니다.

흠...제가 디자이너 출신이긴 하지만..-_- 영귀찮아서 대충 쳐서 만든것이니....

모든 부분은 css를 만들어 클래스만 주면 쉽게 만들 수 있는 부분입니다.

하지만 잘 생각해보면, 각각 tr 의 짝수줄만 색이 들어가 있습니다.

또 가장 마지막 라인은 dashed 가 빠진 클래스가 들어가 있네요.

이게 하드코딩으로 들어가는 부분이라면 문제는 전혀 되지 않습니다. 그냥 각각 tr에 클래스 값을 따로 넣어 주면 되기 때문입니다. 하지만 만약 개발이 붙는 테이블이라면 얘기가 조금 달라지지요.

개발하시는 분께서 어느정도로 어떤식으로 코딩하느냐에 따라 다르지만 통상은 한개의 라인을 잡아서 반복문을 줘 버리기 때문이죠.

</colgroup>

<tr>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

</table>

위와 같이 각각 tr에 클래스를 먹이고 더군다나 마지막에는 두개의 클래스가 함께 들어갔습니다. 이럴경우 개발자분은...

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

대충 위와같이 tr하나를 잡고 서버사이드 언어를 넣어 반복을 주시지요.

물론 신경써서 하나한 잡아주시는 분들도 계시지만 웹퍼블리셔라는 직군이 생긴이상 이정도는 퍼블리셔가 만들어 넘겨 주는게 이상적이라고 생각이 됩니다.

충분히 접근성 높으면서 내용에 제약이 되지않고, 표준을 지키는 스크립트로 컨트롤이 가능하기 때문이죠.

먼저 css입니다.

table#con_table{width:500px; color:#555555; font-size:12px; text-align:center; border-top:1px solid #575757;border-bottom:1px solid #575757}

table#con_table a{text-decoration:none; color:#CDA9A9;}

table#con_table a:hover{text-decoration:underline; color:#892525;}

table#con_table th{background:#C2DAD6; padding:8px 0; border-bottom:1px solid #7B7B7B}

table#con_table td{padding:10px 0 10px 0; background:#fff;border-bottom:1px dashed #CDCDCD}

table#con_table tr.gry td{background:#f2f2f0;}

table#con_table tr.last td{border-bottom:0px;}

특별한것은 없고 각각 속성을 설정후 메인 td를 잡아주고, 각각 tr 클레스에 따라 td속성값을 따로 줬습니다.

결국 사용될 td속성은 세가지군요. 그냥 td , 회색배경 td, 마지막에 사용될 보더 없는 td, 추가로 회색배경과 보더없는 td는 함께 사용될 수 있습니다.

(설명이 어렵..-_-;)

다음은 코딩 입니다.

</colgroup>

<tr>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

</table>

편의상 헤더부분등은 제외 했습니다.

또한 자바스크립트로 클레스를 추가 할 것이므로 tr에 클래스 등을 따로 넣지는 않았습니다.

이런 모습이 되겠군요.

다음은 자바스크립트를 코딩하도록 하겠습니다.

function tdBgChanger(){

var trs = document.getElementById('con_table').getElementsByTagName('tr');

var finalNum = Number(trs.length - 1);

for(var j=0;j<trs.length;j++){

if(j%2 == 0){

trs[j].className = 'gry';

if(j == finalNum){

trs[j].className = 'gry last';

}

}else{

if(j == finalNum){

trs[j].className = 'last';

}

tdBgChanger 라는 함수를 만들었습니다.

앞에서 만든 con_table 이라는 ID를 갖는 테이블의 tr 을 trs라는 변수에 저장해 두었습니다.

또, 마지막 tr에 클래스 값을 먹이기 위해 finalNum 이라는 변수에 전체 tr값에서 -1을 한 값을 대입해 저장해 두었습니다.

다음은 for문을 이용해 tr 수만큼 반복을 돌리는데 최초에 나오는 if문에서는 짝수열에 gry라는 클래스를 추가 합니다. 주의 하실 점은 for문을 돌리면 0 부터 반환을 한다는 것입니다. 따라서 첫째열에도 클래스가 적용됩니다.

하지만 첫째열은 th로 코딩되어 있으므로 클래스가 들어가더라도 스타일이 적용되지 않습니다.

첫번째 if문 안에 또다른 조건문이 있는데 이것은 모든 짝수 tr중에 마지막 tr이 존재할경우 rast라는 클래스를 추가로 주기 위함입니다.

그아래 else 다음으로 나오는 조건문도 마찬가지로 홀수 열 일경우중 마지막 tr이 포함되 있으면 gry가 없는 last클래스를 추가해 주는 거지요.

이렇게 하면 완성이네요.

소스도 보기 좋고 간단해 졌습니다. 개발자는 서버사이드 언어를 복잡하게 구성하지 않아도 되니 좋겠군요.

우리는 일일이 tr의 수를 세가며 클래스를 추가하지 않아도 됩니다.

개발이 붙은후 깨져서 보여지는 테이블을 굳이 수정해 주지 않아도 됩니다.

또한 자바스크립트를 꺼놓은 사용자 역시 컨텐츠 내용을 보는데 크게 제한사항이 없습니다.

아래 원본 샘플파일을 첨부해 두었습니다.

조금 허접하고, 위의 자바스크립트 보다 더 깔끔하게도 짤 수 있을듯 합니다만...

혹시나 모르시는 분도 계실까봐 이렇게 블로그에 올려 봅니다.

좋은 자료가 되어 드렸으면 좋겠네요.

테이블용 스크립트 샘플.html

포스카인드를 봤습니다.

어제 오늘 해서 이틀간 반씩 나눠서 포스카인드 라는 영화를 봤습니다.-_-;

에초에 이게 외계인과의 접촉을 그린 영화라는 것 만 알았지 페이크 다큐 라는것은 정말 모르고 있었던 터라,

첫 장면 부터 등장하는 주인공의 '이영화는 실화를 바탕으로..어쩌구 저쩌구..' 하는 대사에 결국 낚여 버린 것 이죠.

여배우는 정말 이뻐

여자 주인공인 밀라 요보비치는 정말 이쁘더군요. -_-a 실제 연기도 그렇게 나쁘지 않은듯 했습니다.

단, 실제 영상이라면서 나오는 캠코더 촬영 영상이나, 혹은 방송인터뷰 하는듯 한 인터뷰 장면에서 나오는 실제 주인공역할을 하는 배우는 보기 흉하고 섬뜩하게 생겨서..

영화보다 중간중간 나오는 영상이 더 재밌는...

감독은 영화 중간중간 사실임을 강조하기 위해 캠코더로 촬영한 실제 인터뷰 및 기록 영상을 보여 줍니다. 물론 중요한 부분은 지직 거리면서 나오지 않고 소리만 들리지만, 이 영상이 실질적으로 더 흥미롭더군요.

페이크 다큐라는걸 모르고 보면 속을수도..-_-

페이크 다큐 장르인걸 모르고 본 본인은 영화를 보는 내내 무섭거나 재밌다기보다는 흥미로웠습니다.

그리고 영화를 다본 후에는 기분이 무지 나쁘더군요. 동시에 인간들이 저렇게나 많이 사라지고 죽고 의문 투성이에 저런 동영상까지 있는데 FBI들은 지금까지 뭘하나..라는 ..

이거 뻥 아닌가 라는 생각도 들긴 했습니다. 그치만 저같이 단순하고, 외계인이 있다고 믿는 사람들은 낚이기 좋은 영화 였네요.

- 개인적으로 외계인이 사람과 친해질지 어떨지 모르지만 그래도 이렇게 까지 나쁘고 무서울까 라는 생각은 했습니다. 사실 영화 후반부에 주인공이 외계인으로 빙의해(-_-;) 내가 신이라며 꺽꺽 되는 장면과 공중부양 장면에서 쫌 현실성이 떨어지기도 했죠. 아..이거 뻥일 수도 있겠다..라며..그치만 주구장창 사실이다.사실이다~라는 말이 나와서 굳게 믿은 제가 바보 였나 봅니다.

여튼 영화 본후 기분이 몹시 나빴는데 페이크 다큐라니 다행입니다. ㅡㅡ

킬링 타임용으로 괜찮은 영화 입니다.

2010년 6월 16일 수요일

자바스크립트로 xml문서 불러 들이기

아시다시피 자바스크립트로 xml문서 연동이 가능합니다.

물론 이 방법은 접근성에 좋지 않습니다. 자바스크립트 미지원 혹은 꺼놓은 브라우저에서는 xml로 불러들인 내용을 전혀 알 수 없기 때문에 중요한 컨텐츠나 주요 네비게이션에서에서 사용시 반드시 대체 내용이 들어가야 하거나 지양해야 합니다. 하지만 이럼에도 불구하고 js 나 xml을 이용한 네비게이션을 많이 사용하는 이유는 유지보수, 운영의 편의성 때문입니다.

큰 예로 플래시로 이루어진 네비게이션 등에 많이 사용되는데, fla파일을 열어 일일이 메뉴를 수정하고, 또 그것을 swf로 내보내는등의 수고 없이 xml문서만 열어 수정하면 되기 때문에 그 편의성 및 시간의 절약에 효과적이라고 할 수 있습니다. 이는 플래시가 아닌 일반 코딩 네비게이션에서도 마찬가지 입니다.

수백 페이지에 달하는 사이트에서 해당메뉴 링크 하나를 수정하기 위해 그 버튼이 들어있는 페이지 들을 일일히 열어보기는 힘들기 때문이죠. 언제나 득과 실이 있는 법인듯 합니다.

따라서 사람들은 접근성에 치명적 약점이 있음에도 불구하고 xml연동, 혹은 url만 js로 빼놓는 방법에 환호하며, 많이 사용하고 있습니다. 실질적으로 자바스크립트를 미지원하는 브라우저나 혹은 꺼놓은 사용자가 극 소수 라는 판단하에 작업을 진행 하는 것 이죠.

아래 기술되는 내용은 제가 구글링 과 관련 서적등을 통해 습득한 내용이므로 오류 등이 포함되어 있을 수 있습니다. 오류 및 버그, 잘못된 내용들에 대해 답글 및 메일 보내주시면 확인후 수정 하도록 하겠습니다.

그럼 xml접근 방법에 대해 알아봅니다.

xml을 연동하기 위해서는 먼저 익스플로러와 익스플로러 외의 브라우저 호환성을 맞춰 주어야 합니다.

익스플로러7버전 및 이하버전에서는 XML 객체를 ActiveX컨트롤러로 제공하며, 그외에 브라우저는 브라우저 내장객체로 제공합니다.

var xmlDoc=null;

if (window.ActiveXObject)

{

// IE용

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

}

else if (document.implementation.createDocument)

{

// Mozilla, Firefox, Opera, 기타 용

xmlDoc=document.implementation.createDocument("","",null);

}

else

{

alert('XML을 사용못하는 브라우저입니다.');

}

아...태그 및 스크립트용 css,js를 만들어 놔야 겠네요..ㄷㄷ..

window.ActiveXObject 를 지원하는 브라우저와 document.implementation.createDocument 를 지원하는 브라우저를 구분하여 각각 xmlDoc에 저장합니다. 과거 header정보를 통해 브라우저를 구분하기도 했었지만 그 방법은 절대 좋은 방법이 아니라고 하는군요.(헤더 정보는 쉽게 변경할 수 있기 때문에 정확하지 않다고 합니다)

여기까지 xml객체를 가지고 오는 방법 이었습니다.

이상입니다......(-_-..장난입니다.)

다음은 xml객체에 있는 아이들(??)을 꺼내다 써야 겠죠.

방법은 간단합니다. 물론 이방법이 정답은 아니며, 또한 어떤곳에 사용하느냐에 따라 다르게 코딩할 수 있습니다.

if (xmlDoc!=null){

xmlDoc.async=false; //xml문서를 완전히 읽을 때 까지 실행을 중지

xmlDoc.load("menu.xml"); //xml로드("경로")

var x=xmlDoc.getElementsByTagName("desc"); //xml 문서 내에 있는 desc이라는 태그에 접근

}

xml을 어떤식으로 짰느냐, 어떤식으로 구조화 했느냐에 따라 사용법 및 기타 방법은 달라 지겠습니다.

xml문서내에 <desc> 라는 태그에 접근하는 것 까지만 코딩 해 두었습니다. 그냥 저런식으로 접근하면 불러 올수 있다...라는 식으로, 나머지도 DOM을 이용한 접근방법을 어느정도 아신다면 어렵지 않으시리라 생각 됩니다.

물론 getAttribute로 속성값에 접근이 가능 하겠죠.

문서로 빼내는 방식은 여러분 자유 입니다. document.write 를 사용하셔도 되겠네요.

여기까지 허접한 퍼블리셔의 xml 연동 이었습니다.

여러모로 쓸데가 많지만 실상 저는 잘 사용은 하고 있지 않습니다. 이미 플래시에서 이부분들을 대체하고 있기 때문에 굳이 제가 xml에서 무언가를 불러와 써야할 이유가 없었거든요. 추가로 저희 회사에서도 xml에서 메뉴를 불러오기 보다는 js파일에 url코드들을 불러와 인수호출 하는 방식으로 사용하고 있어 특별히 xml에 깊이있게 공부 한적도 없습니다.

단. 모르는 것 보다는 아는게 힘이 되기 때문에 항상 공부하는 마음으로 ...

뭐 이런 이유로 이번 기회에(회사가 한가함..ㅡㅡ) 블로그 해 봤습니다.

허접하지만 도움이 되었으면 합니다.(여기까지 읽으셨으면 리플도 달아주세요-0-a)

감합니다.

2010년 6월 15일 화요일

접근성을 높이는 자바스크립트

얼마전 하코사에서(http://www.hacosa.com) 어떤 분이 질문 하시길 접근성을 해치지 않기 위해 자바스크립트를 사용하지 않고 css만으로 경고창을 띄우는 방법에 대해 물어 보셨습니다. 이 질문에 대한 답은 자바스크립트를 사용한다고 해서 접근성을 해치는 것은 아니다. 였지요.

웹표준과 웹 접근성이 부각 되기 시작하면서 자바스크립트에 대한 잘못된 견해를 보이시는 분들이 생겼습니다.

그중 하나가 자바스크립트가 접근성을 해친다는 것 입니다.

html, 브라우저 등과 함께 발전되어 온 것이 자바스크립트 입니다. 네스케이프와 익스 플로러 간의 브라우저 1차전때 부터 논란이 되어온 자바스크립트는 현재 어느정도 표준안이 제시되었고, 이제 자바스크립트 없이 웹페이지를 만들어 낸다는 것 은 사용자 환경을 배제한체 홈페이지를 만들어 내라는 말과도 같은 뜻이 될 정도로 중요하고 많이 사용되고 있습니다.

그렇다면 왜 접근성과 함께 자바스크립트가 논란이 되었는지 생각해 봐야 합니다.

구버전 스크립트의 사용

과거 브라우저 전쟁때(1996~1999 익스플로러와 네스케이프) 생겨난 라이브스크립트, j스크립트 등의 비표준 스크립트를 현재까지 사용함으로서 지원하지 않는 브라우저등이 있을수 있습니다. 예로 document.all , document.layers 등이 있겠습니다. 이때는 익스플로러와 네스케이프가 자신의 스크립트를 표준으로 만들기 위해 서로간의 호환성을 아주 떨어지게 만들어 낼 때였습니다.

innerHTML 의 사용

생각보다 많이 쓰이는 스크립트중의 하나입니다. 원하는 위치에 스크립트로 구성해놓은 태그를 삽입합니다. 하지만 이 방법은 어떻게 보면 매우 접근성을 떨어뜨리는 방법 입니다. 자바스크립트를 지원하지 않는 브라우저(물론 거의 모든 브라우저는 자바스크립트를 지원합니다.)혹은 자바스크립트를 꺼놓은 사용자의 경우 innerHTML로 구성된 내용은 확인할 수 없습니다.

자바스크립트를 이용한 url 접근

쉽고 효율적인 사이트 운영을 위해 사이트의 url을 한페이지의 js에 넣어두고 이를 함수로 호출해서 사용하는 방법이 있습니다. 유지보수 면에서 이만큼 효과적인 방법은 없습니다. 예를들어 한개의 메뉴가 바뀌면 이를 위해 수십페이지의 해당 메뉴 링크를 모두 변경해 줘야 하기 때문입니다. 그러다 보면 빠뜨리는 페이지 들도 생기게 되지요. 하지만 반면에 자바스크립트를 지원하지 않는 브라우저나 자바스크립트를 꺼놓은 사용자는 메뉴를 눌러 컨텐츠 접근을 하는데 제한이 됩니다.

특정 브라우저에 해당되는 스크립트 사용

가장 큰 예로 익스플로러에서 지원하는 미디어플레이어가 있습니다.

익스에서는 미디어플레이어 컨트롤러를 자바스크립트를 이용해 접근, 제어 할 수 있습니다.(버튼, 이미지등)

하지만 이렇게 해 놓으면 다른 브라우저에서는 해당 동영상을 볼 수 없습니다.

location.replace("")

사용자가 뒤로 버튼을 누를경우 다시 앞페이지로 이동되어 접근성을 해치며, 사용자 환경에도 좋지 않은 영향을 줍니다.

이밖에도 미처 생각하지 못했던 스크립트들이 접근성을 해치는등의 문제가 발생하여 자바스크립트는 접근성에 위배된다는 인식이 퍼지게 된것인지 모릅니다.

또한 예전에 짜 놓은 스크립트들을 무분별 하게 퍼다 쓰게 되어 생기는 문제점들도 있을 것 입니다.

css만으로도 만들어 낼 수 있는 여러가지 방법들을 무시한채 자바스크립트만으로 모든 것을 해결하는 것 또한 문제가 된다고 생각합니다.

눈에 띄지 않는 스크립트

2002년 스튜어트 랭그리지 는 '눈에 띄지 않는 스크립트'라는 용어를 만들었다고 합니다.

해당 내용은 PPK 자바스크립트 라는 책에서 일부 발췌 합니다.

스크립트는 사용성이 높아야 한다. 즉 스크립트는 사이트의 사용성을 눈에 띄게 높여야 한다.
스크립트는 접근성이 높아야 한다. 즉 웹페이지는 자바스크립트가 동작하지 않더라도 읽을 수 있고 이해할 수 있어야 한다.
스크립트는 구현하기 쉬워야 한다. 웹개발자가 스크립트를 웹페이지에 포함시키고 자바스크립트 훅(hook)을 추가하기만 하면 스크립트가 동작해야 한다.
스크립트는 분리돼야 한다. 스크립트는 HTML안에 흩어져 있는 것이 아니라 js파일에 따로 존재해야 한다.

html로 코딩을 한뒤 css로 표현을 하고, 자바스크립트로 동작되게 만들되 자바스크립트가 동작하지 않더라도 페이지를 읽는데 제한이 없어야 한다는 거죠.

접근성을 위한 스크립트...

굉장히 머리아픈 부분입니다.

첫째로 스크립트가 지원되지 않는 브라우저에서도 문제가 없어야 한다는 것입니다.

둘째는 마우스가 없을때도 웹을 돌아다니는데 제한이 없어야 합니다.

셋째로 스크린리더에 대한 접근성을 지켜 줘야 합니다.

위 세가지 만을 지키기 위해서도 굉장히 많은 공부를 해야 합니다. 또한 많은 생각을 해야 하지요.

첫번째의 가장 큰 예로 display:none 인 div 가 있고 사용자가 일정 이벤트를 호출했을때 해당 div 스타일이 block으로 바뀐다고 했을때 자바스크립트가 꺼져 있는 브라우저는 해당 내용을 확인 할 수 없습니다.

이를 해결하기 위한 간단한 방법은 자바스크립트를 이용해 해당 div의 display속성값을 none으로 잡아 주는 것입니다. 자바스크립트가 꺼져있는 브라우저는 해당 div의 속성값이 none으로 변하지 않아 페이지를 읽는데 제한이 없을 것 입니다.

둘번째의 예는 onmouseover이벤트에 onfocus이벤트도 같이 사용해야 한다는 것입니다.

세번째는 조금 길어집니다.

스크린리더기의 종류와 스펙이 상이하기 때문이죠.

제가아는 가장 큰 문제는 스크린 리더가 자바스크립트를 거의 지원하며, 페이지를 위에서 아래로만 읽고, 페이지를 줄단위로만 읽을 수 있다는 것입니다. 스크린 리더에 대한 문제 및 이를 위한 방법등은 구글링 등을 통해 알아 보시면 많은 방법들을 접하실 수 있을 것입니다.

이밖에도 많은 부분들을 생각하며 자바스크립트를 짠다면 접근성을 해치는 스크립트를 지양할 수 있을 것이라고 생각 합니다.

자바스크립트는 편리하며 보다 좋은 사용자 환경을 만들어 줍니다.

CSS가 널리 퍼지면서 가끔 무리하게 CSS만을 이용하시는 분들이 주변에 계십니다.

흔하게 사용되는 롤오버 이미지, 탭 등이 있습니다.

하지만 각각 오버되는 이미지들의 크기가 상이하고, 탭에는 시스템폰트가 전혀 사용되지 않았을때, 혹은 기타의 경우 굳이 CSS많을 고집하여 수많은 클래스와 아이디를 생성하고, 이에따라 몇십줄이 넘는 css를 추가하는것은 비효율 적이라고 생각 됩니다.

자바스크립트도 접근성을 고려하여 코딩한다면 절대 사용하지 말아야할 도구가 아닙니다.

차후에 블로그 등을 통해 몇가지 예제등을 올리도록 하겠습니다.

지금은 시간이...

긴글 읽어 주셔서 감사합니다.

egg 구매

올해 초 아내에게 노트북도 주고 나도 와이브로를 사용할 목적으로 와이브로 50G상품을 가입하면서 노트북을 한대 상품으로 받았습니다. 뭐..노트북이야 아내가 잘 사용하고 있지만, 와이브로의 활용도는 그렇게 높지 않더라구요. 노트북을 매일 들고 다니기도 귀찮고, 요즘은 거의 대부분 와이파이가 잡혀서 실상 방 구석에 모셔두고 다달이 돈만 내고 있었습니다.

사실 egg라는 녀석은 이미 와이브로 가입때 부터 알고는 있었지만 단가가 높아서 쉽게 구매하기 그랬는데, 이번에 중고장터에 새제품을 7만원에 올려 두신 분이 계셔서 구매하게 되었습니다.

가방에 조금 넣어가지고 다녔더니 붙어있던 녀석이 달랑달랑 거리네요-0-; 떼버려도 되지만 그래도 조금더 새제품 냄새를 풍기기 위해...

사이즈 비교 사진을 찍었어야 되는데 깜빡 했네요. 아이폰과 비교했을때 아이폰보다 조금 작고 두껍다고 생각하시면 됩니다.

전원버튼은 바닥에 붙어 있습니다.

4초정도 누르고 있으면 전원이 켜집니다.

리셋버튼은 기기 다운시 사용합니다.

전원을끌때도 마찬가지로 4초~6초정도 누르고 있으면 꺼지고, 20초 이상 누르면 공장 초기화가 됩니다.

전원이 켜지면 우측이 베터리 잔량 , 중간이 wifi, 좌측이 와이브로 수신률 입니다.

베터리 잔량은 색으로 표시되며 완충시 녹색불 입니다.

충전 및 와이브로 유심을 꽂는 곳입니다. 고무로 덮어둘수 있어 먼지등의 이물질로 부터 보호 하고 외관상 보기도 깔끔합니다.

패킷을 열면 유심을 꽂는곳과 충전기 꽂는곳이 있습니다.

휴대폰 충전기와 동일한 슬롯입니다.

동봉되는 충전기로 충전할 것을 권장하며, 일반 휴대폰 충전기로도 충전이 가능합니다.

컴퓨터 USB로 충전을 시도했으나 충전되지 않네요. 아마 USB전압 문제인듯 합니다.

충전은 약 4시간 정도면 완충 되는듯 합니다.(자세한 사항은 관련 메뉴얼 참고)

와이브로 수신률은 양호합니다.

다른 사용자 분들이 적은 글들도 검색해 보면 아시겠지만 생각보다 꽤 잘 잡아내는듯 합니다.

사용시간은 설명서에 사용대기가 아닌 실제 사용시간이 4시간으로 표기되어 있습니다.

실제 사용하면서 4시간을 풀로 켜둔적이 별로 없네요.

출퇴근시간 아이폰 웹서핑 및 동영상감상용 등으로 사용하기 때문에 필요할때만 켰다가 필요없을때는 끄는데,

베터리가 부족하다는 생각은 안들더군요.

뭐 사실 부족한건 아이폰 베터리죠-_-;

워낙 와이브로 자체가 속도가 안좋지만 아이폰으로 데이터 통화료 걱정을 하며 3G망을 사용하는것 보다 더 좋다고 생각하고 사용하고 있습니다. 지하철 에서는 거의 터지는듯 하구요. 6~7월즈음 업그레이드가 되어서 속도문제도 조금 개선된다고 하는군요. 다달이 돈만내면서 썩던 와이브로를 효율적으로 사용하게 되어 만족하면서 쓰고 있습니다.

아...추가적으로 얼마전 아이폰 및 기타 휴대기기를 충전할 수 있는 5200mA짜리 보조 베터리를 구매했는데 오늘 택배 오겠네요. 기대하고 있습니다. 요녀석이 있으면 에그도 충전이 가능하기 때문에+_+..

2010년 6월 14일 월요일

html5에 대한 퍼블리셔의 생각

이제 드디어 본격적으로 HTML5 와 관련된 책들이 나오는군요.

저도 그중 한권을 사서 훑어 보고 있습니다. 분명 혁신적이고 참 좋은데 실질적으로 바로 써먹을 수 없는 현실 때문인지

집중해서 보게 되지는 않네요.

물론 크론, 사파리, 파이어폭스 등의 브라우저가 HTML5의 현재까지나온 어느정도를 지원하고 있지만 아직까지 개발중인 언어임이 분명하므로, 어느순간 어떤 오브젝트가 생기고 사라질지 모르기 때문에 책의 앞 부분에서도 저자가 경고 하길, 이책이 쓰여지는 시점 이라는 기준을 분명히 잡아 주더군요.

꾀나 관심 가고 흥미로운 것 은 사실입니다.

솔직히 웹표준 코딩 을 위한 웹퍼블리셔가 생겨났고(혹은 UI개발자 라는), 이를 필요로 하는 회사들도 많이 생겨 났지만,

과연 제가 웹퍼블리셔로 이 위치에서 어느정도의 가능성을 확보할 수 있을까 라는 의문이 들었습니다.

HTML이라는것 자체가 누구나 쉽게 접근할 수 있고 습득할 수 있는 쉬운 문서 언어라는 것이기 때문이죠.

사실상 문서 자체를 만드는 것 은 내용과 관련된 태그들만 잘 알고 있다면 어려운 것은 아니니까요.

실제로 디자이너 = 코딩 이라는 개념을 갖고 있는 에이전시 및 업제도 많고, 외국에서도 비슷한 개념의 회사들이 종종 있다고 하더군요.

문제는 디자인 산출물을 CSS를 이용해 레이아웃을 잡고 그에따른 코딩과 크로스 브라우징을 해주고 하는 것 들이죠.

CSS로 레이아웃 과 디자인을 입혀 나가는 것 은 분명 매력있는 일일 수 있으나 짧게는 1~2년 에서 길게 4~5년 정도 경력이 쌓이시면 여기서 더 깊이 파고들고 싶은 무언가가 없어지는 공허함이 있을 수 있다고 생각 됩니다.(이건 어디까지나 저의 개인적인 생각입니다.)

그래서 자바스크립트라는 추가 무기를 갖게 되는건데요. 개인적으로 자바스크립트는 웹퍼블리셔가 정년을 늘리는데 한몫 할 것이라고 생각하고 있습니다. 아마도 자바스크립트 까지 어느정도 하시는 분들은 추가적으로 제이쿼리나 제이슨등을 서브로 잡고, 서버사이드 언어를 약간 공부하셔서 Ajax까지 구연하시는 분도 계신걸로 알고 있습니다.

이렇게 되면 개발자와 웹퍼블리셔(혹은 UI개발자..등등)의 업무가 중복되거나 모호해 지는 부분들이 많습니다.

저는 조금더 깊게 생각하게 되었습니다. 내가 웹에 발을 들여 놓은지 얼마 안되었으나, 살아 남기 위해서는 코딩하는 디자이너 혹은 코딩하는 개발자 사이에서 살아남을 수 있는 무언가가 확실히 필요 하겠다 싶었습니다.

이때 HTML5라는게 눈에 들어 왔는데요.

개인적으로 HTML5는 웹쪽 일 하시는 분들, 그중에서도 코딩을 맡고 있는 직군에서 주로 관심을 갖고 있었을뿐 일반에게 알려지지는 않고 있었는데요, 여기서 애플의 잡스가 한건 하죠.ㅡㅡ;

플래시 대체로 HTML5를 발언하면서 언론 및 각종매체에 어느정도 HTML5에 대한 소개 기사가 뜨게 됩니다.

개인적인 생각(자꾸 개인적인 생각이..)으로 HTML5를 쓰려면 언제쯤일까 라는 생각을 해봤습니다.

어떤 분은 2020년...어떤분은 더 멀게 보시는 분도 계시고 어떤분은 2012년...이라는 분도 계시더군요.

저는 2012년 ~2015년 사이정도로 보고 있습니다.

HTML5 개발이 완료되는 시점에서 HTML5의 사양을 따르는 브라우저가 두개이상 존재해야 한다고 하는데 이미 많은 브라우저가 현재 사양을 따라 계속적으로 업데이트 되는 중이므로 개발 완료와 동시에 표준이 되지 않을까 싶네요.

문제는 익스플로러 입니다.

우리는 앞으로 익스6,7,8 과 싸워야 할지도 모르겠군요..ㅡㅡ;

책을 보다 보니 추가된API를 모두 소화해 내기 위해서는 신규 직군이 필요할 수 도 있겠다는 생각이 들 정도 였습니다.

이게 모두 웹퍼블리셔의 몫이겠구나 라는 생각을 넘어서 말이죠-_-

향후 몇년간 얼마나 많은 분들이 웹퍼블리셔라는 직군으로 넘어오시거나 혹은 타직군으로 빠져나갈지는 모르지만, 확실한것은

앞으로의 웹퍼블리셔의 진로는(현재로서는) 희망적이다 라는 생각입니다.

익스9가 어느정도로 HTML5를 지원할지도 의문이긴 하지만 지원하겠다고 했으니 지원하겠죠.

물론 HTML5가 표준으로 채택되더라도 몇년 혹은 10년이상 익스플로러 잔재를 위해 예전같은 (네스케이프와 익스를 맞추기위해 JS파일을 따로두는등)일을 반복하게 될지 모르지만. 어찌 되었든 앞으로의 웹은 빠르게 발전하고 변화하고 있으므로 우리들은 이에 맞춰 나가야 할듯 합니다.

이 블로그가 모바일에서 이렇게 심하게 접근성이 떨어지는지..

텍스트 큐브 기본 스킨을 사용하고 있는 이 블로그가 모바일 사파리에서 글을 보는게 제한되는지 오늘에서야 알았다-_-; 이런 제길..ㅠ,.ㅜ;

귀찮지만 조만간 조금씩 뜯어 고쳐 줘야 겠다...에혀...정말 귀찮은거 질색인데....엉엉...

자바스크립트를 이용한 그래프

DOM을 이용해서 그래프를 만들었다.

코딩도 상당히 까다로웠지만 생각보다 재밌는 스크립트 였던것은 분명하다.

굳은 머리가 잘 안돌아 갔으나.-_-

function graphControls(){

var maxNum = 100;//그래프 맥스 인원

var minBars = 392;

var maxBars = 493;

var barsWidth = 101;

var hitNum = document.getElementById('graph_ul');

var hitarr = new Array;

var moveBars = new Array;

for (var i=0;i<4;i++ ){

hitarr[i] = document.getElementById('graph_num'+i).firstChild.nodeValue;

moveBars[i] = (Math.floor(Number(minBars+(barsWidth*(hitarr[i]/maxNum))))<(minBars+maxNum))?Math.floor(minBars+(barsWidth*(hitarr[i]/maxNum))):maxBars;

}

for (var j=0;j<4 ;j++ ){

document.getElementById('bars'+j).style.left = moveBars[j]+'px';

document.getElementById('point'+j).style.left = moveBars[j]+94+'px';

}

분명 누군가 혹시라도 이글을 보고 가져다 사용하시려 하신다면 말리고 싶다.

그렇게 잘 짜여진 스크립트도 아닐 뿐더러, 이벤트용 단기성 으로 만들어 진 것이며, 그래프가 거의다 그럴것이기 때문에 그때그때 필요에 따라 코드가 바뀌어야 하기때문에..-_-;

이건 그냥 나를 위한...흔적??쿠쿡...

2010년 3월 30일 화요일

아이폰,안드로이드 운영체제 Touch Event

모바일 브라우저의 Touch, Gesture Event 처리 방법에 대해서 정리해봅니다.

다른 여러 사이트에서 아이폰에대해서는 정리가 많이 되었던데요...

저는 http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html 이 블로그를 참조하여 아이폰과 안드로이드 폰에 대해서 함께 정리하여 봅니다.

Android and iPhone touch events

Android, iPhone은 공통적으로 터치와 관련해서 다음과 같은 이벤트를 제공합니다.

touchstart - mouseDown 이벤트와 비슷한 이벤트로 손이 화면에 닿으면 발생
touchmove - mouseMove 이벤트와 비슷한 이벤트로 손 터치한 상태로 이동하면 발생
touchend - mouseUp 이벤트와 비슷한 이벤트로 손을 화면에서 뗄때 발생. 아이폰의 경우 touchcancel 이벤트가발생
touchcancel - bit of a mystery 라고 표현하네요. 쬐금 이상하다는...

예제)

document.addEventListener('touchstart', function(event) {


    alert(event.touches.length);

}, false);

Event object

위의 예제에서 보듯이 Touch Event Object는 touches array를 포함하고 있다.

안드로이드의 경우 이벤트에는 한개의 터치 오브젝트를 포함한다. 즉 touches.length는 1이다.

터치 아이폰의 경우에는 멀티터치가 가능하기 때문에 touches array를 통해서 핸들링 할 수 있다.

터치 이벤트 객체는 마우스 이벤트 객체와 같이 pageX, pageY 등의 값들을 포함하고 있다.

예제 )

document.addEventListener('touchmove', function(event) {


    event.preventDefault();


    var touch = event.touches[0];


    console.log("Touch x:" + touch.pageX + ", y:" + touch.pageY);

}, false);


clientX: X coordinate of touch relative to the viewport (excludes scroll offset)
clientY: Y coordinate of touch relative to the viewport (excludes scroll offset)
screenX: Relative to the screen
screenY: Relative to the screen
pageX: Relative to the full page (includes scrolling)
pageY: Relative to the full page (includes scrolling)
target: Node the touch event originated from
identifier: An identifying number, unique to each touch event

iPhone Touch and Gesture Events

애플의 WebKit은 안드로이드와 달리 몇가지 것들을 추가적으로 지원한다. touchEnd 이벤트는 event.touches array에서 현재 touch 를 제거해준다. 대신 event.changeTouches array를 이용해서 볼 수 있다.

애플 iPhone의 터치 이벤트 객체

touches - touchStart, touchMove, touchEnd 의 터치 정보를 포함하고 있는 array
targetTouches - 같은 target Element로부터 비롯된 touches 정보를 포함
changedTouches - 모든 touch 정보를 가지고 있는 객체

Gesture events

애플에서는 pinching, rotating과 같은 멀티 터치 이벤트를 처리할 수 있도록 지원한다.

gesturestart - 멀티 터치 시작
gesturechange - 멀티 터치를 해서 움직일 때 발생
gestureend - 멀티 터치 이벤트가 끝날때 발생

멀티 터치를 위한 이벤트 객체는scale, rotation 값을 갖고 touch 객체가 없다.

예제 )

document.addEventListener('gesturechange', function(event) {


    event.preventDefault();


    console.log("Scale: " + event.scale + ", Rotation: " + event.rotation);

}, false);

Event table

touchstart	touchmove	touchend	gesturestart	gesturemove	gestureend
Android	y	y	y	n	n	n
iPhone	y	y	y	y	y	y
has event.touches	y	y	y	n	n	n
(iPhone) has event.scale and event.rotation	n	n	n	y	y	y
(iPhone) touch in event.touches	y	y	n	-	-	-
(iPhone) touch in event.changedTouches	y	y	y	-	-	-

원본 : http://blog.hometown.co.kr/123

※ 참고 Link :

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

http://developer.apple.com/safari/library/documentation/appleapplications/reference/SafariWebContent/HandlingEvents/HandlingEvents.html