2013년 10월 31일 목요일

[소식] Chrome Android WebView Update

Android 4.4 (킷캣)에서 Webview에 대한 추가 소식이 있네요. 웹뷰의 기반 버전은 크롬 30.0.0입니다. 대략적인 업데이트 사항은 아래를 참조하시기 바랍니다.



UserAgent 관련


Useragent에서 크롬 버전이 업데이트 되었습니다.

  • 기존 UA 
    • Mozilla/5.0 (Linux; U; Android 4.1.1; en-gb; Build/KLP) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30 
  • 신규 UA 
    • Mozilla/5.0 (Linux; Android 4.4; Nexus 5 Build/BuildID) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36 

이와 관련하여 Chrome/30.0.0.0은 사용하지 마시고 Version/4.0과 같은 스트링을 사용하라는 가이드가 있네요.

XMLHttpRequest를 이용해서 자바스크립트에서 UA를 세팅할 수 없습니다. Useragent 세팅은 자바 코드에서 setUserAgent()를 이용해서 설정할 수 있습니다.



HTML5 신규 기능


HTML5 규격과 관련하여 다음 기능이 추가되었습니다.
  • WebGL 3D canvas 
  • WebRTC 
  • WebAudio 
  • Fullscreen API 
  • Form validation 

리모트 디버깅 지원


크롬 안드로이드뿐만이 아니라 웹뷰에 대해서도 크롬 개발자 도구를 통해 리모트 디버깅을 지원합니다.



기타


  • 크롬 앱은 아직 지원하지 않습니다. 
  • 하드웨어 가속은 기본 항목입니다.
    • 소프트웨어로만 구동할 경우 명시적으로 가속을 꺼야합니다. 

참고


2013년 10월 29일 화요일

[튜토리얼/한글화] 모바일에서 놀라운 풀스크린 환경 구축하기(Building Amazing fullscreen mobile experience)

지난 번 크롬 개발자 데이 관련 포스팅에서 크롬 안드로이드의 새로운 기능 중에 Fullscreen과 Add to Homescreen에 대한 언급이 있었는데 이와 관련하여 +Paul Kinlan 의 'Building Amazing fullscreen mobile experience(모바일에서 놀라운 풀스크린 환경 구축하기)' 튜토리얼이 올라왔습니다. 한국어 버전도 같이 올라왔으니 읽어보시기 바랍니다.


TL;DR;


기존의 풀스크린 동작은 트릭이나 핵(hack)을 이용하여 많이 접근되어 왔지만 최근 requestFullscreen() 과 같은 표준화된 규격을 기반으로 풀스크린을 구현할 수 있습니다. 이 글은 풀스크린의 구현 시 주의해야 할 점과 방법들에 대해 전반적으로 다룹니다.


관련 링크




p.s. HTML5Rocks에서 개선을 위한 이슈가 엄청나게 쏟아지고 있네요. 이번에 많이 바뀌나 봅니다. 그리고 이후 튜토리얼들은 가급적 동시에 한국어 업데이트를 진행할 예정입니다. :)

Summary: Chrome Barcamp Korea

10월 25일에 있었던 Chrome Barcamp에 참석했었습니다. 다양한 주제로 그룹을 나누어서 바캠프를 진행했는데 저는 Web Animation과 Google Web Designer, HTML5Rocks에 대해 몇 가지 개인적인 질의를 했습니다. 그와 별개로 Performance Optimization을 해보는 시간도 가졌습니다. (Thx to  +Alex Danilo+Paul Kinlan+Ryan Schoen & 긱한 개발자분. 그리고 보니 이름을 못들었다는...) 좋은 자리 마련해주신 +Soonson Kwon님께도 감사드립니다. 다른 분들의 후기도 기다려봅니다. :)


Web Animation


네이티브로 구현된 모듈은 시드니에서 개발 중이며 곧 블링크에 포함될 것이라고 합니다. 아마 내년 상반기에는 크롬에서 만나볼 수 있을 것 같습니다. 물론 현재도 Polyfill을 이용해서 사용해 볼 수 있습니다.

관련 링크



Google Web Designer


얼마 전에 웹 디자이너를 살며시 뜯어 봤을 때 도구를 포함한 내부 환경은 거의 HTML5로 구성이 되어 있었던 것으로 봤었는데 구현 상으로도 몇가지 얘기해볼 만한 사항들이 있었지만 이에 대한 것은 다음에 따로 정리해보도록 하겠습니다.

일단 구글 웹 디자이너 툴은 광고 컨텐츠에 대해 메인 포커싱을 하고 있다고 합니다. 내부적으로 WebGL에 대한 설정 부분이 예약되어 있는 것에 대한 부분은 프로젝트 팀이 달라서 답변을 듣지는 못했습니다. (예약이 되어 있는 만큼 어느 정도 3D 기반의 리치 미디어에 대한 접근도 고려하고 있는 것이 당연하겠죠.)


Performance Optimization


성능 최적화는 전날의 크롬 Developer Day에서도 많이 다루어졌듯이 레이어의 크기나 사이즈 부분이나 이동 시의 적합한 방식에 대하여 얘기했습니다. 그 중 몇가지를 간단하게 정리하기 전에 간략하게 브라우저의 렌더링 과정을 살펴보고 넘어가보도록 하겠습니다.
  • 브라우저 내 문서의 시각적인 각 엘리먼트는 대부분 하나 이상의 레이어라는 단위로 매핑되는 렌더링 트리를 구성하게 됩니다. 그리고 이 렌더링 트리를 브라우저가 렌더링을 하는데는 다음과 같은 몇가지 패스를 거치게 됩니다. 
    • 레이아웃(Layout)
    • 스타일(Style)의 계산
    • 페인팅(Painting)
    • 합성(Composition)
  • 반복되는 렌더링에서 한번의 패스는 반드시 모든 과정을 반복하지는 않으므로 패스 내에서의 동작을 최소화하는 방법이 성능 최적화의 주요 목표가 되겠습니다. 이와 관련된 자세한 내용은 아래의 참고 자료들을 읽어보시기 바랍니다.

실제적인 가이드라인 중 몇 가지를 살펴보면 다음과 같습니다.

  • 이동에 대한 애니메이션의 경우 top, left 대신 transform : translate() 사용
    • 레이어의 transform은 페인팅을 다시 요구하지 않으므로 translate()를 이용하여 동일한 시각적 효과를 얻을 수 있습니다.
    • 예시
      • -webkit-transform: translateX(-1px);
      • -webkit-transform: translateY(38px);
  • 레이어를 차지하는 엘리먼트는 가급적 사이즈와 갯수를 최소화
    • 간단하게 설명드리면 레이어가 크면 GPU 상의 메모리도 크게 차지하고 레이어의 갯수가 많으면 역시 메모리의 할당 숫자도 많아지므로 이를 회피하는 것이 중요합니다.
    • 비슷한 경우로 별로 중요하지 않은 레이어는 크기를 필요 크기보다 줄이고 (가급적 정수 배율로) scale()로 크기를 맞추는 것도 비슷한 효과를 얻을 수 있을 것으로 예상되네요. (게임에서 LOD를 사용하는 것과 마찬가지로 말이죠.)
  • 화면에서 보이지 않는 DOM의 경우 감추거나 제거
    • 위의 사항과 유사하기는 한데 일단 렌더링 트리가 줄어들어 탐색의 범위가 줄고 GPU 메모리 및 렌더링 패스에서 명시적으로 벗어나므로 성능 향상의 효과를 얻을 수 있을 것으로 보입니다. 렌더러에서도 메모리 관리 부담이 줄어드는 부수적인 효과가 있겠습니다.

이러한 렌더링 오버헤드는 개발자 도구에서 "Show Paint Rectangles"를 선택하거나 프로파일링을 통해 확인할 수 있습니다. 자세한 내용은 역시 아래 참고자료를 참조하세요.


참고자료



2013년 10월 24일 목요일

Summary: Chrome Developer Day Korea


10월 24일 선릉역 D.CAMP에서 크롬 개발자들이 다수 참석하여 개발자 데이 행사를 진행했습니다. 요약 대신해서 간략한 후기 남겨봅니다. 오밤 중에 대충 기억으로 적는 것이라 틀린 것도 많을 겁니다. 이해를...:)



What’s new in mobile HTML5


+Alex Danilo가 크롬 안드로이드와 관련된 신규 기능들에 대한 소개 발표였습니다. 안타깝게도  +Eiji Kitamura씨는 참석을 못했네요. :( 이 세션에서 나온 내용들은 간략하게 나열합니다. 참고로 아래 내용 중 현재 지원 가능한 부분과 아닌 부분들은 업데이트가 필요할 듯 합니다. 첫 세션이라 도저히 기억이 안나네요.
  • 크롬 안드로이드에서 chrome://flags 추가되었습니다.
  • viewports에 새롭게 vw, vh, vmin, vmax가 추가되었습니다. 단위는 전체 길이의 1%입니다.
  • position: sticky가 추가되었습니다. 상위 노드에 대해 fixed와 유사하게 동작합니다.
  • Fullsrceeen가 지원됩니다.
  • Semantic Input Type으로 효과적인 사용자 입력을 기대할 수 있습니다.
  • MS에서 제안 중인 Pointer event에 대한 얘기가 있었는데 아직 지원은 안됩니다. (IE11만 지원). Pointer 이벤트는 mouse와 touch의 통합형 이벤트입니다. 당연히도 필요하겠죠.  :)
  • 하드웨어 관련해서 Media Capture 지원됩니다. <input capture accepts=“image/*”> 처럼 기술하면 카메라로 사진 찍고 input으로 넘어갑니다.
  • WebAudio 됩니다. 입력은 지난번 포스팅에 나온 바와 같습니다.
  • Add Homescreen 기능이 추가되었습니다. 원래 애플이 apple- 접두어를 사용했었는데 일단 크롬에서도 apple- 접두어를 당분간 지원한다고 합니다. (이에 대해 정리해둔 글이 있었는데 어디에 올렸는지를 모르겠네요.)
  • 안드로이드 intents를 웹에서 바로 사용가능합니다. URL로 넘길 수 있습니다.
  • 성능 측정 관련해서 Navigation Timing API, Resource Timing API 추가되었습니다.



Polymer


'폴리머'는 현재 규격 작업이 진행 중인 Web Component를 모던 브라우저들에서 지원하기 위한 Polyfill 라이브러리입니다. Web Component가 표방하는 것이 하나의 완전한 웹 문서가 Encapsulation된 형태로 정의되고, 사용되고, 재사용되는 규격을 목표로 하는 만큼 빠르게 표준화가 되었으면 하고, 추가로 발표자인 +Eric Bidelman 이 궁극적으로 보일러플레이트를 소멸시키는 것이 목표라고 계속 얘기를 하더군요. 그랬으면 좋겠습니다. :)

웹 컴포넌트는 다음과 같이 4개의 규격으로 지탱됩니다.
  1. Shadow DOM - DOM 및 DOM, 자바스크립트에 대해 캡슐화를 지원합니다. 이 규격을 바탕으로 컴포넌트의 Content가 외부로부터 보호됩니다.
  2. HTML Template - 해석, 렌더링, 실행되지 않는 순수 템플릿 기능을 지원합니다. 이로부터 새로운 노드를 복제하거나 새로 생성하는 것이 가능하기 때문에 하나의 웹 컴포넌트로 다수의 인스턴스를 만들어 낼 수 있습니다.
  3. Custom Element - 기존의 DOM을 확장하거나 새로운 DOM을 생성합니다. 위에서 Shadow DOM과 HTML Template가 구조를 제공한다면 Custom Element는 타입의 확장과 정의 기능을 제공한다고 이해해도 되겠습니다.
  4. HTML Imports - HTML 문서를 특정한 위치로 적재하는 기능을 수행합니다. 일종의 로더라고 볼 수도 있겠습니다. 이 규격이 Web Component의 재사용성을 담보합니다.
요약하면 'Polymer'는 프레임워크 등에 대한 의존성 문제가 없기 때문에 생산성과 재사용성이 뛰어나고 특히 소프트웨어 공학면에서도 좋은 접근(Good Software Engineering)을 통한 일종의 OOP를 구현하는데 장점이 있습니다.

물론 현재는 폴리필 형태의 라이브러리이기 때문에  완벽한 encapsulation 등에 대한 부분이 실제로 완전히는 감춰지지 않는 이슈가 있을 수 있는 것도 문제이긴 하지만 이 정도로 잘 지원하는 것만 봐도 충분히 활용이 가능할 듯 합니다.

현재 폴리머에서 제공하고 있는 라이브러리도 쓸모가 많기 때문에 겸사겸사 공부해보는 것은 어떨까 싶습니다. 참고로 Yeoman을 사용하여 생산성을 유지하며 개발하는 것은 어떨까요?  Yeoman과 Polymer를 이용한 웹앱 개발를 읽어 보시길...1, 2년 정도면 Web Component 시대가 올 것 같다는 생각을 조심스럽게 해봅니다.



Workflow, DevTools mobile web


그 유명한 +Paul Irish의 발표였습니다. :) 일단 개발자 도구에 관련한 내용은 크롬 개발자도구 레볼루션 2013에서도 다루고 있기 때문에 크게 다른 부분은 없습니다. 정확하게 말하면 그 문서가 지속적으로 업데이트되고 있기 때문이기도 합니다. :)

어쨌던 가볍게 몇가지만 나열해보자면
  • 기존의 텍스트 에디터에서 수정하고 브라우저로 가서 확인하며 왔다갔다 하면서 개발하는 프로세스가 크롬 개발자도구로 완전히 통합되었습니다.
    • Workspace 설정 후 로컬 파일과 폴더 등을 매핑하면
      • 프로젝트 형태로 편집이 가능하고
      • 웹 문서뿐만이 아니라 서버사이드 스크립트 등의 수정이 가능하며
      • 스타일 창에서의 변경 역시 영구적으로 저장됩니다.
    • 즉, 인스펙터에서 수정하고 저장하면 실제 파일과 동기화됩니다.
  • Sass, Less 지원되고 디버깅도 됩니다.
  • 이 부분이 다들 좋아하는 부분 중에 하나인데 크롬에서 안드로이드 디바이스에 원격 디버깅이 지원됩니다. 
    • 간단하게 주소창에 about://inspect 치시면 디버깅이 연결됩니다.
    • 스크린캐스트를 통해 실제 디바이스의 화면을 보면서 PC 사이드에서 조작과 화면 확인, 디버깅이 가능합니다. (이거 무지무지 유용한 기능이죠.)
    • localhost 등으로 개발 중일 경우 역시 개발자 도구의 포트 포워딩을 통해서 l디버깅이 가능합니다.
  • 개발자도구를 이용하여 Layout, Style Recalculation, Paint, Composition의 프로파일을 디버깅하는 기능도 시연되었습니다.
    • continuous painting inspection을 이용하면 flowl 형태로 렌더링 오버헤드를 확인할 수 있다던가 프레임 렌더링 시간을 조사할 수 있고 이를 통해 스타일의 재계산 등을 막거나 개발자 도구의 프로파일링에서 추가적인 최적화 관련 정보 등을 확인할 수 있습니다.
    • 위 기능이 다 안되면 주소창에 about:tracing 를 써도 됩니다. 물론 좀 많이 불편합니다.



Creating HTML5 Games


+John McCutchan의 발표입니다. (Game과 Dart에 대해 두번 발표하더군요.)  HTML5 기반에서 게임을 개발하는데에 대한 일반적인 기능과 방식에 대해서 설명했습니다. 근데 이때 외부에서 전화가 와서 거의 다 놓쳤네요. :(

가능한 스택으로  Canvas, Web Audio, (P)NaCl 등을 예로 들었고 성능 상에 악영향 요소(Performance Traps)에서 '언제나 할당은 GC Pause로 한발 다가가는 것'이라고 얘기하더군요. GC는 언제쯤 어떻게 처리가 될런지 궁금합니다.

NaCl의 경우는 Security Model이 잘 지원되고 네이티브 기능을 확장하고자 할 때 사용할 수 있는 유용한 플러그인 개발 형태고 PPAPI를 통해 거의 모든 웹 요소들에 접근이 가능한 등의 장점을 얘기했습니다. 마지막에 HTML5 Games polymer에 대해서 얘기했는데 흥미로운 접근이었습니다. :)



Chrome Apps


+Pete LePage가 발표했습니다. 크롬 앱에 대해서 쭉 얘기를 해줬는데  오프라인, 하드웨어 제어, 기존 브라우저, 네이티브 기능 통합, 인프라 등의 이슈가 기존에 존재해왔으며 크롬 앱에서는 이러한 문제를 해결함과 동시에 크롬 웹 스토어에서 클라우드 서비스를 통해서  저장소 및 파일 등을 동기화하거나 푸시 메세지, 사용자 인증 및 정보, 앱 업데이트, 결제(1회성 결제 및 인앱 결제), 네이티브 기능 통합이 가능한 것에 대해 각각 설명했습니다.

재밌는 것은 크롬 앱을 통해서 USB나 블루투스 같은 외부 장치 연동이 가능하다는 점입니다. 몰랐는데 이게 되더군요. :)  네이티브 기능 통합의 예로 심장 박동 모니터를 연동해서 웹으로 박동수를 보여주는 데모와 LED 전등의 색상을 연동을 통해 제어하는 것을 보여줬습니다. 그리고 크롬만 되면 무슨 소용인가라는 의문에 대해 Cordova(Phonegap) 기반으로 만들어진 하이브리드 웹앱 패키징이 됩니다. 궁금하시면 http://github.com/MobileChromeApps/chrome-cordova로 방문!



Rendering without lumps


+Jake Archibald 의 아주 다이나믹한 세션이었습니다. :) Wii 컨트롤러로 프리젠테이션을 진행하는 것도 인상적이었지만 발표 노트와 마치 하나가 된듯한 물 흐르는 듯한 진행 기술을 가지고 있더군요. 그것보다 인상적인 것은 'W(hat)T(he)F(rame)P(er)S(econd)?' 였습니다. (진짜일까요? ㅋ)

간략하게 나누자면 웹 브라우저에서 DOM 트리는 CSS와 함께 덧붙여져서 Rendering 트리를 구성하게 됩니다. (이 과정에서 각 엘리먼트는 하나 이상의 레이어와 대응됩니다.) 이때 하나의 렌더링 노드를 그리는데는 크게 레이아웃, 스타일 계산, 페인팅, 결합(Composition)의 4단계를 하나의 패스로 거칠 수 있습니다. 물론 항상 모든 단계를 거치는 것은 아니고 간 단계가 실행되기 위한 선행 조건이 있습니다. 렌더링 성능 개선의 가장 기본이 바로 이 단계를 최대한 생략하기 위한 여러가지 방법들이 되겠습니다.

예를 들어 left 속성을 통해 X축 이동을 하는게 아니라 translate()를 이용하는 것은 같은 시각적 효과를 보여주지만 렌더링 패스는 전혀 다른 결과를 보여줍니다. 이외에도 z-index나 tranlateZ()를 이용해서 레이어를 별도로 관리하게 하는 등의 테크닉들도 시연이 있었습니다.

한가지 더 보자면 개발자 도구를 사용하여 렌더링, 레이어 결합 등이 어디서 발생하는지 확인하고 처리하는 방법도 함께 소개되었습니다. (렌더링 성능 관련해서는 여러 스피커가 언급을 했기 때문에 동일한 방법이 많이 나왔습니다. 불필요한 페인트 회피하기불필요한 페인트 회피하기 : Animated GIF 에디션를 함께 참고하세요.) 자세한 것은 http://speakerdeck.com/jaffathecake/rendering-without-lumps에서 한번 살펴보시길.



Build a fast mobile site with PageSpeed Mobile Insight


+Paul Kinlan 이 모바일 사이트에서 PageSpeed Mobile Insight를 이용한 모바일 웹 최적화에 대한 발표를 진행했습니다. 일단 PageSpeed Mobile Insight가 웹사이트에 대해 검사해주는 것은 다음과 같습니다.
  1. 리다이렉트의 횟수
  2. 비효율적인 압축 및 최소화(minification)
  3. CSS와 자바스크립트의 성능 상의 이슈 지점
  4. 캐시 이용률
CSS가 로딩되지 않거나 아직 해석되지 않은 시점에서 JavaScript가 Computed Style을 쿼리한다던가 하는 경우…즉, CSS, DOM에서 실행이 멈출 수 있다던지 해서 async나 defer를 이용해서 blocking을 막거나 압축을 통한 네트워크 대역폭 절약 등등 많은 내용이 있어 이것도 이후에 다시 정리합니다.

아, 초반에 "시작이 반이다"를 한글로 적어놓아 빵 터지고 '적합한 설계가 나쁜 효율성을 방지한다.'였던가로 적어놓은데서 눈물 한방울. :(



Introduction of DART


+John McCutchan의 2번째 세션, Dart도 흥미로웠습니다. 일단 Compile 형태의 개발 환경을 가지고 있지만 자바스크립트로의 변경도 가능하고 Dartrium이라는 DART VM + Chromium 형태의 브라우저에서의 JS 대비 성능 우위도 보여주더군요. 물론 VM은 Stand-alone으로 돌리거나 Dartrium에서 돌릴 수 밖에 없고 무엇보다 제가 이건 잘 모르므로 일단 넘어갑니다. :)

#

몇 가지 더 있었는데 정리가 어려워서 수정 및 다른 내용들은 차주로 미룹니다. :)

2013년 10월 21일 월요일

[튜토리얼/한글화] 불필요한 페인팅 회피하기 : Animated GIF 에디션 외 3종

HTML5Rocks의 레이아웃이 변경됨과 함께 튜토리얼도 하나 올라왔습니다. 이에 대한 번역과 그 외의 한글로 번역된 3종이 추가로 업데이트되었습니다.

1. "불필요한 페인트 회피하기: Animated GIF 에디션" By Paul Lewis

(이 글은 불필요한 페인트 회피하기(원문)을 먼저 읽으시는 것을 권장합니다.)
최적의 렌더링 성능을 위해 페인팅의 작업 시간을 16ms 이하(60fps)로 유지하는데 필요한 병목 지점의 탐색과 수정에 크롬 개발자 도구를 사용할 수 있습니다.

특히 animated GIF는 그 특성 상 렌더링이 프레임 단위로 지속되며 브라우저들이 이 GIF의 가시성을 확인하는 것보다 그냥 렌더링하는 것이 일반적으로 더 빠르기 때문에 지속적인 렌더링이 일어날 수 있습니다. 크롬 개발자 도구의 'Show paint rectangles' 기능을 이용하여 이러한 불필요한 페인팅의 발생 여부를 확인할 수 있습니다. 이를 통해 불필요한 페인팅을 줄여 부드러운 프레임율을 이루는 방법을 살펴봅니다.

참고 글



    2. "불필요한 페인트 회피하기" By Paul Lewis

    ('불필요한 페인트 회피하기 : Animated GIF 에디션(원문)'의 이전 글입니다.)

    모던 브라우저에서 웹 페이지 내의 엘리먼트들은 1개 이상의 레이어로 그룹지어 렌더링되며 엘리먼트의 시각적 변화는 포함된 레이어와 상위의 레이어로 연쇄 렌더링되어 성능 상의 영향이 발생할 수 있습니다.

    크롬 개발자 도구에서 Show paint rectangles를 이용하여 이러한 페인팅의 발생 여부를 확인할 수 있습니다. 불필요한 페인팅을 줄여 부드러운 프레임율을 이루는 방법을 살펴봅니다. (이 글에서는 스크롤 시 hover로 인한 렌더링 오버헤드로 인한 스크롤의 성능 저하를 개선하는 것을 예로 들고 있습니다.)

    참고 글






      3. "Yeoman과 Polymer를 이용한 웹앱 개발" By Addy Osmani


      Yeoman은 스캐폴딩을 제공하는 Yo, 패키지 의존성을 관리하는 Bower, 빌드 도구인 Grunt를 포함하는 Workflow 도구입니다. Polymer는 Web Component를 지원하지 않는 브라우저에서도 이를 사용할 수 있는 Polyfill 라이브러리입니다.

      이 글은 라이브러리(Polymer)와 도구(Yeoman)를 이용하여 Web Component 기반의 App을 개발하는 방법을 알아봅니다.

      참고 글




        4. "웹 개발자를 위한 이미지 압축" By Colt McAnlis


        사이트 로딩 성능에 큰 영향을 주는 원인 중 대부분 이미지입니다. 이 글은 로딩 성능을 개선하기 위한 다음과 같은 내용들을 설명합니다.

        1. 이미지를 최대한 직접 최적화하고, 나머지는 자동화된 최적화 사용
        2. WebP를 고려
        3. 로딩 시 시각적으로 느리지 않게 보이도록 Progressive로 저장
        4. 보다 나은 압축률과 투명 처리를 위한 다른 방법들

        참고 글




        기타

        • 아직 merged 이후 사이트 업데이트는 대기 상태입니다.
        • 한글 버전이 사이트에 업로드되면 업데이트하도록 하겠습니다.
        • 25일부터 live 상태입니다. :)

        [튜토리얼/한글화] 크롬 개발자 도구를 이용한 캔버스 검사(Canvas Inspection using Chrome DevTools) By Paul Lewis

        크롬 개발자 도구를 이용한 캔버스 검사(Canvas Inspection using Chrome DevTools By Paul Lewis)의 한글 버전이 업데이트되었습니다. 캔버스 기반의 2D 혹은 WebGL 그래픽스 라이브러리를 만들거나 캔버스 렌더링 모듈을 검토할 때 특히나 유용한 기능입니다. 언젠가 정식 기능으로 들어가겠지만 실험 기능으로 두기에는 조금 아깝다는 생각도 듭니다. :)




        TL;DR


        크롬 개발자도구 실험(Chrome DevTool's Experiments)에는 캔버스 동작의 디버깅을 위해 캔버스에 렌더링되는 프레임들을 캡쳐해서 각 프레임의 상태와 입력 명령들을 살펴볼 수 있는 Canvas Inspector가 포함되어 있습니다. 이를 통해 캔버스를 검사하거나 디버깅하는 방법을 살펴봅니다.

        크롬 개발자 도구의 Canvas Inspection


        관련 글

        2013년 10월 17일 목요일

        [업데이트] 크롬 안드로이드 베타에서 Web Audio 입력 지원

        크롬 안드로이드 (버전 31.0.1650 이상) 베타 버전에서 Web Audio 입력이 지원됩니다. Chris Wilson의 말에 따르면 넥서스 4, 갤럭시 S4와 넥서스 7에서만 직접 테스트를 해본 상태고 다른 디바이스에서는 아직 지원 상의 이슈가 있는지는 확인되지 않았다고 합니다.

        이제 곧 모바일 브라우저 상에서도 웹 오디오 입력이 일반화되면 음성 검색 외에도 음성 메모 등 다양한 용도의 어플리케이션이 모바일 웹으로 구현이 가능해지겠네요. 

        참조 링크

        HTML5Rocks.com/ko 로 한글 사이트에 접속하세요.

        16일부터 HTML5Rocks의 한국어 버전이 지원되었습니다. 아래 주소와 같이 ko를 사용하셔서 접속하시면 됩니다.


        이번에 커밋한 HTML5Rocks 한글화 작업이 많은 확인 작업을 진행하지 못해 부자연스러운 표현, 오탈자가 있을 수 있습니다. 이를 발견하시거나 더 나은 표현이 있으면 제안해주세요. 제안이나 참여 안내 방법은 포스팅 아래에 있습니다. :)


        HTML5Rocks 한국어 버전(http://www.html5rocks.com/ko)

        #한글화 작업 참여 안내

        많은 분들이 HTML5Rocks.com에 방문하고 있고 자료 및 게시글을 읽는데 어려운 분들이 많은 것도 사실입니다. 저도 그렇습니다. :(

        최근 HTML5Rocks.com의 사이트와 문서를 한글화하기 위한 작업을 진행 중입니다. 물론 읽어서 이해 하는 것과 그것을 다시 한국어로 표현하는 것은 꽤 다른 일일 겁니다. 그리고 읽고 끝나는 것보다 그것을 번역하고 정리해서 공유하는 일은 꽤나 품이 드는 일일 수도 있을 겁니다. 하지만 뒤에 방문하는 사람들이 그것으로 시간을 줄일 수 있다면 그 또한 좋은 일일 겁니다.

        다음 작업 중 어떠한 부분이라도 참여하시고 싶으신 분은 누구나 환영합니다.

        • html5rocks.com의 한국어 지원
        • 게시된 문서에 대한 한글화 및 검수
        • 오류 사항 수정

        갓 시작한 그룹에서 도움주시고 싶으시다면 함께 해주셨으면 좋겠습니다.

        • HTML5Rocks 한글화 작업 그룹
        • HTML5Rocks/ko 작업 현황 공유용 Trello Board
          • https://trello.com/b/KF7tY7Yi
            • 참고로 트렐로 보드는 코멘트 등의 활동은 자유롭게 하실 수 있지만 멤버는 초대에 의해서만 가능하도록 되어있습니다. Hold된 튜토리얼에 대한 실제 번역 작업을 하지 않는 경우를 방지하기 위함이니 참고하시기 바랍니다.

        기타 관련 링크는 다음과 같습니다.

        HTML5Rocks/KO

        안녕하세요! :)

        이 블로그는 HTML5Rocks에 올라오는 새로운 글, 한글화 진행에 대한 소식들과 HTML5에 관련된 좋은 정보를 공유하기 위한 블로그입니다. 이 블로그는 정보의 전달 목적으로 운영되며, HTML5Rocks.com이나 구글과는 무관합니다. :)