2013년 12월 13일 금요일

[튜토리얼/한글화] 중간계의 프론트엔드: 멀티디바이스 개발의 여정(The Front-end of Middle-earth: A walkthrough of multi-device development)

HTML5Rocks에 새로운 튜토리얼 "중간계의 프론트엔드: 멀티디바이스 개발의 여정(The Front-end of Middle-earth: A walkthrough of multi-device development)"이 등록되었습니다.

이전에 게시되었던 튜토리얼이 모바일 상에서 WebGL, 3D Transform, 성능 최적화에 대한 개괄적인 접근을 다루었다면 이번 튜토리얼은 멀티 디바이스(PC, 태블릿, 폰)에 대한 직접적인 개발 방법을 논의하고 있습니다.

"오늘이 호빗의 개봉일이네요. 영화만큼이나 흥미로운 튜토리얼, 잘 감상하시길..."


TL;DR;


이전 튜토리얼이 모바일에서의 WebGL을 주로 다루었다면 이번 글은 나머지 HTML5 프론트엔드의 구현 사항에 대한 여러가지 이슈들과 해결 방법들에 대해 논의합니다.

멀티 디바이스 지원을 위한 스타일의 정의, 페이지의 전환을 위한 기법들, 랜딩 페이지를 다루기 위한 History API의 사용, 풀스크린의 지원, 애니메이션 시퀀스와 그 처리 방법, 리소스의 최적화, 페이지 성능 등에 대해 실제적인 사례를 기반으로 설명하고 있습니다. 실제 사이트를 참고하시면서 보시면 도움이 되리라 생각합니다.

튜토리얼 링크

작성자: 시간: 댓글 없음:
라벨: , ,

2013년 12월 10일 화요일

[튜토리얼/한글화] 크롬의 렌더링 가속: 레이어 모델(Accelerated Rendering in Chrome : The Layer Model)

HTML5Rocks '크롬의 렌더링 가속: 레이어 모델(Accelerated Rendering in Chrome : The Layer Model)' 한글 튜토리얼이 업데이트되었습니다.

최근 제가 렌더링 최적화에 대한 튜토리얼은 되도록이면 이전 것들까지 번역하려고 노력하고 있는데 레이어(Layer) 모델은 브라우저가 렌더링을 하기 위한 동작에 대해 이해하는 가장 기초적인 개념이 될 것입니다. 이와 더불어 3D 그래픽스에 대한 약간의 지식만으로도 훨씬 더 나은 하드웨어 가속 렌더링에 대한 이해가 가능하므로 읽어보시기를 권장합니다.




TL;DR;


대다수의 웹 개발자들에게 웹 페이지의 일반적인 모델은 DOM이며  렌더링은 일반적으로 이러한 페이지의 표현 형태를 화면상의 이미지로 변환하는 과정입니다. 모던 브라우저들은 이 렌더링에 있어 최근 몇년동안 "하드웨어 가속"이라고 불리는 성능적 뒷받침을 받기 위해 노력해왔습니다.  이 글은 크롬에서 웹 컨텐츠의 하드웨어 가속 렌더링의 기반이 되는 기본 모델에 대해 설명합니다.

아래는 그 중 일부 중요한 내용만 따로 차용한 것입니다. 자세한 내용은 본문을 참조하시기 바랍니다.

DOM의 스크린 출력을 위한 개념적인 과정

  • DOM을 레이어들로 분리
  • 개별 레이어를 비트맵으로 출력
  • GPU 텍스쳐로 업로드
  • 다양한 레이어의 합성을 통해 스크린 출력


레이어(Layers)

  • DOM 구조는 렌더링할 때 브라우저는 개발자에게 직접 보여지지 않는 중간 표현의 연속 과정을 가지게 됩니다. 이 구조들 중 가장 중요한 것은 레이어입니다.
  • 레이어의 컨텐츠를 소프트웨어 비트맵으로 출력하여 GPU에 텍스쳐로 업로드
  • 업로드 후 합성(Composition)에 해당하는 렌더링은 가속됨


레이어 사용상의 주의점

  • 시스템과 GPU의 메모리의 낭비
  • 가시성 추적에 의한 로직 상의 부하
  • 레이어의 숫자/크기/겹침에 따른 픽셀화(Rasterizing)에 소모되는 시간의 증가 등


번역 링크

작성자: 시간: 댓글 없음:
라벨: , ,

[튜토리얼/한글화] 사례연구: Racer의 사운드(Case Study: The Sounds of Racer)

HTML5Rocks '사례연구: Racer의 사운드(Case Study: The Sounds of Racer)' 튜토리얼이 업데이트되었습니다.

웹에서 오디오나 비디오는 사실 플래시만큼이나 애증의 대상입니다. 웹 컨텐츠를 가장 쉽게 풍성하게 보여주기도 하지만 그만큼이나 컨트롤은 어렵습니다. 이 튜토리얼은 슬롯 트랙에서 플레이되는 자동차 게임인 '레이서(Racer)'의 사운드 구현에 관련된 내용들을 담고 있습니다. 사실 오디오와 관련해서 웹 상에서 많은 리소스들이 있지는 않기 때문에 웹 오디오로 고민하시는 분들에게는 도움이 되리라 생각합니다. 특이한 구현 사례도 있고 많지는 않지만 오디오에 대한 지식도 조금 필요하기 때문에 필요한 부분만 읽으셔도 좋고 멀티미디어 컨텐츠 혹은 게임 개발자시라면 자세하게 읽어보시길 권해드립니다.

이번 번역은 +Hyunjin Shin님이 수고해주셨습니다. :)



TL;DR;


Racer Racer는 멀티플레이어 및 멀티디바이스로 동작하는 크롬 실험입니다. 여러개의 스크린에서 플레이하는 레트로 스타일의 슬롯 자동차 게임입니다. Android, iOS 폰 또는 태블릿에서 동작하며 누구나 참여할 수 있습니다. 앱이 아니며 다운로드도 없는 그저 모바일 웹일 뿐입니다.

이 게임은 다수의 사용자가 게임에 참가하고 참가한 사람들의 휴대폰을 일종의 다중 스피커로 활용합니다. 드럼과 베이스로 시작되어 기타와 신디사이저 등이 추가되는 음악 트랙이 만들어지는 형태입니다. 이 게임을 만들기 위해 필요한 내용을 다음과 같이 정리/제공합니다.

  1. 여러 개의 오디오 파일을 동기화하여 이용한 엔진 사운드의 구현 방법
  2. 버스트 요청을 샘플링하고 그것을 기준으로 낮은 레이턴시를 계산하여 네트워크를 통한 음원 재생 동기화
  3. 지연 누적으로 인해 긴 시간 동안 재생 후에 음악 레이어에서 전체적으로 동기화가 틀어지는 클럭 드리프트에 대한 해결
  4. 동적인 상태 변화를 위한 노래 스케줄링 및 오디오 재생 순서의 배치 전환 및 최적화
  5. 하나의 오디오 파일을 스프라이트처럼 응용한 오디오 스프라이트 사례

참고 글

작성자: 시간: 댓글 없음:
라벨: , ,

[튜토리얼/한글화] 개발자도구에서 터미널 사용하기(Using Your Terminal From The DevTools)

+Addy Osmani의 '개발자도구에서 터미널 사용하기(Using Your Terminal From The DevTools)' 튜토리얼이 업데이트되었습니다.

웹 개발을 하다보면 터미널을 반복적으로 사용하게 되는 경우가 있으며 특히 Grunt나 별도의 빌드 및 배치 시스템을 가진 경우는 더 그렇습니다. 이번 튜토리얼은 크롬 개발자도구의 기능/실험실이 아닌 개발자도구에서 터미널을 사용할 수 있게 해주는 작지만 편리한 크롬 확장기능(Extension)입니다. 특히나 금번 튜토리얼은 소개에 가까우므로 커맨드라인 도구를 자주 쓰시는 분들은 한번 참조해보셔도 좋을 듯 합니다.

참고로 윈도우즈 사용하시는 분들은 별도의 문제점이 있는지 댓글 달아주실 수 있을까요? 며칠 전에 알려드린 한분이 자신은 윈도우라서 안되는 것인지 모르겠다고 하셨는데 조금 궁금하네요. :)



TL;DR;


크롬 개발자도구에서 터미널을 지원하는 것은 몇가지 이점이 있습니다. 브라우저와 편집기, 터미널을 오가며 바쁘게 컨텍스트를 변경하는 것보다는 같은 창 내에서 이를 진행하는 것이 효율적일 것입니다. 아래는 개발자도구와 터미널을 통합하여 사용하는 예입니다.

  1. 작업영역(Workspaces)
    1. 크롬 내의 웹앱을 편집하고 디버깅
    2. 서버 실행 시 로컬 프로젝트와 네트워크 파일들의 매핑
  2. 개발자도구 터미널
    1. git, yeoman과 같은 커맨드라인 기능 실행
    2. 앱을 미리보기 위한 새로운 서버를 실행
    3. 소스 컨트롤에 커밋
    4. 의존성 모듈들을 내려받기 위해 (npm, bower 같은) 패키지 관리자 사용
    5. (grunt, make 같은) 빌드 프로세스를 실행
제한점들
  • 다중 탭(Tab), 다중 윈도우, 뒤로가기(History playback)를 지원하지 않습니다.
    • 새로운 인스턴스를 여러개 띄우는 것으로 이를 대치할 수는 있습니다.
크롬을 통해 웹페이지 테스트를, 개발자 도구로 개발 및 디버깅을, 이 확장기능을 이용하여 터미널 빌드를 사용하는 것을 시도해보시기 바랍니다.

참고 글

작성자: 시간: 댓글 없음:
라벨: , ,

2013년 12월 4일 수요일

[튜토리얼/한글화] 모바일을 위한 크롬 개발자도구: 스크린캐스트와 에뮬레이션(Chrome DevTools for Mobile: Screencast and Emulation)

+Paul Irish의 HTML5Rocks의 '모바일을 위한 크롬 개발자도구: 스크린캐스트와 에뮬레이션(Chrome DevTools for Mobile: Screencast and Emulation)' 튜토리얼이 업데이트되었습니다.

지난번 크롬 개발자 데이 이후부터 중간중간 크롬 개발자도구에서 직접적인 원격 디버깅과 화면 공유에 대해 이야기한 적이 있었는데 이번에는 그 모바일 디바이스에 대한 리모트 디버깅 시 유용하게 사용할 수 있는 '스크린캐스트(ScreenCast)'와 디바이스가 없거나 번거로울 때 사용할 수 있는 '에뮬레이션(Emulation)'에 대해 설명합니다. 모바일 개발자인데 모르고 계셨다면 꼭 읽으시길 추천해드립니다. :)



TL;DR;


모바일을 위해 개발하는 것은 데스크탑을 위해서 개발하는 것과 거의 비슷합니다. 이 글은 크롬 개발자도구에서 모바일 웹 개발 과정에서 디버깅을 크게 개선할 수 있는 새로운 기능인 리모트 디버깅(Remote Debugging)과 모바일 에뮬레이션(Emulation)에 대해 설명합니다.

  • 리모트 디버깅 - 디바이스에 대한 원격 디버깅
    1. 별다른 설정없이 간단한 과정으로 디바이스의 안드로이드 크롬에 직접 연결하여 디버깅을 지원합니다.
    2. 스크린캐스트(ScreenCast)를 이용하여 실제 디바이스 화면을 보지 않고 크롬 개발자도구에서 화면을 보고 인터랙션할 수 있습니다.
    3. (즉, 디바이스에서 직접 접근할 IP나 도메인이 없거나 불명확하게) 로컬호스트 등에서 실행되는 경우에도 포트 포워딩(Local Port Forwarding)로 이를 지원합니다.
  • 에뮬레이션 - 디바이스가 없을 경우의 에뮬레이션 및 디버깅
    1. 디바이스가 없을 경우에 화면 크기, devicePixelRatio, 메타 뷰포트 및 풀터치 이벤트에 대한 시뮬레이션을 지원합니다.
참고하시기 바랍니다.

참고 글

작성자: 시간: 댓글 없음:
라벨: , ,

2013년 12월 2일 월요일

[튜토리얼/한글화] 크롬 개발자도구 11월 요약(Chrome DevTools November Digest)

HTML5Rocks의 '크롬 개발자도구 11월 요약(Chrome DevTools November Digest)' 튜토리얼이 업데이트되었습니다.

이제 크롬 개발자도구의 업데이트에 대한 요약이 주기적으로 이루어질 것 같네요. 매번 매뉴얼을 살펴보기 힘들거나 이미 개발자도구를 잘 사용하고 계시는 분이라면 이 다이제스트를 지속적으로 읽어보시는 것으로 신규 기능을 참조하시기 바랍니다.



TL;DR;


크롬 개발자도구는 빠르게 발전하고 있어 새로운 기능이나 개선점들에 대해 지속적인 안내가 필요합니다. 이글은 몇 가지 UI의 변경점들과 고해상도 자바스크립트 프로파일링, 새로운 작업공간(Workspace) 기능에 대해 설명합니다.


  1. 고해상도 프로파일링이 이제 .1ms 단위로 동작 가능합니다.
  2. 툴바가 개발자도구 상단에 위치하며, Overrides가 콘솔 드로어(Drawer)로 이동하였습니다.
  3. 파일을 추가/삭제/검색을 지원하는 몇가지 기능이 작업공간(Workspace)에 추가되었습니다.
이외에도 새로고침(refresh)를 좀 더 쉽게 호출할 수 있도록 context menu가 간소화되었네요. 참고하시기 바랍니다.

참고 글

작성자: 시간: 댓글 없음:
라벨: , ,

[튜토리얼/한글화] 동기화된 크로스 디바이스 모바일 테스팅(Synchronized Cross-device Mobile Testing)

HTML5Rocks의 '동기화된 크로스 디바이스 모바일 테스팅(Synchronized Cross-device Mobile Testing)' 튜토리얼이 업데이트되었습니다.

다양한 모바일 디바이스에서 동시에 웹 페이지를 테스트할 때 사용 가능한 동기화 도구를 설명합니다. 개발자뿐만이 아니라 특히 웹 페이지의 수동 테스팅을 주업무로 하는 분들(QA 같은)이 읽어보시면 도움이 될 듯 합니다.



TL;DR;


모바일 디바이스는 이제 너무나도 많고 다양한 스펙 및 종류를 포함하고 있습니다. 특히 HTML5를 대상으로 하는 모바일 페이지의 경우 아직 정립되지 않은 개발 내용을 포함하는 경우도 있습니다. 이러한 디바이스에서 자주 수동 테스팅을 하는 경우 동일한 작업에 대한 시간적인 낭비가 심합니다. 이것을 어떻게 간소화할 수 있을까요?

이 글은 다양한 동기화 도구를 통해 동시에 다양한 디바이스에서의 수동 테스팅 방법을 설명합니다. 여러개의 도구를 설명하므로 상황에 맞추어 참고하시면 되겠습니다. 이 글에서 설명하는 도구는 다음과 같습니다.

  1. Ghostlab (Mac)
  2. Adobe Edge Inspect CC (Mac, Windows)
  3. Remote Preview (Mac, Windows, Linux)
  4. Grunt + Live-Reload (Mac, Windows, Linux)
  5. Emmet LiveStyle

참고 글

작성자: 시간: 댓글 없음:
라벨: , ,
피드 구독하기: 글 (Atom)