Google for Developers Korea Blog: GDG WebTech 소식 최신 업데이트

Google for Developers Korea Blog

한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.

GDG WebTech 소식 최신 업데이트

2014년 5월 12일 월요일

by 도창욱, GDG WebTech 운영자

안녕하세요, GDG WebTech입니다. GDG WebTech는 웹을 기반으로 한 다양한 기술에 관심을 가지고 운영되고 있습니다. 최근에 있었던 소식을 모아 전달해드리기 위한 첫번째 비정기 소식지를 포스팅합니다. :)

GDG WebTech 활동

1. GDG DevFest 개최 및 스피커 모집 2. Chrome Apps 코드랩 3. 크로미움 원정대 4. WebRTC 원정대

Chrome/Chromium 36 관련 및 기타 소식

1. CSS transform의 Prefix 제거 2. WebAnimations 자바스크립트 API 추가 3. CSS Will-change 4. ServiceWorker 초기 구현 5. HTML5Rocks/KO 업데이트 6. [번역] 크롬 개발자도구로 비동기 자바스크립트 디버깅하기 by Pearl Chen 7. [번역] WebRTC 시작하기 by Sam Dutton

GDG WebTech 활동

1. GDG DevFest 개최 및 스피커 모집Google Developer Group Korea DevFest 2014 컨퍼런스 발표자를 모집합니다. 이번 GDG Korea DevFest는 2014년 5월 31일 오후 1시부터 6시까지 코엑스 그랜드 볼룸 101호, 102호에서 진행되며 웹 기술을 중심으로 하여 안드로이드 및 구글 클라우드 기술까지 다양한 구글의 기술들을 공유하는 자리를 가질 예정입니다. 많은 분들이 참여 하셔서 보다 활발한 지식과 경험 나눔의 장이 이루어지기를 기대합니다. :) 발표 신청하러 가기 2. Chrome Apps 코드랩GDG WebTech 운영자 문현경님이 Chrome Apps 코드랩을 진행 중입니다. Chrome App을 구성하기 위한 기본적인 접근 방법부터 Yeoman 등의 도구를 이용한 개발 워크플로우를 비롯한 따끈따끈한 컨텐츠를 저자 직강(!!)으로 배울 수 있습니다.

Chrome Apps 코드랩

크롬앱스 두 번재 코드랩

3. 크로미움 원정대크로미움은 구글에서 진행하고 있는 오픈소스 웹 브라우저입니다. 익히 알고 계시는 크롬은 크로미음 + 각종 상용 라이브러리 등이 추가된 버전이라고 생각해도 무방합니다. 이 크로미움의 구조를 분석하고 커밋을 위한 과정을 함께 진행하기 위한 GDG WebTech 운영자 고재도님이 크로미움 원정대 스터디가 진행 중입니다. 원정대의 최종 목적은 크로미움 프로젝트의 커미터가 되는 것입니다. 아직 머나먼 원정의 초입에 있으니 관심있는 분은 원정대에 참여해보세요.

크로미움 원정대 4차 모임

크로미움 원정대 4번째 원정

4. WebRTC 원정대통신 방식에 대한 여러가지 요구사항이 발생하면서 HTML5에는 웹 소켓 이외에도 WebRTC라고 불리는 실시간 통신 규격이 추가되었습니다. P2P 기반의 통신이 필요한 환경에서는 더할 나위 없이 훌륭한 솔루션으로 흔히 예시를 드는 비디오 채팅 이외에도 데이터 채널을 이용한 네트워크 멀티 플레이 데모 등이 이미 구현되어 있습니다. WebRTC에 관심이 있으시다면 GDG Seoul 운영자인 이원제님이 진행 중인 5월 14일에 열릴 WebRTC 3차 원정에 참여해보시는 것은 어떨까요.

WebRTC 원정대 1차 원정

WebRTC 원정대 1차 원정

GDG WebTech에서는 이렇게 다양한 목적을 가진 스터디, 코드랩, 세미나 등의 모임이 이루어지고 있습니다. 자세한 모임 정보는 항상 GDG WebTech 이벤트 포스트에 업데이트되니 참조하시기 바랍니다. :)

Chrome/Chromium 36 관련 및 기타 소식

1. CSS transform의 Prefix 제거기존에 CSS transform을 적용하기 위해서는 -webkit-transform: ...처럼 prefix가 포함된 형태로 기술해야 했지만 36버전부터는 prefix가 없는 상태로 기술이 가능해집니다. :) 2. WebAnimations 자바스크립트 API 추가Web Animations는 기존의 선언적인 방식에서 벗어나서 자바스크립트를 기반으로 능동적으로 CSS3 Animation 및 Transition, SVG 애니메이션을 처리할 수 있는 새로운 HTML5 규격입니다. 작년 말 Blink 엔진에서 WebAnimations 규격을 지원하기 위한 네이티브 엔진 교체가 이루어졌었습니다만 이때까지는 WebAnimation에서 정의하고 있는 자바스크립트 API가 빠진 상태로 기존 CSS3 애니메이션이 제대로 동작하는지만 확인할 수 있어 별로 차이를 느끼지 못하셨을 겁니다. (아마 엔진이 변경되었다는 사실조차 모르시는 분들이 많으실 것 같네요.) 이제 36버전부터 웹 애니메이션의 API 중 element.animate()가 사용 가능해집니다. 물론 Chrome for Android에서도 마찬가지입니다.

크로미움 대시보드

WebAnimations 규격

Polymer WebAnimations.js 폴리필 라이브러리

3. CSS Will-changewill-change CSS 속성이 추가되었습니다. will-change 속성은 엘리먼트 내의 컨텐츠나 리스팅된 속성이 변경될 수 있음을 브라우저에 알려주는 일종의 힌트 속성입니다. 단순히 속성 자체로 페이지 상의 변화가 일어나는 것은 아니지만 다양한 방식의 하드웨어 가속을 통해 렌더링이 이루어지는 환경에서는 브라우저의 렌더링이 보다 효율적으로 동작할 수 있도록 해줄 수 있습니다. 이 규격은 초안(Draft) 상태입니다만 크롬 36버전부터 구현되어 있는 상태입니다.

크로미움 대시보드 - CSS Will-change 구현 상태

CSS Will Change Module Level 1 규격

4. ServiceWorker 초기 구현ServiceWorker웹 페이지와는 독립적인 생명주기(life-cycle)를 가진 이벤트 기반 시스템입니다. ServiceWorker는 WebWorker의 일종이지만 근본적으로는 어플리케이션과 별개의 스레드를 운용하며 필요하다면 개발자의 캐싱(Caching) 관리가 가능하게 하거나 네트워크를 통한 사용자 요청에 대하여 응답을 제어할 수 있게 되는 등 오프라인 지원을 위한 다양한 (특히 리소스의 제어에 유용한) 기능을 제공합니다. 현재 ServiceWorker 규격 정의가 W3C에서 현재 진행 중이며 데스크톱 크롬 36과 안드로이드용 크롬 36부터 ServiceWorker의 초기 구현이 포함됩니다. 구현 상태와 규격은 아래 사이트에서 참조하시기 바랍니다.

크로미움 대시보드 - Service Worker 구현 상태

ServiceWorker 규격

5. HTML5Rocks/KO 업데이트지난달 HTML5Rocks에는 2개의 튜토리얼 번역본이 업데이트되었습니다.

6. [번역] 크롬 개발자도구로 비동기 자바스크립트 디버깅하기 by Pearl Chen콜백 함수를 통한 비동기 처리는 자바스크립트를 특별하게 만드는 강력한 기능이며 실행 성능 문제를 해결하는 최선의 방법입니다. 그러나 자바스크립트가 순차적으로만 실행되지 않으므로 디버깅 과정은 다소 복잡할 수 있으며 최근과 같이 외부에서 작성된 자바스크립트 라이브러리들을 사용하는 환경에는 특히 그러했습니다.다행스럽게도 크롬 개발자 도구(DevTools)에서 비동기 자바스크립트 콜백이 포함된 호출 스택을 모두 확인할 수 있는 기능이 추가되었습니다. 개발자 도구에서 비동기 콜 스택 기능을 활성화하면 다양한 지점에서 각 지점에서의 상태를 자세히 볼 수 있으며 스택을 추적해 가면서 런타임 실행에서 특정 지점의 어떤 변수 값을 분석할 수도 있습니다.
Chrome에 추가된 비동기 스크립트에 대한 호출 스택

Chrome에 추가된 비동기 스크립트에 대한 호출 스택

크롬에서 추가된 비동기 자바스크립트에 대한 호출 스택과 왓치(Watch) 기능이 궁금하시다면 다음 튜토리얼을 참고해보시기 바랍니다. 번역은 한순보님께서 수고해주셨습니다. :)

번역글 보기

소개글 보기

7. [번역] WebRTC 시작하기 by Sam DuttonWebRTC는 Web RealTime Communication의 약자로 말 그대로 웹을 위한 실시간 통신 규격입니다. 익히 알려진 바와는 조금 달리 이 규격은 비디오 채팅을 구현하기 위한 기능인 오디오나 비디오 스트림을 P2P로 송수신만이 아니라 일반적인 데이터 전달을 위한 메커니즘을 포함하고 있습니다.많은 서비스들에서 클라언트-서버 간의 통신을 통해 데이터 송수신 기능을 구현하고 있지만 어떤 경우는 클라이언트 간의 빠른 데이터 교환이 주요한 구현 목적이 되기도 합니다. 웹 개발자들에게 WebRTC는 중요한 기반 기능들을 제공합니다. 반대로 얘기하자면 서버를 중계할 이유가 없으며 클라이언트 간의 데이터를 빠르게 송수신하고자 한다면 WebRTC는 좋은 선택이 될 수 있습니다.
apprtc.appspot.com의 WebRTC 통신 및 일반 통신

apprtc.appspot.com의 WebRTC 통신 및 일반 통신

apprtc.appspot.com의 WebRTC 통신 및 일반 통신이번 WebRTC의 기본 개념과 구현 방법을 소개하는 이번 튜토리얼을 통해 WebRTC가 어떠한 것이고 어떻게 사용하는지를 확인해보시기 바랍니다. 번역은 이원제님께서 수고해주셨습니다. :)

번역글 보기

소개글 보기

WebRTC에 대해 더 살펴보고 싶으시다면 다음 튜토리얼들도 참조하세요.

WebRTC의 실제: STUN, TURN, 시그널링

WebRTC 데이터채널: 고성능 데이터 교환을 위한 WebRTC 데이터 채널

Contents

ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Game
Firebase

검색

Tag

Archive

2024
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2023
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2022
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2021
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2020
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2019
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2018
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2017
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2016
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2015
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2014
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2013
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2012
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 3월
- 2월
- 1월

2011
- 12월
- 11월

Feed

Google
Privacy
Terms