사례 연구 - deviantART muro의 HTML5

Mike Dewey
Mike Dewey

소개

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

deviantART 커뮤니티는 이 새로운 그리기 도구에 큰 관심을 보였고, 이 도구 자체에서도 적절한 크기의 웹 속성만큼 많은 트래픽을 확인하게 되었습니다. 출시 이후 약 5초마다 deviantART muro를 사용하여 새로운 그림이 제출됩니다. 이는 완성된 그림의 수일 뿐이며 아직 저장되지 않은 그림도 많습니다.

다음 문서에는 Google에서 HTML5를 사용하는 방법, Google이 사용한 기술을 사용하기로 결정한 이유, 주요 웹사이트에 처음으로 완전한 HTML5 애플리케이션 중 하나를 작성하면서 발견한 내용이 소개되어 있습니다.

내 배경

2005년 말 저는 Draw Here에서 사용하는 그리기 도구를 담당하는 개발자 중 한 명이었습니다. 이 도구는 북마크릿에 의해 시작된 '웹 그래피티' 도구였습니다. 모든 웹페이지에서 그림을 그리는 데 사용되었습니다. Draw Here은 처음에 SVG를 사용해 만들어졌습니다. Firefox 1.5 베타는 SVG를 지원하는 최초의 브라우저 중 하나였습니다.

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

한때 Draw Here은 하루에 약 100개의 그림을 그렸는데, 이 SDK는 주요 웹 애플리케이션을 최종적으로 다듬지는 못했지만, 단순한 실험이라고 할 만큼 완벽했습니다. 2006년 중반에 이 프로젝트는 중단되었지만 지금은 그저 미소 짓는 듯한 웃음으로 아직도 순조롭게 진행되고 있습니다.

deviantART muro에서 사용하는 기술

초기에 다양한 HTML5 기술을 사용한 경험이 있었기 때문에 나는 deviantART muro의 수석 개발자가 되어달라는 요청을 받았습니다. 이 글을 읽고 있는 사람은 모두 Google이 Silverlight나 Flash와 같은 플러그인 기반 기술이 아닌 HTML5를 사용하기로 결정한 이유를 알고 있을 것입니다. 우리는 견고하면서도 개방형 표준을 수반하는 뭔가를 원했습니다.

캔버스와 SVG 중 무엇을 사용할지 결정하기

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

그린 객체에 핸들을 유지하고 싶을 때 SVG가 유용하다는 것을 알게 되었습니다. 예를 들어 사용자가 선을 그리고 선의 비트를 드래그하여 모양을 변경할 수 있도록 하려면 SVG를 사용하는 것은 매우 간단합니다. 하지만 캔버스를 사용하는 것 역시 매우 어색합니다.

캔버스를 사용하면 캔버스에 무언가를 넣으면 잊어 버립니다. 빈 캔버스와 한 시간 동안 그려진 캔버스는 코드에서 완전히 동일하게 작동하며 메모리 사용량도 비슷합니다. 래스터 그리기 프로그램은 일반적으로 불과 함께 잘 작동하며 기술은 잊어버리지만 어떤 것은 어렵게 만듭니다. 예를 들어 빠른 실행취소 기능을 만드는 것은 SVG보다 캔버스에서 훨씬 어렵습니다. SVG에서는 배치한 마지막 몇 줄의 핸들을 유지할 수 있으며 실행취소는 해당 객체를 뽑아내기만 하면 됩니다. 캔버스에서는 선을 그린 후 그 아래에 무엇이 있었는지 알 수 없으므로 선을 삭제하려면 선의 위치를 다시 그려야 합니다.

좀 더 좁혀 가면서 캔버스에 HTML5를 사용하기로 결정하자 여러 가지 다른 HTML5 기능을 사용하기로 했습니다. 이와 관련된 예는 localStorage를 사용하여 사용자의 브러시 설정을 추적하는 방법입니다. 이렇게 하면 다양한 브러시를 원하는 대로 설정한 후 다음에 Google 도구를 사용할 때 해당 설정으로 돌아갈 수 있습니다. localStorage는 이러한 환경설정을 얻기 위해 쿠키를 사용하거나 서버 이동을 하지 않아도 됨을 의미합니다.

캔버스 사용

캔버스는 지난 5년 동안 많은 발전을 이루었습니다. Draw Here에서는 성능이 좋지 않았기 때문에 캔버스 포트를 게시하지 않았습니다. 아마 여러분이 상상하는 것보다 더 좋은 성과를 낼 수 있을 것입니다. 캔버스의 큰 부분을 지우고 복잡한 도형을 다시 그리는 것은 일반적으로 인간이 인지하는 것보다 빠른 속도로 이루어집니다. 가끔 너무 느리다는 것을 알게 된 단 한 가지는 getImageData()를 사용하여 픽셀을 샘플링하는 것입니다. 작업 속도는 캔버스 크기에 따라 다르겠지만 큰 캔버스에서 잘못된 시간에 getImageData()를 실행하면 애플리케이션의 응답이 느린 것처럼 느껴질 정도로 시간이 오래 걸릴 수 있습니다.

저는 다양한 캔버스 튜토리얼을 읽은 후 원래 페이지에 1~2번 정도만 사용해야 한다는 무거움을 느꼈습니다. 모두들 아실 건지 모르겠지만 저는 그랬기 때문에 처음으로 deviantART muro 코딩을 시작했을 때 이를 드물게 사용했습니다. 잠시 후에 캔버스를 사용하면 수고를 많이 덜 수 있는 작은 장소가 많다는 것을 알게 되었어요. 예를 들어 앱의 모형에서는 기본 색상과 보조 색상을 표시하는 겹치는 삼각형 두 개가 있는 색상 선택 도구가 있어야 한다고 지정했습니다.

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

제 첫 번째 직감은 기존 HTML 및 CSS로 이 작은 UI 장치를 만드는 방법을 구상하는 것이었습니다. CSS 해킹에 능숙한 사람들은 CSS를 통해 이 모든 작업을 수행할 수 있는 방법을 지적할 수 있지만, 두 부분의 색상이 변하는 삼각형 모양으로는 이러한 작업이 명확하지 않습니다.

캔버스를 사용하는 경우에는 단일 DOM 요소와 자바스크립트 몇 줄로 위젯을 만들었습니다. deviantART muro는 모든 위치에서 캔버스 노드를 사용합니다. 각 레이어는 캔버스이며 레이어 순서를 변경하려면 Z-색인을 전환하기만 하면 됩니다. 그리기 영역의 축소된 뷰를 표시하는 확대/축소 '탐색기' 팔레트는 레이어 캔버스를 소스 이미지로 사용하여 drawImage()를 호출하는 또 다른 캔버스일 뿐입니다. 그리기 영역 커서 (브러시 크기와 확대/축소에 따라 크기를 조정하는 두 톤의 원)도 마우스 아래에 떠 있는 캔버스입니다.

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

Internet Explorer (IE)

더 많은 주요 웹사이트에서 아직 HTML5를 사용하지 않는 주된 이유는 Internet Explorer 사용자를 잃고 싶지 않기 때문입니다. 대부분의 개발자는 deviantART가 HTML5 그리기 애플리케이션을 만들었다는 이야기를 들었을 때 가장 먼저 'IE에 대해 무슨 일이 일어났나요?'라고 생각합니다.

처음에는 Internet Explorer에서 최대한 최선을 다하겠다는 생각이 들었지만 웹 개발에서는 공통분모가 가장 작은 스타일을 사용했습니다. 웹 커뮤니티는 사이트가 모든 브라우저에서 동일하게 보일 때까지는 사이트를 실행할 수 없다는 접근 방식을 취했기 때문에 사용자는 브라우저가 부족해도 이를 알 수 없습니다. 일반적인 사용자에게 속도 문제는 인터넷 연결 때문이며 모든 페이지가 거의 동일하게 렌더링됩니다. 따라서 뒤로 버튼의 색상과 같은 임의의 작은 사용자 인터페이스를 기준으로 선호하는 브라우저를 결정합니다.

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

처음에는 Google의 ExplorerCanvas (exCanvas)를 사용하여 작업을 진행하려고 했습니다. 의외로 대부분의 경우 캔버스를 모방할 수 있습니다. 하지만 한 가지 단점이 있습니다. 캔버스에 적용된 모든 획은 기본 VML 변환의 DOM 객체입니다. 캔버스로 시도할 수 있는 대부분의 작업은 괜찮지만 일부 deviantART muro의 브러시는 많은 획을 겹쳐서 도형을 만듭니다. 심지어 빠른 머신에서도 Internet Explorer에 수천 개의 노드가 있는 VML이 만나면 인터넷 익스플로러가 쓰러지고 사라집니다. 이 때문에 많은 그리기 호출에서 실제로 실제 VML로 이동하여 코딩하고 트릭을 사용하여 노드를 연결하고 이동 명령어를 사용하여 공백이 있어야 하는 위치를 지정해야 했습니다. 인터페이스의 작은 컨트롤과 기타 요소는 일반적으로 캔버스 태그를 사용합니다. 이러한 작은 사용은 일반적으로 exCanvas에서 잘 작동하기 때문입니다.

exCanvas와 함께 작동하는 것 외에도 Chrome 프레임 플러그인을 설치하면 Internet Explorer 버전을 계속 사용할 수 있다고 사용자에게 제안했습니다. Chrome 프레임은 Chrome의 렌더링 엔진을 Internet Explorer에 삽입하는 플러그인입니다. 사용자의 관점에서는 여전히 익숙한 브라우저를 사용하고 있지만, Google 페이지는 Chrome의 HTML5 기능과 더 빠른 자바스크립트로 렌더링됩니다.

Chrome 프레임과 호환되도록 포팅이 쉬워야 한다는 사실은 알고 있었지만 이렇게 간단한지 몰랐습니다. 추가 메타 태그를 추가하기만 하면 IE에서 작동이 시작됩니다.

요약

HTML5 사양의 새로운 기술을 사용하는 것은 정말 즐거운 일입니다. 그리고 제가 사용한 모든 것은 분명히 황금에 대비할 준비가 되어 있다고 말씀드리고 싶습니다. IE에서 원활하게 작업해야 하는 경우에도 캔버스와 exCanvas를 결합하여 할 수 있는 작업이 놀라울 정도로 많습니다. SVG와 VML 간에 변환 레이어를 작성하는 것도 놀라운 작업입니다. 이 기술을 사용하기 시작하면 완전히 새로운 세계로 들어가는 것과 같습니다.

참조