자바스크립트 패킹(packing) 툴 소개

Posted in 모바일/Javascript // Posted at 2010. 9. 29. 14:30
728x90

코드를 알아 보기 힘들게 만드는 것을 '코드 난독화' 라고 한다
닷넷이나 자바와 가은 가상머신 기반의 프로그램은 컴퓨터가 직접 해석할 수 있는 네이티브 코드 생성 이전에 중간언어과정을 거치게 되어 있다

이러한 중간언어는 '디스어셈블러' 같은 툴로 다시 원 코드로 복원시킬 수 있다
이렇게 되면 배포된 프로그램의 소스를 쉽게 읽을 수 있기 때문에 코드 낙독 처리를 통해 소스의 가독성을 떨어뜨려 소스를 보호하게 된다

특히나 웹의 경우 소스는 여지없이 공개되는 구조이다
HTML, CSS 는 물론이고 자바스크립트 코드도 모두 공개되는 구조이다

자바스크립트 패킹은 일종의 소스 보호 차원에서 스크립트 코드를 난독화하고 더불어 소스를 압축 및 최소화하여 다운로드 속도도 향상시켜 주기 때문에 많은 곳에서 적용하고 있다

이 블로그에서 소개한 Raphale 과 같은 라이브러리도 아래와 같이 패킹되어 있다



즉 자바스크립트 패킹은 난독화 처리 및 소스 사이즈를 줄여 소스를 보호하고 다운로드 성능을 향상시키기 위해 사용하는 방법이다

물론 패킹된 스크립트를 언패킹 하면 소스 보호의 의미는 사라진다 할 수 있으나
일부 언패킹이 불가능한 패킹 방법도 있으니 참고 바란다

스크립트를 패킹해 주는 툴은 몇 가지가 있는데, 대표적을 한가지를 소개한다
웹에서 바로 패킹/언패킹을 해 볼 수 있는 툴이다
http://dean.edwards.name/packer/
http://www.strictly-software.com/unpacker#unpacker

참고로 악성스크립트도 이와 같이 패킹되는 추세이니 참고 바란다

728x90

확실히 웹 기술을 둘러싼 주변 환경은 변화하고 발전하고 있음을 느낀다
훌륭한 오픈소스 라이브러리가 속속 등장하는 것만 봐도 실감할 수 있다

지금 소개할 Raphael 역시 MIT라이센스를 따르는 자바스크립트 벡터 라이브러리이다
http://raphaeljs.com/

SVG와 VML을 이용하여 웹에서 벡터그래픽을 표현한다
객체 및 함수로 추상화가 되어 있어 사용법을 익혀 쉽게 이용할 수 있다

Raphale 라이브러리는 문서화가 잘 되어 있어 사용법을 익히는데 큰 도움이 된다
사이트의 문서를 보면 각 그래픽 요소에 따른 설명과 사용법, 결과 화면등이 체계적으로 제공되어 학습 및 적용하기에 매우 편리하다

Raphale 사이트에서 모든 정보를 얻을 수 있다
중요한 것은 이제 웹에서 벡터 그래픽을 보다 쉽게 그리고 안정적으로 (그리고 무료로) 구현할 수 있게 되었다는 것이다

참고로 IE (6이상) 를 포함한 대부분의 브라우저를 지원한다는 것도 큰 장점이다

728x90

아이폰에서 플래시가 구동되지 않는 것은 꽤 오래된 이슈이다
지금 소개하는 Gardon이라는 라이브러리 역시 공개된지 꽤 되었다

Tobias Schneider 라는 외국의 한 개발자가 만든 이 라이브러리는
플래시런타임 없이 순수 자바스크립트(& SVG) 만으로 플래시를 구동시켜 주는 오픈소스 라이브러리이다

플래시런타임에 비해 기능이나 실행 속도면에서 부족한 면이 있지만,
아이폰과 같이 플래시를 지원하지 않는 환경에서 플래시를 구동시키기 위한 훌륭한 대안이 될 수 있다

다음의 github 사이트를 통해 라이브러리의 소스가 제공된다
http://github.com/tobeytailor/gordon

그리고 이 라이브러리를 이용해 플래시를 구동시키는 데모는 아래 사이트에서 확인할 수 있다
http://paulirish.com/work/gordon/demos/

벡터 그래픽 기반인 플래시의 표현을 위해 SVG가 이용되었으며 플래시파일인 swf 파일을 전달하면 Gordon 라이브러리를 통해 자동 분석, 변환된다. 이때 큰 swf 파일의 분석시 실행 성능과 멈춤현상을 없애기 위해 HTML5의 Web Worker 기술을 사용했다고 한다

소스만 봐도 대략 사용법을 쉽게 알 수 있는데,
더 자세한 사용법과 Gardon의 특징을 보려면 다음의 링크를 확인해 보기 바란다

http://wiki.github.com/tobeytailor/gordon/


브라우저 지원 현황과 플래시 지원 범위
Gardon을 실무에 적용하기 위해서 먼저 점검해 봐야 할 것이 이 두가지이다
어떤 브라우저에서 그리고 플래시의 어디까지를 지원하는지 체크하는 것이 중요하다

우선 Gardon 은 모든 플래시 기능을 다 지원하지는 않는다
swf 버전 1 기능 위주로 지원이 되며 swf 버전 2 ~ 10까지의 플래시 기능은 일부만 지원된다
아래의 링크에서 Gardon이 지원하는 swf 태그를 확인하도록 하자
http://github.com/tobeytailor/gordon/wiki/swf-tag-support-table

그리고 브라우저 지원현황은 아래 링크를 확인하자
http://wiki.github.com/tobeytailor/gordon/browser-support-table

대략 테스트를 해보니,IE(8)를 제외한 사파리,크롬,파이어폭스,오페라 최신 버전에서 정상 동작한다


참고로 이 라이브러리는 MIT 라이센스로, 사용상의 문제만 책임진다면 자유롭게 이용할 수 있다

Visual Studio 에서 HTML5 템플릿 만들기

Posted in 모바일/HTML5 // Posted at 2010. 9. 28. 15:20
728x90
간혹 글을 쓰다 보면 카테고리를 어디에 둘지 애매할 때가 있다. 이 글이 그러하다.
이 글에서 소개하는 내용은, 마이크로스프트의 닷넷 개발툴인 Visual Studio 2010 환경에서 HTML5 개발을 편하게 하기 위한 템플릿을 제작하는 것이다

원문글의 필자와 나처럼 Visual Studio를 주로 사용하는 개발자에게는 도움이 되나 그렇지 않은 개발자에게는 도움이 되지 않을 수도 있다. 이 글은 HTML5 자체가 아니라 Visual Studio를 다루는 내용에 가깝기 때문이다. 그래서 HTML5 카테고리에 은근슬쩍 집어 넣기가 살짝 꺼려진다.
(그렇다고 이 글을 위해 VisualStudio 카테고리를 만들 수는 없지 않나)

하지만 HTML5 의 기본 문서 구조나 템플릿 구조를 포함하고 있기에 HTML5와 완전히 동떨어져 있다고만 할 수는 없다. 결국 이 글은 이 블로그의 HTML5 카테고리만큼 어울리는데도 없다는 결론이다 ㅎㅎ

원문글> How to Create HTML5 Website and Page Templates for Visual Studio 2010

제목 그대로 Visual Studio 2010 에서 HTML5 에 관한 웹사이트 템플릿과 페이지 템플릿을 만드는 방법을 소개하는 글이다. 글을 보면 알겠지만, 템플릿을 만들고 VS2010 적용하는 것 자체는 매우 간단하기때문에 쉽게 적용해 볼 수 있다.

개인적으로 이 글에서 강조하고 싶은 것은 VS2010 템플릿 제작방법이 아니라,
필자가 템플릿을 제작한 동기와 권장되는 HTML5 템플리 구조 그리고 HTML5 프로젝트의 기본 코드 구성을 강조하고 싶다

우선 필자는 VS2010 을 자주 다루는 MS 직원으로써 현재 HTML5와 JavaScript 에 꽂혀 있다고 한다
(음... 이 점은 현재의 나와 매우 유사하다고 볼 수 있다 ㅎ)

그러다보니 자연스레 VS에서 쉽게 HTML5 프로젝트를 생성하고 싶었고 그러던 찰나에
blog post by Zander Martineau 를 보고 영감을 얻어 VS용 HTML5 템플릿을 만들기로 했단다
(음.. 이 점은 나보다 낫다. 난 뭐냐.. 이런 영감도 없다뉘...)

재미있는것은 blog post by Zander Martineau 글의 필자도 HTML5 Boilerplate 로부터 코드를 참조했다고 한다. 꼬리에 꼬리를 무는 형태의 글이다. 하나의 글을 통해 세개의 유용한 정보를 취득한 셈이다

그리고 HTML 기본 코드 구성에 대해 잠시 살펴보면,
HTML5 문서임을 정의하는<!doctype html> 으로 출발하여 기본적인 meta 태그들 그리고 기본으로 깔고 있는 스타일 정의를 포함하고 있다. 또한 jQuery 라이브러리 추가를 위한 Google, MS 의 CDN 스크립트 정의, HTML5 지원여부를 판별하기 위한 Modernizr 라이브러리 정의 역시 포함하고 있다.
또한 (간혹 욕은 듣고 있지만) 여전히 HTML5 브라우저 호환성의 주요한 대안인 구글 크롬 프레임 적용을 위한 코드도 포함되어 있다

블로그 관련글: Modernizr 라이브러리  ,
  JQuery 사용 환경 설정

이러한 코드을 통해 HTML5문서가 갖추어야 할 기본적인 구성과 참조항목을 알 수 있다는 것이 주요하다. 결론적으로 VS 를 다루는 개발자들에게는 쉽게 HTML5 프로젝트를 생성하는 법을 알려 주는 유용한 정보이며 그렇지 않은 개발자들에게는 HTML5의 기본적인 코드 구성을 알려 주는 유용한 정보인 것이다

표준은 결국 (사회적) 동의이다

Posted in 일상 // Posted at 2010. 9. 27. 15:12
728x90
웹 표준 ! , 이미 그 중요성은 알만한 사람은 다 안다

IT 특히 웹에 있어 표준에 대한 목마름의 역사는 얼마되지 않았지만, 이미 '표준' 이라는 것은 세상 천지를 뒤 덮고 있었다

표준이라는 것은 결국 같은 환경에 처해 있는 구성원들이 필요로 하는 (혹은 필요에 의해 생긴)
'
사회적 동의' 이다


과거 중국 통일의 대명사로 불리우는 진나라는 제후국들을 통일 한 후 교량 너비, 마차 (바퀴) 크기, 화폐 크기 및 단위 등을 하나로 통일하였다. 이것 역시 표준이 정립되었다고 할 수 있다.

이러한 표준화는, 제후국들이 독립적으로 각각의 단위를 사용할 때는 문제가 되지 않았으나
통일 제국에서는 모든 제후국이 하나의 나라로 합쳐져 상호 교역과 왕래에 불편함이 야기되었기 때문에  발생한 필요성으로 정립되었다고 할 수 있다.

IT에 있어 표준 역시 기술적 진보 혹은 시행착오를 모두 거친 마지막 결정체라고만 볼 수는 없다
과거 진나라가 그러했듯이 표준은 필요에 의해 기존 것들이 다시 재 정립된 개념에 불과할 수도 있다

물론 표준은 비효율적인 요소 제거, 향상된 기능 추가등 진보된 개념이 추가될 수 있지만
이것은 표준화 과정에 수반되는 의지적 활동 내지는 산물이지 표준이 곧 진보라고 할 수는 없는 것이다

이 블로그에서 많이 다루고 있는 HTML5 역시 차세대 웹을 위한 표준 스펙이다
HTML5 역시 난무하는 플러그인 기술을 하나로 통일하고 새로운 마크업 기준을 만들기 위해 기존 웹 마크업의 개념을 재정립한 것이라 할 수 있다. 물론 의지적 개선사항을 포함한 채.

과거 넷스케이프 브라우저와 인터넷 익스플로러의 상이한 DOM 모델은 웹 문서에서 요소를 추출할 때 다음과 같은 서로 다른 문법을 사용했어야만 했다

document.all['elementName'] <=> document.layers['elememtName']

결국 같은 동작을 하는 것이지만 표현 규칙이 달라 불편함이 야기되었다
(이 예는 꽤 과거의 시나리오이다. 현재의 DOM은 거의? 표준이며 개발자의 인식도 많이 바뀌었다)

IT 이외의 환경에서도 이와 같은 동일 개념에 대한 두가지 표현이 혼용되는 것을 종종 볼 수 있다

문득 든 생각은 토지의 크기(면적)나타내는 '' 이다
2007년부터 '평'은 '면적(제곱미터)'으로 그 단위 표현이 변경되었다. 1평은 대퍅 3.3제곱미터이다

그러나 아직까지 'x평'이 더 익숙한 사람이 많다. 나도 그 사람들 중 하나이다
누가 집을 구했다고 하면, '몇 평인가요?' 라고 하지 '몇 제곱미터 인가요?' 하지는 않는다

다만 부동산 사이트나 기타 토지 관련 문서에는 제곱미터로 나와있다
그러나 부동산 사이트에서도 사람들의 인식 전환이 미흡한 관계로 '평형<->제곱미터'환산기'를 제공하고 있다. 그리고 공인중개사 사무실에서 중개자와 구매자사이의 의사소통은 여전히 평형에 더 가깝다

이 말은 곧 필요에 의해 사회적 약속을 정했지만 그 속에 속한 구성원들의 인식은 아직 미흡하여 일종의 과도기를 거치고 있는 것이다. 다만 긴 시간 이러한 혼란이 지속되는 것은 바람직하지 않다
'평'이 더 익숙하긴 하지만, 사회적 약속인 제곱미터의 빠른 안착(?)을 기대해 본다
(과거 거리의 보편적 단위였던 '리' 의 개념이 사라지고 '킬로미터' 가 안착한 것 처럼..)

웹 기술에 있어 표준은 토지 면적의 그것과는 비교할 수 없을 만큼 복잡하다
HTML, CSS, JavaScript, DOM 등 많은 기술 요소가 혼재하며 브라우저 업체들의 서로 다른 기반기술과 이해관계가 얽혀 있어 표준을 위한 걸음은 어찌보면 복잡하고 더디기도 하다

HTML5를 예로 들어, 표준이 제대로 정착되기 위해서는
W3C에서 HTML5 의 표준 스펙을 정확히 제시하고 각 브라우저 업체들은 이를 제대로 구현해야 하며 마지막으로 개발자들의 인식의 전환이 마무리 되어야 한다

과거 많은 웹 기술 요소가 이미 표준화 되었고 현재에도 더욱 심도 있는 요소들의 표준화가 진행되고 있다. 표준이 무조건 개선이라 할 수 없지만 '동의'에 근거하고 있는 이상 설왕설래 할 것 없이 우리 자신의 인식부터 표준화 시킬 필요가 있겠다

이상, 우연히 평과 제곱미터를 웹 표준과 연계시켜 생각해 본 잡설이었다
두서 없는 글이다. 정리를 목적으로 하지 않은 잡설이기에 그대로 포스팅 한다 ㅎㅎ

'일상' 카테고리의 다른 글

구글, 크롬OS 발표, 기대와 혼란!  (8) 2010.10.18
MS 어도비 인수?  (17) 2010.10.08
IE9 Beta 1 출시, 향상된 브라우징  (6) 2010.09.16
블로그 실명제 !!  (6) 2010.09.16
H.264 무료 선언?  (6) 2010.08.30

MS의 고뇌?, 실버라이트와 HTML5

Posted in 모바일/HTML5 // Posted at 2010. 9. 16. 17:28
728x90
언젠가 MKEXDev.NET 사이트를 통해, MS의 실버라이트와 HTML5 지원에 대한 내용을 언급한 적이 있다. => MS의 RIA시장 출사표-실버라이트

MS가 HTML5를 전폭 지원하는 행보와 기술적 대립관계(?)에 있는 실버라이트에 대한 의지의 충돌(?)에 관한 것을 언급하였다

자사에서 밀고 있는 기술과 대립하는 다른 기술 모두를 전폭 지원하는 MS의 오묘한 행보는 재미있는 이슈 꺼리이다. 오늘 디지털 데일리에서 IE9 베타1 출시와 더불어 이 주제에 대해 언급한 기사가 떳다

=> MS IE9의 이상한 양다리 전략…실버라이트냐 HTML5냐

글에서 기자는 빌게이츠가 사라진 MS의 리더십 부재로 인한 전략실패를 예상하고 있다
기술 전략이 하나로 세워지지 못해, IE9 담당부서와 실버라이트 담당부서, 모바일 담당부서 모두 각각 다른 그림을 그리고 있다는 예상이다

재미있는 분석이다. 날카로운 기자의 눈으로 분석한 것인만큼 나름의 의미가 있어 보인다

그러나 만일, 빌게이츠가 있었다고 하더라도 MS 입장에서 HTML5 를 무시할 수 있었을까? 하는 생각이 든다. 기자는 '웹 브라우저 바깥에서 이용되는 기술로써의 실버라이트' 전략으로 HTML5와의 상생 가능성을 내비치고 있다.

MS는 플래시가 그랬던 것처럼, HTML5와 대립이 아닌 상생관계 내지는 각각 나름의 영역을 가진다는 입장이다. 그러나 실버라이트는 아직 플래시 만큼 시장 지배적이었던 적은 없다.
그래서 더욱 고뇌가 될 것이며 이 예깃거리가 더욱 재미있어 지기도 한다

비슷한 꿈을 꾸는 서로 다른 기술, 이 둘을 안고 갈수 밖에 없는 MS의 입장, 재미있는 상황이다


IE9 Beta 1 출시, 향상된 브라우징

Posted in 일상 // Posted at 2010. 9. 16. 17:01
728x90

마이크로소프트의 다음 버전 브라우저인 Internet Explorer 9 의 베타1 이,
오늘(2010.09.06) 정식 공개 되었다


국내 웹 표준의 걸림돌이자 편중된 브라우징 환경의 주범(?)이었던 IE가 그 행보를 완전히 탈바꿈하게 되는 계기가 아닌가 싶다.

성능도 대폭 향상되었으며 웹 표준을 준수하고 HTML5, CSS3 와 같은 최신 웹 기술들이 적용되었다

IE 9 Beta 1 에 대한 Bloter 블로거의 글을 보자
=> 웹표준 맞춤 ‘IE9′, 반가운 격세지감

블로그의 글 중 주요한 몇 가지 문구를 가져와 본다

'한국 인터넷 이용자 100명 가운데 96명은 IE로 웹을 즐긴다'
'IE9는 차세대 웹표준인 HTML5나 CSS3을 온전히 지원하는 웹브라우저다'
'그 전까지 ‘가두리 웹’ 주범으로 손꼽히던 MS IE가 이젠 웹표준 지원을 핵심 기치로 내건다'
'W3C 웹표준 준수 테스트인 ACID3 테스트에서 100점 만점에 95점을 받았다'
: '속도도 빨라졌다. IE9는 IE8보다 11배 빠른 새로운 자바스크립트 엔진을 적용했다'


사용자 입장에서 IE9의 소개와 주요 개선사항은 다음의 PDF 문서를 참고하자
=> IE9 소개 및 하이라이트

개발자 입장에서 IE9 베타의 향상된 기능을 살펴 보려면 다음의 링크를 참조하자
=> 개발자용 Internet Explorer 9 베타 가이드

그리고 IE9의 개선사항들을 직접 체험할 수 있는 테스트 페이지는 다음의 링크를 참조하자
=> IE9 Test Drive

이 모든 링크는 MS 의 공식 IE 사이트를 통해 확인할 수 있다
=> http://msdn.microsoft.com/ko-kr/ie/default.aspx

 

'일상' 카테고리의 다른 글

MS 어도비 인수?  (17) 2010.10.08
표준은 결국 (사회적) 동의이다  (7) 2010.09.27
블로그 실명제 !!  (6) 2010.09.16
H.264 무료 선언?  (6) 2010.08.30
향상된 브라우저 환경  (2) 2010.08.26

블로그 실명제 !!

Posted in 일상 // Posted at 2010. 9. 16. 15:37
728x90

블로그 이름을 변경했다

금년 6월부터 시작한 차세대플랫폼 프로젝트의 방향이 급변할 기미가 보이기도 하고, 그렇다면 기존 블로그 이름인 '모바일 플랫폼 프로젝트 노트 since 2010.06' 는 맞지 않는 부분이 있기도 하며
이와 더불어 프로젝트와는 상관없이 실명을 걸고 더 책임있게 운영해 보자는 일종의 '블로그 실명제' 일환으로 다음과 같이 블로그 이름을 변경하였다

박종명의 모바일플랫폼 since 2010.06

앞으로 이 블로그는 프로그래머로써의 모바일, 오픈, 차세대 환경에 대한 적응기, 기술로그, 에피소드 등을 기록해 나갈 예정이다. 실명이 걸렸으니 더욱 책임있게...

728x90
HTML5의 드래그 앤 드롭은 웹 페이지로 다른 대상 객체를 끌어다 놓을 수 있는 기능을 제공한다
블로그에서 드래그 앤 드롭을 다룬적이 있으며 다음의 글을 참고하자
=> [HTML5] 드래그 앤 드롭 (Drag & Drop)

이전 글에서 간단한 데모를 다뤘었는데, 동일한 페이지에 있는 select 박스간 항목의 이동이었다
이번에는 웹 페이지 외부에 있는 파일(이미지파일, 텍스트 파일)을 웹 페이지로 드래그 해서 놓는 실습을 해 보도록 하자

우선 먼저 참고할 사항은, 브라우저간 일관되지 않은 결과가 나타난다는 것이다
http://caniuse.com/ 사이트에 따르면 드래그 앤 드롭은 IE와 오페라를 제외한 크롬,사파리,파이어폭스에서 동작한다고 되어 있다. 그리고 이번 데모에서 사용할 HTML5 File API 역시 크롬,사파리,파이어폭스에서 동작한다고 되어 있다.

그러나 막상 테스트를 해 보면 조금씩 다른 결과를 보여주어 당혹스럽게 한다
HTML5 자체가 브라우저마다 조금씩 다르게 지원하거나 일부가 누락된 경우가 있다고는 하지만
드래그 앤 드롭에 있어서는 더욱 일관되지 못함을 볼 수 있다

어쨋던 이 글에서 만든 데모는 파이어폭스에서 정상 동작하며 크롬에서 동작시키기 위해서는 특정 API를 제거해야 한다. 데모를 보여준 후 추가로 언급하겠다

실습, 외부파일을 웹페이지로 끌어다 놓기
웹 페이지이 외부 즉 데스크탑에 있는 이미지 파일 혹은 텍스트 파일을 웹 페이지의 DIV 영역으로 끌어다 놓는 데모를 제작해 보자

드래그 앤 드롭에 대한 기술적 요소는 이전에 작성한 강좌를 참고하도록 하며,
추가로 사용된 HTML5 File API 는 데모를 통해 알아보도록 하자

데모를 간단히 설명하면 이미지를 드롭했을 때에는 페이지에 이미지가 표시되며 텍스트파일을 드롭했을 때에는 텍스트파일의 내용이 페이지에 표시되도록 한다


바로 전체 소스코드를 보도록 하자
<!DOCTYPE html>
<html>
  <head> 
  <style>
    #dropbox {
    margin: auto;
    width: 300px;
    height: 300px;
    border: 5px solid #3C2F2E;
    -moz-border-radius: 15px;
    margin-top: 30px;
  }
  </style>
  </head> 
  <body>         
    <div id="dropbox" ondragenter="onDragEnter(event)"  ondragover="onDragOver(event)"
       ondrop="onDrop(event)">           
    </div>           
  </body>
</html>
<script type="text/javascript">               
  var dropBox = document.getElementById("dropbox");         
  var dropImage = document.createElement("img");  
         
  function onDragEnter(event){   
      if (event.dataTransfer.dropEffect == "move")
        event.preventDefault();                   
    }   
  function onDragOver(event){
    if (event.dataTransfer.dropEffect == "move") {
      event.preventDefault();     
  }                 
  function onDrop(event){                               
    var file = event.dataTransfer.files[0];     
          
    var imageType = /image.*/;
    var textType = /text.*/;
    var isImage;
   
    if(file.type.match(imageType)){
      isImage = true;
    }
    else if(file.type.match(textType)){
      isImage = false;
    }
            
    var reader = new FileReader();   
   
    reader.onload = (function(aFile){return function(e) {        
        var result = e.target.result
        if(isImage){
          dropImage.src = result;                                                                           
          dropBox.appendChild(dropImage)
         }
         else{
           dropBox.innerHTML = result;
         }        
        };
      })(file);
     
    if(isImage){ reader.readAsDataURL(file); }
    else { reader.readAsText(file,"EUC-KR"); }
   
    event.stopPropagation();
    event.preventDefault();
  }                     
 
  dropImage.addEventListener("load", function(e) {
    //이미지 로딩 시 추가 처리할 로직 기입(사이즈 조절 등)           
  }, true);         
</script>


드롭 이벤트에서(onDrop)에서 외부 파일을 드롭했을 때 그 정보를 취득하기 위한
다음의 코드가 사용되며
  event.dataTransfer.files[0],

이렇게 전달된 파일 데이터를 읽기 위해 FileReader(File API 중 파일을 읽기 위한 객체)를 사용했다
FileReader의 Load 이벤트에서 드롭으로 전달된 파일정보를 읽어 들여 이미지 혹은 텍스트를 DIV 에 출력하는 것이다
> 이미지 읽기: reader.readAsDataURL(file);
> 텍스트 읽기: reader.readAsText(file,"EUC-KR");

아래 그림은 데모를 실행한 결과모습인데, 텍스트 파일과 이미지 파일을 드롭한 후 또 다른 이미지 파일을 드롭하기 위해 웹페이지로 옮기는 모습니다. 전체 코드이기에 직접 실행해 보기 바란다.
소스나 기능이 최적화 되지는 않았지만 응용을 위한 기본자료로써는 충분할 것이다



우선 이 데모는 파이어폭스에서만 정상 동작한다
만일 크롬에서 동작시키려면 event.dataTransfer.dropEffect 속성을 사용해서는 안된다
아마도 크롬 브라우저는 dataTransfer 객체의 dropEffect 속성이 구현되지 않았나 보다

즉 onDragEnter 와 onDragOver 이벤트코드에서 if (event.dataTransfer.dropEffect == "move")
부분을 제거하거나 아래와 같이 두 이벤트를 무시하면 된다
ondragenter="return false;"
ondragover="return false;"

이로써 파이어폭스와 크롬에서 잘 동작하지만 사파리와 오페라는 여전히 동작하지 않는다
주제와 벗어나는 말이지만, HTML5의 드래그앤드롭과 File API 는 아직 실서비스에 적용하기에는 무리가 있지 않나 싶다

외부파일의 드래그 드롭은 아래 사이트를 참조하면 보다 유익한 정보를 얻을 수 있다
http://demos.hacks.mozilla.org/openweb/imageUploader/ (파이어폭스에서 실행해야 함)

http://hacks.mozilla.or.kr/2010/07/an-html5-offline-image-editor-and-uploader-application/

https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/html5_code_example_of_file_api_drag_drop_hard_drive_files_to_a_webpage28?ca=dgr-jw22BobHTML5Tip1&lang=en

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

Visual Studio 에서 HTML5 템플릿 만들기  (6) 2010.09.28
MS의 고뇌?, 실버라이트와 HTML5  (10) 2010.09.16
[HTML5] LocalStorage 와 크로스브라우저  (10) 2010.09.14
[CSS3] Animation  (18) 2010.09.13
[CSS3] Transform  (10) 2010.09.10
728x90

이전 글에서 소개한 RGraph 와 유사한 라이브러리를 소개한다
jQuery 의 플러그인 형태로 제공되는 Visualize 라이브러리 이다

HTML5 그래픽 관련 툴을 찾던 중 알게 된 이들 라이브러리는 아주 유용하며 안정감 마저 든다
아직 표준안이 완성되지 않은 기술에 기반 라이브러리가 먼저 등장하는 점은 HTML5를 선호하는 사람에게는 매우 고무적이라 볼 수 있겠다

Visualize 역시 HTML5 의 Canvas 를 통해 차트를 표현하며 jQuery 기반으로 동작한다

RGraph 가 그래프 및 차트에 이용되는 데이터를 스크립트를 통해 RGraph 객체로 정의하는 반면,
Visualize 는 HTML 테이블에 정의된 데이터를 자동으로 분석해서 차트로 변환해 주는 특징이 있다
또한 RGraph 처럼 브라우저 호환성을 위한 장치가 마련되어 있다

직접 테이블의 데이터를 수정하면서 차트의 변화를 확인할 수 있는 다음의 링크로 이동해 보자
http://www.filamentgroup.com/examples/charting_v2/

그리고 라이브러리 소개 페이지이다
http://www.filamentgroup.com/lab/
update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/

RGraph, HTML5 그래프 라이브러리 소개

Posted in 모바일/Javascript // Posted at 2010. 9. 14. 15:38
728x90

HTML5 의 Canvas 를 이용해서 각종 그래프를 만들어 주는 라이브러리이다

비 상업적 사이트일 경우 무료로 사용 가능하다
(상업적 사이트일 경우 소정의 수수료를 요구하는 것 같다)

바차트, 도넛차트, 파이차트, 간트차트, 로즈차트 등 다양한 형태의 차트를 지원하며 도움말이 충실히 제공되어 쉽게 사용할 수 있다. 그래프 표현 뿐만 아니라 줌기능, 컨텍스트 메뉴 등록, 비동기 출력, 애니메이션 효과 등 2D 그래픽과 관련한 유용한 기능들도 구현되어 있다

그리고 예제를 보면 Canvas를 지원하지 않는 브라우저를 위한 코드 즉 IE8 의 Canvas 적용을 위한 ExplorerCanvas 와 구글 프레임을 적용하는 등 브라우저 호환성을 신경 쓴 모습이다
 
이 사이트에서 공식적으로 소개하는 브라우저 지원 목록은 아래와 같다
- Mozilla Firefox 3.0+
- Google Chrome 1+
- Apple Safari 3+
- Opera 9.5+
- Microsoft Internet Explorer 8+ (see note)


현재 시점에서(2010.09.14) 최종 릴리즈 버전으로 2010.08.28일자가 등록되어 있으며 최종 베타버전으로는 2010.09.11자가 올라와 있다.

캔버스기반의 그래프라이브러리로 훌륭한 선택이 될 수 있을것 같으며 꼭 적용하지 않더라도 캔버스를 이용한 그래픽 작업을 하는데 있어 좋은 학습 자료가 될 수 있을 것 같다
아래의 사이트에서 자세히 확인해 보도록 하자
http://www.rgraph.net/

[HTML5] LocalStorage 와 크로스브라우저

Posted in 모바일/HTML5 // Posted at 2010. 9. 14. 12:26
728x90

크로스 브라우저 스토로지 (크로스 브라우저 쿠키)
HTML5 에 새로 추가된 Web Storage 는 쿠키와 유사하지만 조금 더 진보된 형태의 클라이언트 저장소를 지원한다. Web Storage 는 영구데이터를 위한 localStorage 와 세션 범위의 SessionStorage 로 나뉘어진다. 자세한 내용은 다음의 글을 참고 바란다
=> [HTML5] Web Storage

localStorage 에 관련한 다음의 질문에 답해 보기 바란다

'크롬 브라우저에서 저장한 localStorage의 값을 사파리 브라우저에서 조회할 수 있는가?'

금방 답 할 수 있으면 일단 다행(?)이다. 그럼 이 질문은 어떤가?

'IE 브라우저에서 저장한 쿠키(Cookie)를 크롬 브라우저에서 조회할 수 있는가?'

이 두 질문은 동일한 이슈를 다루고 있다. 즉 '크로스브라우저(Cross Browser)' 이슈이다
크로스 브라우저는 각기 다른 브라우저 환경을 말하며, '크로스 브라우저 가능' 이라는 말은 브라우저가 달라도 기술의 구현이나 사용은 동일(일관)하다는 의미로 해석된다

다시 질문으로 돌아가 보자
HTML5의 localStorage 까지 갈 것도 없이, 쿠키(Cookie)의 크로스 브라우저 문제를 생각해 보자. 
'각기 다른 브라우저(크롬,사파리,파이어폭스,오페라 등)에서 쿠키의 공유가 가능한가?' 하는 문제이다

좀 더 현실적인 예로 다시 풀어 보면,
'쿠키로 사용자 인증 처리를 하는 사이트의 경우 IE에서 로그인한 사용자가 크롬에서 해당 사이트에 접근했을 때 로그인이 유지되는가?' 하는 문제이다

이전에 한번이라도 이와 유사한 이슈를 경험해 본 사람은 쉽게 답할 수 있을 것이다
그러나 모르긴 몰라도 꽤 많은 사람이 헷갈려 하지 않나 싶다(이 글을 쓰는 나 역시 헷갈렸다 ㅡ.ㅡ)


크로스브라우저 쿠키의 착각, IE 의존성이 가져온 결과?
고민(?)의 발단은 이러했다
HTML5의 localStorage 를 위한 저장소는 각 브라우저별로 서로 다른, 즉 자신만의 위치에 데이터를 저장하기 때문에 '크로스 브라우저 스토로지'가 지원되지 않는다는 자연스러운(?) 결론에 이르게 되었다

그러나 한편 생각해 보면 여러 브라우저를 사용하는 사람에게는 꽤 문제가 될 수 있지 않나 싶었다
기껏 유용한(또는 주요한) 정보를 localStorage 에 저장해 뒀는데 다른 브라우저로 접근하면 사용할 수 없다는 것은 사이트 개발자는 물론 사용자의 불편을 야기시킬 수 있기 때문이다

이즈음 든 생각은, '그럼 쿠키는?' 이었다
여기서 나의 착각이 시작되었다. 순간 당연히 쿠키는 크로스 브라우저가 된다고 생각한 것이다
'쿠키는 크로스브라우저가 가능한데 쿠키의 개선 버전이라는 localStroage 가 안되다니?'
'이건 뭐 제약사항이 하나 더 늘었구만!!' 하는 어처구니 없는 착각 ^^;

하지만 웹 실무를 벗어난지 꽤 오랜 시간 되었고 이건 착각일 수도 있겠다라는 의문이 들어 테스트를 해 보기로 했다.

테스트 결과, 당연히 될 줄로만 알았던 '크로스 브라우저 쿠키'가 안되는 것이었다
음.. 이건 뭥미? 하며 잠시 멍 때린 후, 생각을 정리하기로 했다

'그래, 쿠키가 표준이지 쿠키 저장소가 표준은 아니다' 라는 것이다

즉 웹을 위한 클라이언트 측 데이터 저장소로써 쿠키라는 개념이 통용되지만 그 저장 위치는 정해져 있지 않다는 것이다. 곰곰히 생각해 보면 저장 위치를 딱 한 곳으로 표준화 할 수도 없다는 것이다

이러한 나의 착각은 어디에서 비롯되었을까? 하고 생각해 봤더니, 'IE 의존적인 개발로 인한 착각' 이라는 생각이 들었다.(물론 제대로 알지 못한 나 자신이 1차 문제인건 안다 ㅡ.ㅡ)

내가 한참 웹 개발 실무를 디테일하게 수행했던 시기는 2000년대 초반이었으며 그 당시에는 지금보다 훨씬 더 IE 의존적인 환경이었다. 웹 2.0 이라는 트랜드도 낯설었거니와 몇몇 독특한 사람을 제외하고는 거의 대부분의 사람이 IE를 사용하고 있었으며 웹 표준이라는 개념 역시 지금처럼 일반화되지 않는 시기였다. 따라서 대부분의 웹 개발은 IE 를 기준으로 작성되었으며 크로스브라우저 테스트는 거의 해 보지 않았다는 것이다. (간혹 여러개의 브라우저를 띄워서 데이터 공유가 되는가.. 하는 등의 테스트는 해 보았지만, 이것 역시 IE를 여러개 띄운 테스트가 대부분이었다)

결국 IE 의존적인 개발은, IE 에 한정된 테스트 환경에 그쳤으며 IE 적 개념이 점차 정립된 것이다
'크로스브라우저 쿠키의 착각'도 이러한 IE 의존성에서 비롯되었다라고 해도 과언은 아닐 듯 싶다
(물론 제대로 된 조직 및 개인은 그 당시에도 크로스 브라우저 테스트및 개념이 있었겠죠?
 이 글은 저의 경우, 저의 착각에 한해 예기 하는 것이니 오해 사절 입니다)

지금에야 아이폰을 필두로 한 모바일 웹의 급 부상, 이미 오래된 웹 2.0 트랜드, 웹 표준 이슈, HTML5 등장, 과거와는 다른 브라우저간 경쟁 및 발전으로 IE 의존성이 점차 해소되는 분위기이며 특히 개발자들은 더욱 다양한 브라우저를 체험하고 있다. 

사실  나 역시 모바일 웹, HTML5에 관심을 두기 전에는 거의 IE만 사용했었다
근래 들어 크롬, 사파리, 파이어폭스, 오페라와 같은 브라우저를 동시에 사용하고 있다. 
이 글 역시 여러 브라우저를 동시에 사용했기에 든 의문이며 그렇지 않다면 꽤 오랜시간 착각과 망각속에 살지 않았겠나.. 싶다


크로스 브라우저 쿠키, 크로스 브라우저 스토로지, 가능한 시나리오는 없는가?
브라우저를 넘나드는 클라이언트 데이터 저장소의 실현을 고민해 보자

크로스 환경이 필요한가를 먼저 따지자
우선 원론적인 질문을 해 보자. '브라우저 경계를 넘어서는 데이터 공유가 필요한가?' 이다
다시 말해 IE에서 저장한 데이터를 크롬에서 불어와야 되는가? 하는 것이다
예를 들어 IE에서 로그인한 사용자가 크롬에서도 여전히 로그인이 되어 있어야 하는가? 이다
매우 크리티컬한 이슈가 아니라면 적당히 양보(?)할 수도 있을 것이다
크로스 브라우저가 정말로 필요한지? 서버측 데이터 공유로 풀어도 되지 않는지? 하는 원론적인 고민을 해 보고 반드시 그럴 필요가 없다면 굳이 크로스 환경을 지원하지 않아도 된다는 말이다
그러나 반드시 크로스 환경이 보장되어야 한다면 다음 글로 넘어가자

브라우저마다 각각 저장하자
불편하기는 하지만 가장 심플한 해결책이다
매번 브라우저에서 쿠키가 존재하는지 검사하고 없다면 쿠키를 기록하는 것이다
예를 들어 IE에서 쿠키를 저장하고 크롬에서 쿠키를 읽어 올때 존재하지 않는다면 다시 쿠키를 기록하도록 하는 것이다. 다른 브라우저도 마찬가지로.
사용자 인증 시나리오에서 이 기법이 적용된다면 사용자는 브라우저를 교체할 때 로그인을 다시 해야 하는 불편은 감수해야 한다. 그러나 용납할 만한 수준이지 않는가
(이 시나리오는 HTML5 localStorage에도 그대로 적용된다)

플래시의 Shared Object 를 이용하라
플래시에는 클라이언트 측 데이터 저장과 공유를 위한 Shared Object 라는것이 존재한다
플래시 런타임은 브라우저와는 별도의 플러그인 환경이기 때문에 브라우저가 달라진다고 해서 문제될 것이 없다. 다만 플래시 런타임이 브라우저에 설치되어 있어야 한다는 문제가 있다
웹 표준, 특히 아이폰과 같은 모바일 환경에서는 무리수 일 수 있다는 것이다

PersistJS 라이브러리를 이용하라
Paul Duncan 이라는 사람이 만든 라이브러리이다. 클라이언트 측 자바스크립트 영구 저장소를 구현한 것이다. 플래시 플레이어와 같은 별도의 플러그인이 필요 없으며 크로스 브라우저를 지원하는 API가 제공된다. 이 라이브러리를 직접 이용해 보진 않았지만 아마 locaStroage나 Shared Object 와 같은 기존 스토로지 솔루션에 기반하여 데이터를 저장하며 크로스 브라우저를 위한 자동화된 처리가 포함된 듯 하다. 관심 있는 자 테스트 해 보기 바란다. 아래 주소에서 라이브러리 다운로드 및 확인이 가능하다.
http://pablotron.org/?cid=1557

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

MS의 고뇌?, 실버라이트와 HTML5  (10) 2010.09.16
[HTML5실습]드래그앤드롭:외부파일을 웹페이지로 끌어다 놓기  (11) 2010.09.15
[CSS3] Animation  (18) 2010.09.13
[CSS3] Transform  (10) 2010.09.10
[CSS3] Transition  (10) 2010.09.09

[CSS3] Animation

Posted in 모바일/HTML5 // Posted at 2010. 9. 13. 14:06
728x90
Animation (개체에 애니메이션 효과를 주다)
CSS3 에는 웹 페이지 개체에 동적인 효과를 주기 위한 흥미로운 기능들이 추가되었는데

앞서 살펴본 Transition 이나 Transform 과 같은 특성들이 바로 그것이다

여기에 더불어 Animation 이라는 특성도 추가되었는데 이것은 말 그대로 웹 페이지에 애니메이션을 구현할 수 있는 특성이다. 물론 Transition 이나 Transform 과 같은 특성으로 애니메이션 효과를 줄 수는 있지만 이는 임의의 (정해진) 한 상태에서 다른 상태로의 변화를 주어 동적 효과를 주는 것인 반면 Animation 을 이용하면 동적 효과의 시작점과 종료점을 명시적으로 제어할 수 있다는 특징이 있다

즉 Transition 이나 Transform 은 변화된 상태, 변화하는 과정은 제어할 수 있지만 변화의 시작부터 종료까지의 제어는 별도의 스크립트를 통해서만이 가능하다는 것이다

Animation 에서 제어할 수 있는 변화의 시작점과 종료점은 키프레임(keyframe)이라는 개념으로 설명된다. 플래시나 다른 동적 효과를 다루는 툴을 다뤄봤다만 키프레임이라는 단어가 익숙할 것이다
키프레임을 간단히 설명하면, 애니메이션을 구성하는 동작의 키가 되는 프레임을 말하며 이 프레임들의 연결 및 이동으로 자연스러운 동적 효과의 처리가 가능하다

웹킷 기반 브라우저에서만 가능
Transitino 이나 Transform 은 비록 그 스펙이 완성되지는 않았지만 브라우저별 접두어를 사용하는 임시특성을 이용할 수 있었지만 Animation 은 현재까지 웹킷 기반 브라우저만 지원하고 있다
즉 사파리와 크롬 브라우저에서만 Animation 을 지원하고 있다
(따라서 이 글에서는 W3C의 표준명 대신 -webkit- 접두어를 이용하여 설명하기로 한다)

키프레임
Animation 효과 중심이 되는 개념이라 할 수 있다
애니메이션 효과를 위한 CSS속성을 각각의 프레임으로 정의하고 이 프레임들이 연결되어 동적효과를 주게 된다. 즉 애니메이션을 위한 시작~종료 사이의 동적 효과를 각각의 프레임으로 정의하는 것이다

키프레임의 간단한 예를 보도록 하자. 아래 코드는 두개의 키프레임을 정의한 것이며 각각은
투명도와 너비 속성의 변화를 주는 것이며 from ~ to 즉 시작과 종료 프레임을 정의한 것이다
(키프레임 정의 오른쪽의 myAnimation 은 이 프레임셋의 이름(name)이다)

@-webkit-keyframes myAnimation {
  from opacity: 0.1; width: 150px;  }
  to    opacity: 1.0; width: 300px; }
 }

키프레임은 비율로도 나눌 수 있는데 다음과 같이 정의할 수 있다. 애니매이션 효과를 위한 4개의 프레임이 비율로 정의되었으며 정해진 시간 내 비율에 맞게 변화가 이어져 나갈 것이다
@-webkit-keyframes myAnimation  {
  0%     { left: 100px; }
  40%   { left: 150px; }
  60%   { left: 75px;  }
  100% { left: 100px; }
}

form, to, 그리고 비율을 혼합하여 정의할 수도 있다

애니메이션 속성
키프레임으로 동적효과를 위한 각 변화의 지점을 정의한 후 이 프레임들이 어떤식으로 연결되는지를 설정하는 애니메이션 속성을 정의해야 한다. 애니메이션 속성으로 애니메이션이 실행되는 시간, 반복 횟수, 변화의 정도, 프레임 연결 방향등을 지정하게 된다

-webkit-animation-name
키 프레임을 지정한다. 앞서 키프레임의 이름을 여기에 매핑 시킨다

-webkit-animation-duration
애니메이션이 실행되는 총 시간을 지정한다. 이 시간내에 키프레임이 연결되어 애니메이션이 실행된다
(기본 값: 0)

-webkit-animation-iteration-count
애니메이션의 반복횟수를 지정한다. 기본적로 키프레임은 시작~종료까지 한번만 실행된다
두번이상 실행하고 싶으면 이 속성에 반복하고자 하는 횟수를 지정하면 된다
만일 계속 실행(무한 실행)하고 싶을 경우 infinite 를 지정하면 된다 (기본 값: 1)

-webkit-animation-direction
키프레임의 연결 방향을 지정한다. 기본적으로 키프레임은 from(혹은 0%) ~ to(혹은 100%) 방향으로 연결된다. 만일 역방향으로의 연결을 원한다면 alternate 를 지정하면 된다 (기본 값: normal)

-webkit-animation-timing-function
키프레임간 변화의 정도를 지정한다. Transition의 그것과 동일하며 다음 글을 참고 바란다
(기본 값: ease) [CSS3] Transition

-webkit-animation-play-state
애니메이션의 실행 상태를 지정한다. running 와 paused 값이 있다(기본값: running)
애니메이션 실행 도중 일시정지, 재시작 시킬 경우 이용한다

-webkit-animation-delay
애니메이션이 시작되기 전 대기시간을 지정한다 (기본 값: 0, 즉시 시작)


애니메이션의 간단한 예
키프레임과 애니메이션 속성을 이용하여 간단한 동적 효과를 처리해 보자
이미지의 투명도와 너비 그리고 회전각의 변화를 두 개의 프레임으로 정의하였다
애니메이션 속성은, 2초 동안 정방향<->역방향을 번갈아 가면서 무한대로 실행하도록 한다


<img src="son1.bmp">
.....
<style>
@-webkit-keyframes myAnimation {
 from {
    opacity: 0.1;
    width: 150px;
    -webkit-transform: rotate(15deg);
  }
 to {
    opacity: 1.0;
    width: 300px;
    -webkit-transform: rotate(0deg);
  }
}

 img {
   -webkit-animation-name: myAnimation ;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-direction: alternate;
 }
</style>


데모를 실행하면 이미지의 크기와 투명도 그리고 회전각도의 변화가 지속적으로 번갈아 가며 실행되는 것을 확인 할 수 있을 것이다
 
              è  


참고>
http://www.w3.org/TR/css3-animations/
http://robertnyman.com/2010/05/06/css3-animations/
http://webkit.org/blog/324/css-animation-2/

 

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

[HTML5실습]드래그앤드롭:외부파일을 웹페이지로 끌어다 놓기  (11) 2010.09.15
[HTML5] LocalStorage 와 크로스브라우저  (10) 2010.09.14
[CSS3] Transform  (10) 2010.09.10
[CSS3] Transition  (10) 2010.09.09
[CSS3] 새로운 스타일  (6) 2010.09.07

[CSS3] Transform

Posted in 모바일/HTML5 // Posted at 2010. 9. 10. 11:21
728x90
Transform (개체를 변형시키다)
CSS3의 Transform 특성을 이용하면 웹 페이지에 표시되는 개체의 다양한 변형 효과를 줄 수 있다
(보통 웹 페이지에 표현되는 각종 개체를 태그의 입장에서 바라 봤을 때 Element 라 부르지만 개체라 불러도 무방하다고 본다)

회전 효과, 스케일링(확대/축소) 효과, 기울임 조절, 위치 변경과 같은 흥미로운 변형 처리가 가능하다

브라우저별 접두어
Transform 역시 스펙이 완성되지 않은 단계라 각 브라우저별 임시 특성을 이용해야 한다
계속해서 언급하지만 접두어는 다음과 같다
- 웹 킷 기반 브라우저(크롬, 사파리): -webkit-transform
- 파이어폭스: -moz-transform
- 오페라: -o-transform

Rotate (회전 효과)
개체를 주어진 각도로 회전 시킬 수 있다
각도의 범위는 +- 0 ~ +- 360 도 중 하나의 각도를 선택할 수 있다
참고로 'ㅡ' (마이너스) 각도는 시계 반대 방향으로 회전 시킨다
-webkit-transform: rotate(45deg);




Scale (확대/축소 효과)
개체의 크기를 조절 할 수 있다. 확대/축소 비율을 지정하여 크기를 조절한다
개체의 원래 크기는 1 이며 2배,3배,... N배 와 같이 확대 수치를 지정한다
확대 수치는 소수점도 가능하여 1.5배, 1.12 배 등도 사용 가능하다
-webkit-transform: scale(1.5);




그리고 확대/축소 시 가로,세로 방향을 지정할 수 있다
예) scaleX(2): 가로로 2배 확대, scaleY(2): 세로로 2배 확대

Skew (기울임 효과)
개체를 주어진 각도로 기울일 수 있다
X, Y 축을 기준으로 기울이게 되는데 X축은 좌/우로, Y축은 상/하로 기울이는 효과를 준다
X 축에 +(플러스) 각도는 우측으로 , -(마이너스) 각도는 좌측으로 기울이는 효과이며
Y 축에 +(플러스) 각도는 아래쪽으로, -(마이너스) 각도는 윗쪽으로 기울이는 효과를 준다

예) skewX(+-10deg); skewY(+-10deg); skew(+-10deg,+-10deg);

-webkit-transform: skew(10deg,10deg);




Translate
개체의 위치를 옮길 수 있다. 주어진 크기 만큼 좌/우, 상/하로 위치가 조정된다
-webkit-transform:translate(10px, 20px);

translateX , translateY 로 각 축을 따로 지정할 수도 있다
실행 화면은 생략 한다


Transform 과 Transition 의 조화
웹 페이지의 개체에 대한 각종 변형을 지원하는 Transform 과 CSS 속성 변경에 대한 부드러운 처리 과정을 지원하는 Transition 을 조합하면 그럴싸한 에니메이션 효과를 줄 수 있게 된다
즉 Transform 역시 스타일에 관련한 CSS속성이기 때문에 Transition 효과의 대상이 될 수 있으며 이 둘의 조합으로 흥미롭고 유용한 동적 스타일 효과를 줄 수 있다는 것이다

예를 들어 skew 로 이미지가 기울어 지게 하는데 Transition 효과를 주어 서서히 그리고 점점 기울어 지게 할 수 있다. 즉 Transform 의 변형과정을 Transition 으로 조절하여 에니메이션 효과를 준다는 것이다

간단히 코드로 작성해 보면 다음과 같다
<style>
img {      
-webkit-transition: -webkit-transform 2s ease-in-out;
}  
img:hover {
 -webkit-transform: skew(10deg,10deg);
}
</style>


이미지에 마우스를 올렸을때 skew효과로 이미지가 기울어지는데 이때, Transition 의 대상 CSS속성이transform으로 지정되어 있기 때문에 기울이는 과정이 2초에 걸쳐 부드럽게 전개되는 것이다.
서서히 움직이는 실행화면을 여기서 보여주기 힘드니 직접 테스트를 해보기 바란다


데모 사이트 소개
Transform 에 대한 효과를 강하게(?) 체험하고 싶다면 다음의 사이트를 방문해 보기 바란다
http://www.westciv.com/tools/3Dtransforms/index.html

Transform 관련 수치와 각도를 직접 설정하면서 각종 변형을 확인 할 수 있어 매우 직관적이다
그리고 이 글에서 주로 설명된 X,Y 축 기반의 2D Transform 외에 Z 축을 기준으로 하는 3D Transform 의 예도 살펴 볼 수 있다. 다만 3D Transform 은 2D에 비해 더 제한적인 브라우저 지원이 있다는 것을 기억하기 바란다. 아래 그림은 이 사이트 화면을 캡쳐한 것이다



그리고 다음의 사이트도 추가로 확인해 보기 바란다
http://cdn.net.tutsplus.com/581_cssTransitions/demos.html
http://css3.bradshawenterprises.com/#how2transitions

참고>
http://www.w3.org/TR/css3-2d-transforms/

https://developer.mozilla.org/en/CSS/-moz-transform
http://www.westciv.com/tools/3Dtransforms/index.html

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

[HTML5] LocalStorage 와 크로스브라우저  (10) 2010.09.14
[CSS3] Animation  (18) 2010.09.13
[CSS3] Transition  (10) 2010.09.09
[CSS3] 새로운 스타일  (6) 2010.09.07
[HTML5] 의미있는 문서, 시맨틱(Semantic) 요소  (4) 2010.09.06

[CSS3] Transition

Posted in 모바일/HTML5 // Posted at 2010. 9. 9. 14:16
728x90
Transition (CSS 속성에 에니메이션 효과를 주다)
Transition 의 사전적인 뜻은 '(다른 상태・조건으로의) 이행(移行)[과도(過渡)] ' 이다
즉 뭔가의 상태가 어떤 조건에 의해 다른 상태로 변화되어 간다는 의미이다

CSS3 새로운 특성인 Transition 역시 이와 유사한 맥락으로 해석된다
개체에 적용된 스타일을 대상으로 주어진 시간과 조건으로 부드럽게 상태를 변화시키는 기술이다

예를 들어 색상이나 위치와 같은 CSS 속성을 다른 색상, 다른 위치로 변경 시킬 수 있어 일종의 에니메이션 효과를 줄 수 있다는 것이다

Transition 조건을 위한 속성
Transition 을 위한 다음 4가지의 조건 설정이 가능하다

1) transition-property
색상이나 위치 등 변화의 대상이 되는 CSS 속성을 지정한다. ex) background-color
transition-property 로 지정된 CSS 속성은 이후 변화가 있을 때마다 transition 조건에 영향을 받는다

2) transition-duration
A스타일 -> B스타일로의 변화에 걸리는 시간을 초단위로 지정한다. ex) 4s
이 시간 설정으로 인해 스타일의 변화가 서서히 전개 되는 것이다


3) transition-delay
변화가 시작되기 전 시간을 초 단위로 지정한다. ex) 1s
스타일의 변화를 주기전에 일정 시간 대기(지체)해야 할 경우 사용한다

4) transition-timing-function
Transition 을 통한 효과를 줄 때 변화되어 가는 흐름, 시간에 따른 변화 속도와 같은 일종의 변화되어 가는 정도를 지정하게 된다. 보통 플래시나 익스프레션 블랜드와 같은 디자인 툴에서 에니메이션 효과를 줄 때 자주 사용된다. 큐빅 베지어(cubic-bezier) 값을 이용하여 제어하게 되는데 미리 정해둔 5개의 키워드가 제공된다. 다음의 제공되는 키워드와 그의 값이다
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0) , 기본값
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

만일 이 5개의 키워드 외에 직접 값을 제어하고 싶을 경우 다음과 같이 직접 지정 하면 된다
cubic-bezier(0.2, 0.4, 0.7, 0.8)

큐빅 베지어 값을 이해하기 위해 다음 그래프를 참고 하자
다섯 가지 값의 변화를 직접 눈으로 볼 수 있는 데모가 제공되며 이 중 그래프만 발췌했다
http://www.the-art-of-web.com/css/timing-function/



Timing Function Control Points(W3C 발췌)


Transition 사용법 및 (브라우저별) 접두어

Transition 효과를 주기 위해서 앞서 설명한 4가지 속성을 따로 지정하거나 한 줄에 모두 지정할 수 있다 즉 다음의 두 설정은 동일한 것으로, 개체의 투명도(opacity) 속성을 2초에 걸쳐 변하도록 한다
그리고 변화를 시작하기 전 1초를 대기시키는 예이다

한줄 설정>
 transition: opacity 2s 1s ease

각 속성을 따로 정의> 
 transition-property: opacity;        
 transition-duration: 2s;      
 transition-delay: 1s;    
 transition-timing-function: ease;

그리고 몇몇 CSS3 새 특성들과 같이 Transition 역시 그 스펙이 완성된 것이 아니라서 브라우저별 임시 특성을 이용해야 한다. 즉 아래와 같이 브라우저에 따른 접두어를 붙여야 한다
- 웹 킷 기반 브라우저(크롬, 사파리): -webkit-transition
- 파이어폭스: -moz-transition
- 오페라: -o-transition

Transition 의 간단한 예
Transition 을 이용해 CSS 스타일이 부드럽게 변화하는 간단한 데모를 만들어 보자
앞서 설명한 내용인데, 이미지의 투명도를 변화시키는 예이다

기본적으로 이미지가 최초 로딩될 때는 완전 불투명 상태이다(기본 상태 Opacity=1)
Transition 을 이용해 1초 후 투명도를 변화시키는데 총 2초에 걸쳐 투명도가 0.2이 되도록 한다

이후 이미지의 투명도 변화는 Transition 조건에 영향을 받게 되는데,
마우스가 이미지 위에 올라오는 hover 상태에서 투명도를 1로 다시 변화시킨다
이 변화 역시 Transition 조건에 의해 hover된 뒤 1초 후 변화가 시작되어 총 2초에 걸쳐 완정불투명상태로 서서히 변화한다

<img id="hello" src="son.bmp">

<style>
img {      
opacity: 0.2;    
-webkit-transition-property: opacity;       
-webkit-transition-duration: 2s;     
-webkit-transition-delay: 1s;   
-webkit-transition-timing-function: ease;
}  

img:hover {      
opacity: 1;  
}
</style>

브라우저에서 데모를 실행을 해 보면,
이미지가 로딩 되고 1초 후 부터 서서히 투명해 지기 시작한다.
총 2초에 걸쳐 투명도가 0.2가 될 때까지 진행된다. 그리고 이후 이미지에 마우스를 올리면 또 다시 서서히 이미지가 밝아 진다(완전 불투명이 될 때까지)


 

 

 

 

 


 

è

 

 
변경 대상이 되는 CSS 속성을 하나 이상 지정할 수도 있는데,
앞의 데모의 투명도와 더불어 크기도 Transition 대상 속성이 되도록 해 보자

아래와 같이 코드를 수정하였다. 한줄로 단축해서 표현했으며 Opcity, width 속성이 Transition 대상이 되도록 하였다. 그리고 width 변화는 1초동안, opacity 변화는 3초 동안 진행되도록 하였다. 이렇게 하면 최초 로딩시 그리고 마우수 horver 시 서서히 이미지가 커지면서 밝아지는 효과를 줄 수 있다.

<style>
img {      
opacity: 0.2;    
width: 150px;
-webkit-transition: width 1s ease-out, opacity 3s ease;
}  

img:hover {      
opacity: 1;  
width: 300px;
}
</style>

 
              è  

이렇게 두 개 이상의 CSS속성을 Transiction 대상으로 지정할 수 있는데,
예에서 처럼 각각의 CSS속성에 다른 조건을 주거나 다음처럼 한꺼번에 같은 조건을 줄 수도 있다
-webkit-transition: all 3s ease;


Transition정리

Transition을 이용해 에니메이션 같은 스타일 효과 주기 위해 다음의 것들을 이해하면 된다

1) 변경될 스타일의 대상
어떤 속성에 변화를 줄지를 결정하는 것이다. CSS 속성 중 어떤 속성이 변화의 대상이 되는가 하는 것이다. 앞서 예에서는 이미지의 너비(width)와 투명도(opacity) 이 그 대상이 되었다
즉 하나 이상의 CSS 속성을 Transiction 대상으로 지정할 수 있다

2) 스타일의 처음 상태와 변경된 상태
Transition은 CSS 속성을 변화시켜 스타일 효과를 주는 것이다
따라서 속성이 변화되기 전 처음 상태 값과 변경된 후 상태 값에 대한 이해가 있어야 한다
앞서 예에서는 img 전체에 Transition효과를 주었다. 이럴 경우 처음 상태는 이미지가 처음 로딩될 때 브라우저가 적용하는 기본 값이 처음값이다.

즉 앞 예에서의 최초 상태는 투명도 1, 크기 0 이며 이미지가 로딩 된 후 투명도 0.2, 크기 150px가 되었다. 그리고 hover 될 때 처음 상태는 바로 직전 상태에서 hover 스타일 값으로 서서히 변경되는 것이다

3) 기타 조건
Transition 설정을 통해 시작 전 대기 시간(초), 총 걸리는 시간(초) 등 세부 조건을 지정하면 된다

CSS의 에니메이션 효과과 관련된 예는 직접 실행 해 보는 것이 좋다
앞 데모도 직접 브라우저에서 그 동작을 확인해 보기 바란다


클릭에 반응하여 움직이는 이미지 만들기
마지막으로 Transition을 이용해 움직이는 이미지 효과를 만들어 보고 글을 마치도록 하겠다
CSS의 속성 중 margin-left 속성의 변화를 통해 이미지의 위치를 조정하는 예이다

Transition 에서는 margin-left 의 변화에 반응하도록 지정하며
개체의 className 속성을 이용해 스타일의 상태 변화를 유도하게 된다
이 데모는 구글의 html5rocks 을 참고한 것이다
<img id="myImage" src="son.bmp">
.....
<style>
img {      
-webkit-transition: margin-left 1s ease-in-out;
}  
img.left {
 margin-left: 0;
}
img.right {
 margin-left: 780px;
}

</style>
<script>
var content = document.querySelector('#myImage');
content.addEventListener('click', function() { 
  if (this.className == "right") {
    this.className = "left";
  }
  else {
    this.className = 'right';
  }
}, false);
</script>

데모를 실행 하고 이미지를 클릭하면 좌/우로 이미지가 이동하는 것을 확인할 수 있다

참고>
http://www.w3.org/TR/css3-transitions/
http://css3.bradshawenterprises.com/#how2transitions
http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

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

[CSS3] Animation  (18) 2010.09.13
[CSS3] Transform  (10) 2010.09.10
[CSS3] 새로운 스타일  (6) 2010.09.07
[HTML5] 의미있는 문서, 시맨틱(Semantic) 요소  (4) 2010.09.06
HTML5와 함께 빠른 웹 개발을 위한 최고의 지침  (4) 2010.09.06