사례 연구 - deviantART muro의 HTML5

Mike Dewey
Mike Dewey

소개

2010년 8월 7일, deviantART는 창립 10주년을 맞았습니다. deviantART는 창립기념일을 맞아 HTML5 그리기 도구인 deviantART muro를 출시했습니다. 이 도구는 포럼 댓글에 사진을 추가하는 가벼운 그리기 도구로 사용할 수 있을 뿐만 아니라 독립형 웹 애플리케이션으로도 사용할 수 있습니다.

deviantART 커뮤니티는 이 새로운 그리기 도구를 매우 열정적으로 받아들였으며, 이제 이 도구 자체가 상당한 규모의 웹 속성만큼의 트래픽을 발생시키고 있습니다. 출시 이후 deviantART muro를 사용하여 약 5초마다 새로운 그림이 제출되고 있습니다. 이는 완료된 그림의 수일 뿐이며, 시작했지만 저장하지 않은 그림은 훨씬 더 많습니다.

다음 도움말에서는 Google에서 HTML5를 사용하는 방식, 사용한 기술을 선택한 이유, 주요 웹사이트용으로 처음으로 본격적인 HTML5 애플리케이션을 작성하면서 발견한 사항에 관한 배경을 설명합니다.

내 배경

2005년 말, 저는 Draw Here에서 사용하는 그리기 도구를 담당하는 개발자 중 한 명이었습니다. 이 도구는 북마크릿으로 실행되는 '웹 그래피티' 도구였습니다. 이 태그는 웹페이지에 그림을 그리는 데 사용되었습니다. Draw Here는 처음에 SVG를 사용하여 만들어졌습니다 (Firefox 1.5 베타가 방금 출시되었으며 SVG를 지원하는 최초의 브라우저 중 하나였습니다).

Internet Explorer에서는 백그라운드에서 SVG를 만들었지만 VML을 사용하여 그림을 렌더링했습니다. 당시 WebKit은 SVG를 지원하지 않았기 때문에 캔버스(당시 WebKit에서만 볼 수 있는 새로운 기술)를 사용하여 SVG를 렌더링하도록 코드를 포팅했습니다. 한때는 div 요소를 여러 개 붙여넣어 이전 브라우저에서 SVG 코드를 렌더링할 수 있도록 포트를 만들기도 했습니다. 물론 이는 가능하다는 것을 보여주기 위한 농담에 가까웠으며 사용 속도가 매우 느렸습니다.

전성기에는 Draw Here를 사용하여 하루에 약 100개의 그림을 만들었습니다. 주요 웹 애플리케이션의 최종적인 다듬음은 없었지만, 단순한 실험이 아니라고 부를 만큼 완성도가 높았습니다. 2006년 중반에 프로젝트가 중단되었지만 사이트는 여전히 운영되고 있습니다. 대부분은 재미를 위해 운영되고 있습니다.

deviantART muro에서 사용하는 기술

초기에 다양한 HTML5 기술을 사용한 경험이 있었기 때문에 deviantART muro의 수석 개발자로 요청받았습니다. 이 도움말을 읽는 모든 사용자는 Silverlight나 플래시와 같은 플러그인 기반 기술이 아닌 HTML5를 사용하기로 결정한 이유를 이해할 수 있을 것입니다. Google은 강력하고 개방형 표준을 사용하는 도구를 원했습니다.

캔버스와 SVG 중에서 선택하기

캔버스를 사용하여 그리기 레이어를 수행하기로 결정했습니다. 캔버스를 사용해야 하는 경우와 SVG를 사용해야 하는 경우를 궁금해하는 사용자도 있을 수 있습니다. 두 기술로 할 수 있는 작업에는 많은 중복이 있습니다. Draw Here에서 입증된 바와 같이 두 기술 모두 그리기 애플리케이션을 만드는 데 사용할 수 있습니다.

그린 객체의 핸들을 유지하려면 SVG가 유용합니다. 예를 들어 사용자가 선을 그린 다음 선의 일부를 드래그하여 도형을 변경할 수 있도록 하려면 SVG를 사용하면 간단합니다. 하지만 캔버스를 사용하면 동일한 작업이 매우 어색합니다.

캔버스를 사용하면 캔버스에 항목을 실행한 후 잊어버리면 됩니다. 빈 캔버스와 1시간 동안 그려진 캔버스는 코드에서 정확히 동일하게 작동하며 메모리 사용량도 거의 같습니다. 래스터 그리기 프로그램은 일반적으로 파이어 앤 포겟 기술과 함께 매우 잘 작동하지만 특정 작업은 어렵습니다. 예를 들어 빠른 실행취소 함수를 만드는 것은 SVG보다 캔버스에서 훨씬 어렵습니다. SVG에서는 배치한 마지막 몇 개의 선에 대한 핸들을 유지할 수 있으며 실행취소는 이러한 객체를 떼어내기만 하면 됩니다. 캔버스의 경우 선이 페인팅되면 그 아래에 무엇이 있었는지 알 수 없으므로 선을 삭제하려면 선이 있던 영역을 다시 그려야 합니다.

캔버스에 HTML5를 사용하기로 결정한 후 여기저기 다른 HTML5 기능을 조금씩 사용해 보기로 했습니다. localStorage를 사용하여 사용자의 브러시 설정을 추적하는 방법이 그 예입니다. 이렇게 하면 다양한 브러시를 원하는 방식으로 설정하면 다음에 도구를 사용할 때 해당 설정으로 돌아갈 수 있습니다. localStorage를 사용하면 이러한 환경설정을 가져오기 위해 쿠키를 사용하거나 서버를 왕복할 필요가 없습니다.

캔버스 사용하기

캔버스는 지난 5년간 많은 발전을 이루었습니다. Draw Here의 경우 성능이 좋지 않아 캔버스 포트를 게시하지 않았습니다. 이제는 상상하는 것보다 실적이 더 좋을 것이라고 말할 수 있습니다. 캔버스의 큰 부분을 지우고 복잡한 도형을 다시 그리는 작업은 일반적으로 인간의 인식보다 빠른 속도로 실행될 수 있습니다. getImageData()를 사용하여 픽셀을 샘플링하는 것이 가끔 너무 느린 것으로 확인되었습니다. 작업 속도는 캔버스 크기에 따라 달라지지만, 큰 캔버스에서는 잘못된 시점에 getImageData()를 실행하면 사용자가 애플리케이션이 느리게 응답한다고 느낄 만큼 시간이 오래 걸릴 수 있습니다.

다양한 캔버스 튜토리얼을 읽은 후에는 캔버스가 페이지에 한두 번 정도만 쓰는 등 가급적 사용하지 않는 것이 좋은 무거운 도구라는 인상을 받았습니다. 모든 사람이 이 점을 이해하는지는 모르겠지만 저는 이해했기 때문에 deviantART muro 코딩을 처음 시작할 때는 이 기능을 쓰지 않았습니다. 하지만 얼마 지나지 않아 캔버스를 사용하면 많은 수고를 덜 수 있는 작은 부분이 많다는 것을 알게 되었습니다. 예를 들어 앱의 샘플은 기본 색상과 보조 색상을 보여주는 겹쳐진 두 삼각형으로 된 색상 선택 도구가 있어야 한다고 지정했습니다.

색상 선택 도구
색상 선택 도구

저는 먼저 기존 HTML 및 CSS로 이 작은 UI 기기를 만드는 방법을 생각했습니다. CSS 해킹에 능숙한 사용자는 CSS를 통해 이 모든 작업을 실행할 수 있는 방법을 지적할 수 있지만 색상이 변경되는 두 부분의 삼각형 모양으로 인해 명확하지는 않습니다.

캔버스를 사용하면 된다는 생각이 떠올라 단일 DOM 요소와 몇 줄의 JavaScript로 위젯을 만들었습니다. deviantART muro는 곳곳에 캔버스 노드를 사용합니다. 각 레이어는 캔버스이며 레이어 순서를 변경하는 것은 z-index를 전환하는 것뿐입니다. 그리기 영역의 축소된 뷰를 보여주는 확대/축소 '탐색기' 팔레트는 레이어 캔버스를 소스 이미지로 사용하여 drawImage()를 가끔 호출하는 다른 캔버스일 뿐입니다. 그리기 영역 커서 (브러시 크기 및 확대/축소에 따라 크기가 조정되는 2톤 원)도 마우스 아래에 떠 있는 캔버스입니다.

다른 HTML5 기술보다 캔버스를 더 자유롭게 사용한 이유는 Google의 ExplorerCanvas 라이브러리를 사용하면 Internet Explorer에서 캔버스를 시뮬레이션할 수 있기 때문입니다. 다음 섹션으로 넘어갑니다.

Internet Explorer (IE)

아직 많은 주요 웹사이트에서 HTML5를 사용하지 않는 주된 이유는 Internet Explorer 사용자를 잃고 싶지 않기 때문입니다. deviantART에서 HTML5 그리기 애플리케이션을 만들었다는 소식을 듣는 대부분의 개발자의 머릿속에 떠오르는 첫 번째 질문은 'IE는 어떻게 되었나요?'일 것입니다.

처음에 Google은 Internet Explorer에서 작동하도록 최선을 다하되, 웹 개발에서 가장 공통적인 스타일은 더 이상 하지 않기로 결정했습니다. 웹 커뮤니티는 알려진 모든 브라우저에서 동일하게 표시될 때까지 사이트를 실행할 수 없다는 접근 방식을 취했기 때문에 사용자는 자신의 브라우저가 부족한지 알 수 없습니다. 일반 사용자는 속도 문제를 인터넷 연결 탓으로 돌리며 모든 페이지가 거의 동일하게 렌더링된다고 생각합니다. 따라서 뒤로 버튼의 색상과 같은 사소한 사용자 인터페이스 요소를 기반으로 좋아하는 브라우저를 결정합니다.

HTML5 사양을 사용하여 떠오르는 멋진 기능을 만들고 Internet Explorer에서 작동하도록 시도한 후 작동하지 않으면 브라우저에서 아직 웹 표준을 구현하지 않았기 때문에 이 기능을 사용할 수 없다고 설명하는 모달을 표시하기로 결정했습니다.

처음에는 Google의 ExplorerCanvas (exCanvas)로 작동하도록 했습니다. 대부분의 경우 캔버스를 모방하는 데 놀라울 정도로 뛰어납니다. 단점이 한 가지 있습니다. 캔버스에 그려진 모든 획은 기본 VML 변환의 DOM 객체입니다. 캔버스로 시도할 수 있는 대부분의 작업에는 문제가 없지만, deviantART muro의 일부 브러시는 여러 개의 획을 겹쳐서 도형을 만듭니다. Internet Explorer가 수천 개의 노드가 있는 VML을 마주하면 빠른 머신에서도 비정상 종료됩니다. 이로 인해 많은 그리기 호출의 경우 실제로 실제 VML에서 코딩하고 노드를 연결하고 이동 명령어를 사용하여 간격이 있어야 할 위치를 지정하는 트릭을 사용해야 했습니다. 인터페이스의 많은 작은 컨트롤과 기타 항목은 캔버스 태그를 사용합니다. 이러한 작은 용도는 일반적으로 exCanvas에서 잘 작동하기 때문입니다.

exCanvas에서 일부 작업을 실행할 수 있도록 하기 위해 Google에서는 사용자에게 Google Chrome 프레임 플러그인을 설치하면 현재 사용 중인 Internet Explorer 버전을 계속 사용할 수 있다고 제안했습니다. Google Chrome 프레임은 Internet Explorer에 Google Chrome의 렌더링 엔진을 삽입하는 플러그인입니다. 사용자의 관점에서는 여전히 익숙한 브라우저를 사용하고 있지만, 페이지는 Chrome의 HTML5 기능과 더 빠른 JavaScript로 렌더링됩니다.

Chrome Frame에서 작동하도록 쉽게 포팅할 수 있다는 것은 알고 있었지만 그다지 간단하지 않다고 생각했습니다. 메타 태그를 하나 더 추가하면 IE에서 작동하기 시작합니다.

요약

HTML5 사양의 새로운 기술을 사용해 작업하는 것은 정말 즐거운 일이며, 사용한 모든 기술이 충분히 실무에 적용할 수 있다고 생각합니다. IE에서 원활하게 작동해야 하는 경우에도 canvas와 exCanvas를 결합하여 할 수 있는 작업이 의외로 많습니다. SVG와 VML 간에 변환 레이어를 작성하는 것도 놀랍게도 가능합니다. 이 기술을 사용하면 완전히 새로운 세계로 들어가는 것과 같습니다.

참조