한국의 개발자들을 위한 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
등의 도구를 이용한 개발 워크플로우를 비롯한 따끈따끈한 컨텐츠를 저자 직강(!!)으로 배울 수 있습니다.
크롬앱스 두 번재 코드랩
3. 크로미움 원정대
크로미움
은 구글에서 진행하고 있는 오픈소스 웹 브라우저입니다. 익히 알고 계시는
크롬
은 크로미음 + 각종 상용 라이브러리 등이 추가된 버전이라고 생각해도 무방합니다. 이
크로미움
의 구조를 분석하고 커밋을 위한 과정을 함께 진행하기 위한 GDG WebTech 운영자
고재도
님이
크로미움 원정대
스터디가 진행 중입니다. 원정대의 최종 목적은
크로미움 프로젝트
의 커미터가 되는 것입니다. 아직 머나먼 원정의 초입에 있으니 관심있는 분은 원정대에 참여해보세요.
크로미움 원정대 4번째 원정
4. WebRTC 원정대
통신 방식에 대한 여러가지 요구사항이 발생하면서 HTML5에는 웹 소켓 이외에도 WebRTC라고 불리는 실시간 통신 규격이 추가되었습니다. P2P 기반의 통신이 필요한 환경에서는 더할 나위 없이 훌륭한 솔루션으로 흔히 예시를 드는 비디오 채팅 이외에도 데이터 채널을 이용한 네트워크 멀티 플레이 데모 등이 이미 구현되어 있습니다. WebRTC에 관심이 있으시다면 GDG Seoul 운영자인
이원제
님이 진행 중인 5월 14일에 열릴
WebRTC 3차 원정
에 참여해보시는 것은 어떨까요.
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-change
will-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)에서 비동기 자바스크립트 콜백이 포함된 호출 스택을 모두 확인할 수 있는 기능이 추가되었습니다. 개발자 도구에서 비동기 콜 스택 기능을 활성화하면 다양한 지점에서 각 지점에서의 상태를 자세히 볼 수 있으며 스택을 추적해 가면서 런타임 실행에서 특정 지점의 어떤 변수 값을 분석할 수도 있습니다.
크롬에서 추가된 비동기 자바스크립트에 대한 호출 스택과 왓치(Watch) 기능이 궁금하시다면 다음 튜토리얼을 참고해보시기 바랍니다. 번역은 한순보님께서 수고해주셨습니다. :)
번역글 보기
소개글 보기
7. [번역] WebRTC 시작하기 by
Sam Dutton
WebRTC는 Web RealTime Communication의 약자로 말 그대로 웹을 위한 실시간 통신 규격입니다. 익히 알려진 바와는 조금 달리 이 규격은 비디오 채팅을 구현하기 위한 기능인 오디오나 비디오 스트림을 P2P로 송수신만이 아니라 일반적인 데이터 전달을 위한 메커니즘을 포함하고 있습니다.
많은 서비스들에서 클라언트-서버 간의 통신을 통해 데이터 송수신 기능을 구현하고 있지만 어떤 경우는 클라이언트 간의 빠른 데이터 교환이 주요한 구현 목적이 되기도 합니다. 웹 개발자들에게 WebRTC는 중요한 기반 기능들을 제공합니다. 반대로 얘기하자면 서버를 중계할 이유가 없으며 클라이언트 간의 데이터를 빠르게 송수신하고자 한다면 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
인디게임페스티벌
정책 세미나
창구프로그램
AdMob
AI
Android
Android 12
Android 12L
Android 13
Android 14
Android Assistant
Android Auto
Android Games
Android Jetpack
Android Machine Learning
Android Privacy
Android Studio
Android TV
Android Wear
App Bundle
bootcamp
Business
Chrome
Cloud
Community
compose
Firebase
Flutter
Foldables
Game
gdg
GDSC
google
Google Developer Student Clubs
Google Play
Google Play Games
Interview
Jetpack
Jetpack Compose
kotlin
Large Screens
Library
ma
Material Design
Material You
ML/Tensorflow
mobile games
Now in Android
PC
Play Console
Policy
priva
wa
wear
Wearables
Web
Web/Chrome
Weeklyupdates
WorkManager
Archive
2024
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