2013년 11월 27일 수요일

[튜토리얼/한글화] HTML Imports: 웹을 위한 #include(HTML Imports: #include for the web)

HTML5Rocks의 'HTML Imports: 웹을 위한 #include (HTML Imports: #include for the web)' 튜토리얼의 한국어 번역이 업데이트되었습니다.

HTML Imports 역시 이전의 Custom Element처럼 웹 컴포넌트를 지탱하는 4가지 규격 중의 하나입니다.


  1. Shadow DOM이 컴포넌트의 DOM, CSS, JS를 감추는 역할(encapsulation)을 하고
  2. HTML Template가 DOM의 복제 및 재 사용성을 제공하며
  3. Custom Element는 웹 문서에서 사용할 엘리먼트를 모듈에서 직접 등록할 수 있도록 하는 기능을 제공하여 컴포넌트의 명시적인 alias를 선언하는 역할을 한다면
  4. HTML Imports는 웹 문서 내에 외부 리소스를 포함(Import)하기 위한 기능을 제공합니다.

(사실 여기에 Decorator가 추가되는데 이 부분은 아직 정확하게 규격화가 되지 않아서 따로 진행되고 있는 바는 없습니다. 간략하게는 Web Component의 동적인 Enhancement에 대한 관리 방법을 제공하기 위한 규격으로 판단됩니다.)



TL;DR;


웹에서 각기 다른 형태의 리소스들은 개별적으로 로딩을 위한 메커니즘을 가지고 있고 이를 통해 개별적인 리소스에 대해서는 지속적으로 재사용 가능한 사례를 만들어 내고는 있습니다. 그렇다면 웹 컨텐츠(HTML, CSS, JS)는 어떤가요?

<iframe>의 경우 사용이 가능하며 실제적인 방법이지만 무겁고 세부적인 제어에 있어서는 굉장히 큰 노력을 필요로 하면서도 결국 불가능한 부분들이 있습니다. 그외에도 Ajax를 사용하거나 <script> 태그를 응용한 각종 핵(hack)이 존재합니다. 동작을 위한 정말 굉장한 노력을 필요로 하는 웹 컨텐츠(HTML/JS/CSS 등)에 대해 하나의 패키지처럼 관리하며 로딩할 수 있는 메커니즘이 있다면 어떨까요?

HTML Imports는 Web Components의 일부로 일컬어지는 HTML 문서를 다른 HTML 문서들에 가져오기 위한 방법입니다. 또한 Import는 CSS, JavaScript 혹은 '.html' 외의 어떠한 것도 가져올 수 있습니다. 다시 말해서 이러한 것이 Import를 HTML/CSS/JS의 로딩과 관련된 환상적인 도구로 자리잡아 줍니다.

이 글에서는 아래 내용에 대한 개념 설명과 예제를 설명하고 있습니다.

  1. 기본적인 HTML Imports의 개념 및 Bundling 등의 사용 방법
  2. 컨텐츠의 사용
  3. 웹 컴포넌트의 배포
  4. 성능에 관련된 고려 사항들

참고 글


2013년 11월 20일 수요일

[튜토리얼/한글화] '호빗' 체험 : 중간계를 실제로(The Hobbit Experience: Bringing Middle-Earth to Life with Mobile WebGL)

HTML5Rocks에 재미난 튜토리얼이 하나 올라왔네요. "'호빗' 체험 : 모바일 WebGL을 이용한 중간계를 실제로(The Hobbit Experience: Bringing Middle-Earth to Life with Mobile WebGL)"입니다.

개인적으로도 사랑해 마지 않는 J.R.R. 톨킨의 호빗: 스마우그의 폐허(The Hobbit: The Desolation of Smaug)에 대한 개발 및 접근 방법, 이슈에 대한 튜토리얼입니다. 구글 실험실(Experiment)에서도 손꼽힐만큼 잘만든 3D 비주얼 노블(Visual Novel)정도 될 것 같습니다. :)

모바일 같은 저사양(?) 디바이스에서 WebGL에 대한 적절한 접근 방법을 보여주고 어떻게 성능을 최적화하는지에 다루며 초기화나 (적은 수의 polygon, 저해상도 텍스쳐를 사용하는) 로우 폴리곤 모델이나 자바스크리브 최적화에 대해 간략하게 설명하고 있습니다. 컨텐츠 자체가 비주얼 노블이 주요 내용이라 WebGL이 지원되지 않는 디바이스에서도 대략적인 내용을 체험해볼 수 있는 이번 튜토리얼은 백문이 불여일견이네요. :)

"문득 당대의 신학 및 언어학자이자 판타지 문학의 시조로 불리는 톨킨이 살아 있다면 어떻게 볼까라는 생각도 듭니다. (굉장히 많은 언어를 습득했을 뿐만이 아니라 반지의 제왕 등의 본인 소설에서도 종족별 언어를 무려 '창조'해서 넣으신 분이죠.) '프로그래밍 언어도 굉장히 재미있군'이라고 얘기하지 않을까."

TL;DR;

WebGL을 이용한 3D 로우(Low) 폴리곤 모델, 자바스크립트 및 텍스쳐, 재질 등의 최적화나 최소한의 렌더링 동작을 위한 Frustum Culling 등 3D 최적화를 위한 요소들을 간략하게 설명하고 있습니다. (아주 예전에 3D 개발을 하셨거나 모바일에서 3D 개발하시는 분들에게는 친근한 내용이라 편하게 접근할 수 있을 것 같습니다.) 무엇보다 컨텐츠가 매우 볼만하네요.


참조 링크

2013년 11월 18일 월요일

[소식/Summit] Chrome Dev Summit 세션 소개 요약

귀국 후 첫포스팅이네요. 역시 인터넷은 한국이 빠릅니다. :+1:

내일부터 모레(20일부터 21일)까지 크롬 개발자 서밋(Chrome Dev. Summit)이 있습니다. 온라인으로 라이브도 진행한다고 합니다. Linus Upson, 크롬 엔지니어링 부사장의 Keynote 발표로 시작하여 성능 최적화(클라이언트와 네트워크 부분)부터 보안, 블링크, 폴리머까지 다양한 부분을 다루니 이에 대해서 요약해보는 것도 좋을 것 같습니다. 아래 링크 참조하시기 바랍니다.



주요 세션


#perfmatters: Optimizing network performance - +Ilya Grigorik

웹 사이트의 주요 병목 지점에 대한 네트워크 지연 사항에 대한 해결을 위해 어떠한 흐름으로 네트워크 성능을 수집하고 빠른 사이트로 변경할 수 있는지에 대해 설명합니다. (O'Reilly의 네트워크 성능 최적화 책도 있죠.)

Network connectivity: optional +Jake Archibald 

ApplicationCache를 이용하여 Offline 처리를 해왔는데 ServiceWorker API를 이용하여 Offline 어플리케이션 데이터를 어떻게 관리할 수 있는지 설명합니다. 당장은 넓게 적용할 수는 없는 규격이지만 ServiceWorker는 저도 이번에 TPAC2013 가서 처음 듣고 찾아보았는데 복잡하니 설명을 들어두는 것도 좋을 것 같습니다. Jake Archibald는 프리젠테이션 테크닉도 화려해서 기대하고 있습니다. :)

#perfmatters: 60fps layout and rendering +Tom Wiltzius+Nat Duca 

스크롤, 애니메이션, 터치 등의 최적화에 대한 몇가지 구축 방안과 크롬 개발자 도구를 이용한 성능 최적화의 방법에 대해서 설명합니다. 최근에 렌더링 성능 최적화 관련해서 몇가지 글에 대한 번역 소식을 전해 드린바 있는데 전반적인 정리가 필요하신 분들은 이 세션에서 한번에 들어보시는 것도 좋을 것 같습니다.

Dart for the modern web developer +Kasper Lund+Seth Ladd 

구글에서 이번에 Dart 1.0을 공식으로 릴리즈했습니다. 생소한 언어와 환경이니만큼 어떻게 이를 이용해서 웹 개발에 적용할 수 있는지와 자바스크립트와의 연동/변환 방법에 대해서 설명합니다.

Chrome DevTools for Mobile +Paul Irish 

크롬 개발자 도구를 이용하여 어떻게 모바일 웹을 개발할 수 있는지에 대해 전반적인 설명을 합니다. ScreenCast, Port Forwarding 등 개발자 도구의 크롬 모바일 지원 사항 관련해서는 지난번 Chrome Dev. Day 요약에서 살짝 설명드린바 있습니다.

Optimizing your workflow for a cross-device world +Matt Gaunt 

웹앱에서 멀티 디바이스/플랫폼 등에 대해 어떠한 방식으로 이들에 대한 검증을 할 수 있는지 테스팅 관련하여 설명을 한다고 하네요. 금번에 HTML5Rocks에서도 해당 튜토리얼이 올라올 예정이니 한번 보시고 튜토리얼을 읽어 보시는 것도 좋을 듯 하네요. :)

Polymer: declarative, encapsulated, and reusable components for the web +Eric Bidelman 

웹 컴포넌트에 대해서는 여러가지로 설명드린바 있고 이에 대한 튜토리얼들 역시 포스팅(Yeoman, Custom Element)한 바 있는데 웹 컴포넌트를 기존 모던 웹 브라우저에서 지원하기 위한 Polymer에 대해서 설명합니다. 최근에 핫한 오픈소스 프로젝트 중의 하나인데 미리 살펴보시길 바랍니다.

#perfmatters: Tooling techniques for the performance ninja +Colt McAnlis 

Colt McAnlis는 최근에 Image CompressionText Compression(참고로 텍스트 압축은 아직 번역 전입니다.)에 대한 글을 HTML5Rocks에 올린 적이 있는데 크롬 개발자 도구를 이용한 성능 최적화 방법에 대해 설명한다고 하네요. 개발 도구 관련해서 어떠한 부분을 설명할지는 모르겠지만 아마 리소스 송수신에 대한 부분이 아닐까 싶긴하네요. :)

Develop Chrome Apps on desktop/mobile, distribute and profit +Joe Marini 

크롬 앱을 이용한 개발 및 보안 관련한 내용에 대해서 설명하고 4개의 데스크탑 OS, 2개의 모바일 OS 상에서 시연한다고 합니다. (크롬 앱의 경우 모바일에서는 아직 지원이 되지 않지만 Cordova 플러그인을 통해 이를 개발할 수 있는 내용은 설명 드린 바 있습니다.)

Portable Native Client: How we Learned to Stop Compiling and Love the Translator +Molly Mackinlay+David Sehr 

얼마 전에 PNaCl도 릴리즈되었는데 크롬 기반에서 네이티브 기술을 이용하여 어떻게 플랫폼 독립적인 네이티브 연동 어플리케이션을 만들 수 있는지에 대해서 설명합니다. (개인적으로 보안 및 실행 모델에 대해서는 달리 얘기되기는 하지만 개발 환경에 대해서는 좀 궁금한 부분입니다.)

Got SSL? An overview of why you need it and how to do it right. +Parisa Tabriz 

간단하게 요약하면 웹 어플리케이션이 어떻게 SSL에서 보호되고 어떻게 구현되는지에 대해서 설명합니다.

Blink: Behind the scenes +Greg Simon+Eric Seidel 

크롬 28버전부터 렌더링 엔진이 Blink로 변경되었고 이제 크롬 안드로이드 역시 이를 사용합니다. 현재 어떻게 블링크가 진행되고 있는지 실제 웹 개발자들이 블링크로 인해 개발 시에 변경되는 부분(지원되는 부분)들은 어떤 것이 있는지 살펴본답니다. 앞으로의 계획에 대해서도 언급이 있을 듯 하니 살펴봐두는 것이 좋을 것 같습니다.

Build mobile apps with Chrome WebView +Matt Gaunt 

하이브리드 웹 앱을 개발하시는 분들이 좀 관심이 있으실 듯 한데 Chrome Webview가 킷캣부터는 꽤 많이 바뀌었죠. 크롬 웹뷰를 이용한 UI 개발, HTML5 기능 사용, Native UI 등에 대해 설명합니다.

Best UX patterns for mobile web apps +Paul Kinlan 

모바일 디바이스에서 다양한 형태의 스크린 및 해상도 그리고 터치 등으로 인해 많은 인터랙션 방식들이 제안되고 활용되고 있는데 +Paul Kinlan이 이에 대한 구축 이슈들과 활용 가능한 도구에 대해서 설명합니다.

Media APIs for the multi-platform web +Sam Dutton+Jan Linden 

비디오, 오디오, WebRTC, 웹 오디오 등을 활용하는 멀티 디바이스 웹 어플리케이션의 구축에 대해서 설명하고 어떻게 성능을 최적화할 수 있는지 모바일에 이를 구현하기 위한 방법등을 설명합니다. (Sam Dutton은 최근에 WebRTC에 대한 튜토리얼을 작성한 바 있습니다.)

#perfmatters: Instant mobile web apps +Bryan McQuade 

모바일 사용자들에게 쾌적한 환경을 제공하기 위한 렌더링 최적화를 위한 모바일 웹의 좋은 패턴과 안티 패턴들을 소개하고 성능에 치명적인 CSS와 HTML 문서 내에서 인라인 CSS의 장단점 등에 대해 소개합니다. (관심 가는 세션 중의 하나네요.)

Multi-device accessibility +Alice Boxhall

(장애인을 포함하여) 다양한 사용자에게 모던 웹사이트를 제공하기 위해 제공 및 사용할 수 있는 기술과 웹 기능, 크롬 기능을 설명하고 접근성과 디버깅에 관련된 몇가지 도구에 대해서 소개합니다. (해외에서의 웹 접근성에 대한 내용도 살펴보는 기회가 되겠네요.)



요약만 정리해도 양이 엄청 많네요. 동시 진행되는 세션은 없지만 이틀내내 지켜볼 수는 없으니 가능하면 나눠서 정리가 되면 좋을텐데 안되면 며칠을 나눠서 봐야겠네요. :(

2013년 11월 12일 화요일

[튜토리얼/한글화] V8의 자바스크립트 성능 관련 팁들(Performance Tips for JavaScript in V8)

+Chris Wilson의 'V8의 자바스크립트 성능 관련 팁들(Performance Tips for JavaScript in V8)'의 한글화 튜토리얼이 업데이트되었습니다. 번역해주신 김훈민님 감사합니다. 훈민님 사이트에 가시면 ECMA 스크립트와 자바스크립트 엔진에 대한 좋은 Overview들이 있으니 방문해보시기 바랍니다. :)

좋은 성능을 가진 코드의 작성을 하다보면 자연스럽게 실행의 Low Level에 도달하게 됩니다. (예를 들어 우리가 Native에서 어셈블리에 대해 대략적인 지식이 필요한 경우가 종종 존재하듯이 말이죠.) 실제로 자바스크립트의 규격뿐만이 아니라 엔진이 어떻게 자바스크립트 코드를 실행하고 최적화하는지에 대해 이해할 필요가 있으시다면 (특히 HTML5 3D나 대량의 연산을 위한 코드를 작성하고 계시다면) 읽어보시기 바랍니다.

"솔직하게 말씀드리면 V8 소스의 커밋 속도도 꽤 빠르게 진행됩니다. 최적화에 관련된 여러가지 요소가 지속적으로 추가되고 있지만 최소한 이 글에서 다루고 있는 내용은 아마 V8의 최적화에서 변하지 않을 내용들을 다루고 있으므로 숙지하시는 것도 좋을 듯 합니다. 다른 자바스크립트 엔진까지 자료를 취합할 수 있다면 더욱더 좋은 가이드가 만들어질 것 같습니다."


TL;DR;

이 글에서 다루는 V8의 자바스크립트 코드를 최적화 방식에 대해 이해하여 V8 엔진에서 최적화된 코드를 작성하는데 필요한 기본 지식과 간단한 예제, 지침을 담고 있습니다. :)


  • Hidden Classes
    • V8은 런타임 시에 객체에 사용하기 위해서 내부적으로 만든 hidden class을 통해 같은 hidden class를 가지고 있는 객체는 최적화된 생성 코드를 사용할 수 있습니다. 모든 객체 멤버를 생성자 함수 안에서 같은 순서로 객체 멤버를 초기화하는 형태의 코드를 통해 hidden class가 동적으로 변하지 않도록 유지하여 성능을 최적화할 수 있습니다.
  • Numbers
    • V8은 데이터 타입이 변할 때 효율적으로 값을 나타내는 태그를 사용하지만 동적인 태그를 변경하는 데에 비용이 들기 때문에 number 타입을 지속적으로 사용하는 것이 가장 좋습니다. 일반적으로 적합하다면 31비트 부호있는 정수를 사용하는 것이 최적입니다.
  • Arrays
    • 내부적으로 분리되어 처리되는 배열의 형태에 따라 최적화의 포인트는 달라질 수 있습니다. 가급적이면 연속적이고 단일한 타입을 가지며 동적으로 변환되지 않도록 배열을 유지하는 것이 중요합니다.
  • JavaScript Compilation
    • V8(크롬의 JavaScript 엔진)은 두가지의 다른 Just-In-Time(JIT) 컴파일러를 가지고 있습니다. Full Compilation과 Optimization Complation에 대해 간략한 이해를 통해 최적화된 성능을 위한 기본 지침을 제공합니다.


참조 링크

[튜토리얼/한글화] HTML에서 Custom Element를 통한 새로운 엘리먼트 정의하기(Custom Elements defining new elements in HTML)

HTML5Rocks의 'HTML에서 커스텀 엘리먼트를 이용한 새 엘리먼트를 정의하기(Custom Elements defining new elements in HTML)' 튜토리얼의 한국어 번역이 업데이트되었습니다.

Custom Element는 웹 컴포넌트를 지탱하는 4가지 규격 중의 하나입니다. Shadow DOM이 컴포넌트의 DOM, CSS, JS 등을 감추는 역할(encapsulation)을 하고, HTML Template가 DOM의 복제 및 재사용성을 제공하고, HTML Imports가 웹 문서 내에 외부 HTML 문서 리소스를 포함(Import)하기 위한 기능을 제공한다면 Custom Element는 웹 문서에서 사용할 엘리먼트를 모듈에서 직접 등록할 수 있도록 하는 기능을 제공하여 컴포넌트의 명시적인 alias를 선언하는 역할을 합니다.

이번 번역은 '신현진'님께서 진행하셨습니다. html5rocks.com 관련한 contribution 가이드도 번역을 해놓으셨네요. 관심있으신 분들은 방문해보시기 바랍니다. :)



TL;DR;


웹은 문서의 구조적인 형식을 가지고 있지만 HTML 엘리먼트가 미리 정의된 엘리먼트에 대해서만 사용 가능하다는 문제로 현재에도 웹앱을 구축하는데 있어서는 많은 이슈를 안고 있습니다. <div>가 끝도 없이 중첩되어 나타나는 <div> Soup가 대표적인 예입니다.

Custom Element는 HTML의 엘리먼트를 사용자가 문서에서 확장하여 사용할 수 있도록 기능을 제공하고 있으며 Web Components에서 가장 중요한 기본 API입니다. Web Components는 다음과 Custom Element에 의한 확장이 반드시 필요합니다.

이 글에서는 아래 내용에 대한 개념 설명과 구현 예제를 설명하고 있습니다.

  1. 새로운 HTML/DOM 엘리먼트 정의
  2. 다른 엘리먼트로부터 엘리먼트 확장
  3. 태그에 대한 사용자 기능의 확장
  4. 기존 DOM 엘리먼트 API 확장

참고 글


2013년 11월 7일 목요일

[튜토리얼/한글화] 고성능 애니메이션(High Performance Animations)

+Paul Lewis+Paul Irish 의 '고성능 애니메이션(High Performance Animations)' 튜토리얼이 등록되었습니다. 지난번 바캠프 요약에서 이에 대해 언급해드린 적이 있는데 브라우저의 GPU 가속과 연관된 HTML5 애니메이션의 성능 최적화에 관심있으신 분들은 반드시 읽어보시기를 권해드립니다.

"추가로 단지 애니메이션에만 해당하는 부분은 아닙니다. GPU와 관련된 웹 페이지의 렌더링 패스에 대한 이해는 프론트엔드에서 반응성 있는 웹페이지를 구현하는데 중요한 축입니다. +Paul Lewis 는 WebGL 기반의 3D 엔진인 three.js의 개발자로 렌더링 성능과 관련된 유용한 튜토리얼을 이미 올린바 있습니다. 이에 대한 부분은 참고 링크들에서 찾아보시기 바랍니다."

TL;DR;


CSS3 Animation과 Transition을 구현할 때 어떠한 속성이 하드웨어 가속이 가능한지 그리고 크롬 개발자 도구 '프레임(Frame)' 모드에서 볼수 있는 렌더링의 과정에 대해 각 엘리먼트가 어떻게 레이어로 변환되어 픽셀화(Rasterization) 과정이 이루어지는지에 대한 개괄적으로 설명합니다.

left, top을 이용한 위치 이동(좌)과 transform: translate()를 이용한 위치 이동(우)의 비교

본문에서 강조하는 고성능 애니메이션을 위한 CSS 속성 4가지는 다음과 같습니다.

  • 위치 이동
    • transform: translate()
  • 확대/축소
    • transform: scale()
  • 회전
    • transform: rotate()
  • 투명도
    • opacity: 0 ~ 1

참조 링크



p.s. 프로젝트로 번역이 많이 밀려있는데 차주에 예정된 3종에 대한 번역 커밋을 진행할 예정입니다. :)

2013년 11월 4일 월요일

[업데이트] 프론트엔드 개발 자동화(The Landscape Of Front-end Development Automation by Addy Osmani)

Addy Osmani가 FOWA에서 발표한 슬라이드를 블로그에 올렸네요. 결론을 얘기하자면 도구를 잘 선택해서 프론트엔드를 개발하자는 내용이고, 그 중에서도 Yeoman, Grunt, Bower에 대한 설명과 이들외의 다양한 개발 도구를 소개하고 그에 의한 효율성에 대해서 설명합니다. 아래에 블로그에 올라온 글만 번역해서 올립니다.

참조 링크


이전에 올라온 '[튜토리얼/한글화] 불필요한 페인팅 회피하기 : Animated GIF 에디션 외 3종'의 'Yeoman과 Polymer를 이용한 웹 앱 개발'에서도 이에 대한 내용이 나오니 참고하셔도 좋을 듯 합니다. :)




The Landscape Of Front-end Development Automation by Addy Osmani


요즘 모던 웹앱을 작성하는 것은 종종 지루한 프로세스처럼 느껴질 때가 있습니다. 프레임워크, 보일러플레이트, 추상화, 의존성 관리, 빌드 프로세스...프론트엔드 워크플로우의 요구 리스트는 매년 커져가는 것처럼 보인다. 그러나 이 많은 것을 자동화한다면 어떨까요?

FOWA(Future of Web Apps) 키노트 슬라이드에서 프론트엔드 생산성을 유지하는 도구들을 넓은 관점에서 다뤄봤습니다. 어떻게 도구를 통해 빠르고 실시간 피드백을 얻고 버그를 피할 수 있는지와 개발자 워크플로우에 기능적으로 포함할 수 있는지 알아봅시다.



몇가지 핵심 포인트


  • 워크플로우 자동화를 위한 데스크톱 도구는 단순한 프로젝트들의 시간을 절약합니다.
  • 커맨드라인 자동화 도구들은 보다 유연성이 필요한 복잡한 프로젝트들에서 더 좋습니다.
  • 생산성을 최대화하기 위해 개발 시 실시간 피드백을 주는 편집기를 사용하세요.
  • 크롬 Canary의 개발자도구의 새로운 저작 기능은 브라우저에서 쾌적한 편집 기능을 제공합니다.
  • Alfred 같은 생산성 도구를 통해 여러분의 시스템 워크플로우를 강화하세요.
  • 보다 나은 모바일 워크플로우를 위해 크로스 디바이스 테스트, 네트워크 병목 파악, 시각적 회귀 테스트를 사용하세요.

사용할 도구의 선택


프론트엔드 도구화는 지난 몇년간 먼 길을 걸어왔습니다. 즉, 더 이상의 복잡함을 고려하지 않아도 오늘 날의 웹 개발이 훌륭하다는 뜻입니다. 생산성을 유지하기 위한 핵심은 실제로 사용할 도구를 선택하는 것입니다. 개인의 워크플로우를 분석하는데 시간을 들이고 보다 효율적으로 여러분을 도와줄 수 있는 이러한 도구를 선택하세요.



[튜토리얼/한글화] WebRTC의 실제: STUN, TURN, 시그널링(WebRTC in the real world: STUN, TURN and signaling)

HTML5Rocks에 WebRTC의 전반적인 구조와 방식에 대해 설명하는 "WebRTC in the real world: STUN, TURN and signaling"가 업데이트되었습니다. WebRTC에 대해 공부를 시작하신 분들이나 개념을 잡으려 하시는 분들이 보시면 도움이 될 듯 합니다.


TL;DR;


WebRTC는 P2P 통신을 가능하게 하지만 구축에는 서버가 필요합니다. 클라이언트 간 데이터 교환을 위해 '시그널링(Signaling)'이라고 부르는 통신 설정의 수행 과정이 필요하며 이 과정을 통해 네트워크 주소 변환(NAT) 및 방화벽에 대응하게 됩니다.

이 글은 시그널링(Signaling) 서비스를 어떻게 구축하는지와 STUN 및 TURN 서버를 사용하여 실제 커넥션 상의 문제점을 처리하는지. 그리고 WebRTC 어플리케이션이 어떻게 다자간 통신을 처리하는지와 VoIP 및 PSTN(일반 전화망)과 같은 서비스와 상호 작용하지에 대해 설명합니다.

이 글에서 설명하는 내용들


  • 시그널링
    • 시그널링(Signaling)이란 무엇인가
    • 시그널링이 왜 WebRTC에서 정의되지 않았는가
    • 실제 연결을 위해 RTCPeerConnection을 사용하는 방법
    • 구현 및 Peer의 탐색 방법
  • 시그널링 서비스의 구축 방법
    • 서버에서 클라이언트로의 메세지 푸시
    • 시그널링 확장 방법
    • Node.js에서 Socket.io를 이용한 시그널링 서비스의 구축
    • 시그널링을 위한 RTCDataChannel의 사용
    • 기존 시그널링 서버들
    • 시그널링에서의 보안 
  • NAT와 방화벽을 대응하기 위한 STUN과 TURN 서버에 대한 설명
    • STUN - 외부에서 내부망에 대한 접근을 위한 방법을 제공
    • TURN - UDP를 우선으로 Peer 간의 직접적인 통신을 설정하고 이를 사용할 수 없을 경우 TCP/IP를 기반으로 종단 간의 데이터를 릴레이하는 방법을 제공
  • 기타 사항
    • 다자간 WebRTC
    • VoIP, 전화, 메시징의 활용 방법

참조 링크