Firefox 4 모바일 (Maemo 및 Android) 버전이 출시되었습니다. 새 버전에 대한 주요한 기술 사항을 보시려면 Madhava의 글을 참고하시기 바랍니다.
Firefox 4 동일 엔진 사용
모바일 및 데스크톱 버전의 렌더링 엔진은 동일 합니다. 따라서 HTML5, CSS3 및 최신 자바스크립트 API를 모두 사용할 수 있고, Mozilla의 데모 사이트인 Web O Wonder도 보실 수 있습니다. (최근에 3D 데모도 추가하였습니다.).
우선 아래 세가지 데모를 보시기 바랍니다.
아래 유튜브 영상을 통해서도 확인 하실 수 있습니다. 다운로드 하실려면 모바일 페이지에서 하실 수 있습니다.
Firefox 4 베타 최근 버전이 나왔습니다. 이 버전에는 Direct2D 가속 기능이 기본적으로 활성화 돼 있습니다.
“하드웨어 가속(Hardware acceleration)”이란 기본적으로 환경이 허락하는 경우 (CPU 대신에) GPU를 사용하는 것입니다. 이 기능은 페이지 그리는 작업을 더 빠르게 합니다.
가속에는 다음과 같이 두 가지의 수준이 있습니다.
>> 직접 테스트해 보세요: 하드웨어 가속 부하 테스트. <<
사진 출처: 폴 (dex).
아래와 같은 최적화는 여러분이 호환되는 하드웨어와 이에 부합되는 드라이버를 설치했을 때 가능합니다.
| Operation | Linux | Windows XP | Windows Vista/7 | Mac OS X |
|---|---|---|---|---|
| 콘텐트 | XRender | None | Direct2D | Quartz1 |
| 구성 | OpenGL | Direct 3D | Direct 3D | OpenGL |
[1]: Quartz는 기본적으로 CPU만 사용합니다. QuartzGL(Quartz 2D API를 위한 GPU 가속) 현재 Firefox에서 활성화 되지 않습니다(여타 다른 브라우저도 마찬가지입니다).
중요 사항: WebGL과 하드웨어 가속을 혼동하지 마시기 바랍니다. WebGL은 canvas 엘리먼트에 자바스크립트로 3차원 객체를 그리기 위한 OpenGL 같은 API 입니다. 분명히, WebGL 자체는 OpenGL을 사용(또는 OpenGL 드라이버가 없다면 윈도 상에서 ANGLE을 통해 다이렉트3D를 사용)하기 때문에 하드웨어적인 가속 기능에 영향을 받습니다.
Firefox에서 하드웨어 가속을 향상시킬 수 있게 도와주세요: Grafx 봇 확장을 설치해 주세요(자세한 설명은 이 곳에 애드온은 이 곳에 있습니다.)
Firefox의 하드웨어 가속은 플랫폼에 기반하여 DirectX나 OpenGL을 통해 기계의 그래픽 하드웨어와 상호 작용 합니다. 이러한 상호 작용은 시스템 상의 그래픽 환경에 매우 민감한 경향이 있습니다(예를 들어 시스템에 어떤 비디오 카드가 설치돼 있는지, 얼마나 많은 비디오 램이 장착돼 있는지, 비디오 드라이버의 버전은 어떻게 되며 OS 버전은 무엇인지 등). 실제로, 관련된 요소들의 조합이 너무 많기 때문에 모든 경우를 다 내부적으로 테스트 할 수는 없습니다.
Grafx 봇은 여러분의 컴퓨터에서 하드웨어 가속과 관련하여 여러 측면들을 확인하는 자동 테스트를 실행시킵니다(약 5 ~ 20분 정도). 테트트 후에 여러분은 결과를 (익명의 비디오 설정 정보와 함께) 모질라로 전송할 수 있습니다. 이렇게 모인 데이터를 분석하여 버그를 수정하고, 이 전에 우리가 할 수 있었던 것보다 훨씬 신뢰있는 하드웨어 가속 코드를 작성하기를 희망하고 있습니다.
커뮤니티의 도움이 필요합니다. 그래야, 가능한 많은 유일한 하드웨어 환경에 코드를 노출할 수 있습니다.
원저자: Paul Rouget – 원문으로 가기
원글: an HTML5 offline image editor and uploader application, 2010년 2월 2일, Paul Rouget
많은 웹 어플리케이션들은 이미지 업로더를 사용한다: 이미지 호스팅 웹사이트, 블로그 출판 어플리케이션, 소셜 네트웍, 다른 많은 것들과 함께. 그런 업로더들은 제약사항들을 가지고 있다: 한 번에 하나 이상의 이미지를 업로드할 수 없으며 전송 전에 편집을 할 수 없다. 하나 이상의 이미지를 업로드하고 이미지를 수정하기 위해 주로 사용되는 플러그인은 서버에서 작동하고, 이는 편집 과정을 더욱 난해하게 만든다.
Firefox 3.6은 HTML5 지원을 포함한 여러가지의 새로운 오픈 웹 기술들(Open Web featurs)을 개발자들에게 제공한다. 이 글은 오픈 웹 기술들이 사용된 세련된 이미지 편집기와 업로더를 어떻게 작성하는가를 기술한다.
몇 가지 배경 지식을 포함한 데모 비디오를 아래에서 찾을 수 있다.
우리 웹 어플리케이션은 사진들을 Twitter를 위한 이미지 호스팅 서비스인 Twitpic으로 업로드한다.
사실 이 어플리케이션은 hacks 웹 서버에서 제공되고 있지만 여전히 Twitpic으로 업로드를 할 수 있다. Twitpic이 자체의 API를 이 어플리케이션에서와 같이 타 도메인으로부터 XMLHttpRequest를 허용하였기 때문에 가능한 것이다. (Twitpic에 감사한다!).
Web 특성들데모는 Firefox 3.6에 포함된 HTML5의 다음 특성들을 사용한다.
localStorage: 브라우저가 재시작되어도 이미지 데이터를 저장한다.직접 이미지 업로더에 도전해보기 위해 live demo를 봐라. Firefox 3.6과 twitter 계정이 필요할 것이다.
여기 이 어플리케이션이 할 수 있는 것 들의 전체 목록이 있다.
이 어플리케이션에서 사용된 기술들을 간략하게 살펴보자.
Twitpic은 다른 도메인들로부터의 XMLHttpRequest들을 수행하는 API들을 충분히 잘 열어놨다. 이는 당신의 웹사이트에서 당신의 이미지 업로더를 제공하는데 이 API들을 사용할 수 있다는 말이다.
당신이 어떤 API를 운영 중이고, 사람들이 다른 웹사이트로부터 그것들을 사용하기를 원한다면 Cross-site HTTP requests를 사용할 수 있다. 이를 지원하기 위해 어떤 도메인들을 허락할 것인지를 알려주는 HTTP header를 당신의 웹서버의 응답에 추가해야 할 것이다. 여기 샘플이 있는데 twitpic이 어떻게 모든 도메인으로부터의 접근을 허용하는지를 보여준다.
Access-Control-Allow-Origin: *
당신의 API가 열릴 때 보안되어야 한다는 것을 명심해라. 따라서 고려하지 않은 채 API를 공개하기 전에 이런 이슈들을 충분히 이해해야 한다. 자세한 내용은 CORS(Cross-Origin Resource Sharing)에 대한 MDC 문서를 참고하라.
끌어다 놓기는 두가지의 중요한 특징으로 작용한다.
이미지 업로더에서 사용자가 바탕화면으로부터 파일들을 추가하거나 (휴지통으로 끌어놓음으로) 파일들을 삭제하고 현재 이미지에 새로운 이미지를 끼워넣는데 끌어다 놓기를 사용한다.
끌어다 놓기에 대한 추가 내용은 이전 hacks 글을 참고하거나, 특히 어플리케이션에서 끌어다 놓기를 어떻게 사용하는가(how to use Drag and Drop in your application)에 대한 글을 읽어봐라.
일단 이미지들이 웹페이지 위로 끌어다 놓아진 후, 업로드 전에 그것들을 편집할 수 있다. 이것은 사실 이미지들이 파일 API에 의해 canvas 객체로 복사되기 때문에 가능하다.
이 예제에서 편집 절차는 정말 간단하다: 회전, 뒤집기, 문자 추가, 흑백, 잘라내기. 어쨌든 당신 고유의 편집기에서는 다양한다른 기능들을 제공하는 구상할 수 있을 것이다 (예제로 Pixastic을 방문하거나 여기의 인레이(inlay, 끼워넣기) 샘플을 참고해라).
Canvas와 파일 API를 사용하여 전송 전에 이미지의 크기를 바꿀 수 있다. 모든 이미지는 600px보다 작은 새로운 이미지 (canvas)로 변경된다.
도메인당 최대 5Mb의 로컬 데이터를 localStorage를 사용하여 웹 페이지 내에 영구적으로 저장할 수 있다.
이미지 업로더 안에서 localStorage는 이미지와 작업 상태를 저장하는데 사용된다. 이미지가 사실은 canvas이기 때문에 데이터 URL 형식으로 저장될 수 있다.
var url = canvas.getContext("2d").toDataURL("image/png"); localStorage.setItem("image1", url);
LocalStorage 지원은 이미지를 편집하고, Firefox를 닫고, 컴퓨를 꺼도 편집된 이미지는 Firefox를 다시 실행했을 때 여전히 거기에 존재하고 있는 것을 뜻한다.
웹 어플리케이션을 표시하는데 필요한 모든 원격 파일들을 manifest 파일에 나열해두면 인터넷에 연결되어 있지 않을 때에도 작동한다. 이렇게 함으로써 (예상치 않은 효과로) 웹 어플리케이션이 훨씬 빠르게 로드된다.
여기 manifest 파일을 참조하는 html 구문이 있다.
<html manifest="offline.manifest">
그리고 manifest 파일은 다음과 같이 생겼다:
CACHE MANIFEST # v2.4 index.xhtml fonts/MarketingScript.ttf css/desktop.css css/fonts.css css/mobile.css [...]
연결 상태가 변경될 때, 온라인과 오프라인 이벤트 또한 감지할 수 있다. 자세한 내용은 오프라인에 대한 우리의 마지막 글을 참고해라.
Firefox 3.6은 수백만의 사람들에게 HTML5를 포함한 현대 표준들의 이익을 누리게 해준다.
여기서 설명한 이미지 업로더는 웹 페에지가 당신의 바탕화면과 상호작용하고 오프라인에서 작동하는 어플리케이션으로서 실제 어떻게 고려되어야 하는가를 보여준다.
여기 오픈 웹 기술들을 사용하는 당신의 다음 어플리케이션의 작성을 위한 몇 가지 팁들이 있다:
Cross-XMLHttpRequest 허용하라:
당신의 서비스가 합당하다면, 사람들이 다른 도메인에서 당신의 API에 접근할 수 있도록 해라. 당신은 사람들과 함께 몰려드는 앱들에 놀랄 것이다.
<input type="file" multiple="">을 사용하여 사람들이 파일들을 당신의 어플리케이션에 끌어 놓게 해라. 사람들은 한 번에 여러개의 파일들을 선택할 수 있게 된다. 이 데모에서 우리는 모바일 버전에서만 보이는 다중 입력을 사용한다. 하지만 접근성을 위해 끌어다 놓기(Drag’n Drop)를 대안으로 제시하는 것을 잊지 말아라.
(mouseover 이벤트에 의한 좌표 갱신과 같은) 끌어다 놓기의 작동원리는 자주 시뮬레이션된다.가능할 때 전통적인 작동원리를 사용해라.
서버로 파일이 전송되기 전에 전처리를 하기 위해서.
데이터를 저장하고 오프라인동안 당산의 어플리케이션이 지속되록 manifest를 사용하라.
Canvas는 HTML5에서 광범위하게 구현되어 있다. 그것은 (시뮬레이션되어야 해도)모든 곳에서 작동한다. 사용해라!
“클라이언트에서” 생각해라. HTML5, CSS3 그리고 새롭고 강력한 자바스크립트 엔진들은 당신이 놀라운 어플리케이션들을 작성하게 해준다. 그것들의 이점을 취해라!
우리는 위대한 새 어플리케이션들을 찾는다. 당신은 오픈 웹 기술들을 찾아낼 것이다.
CSS 속성(property)인 pointer-events는 오랫동안 SVG의 일부로써 쓸 수 있었다. 만일 요소(element)에 마우스이벤트(mouse event)가 마우스 바로 밑에 있는 요소에 보내져야 하거나 또는 그 밑에 있는 요소로 뚫고 지나가야 할 때 이를 제어하는 방법이다. 파이어폭스 3.6에서 우리는 속성을 확장해 일반적인 HTML 콘텐츠에서도 이를 적용할 수 있게 만들었다.
SVG 사용시에는 pointer-events 속성을 여러 값(values)중 하나로 정할 수 있지만, HTML에서는 단지 둘 중 하나만 지정할 수 있다: auto 또는 none.
.foo { pointer-events: none; }
pointer-events를 none으로 지정할 때 pointer-events는 목표 요소에 보내지는 대신 그 밑으로 뚫고 지나간다.
.foo { pointer-events: auto; }
pointer-events를 auto로 지정하면 pointer events는 평범하게 작동한다. 즉 아래쪽 요소로 뚫고 들어가는 현상으로부터 events를 막아준다.
여기 Paul Rouget이 만든 실제 사례가 있다. 이것이 작동하는 모습을 보려면 파이어폭스 3.6 베타가 필요할 것이다.
이미지 밑에 있는 pointer-events: none 체크박스(checkbox)를 눌러서 어떻게 다른지 확인하라.
그는 트위터닷컴(twitter.com) 첫화면에서 태그 목록을 복사해놨다. (주: 태그 목록을 보려면 로그인하지 않은 상태여야 한다.) 만일 트위터에 찾아가서 이를 살펴본다면 태그 목록에서 오른쪽 부분이 희미하게 사라진 모습을 볼 수 있을 것이다. 이것은 그 아래 있는 박스 위에 놓인 이미지에 점차 희미하고 투명한 효과를 줘서 만든 것이다. 밑에 깔린 태그는 누를 수 있는(clickable) 링크들인데 이미지가 사라진 효과를 받는 부분 밑으로 보내진 events를 막아버린다.
Paul이 한 일은 위에 사라짐 효과가 적용된 요소가 있는 경우에도 밑에 있는 링크를 누를 수 있도록 pointer-events 속성을 사용하는 방법을 보인 것이다.
원저자: Christopher Blizzard – 원문으로 가기
별도의 고지가 없는 한, 본 사이트의 모든 콘텐츠는
Creative Commons Attribution Share-Alike License v3.0 라이센스 하에서 이용 가능합니다.