MozillaHacks-웹기술블로그

HTML5 기반 오프라인 이미지 에디터 데모

작성자: H2KFL

작성일: 2010/07/07 분류: Featured Demo, FileAPI, Firefox, HTML5, XMLHttpRequest, 데모, 드래그앤드롭, and 오프라인 기능

원글: an HTML5 offline image editor and uploader application, 2010년 2월 2일, Paul Rouget

많은 웹 어플리케이션들은 이미지 업로더를 사용한다: 이미지 호스팅 웹사이트, 블로그 출판 어플리케이션, 소셜 네트웍,  다른 많은 것들과 함께. 그런 업로더들은 제약사항들을 가지고 있다: 한 번에 하나 이상의 이미지를 업로드할 수 없으며 전송 전에 편집을 할 수 없다. 하나 이상의 이미지를 업로드하고 이미지를 수정하기 위해 주로 사용되는 플러그인은 서버에서 작동하고, 이는 편집 과정을 더욱 난해하게 만든다.

Firefox 3.6은 HTML5 지원을 포함한 여러가지의 새로운 오픈 웹 기술들(Open Web featurs)을 개발자들에게 제공한다. 이 글은 오픈 웹 기술들이 사용된 세련된 이미지 편집기와 업로더를 어떻게 작성하는가를 기술한다.

몇 가지 배경 지식을 포함한 데모 비디오를 아래에서 찾을 수 있다.

hacks에서 제공, twitpic으로 출판

우리 웹 어플리케이션은 사진들을 Twitter를 위한 이미지 호스팅 서비스인 Twitpic으로 업로드한다.

사실 이 어플리케이션은 hacks 웹 서버에서 제공되고 있지만 여전히 Twitpic으로 업로드를 할 수 있다. Twitpic이 자체의 API를 이 어플리케이션에서와 같이 타 도메인으로부터 XMLHttpRequest를 허용하였기 때문에 가능한 것이다. (Twitpic에 감사한다!).

Web 특성들

데모는 Firefox 3.6에 포함된 HTML5의 다음 특성들을 사용한다.

  • HTML5 Drag and Drop: 웹 페이지의 항목들을 끌어다 떨구거나 바탕화면에 있는 이미지들을 바로 브라우저위에 가져다 떨굴 수 있다.
  • HTML5 localStorage: 브라우저가 재시작되어도 이미지 데이터를 저장한다.
  • HTML5 Application Cache: 이것은 브라우저가 인터넷에 연결되어 있지 않을 때에도 사용할 수 있는 어플리케이션을 작성하게 해준다. 이것은 어플리키에션 전체를 브라우저내에 저장하고 온라인과 오프라인 이벤트에 대한 접근을 제공함으로써 어플리케이션이 언제 서버와 다시 동기화해야 할지를 알 수 있게해준다.
  • HTML5 Canvas: HTML5 Canvas 요소는 이 데모에서 이미지를 편집하고 만드는데 사용된다.
  • Cross-Origin Resource Sharing 어플리케이션을 하나의 사이트에서 제공하며 데이터를 다른 곳으로 출판할 수 있다.

데모에 있는 것들?

직접 이미지 업로더에 도전해보기 위해 live demo를 봐라. Firefox 3.6과 twitter 계정이 필요할 것이다.

여기 이 어플리케이션이 할 수 있는 것 들의 전체 목록이 있다.

  • 바탕화면이나 웹에 있는 이미지들을 어플리케이션으로 끌어올 수 있다.
  • 업로드하기 원하는 이미지의 미리보기가 가능하다.
  • 미리보기 이미지를 휴지통으로 끌어서 삭제할 수 있다.
  • 600px 보다 폭이 큰 이미지들은 자동으로 작게 만들어진다.
  • 업로드 전에 이미지들을 편집할 수 있다. 편집기는 회전, 뒤집기, 자르기 또는 이미지를 검거나 희게 만드는 기능을 포함한다.
  • 로컬에 저장된 이미지를 편집함으로써 오프라인일 때에도 계속 편집할 수 있게 해준다. 탭을 닫거나 Firefox나 컴퓨터를 다시 시작하여도 페이지를 열면 파일들이 보존되어 있을 것이다. 따라서 온라인이 되었을 때 그것들을 업로드할 수 있다.
  • 여러 파일을 한번에 업로드하며 업로드 상태를 보여준다.
  • HTML5 Offline Application Cache는 어플리케이션이 캐시된후 매우 빠르게 로딩되도록 해준다.

내부 구현

이 어플리케이션에서 사용된 기술들을 간략하게 살펴보자.

Cross-XMLHttpRequest

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)에 대한 글을 읽어봐라.

이미지를 편집하기 위한 Canvas

일단 이미지들이 웹페이지 위로 끌어다 놓아진 후, 업로드 전에 그것들을 편집할 수 있다. 이것은 사실 이미지들이 파일 API에 의해 canvas 객체로 복사되기 때문에 가능하다.

이 예제에서 편집 절차는 정말 간단하다: 회전, 뒤집기, 문자 추가, 흑백, 잘라내기. 어쨌든 당신 고유의 편집기에서는 다양한다른 기능들을 제공하는 구상할 수 있을 것이다 (예제로 Pixastic을 방문하거나 여기의 인레이(inlay, 끼워넣기) 샘플을 참고해라).

Canvas와 파일 API를 사용하여 전송 전에 이미지의 크기를 바꿀 수 있다. 모든 이미지는 600px보다 작은 새로운 이미지 (canvas)로 변경된다.

localStorage: 로컬 데이터 보관

도메인당 최대 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 이벤트에 의한 좌표 갱신과 같은) 끌어다 놓기의 작동원리는 자주 시뮬레이션된다.가능할 때 전통적인 작동원리를 사용해라.

파일 API를 사용하라:

서버로 파일이 전송되기 전에 전처리를 하기 위해서.

오프라인을 지원하라:

데이터를 저장하고 오프라인동안 당산의 어플리케이션이 지속되록 manifest를 사용하라.

Cavas를 사용하라:

Canvas는 HTML5에서 광범위하게 구현되어 있다. 그것은 (시뮬레이션되어야 해도)모든 곳에서 작동한다. 사용해라!

“클라이언트에서” 생각해라. HTML5, CSS3 그리고 새롭고 강력한 자바스크립트 엔진들은 당신이 놀라운 어플리케이션들을 작성하게 해준다. 그것들의 이점을 취해라!

우리는 위대한 새 어플리케이션들을 찾는다. 당신은 오픈 웹 기술들을 찾아낼 것이다.

작성자: H2KFL

H2KFL가 작성한 문서들…

댓글이 없습니다.

댓글 쓰기