-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path2017Jan.html
More file actions
executable file
·461 lines (456 loc) · 38.5 KB
/
2017Jan.html
File metadata and controls
executable file
·461 lines (456 loc) · 38.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen">
div { font-family: "Malgun Gothic", Gulim, Arial; font-size: 10pt; }
p, a { font-family: "Malgun Gothic", Gulim, Arial; }
h1 { padding: 0px; margin: 0px; }
h2 { color: #5b6770; font-weight: bold; padding: 0px; margin: 0px; }
.sectiontitle { background-color: #a50034; }
.section { border: 3px double #a50034; }
a.keyword {border-bottom: 1px dashed #3572b0 }
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
margin: 0px;
}
.summary {
padding: 10px;
margin: 0px;
font-size: 11pt;
}
.detail {
padding: 10px;
margin: 0px;
font-size: 11pt;
}
a.showLink, a.hideLink {
text-decoration: none;
}
</style>
</head>
<body bgcolor="#ffffff" style="font-family: 'Malgun Gothic', Gulim, Arial;">
<table width="680" cellpadding="10" cellspacing="0" bgcolor="#ffffff" style="border:0px solid #EEEFF4;">
<!-- TITLE -->
<div><a name="top"></a></div>
<tr><td colspan="3" style="font-family: 'Malgun Gothic', Gulim, Arial; font-size: 10pt;" align="center">
<img src="https://raw.githubusercontent.com/lgewst/images/master/issue6_title.png" width="675"></img>
</td></tr>
<!-- NOTICE -->
<tr>
<td colspan="3" style="font-family: 'Malgun Gothic', Gulim, Arial; font-size: 10pt;" align="center">
<table style="width: 670px; border: 1px solid #a50034; text-align: left; " >
<tr>
<td><div>본 뉴스레터는 W3C 기술 동향 및 최신 웹 기술 소식에 대한 글을 직접 작성하여 사내 임직원을 대상으로 격월마다 발송됩니다. 웹 기술에 대해 보다 명확히 이해하고 활용하는 데에 참고해 주시고, W3C 관련 문의 사항이 있는 경우 <a href="mailto:webtech@lge.com?subject=Opinions" style="color:#a50034; font-weight: bold">webtech@lge.com</a>으로 보내주세요. 과월호는 <a href="http://collab.lge.com/main/display/WEBNEWS/The+Web+Newsletter" style="color:#a50034; font-weight: bold">The Web Newsletter Collab</a>에서 열람하실 수 있습니다. 뉴스레터 구독 신청/해지는 하단 링크를 이용해주세요. </div></td>
</tr>
</table>
</td>
</tr>
<!-- 기획 기사 1 -->
<tr>
<td colspan="3" align="center">
<table class="section" width="680" height="40" cellspacing="0">
<tr>
<td class="sectiontitle" height="40" >
<table cellpadding="0" cellspacing="0" border="0">
<td width="10"></td>
<td height="1" width="670">
<h1 style="font-family: 'Malgun Gothic', Gulim, Arial; font-size: 14pt; color: #ffffff;">웹 뉴스레터 / W3C 표준화 기구 소개</h1>
</td>
<td></td>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="5" cellspacing="0" height="10" border="0">
<td width="10"></td>
<td width="650">
<center><img src="https://raw.githubusercontent.com/lgewst/images/master/w3c.jpg" style="margin-top: 5px; margin-bottom: 5px;"></img></center>
</td>
<td width="10"></td>
</table>
</td>
</tr>
<tr>
<td>
<table width="680" border="0" >
<td width="15"></td>
<td width="650">
<p>웹 뉴스레터는 W3C 표준 활동을 통해 접하게 되는 최신 웹 기술을 사내에 전파하기 위해 만들어 졌습니다. 지난 2016년 3월에 <a class="keyword" href="http://collab.lge.com/main/pages/viewpage.action?pageId=502599866">1호</a>가 발간되었고 격월로 <a class="keyword" href="http://collab.lge.com/main/pages/viewpage.action?pageId=569694157">5호</a>까지 발간된 바 있습니다. 그리고 2017년으로 넘어오면서 주 내용을 W3C 표준 기술에서 전반적인 웹 기술 동향으로 전환하고자 합니다. 더불어 수신 대상도 SW 센터에서 관련 연구소 및 사업부로 확대하였습니다. <a class="keyword" href="http://collab.lge.com/main/display/WEBNEWS">웹 뉴스레터 Collab</a>을 통해 지난 호 내용 열람이 가능하니 최신 웹 기술 동향 파악에 참고가 되셨으면 좋겠습니다.</p>
<p><a class="keyword" href="https://www.w3.org">W3C</a>는 World Wide Web Consortium의 약자로 HTML, CSS 등의 웹 기술 표준을 정의하고 브라우저간 호환성 확보 지원 등의 역할을 담당하고 있습니다. 또한 Chromium, WebKit 등 주요 브라우저 및 웹 엔진 오픈소스와도 긴밀하게 연계하면서 웹 기술 발전에 이바지 하고 있습니다. 자사에서는 2010년에 W3C에 가입하여 다양한 표준 활동을 전개해 왔습니다. 특히 <a class="keyword" href="https://www.w3.org/2011/webtv/3dweb/3dweb_proposal_121130.html">Stereoscopic 3D Web</a>, <a class="keyword" href="https://www.w3.org/TR/css-round-display-1/">CSS Round Display</a> 기술 등에서 표준화 그룹 의장 및 스펙 에디터를 맡아 주도적인 활동을 통해 표준 리더십을 확보하기도 하였습니다. 또한 자사 제품/플랫폼 및 타 표준화 기구 내 W3C 관련 이슈 대응도 지원하고 있습니다.</p>
<p>최근 웹 기술은 다양한 변화에 직면하고 있습니다. 특히 웹 기반 플랫폼 경쟁력 강화를 위해, W3C는 Service Worker, Push Notification, Web Payments와 같은 기술 표준을 정의하였습니다. 또한 다양한 산업에서 웹 기술에 대한 수요가 끊이지 않게 됨에 따라, <a class="keyword" href="https://www.w3.org/community/websignage/">Web-based Signage</a>, <a class="keyword" href="https://www.w3.org/auto/">Web Automotive</a>, <a class="keyword" href="https://www.w3.org/community/webvr/">WebVR</a>, <a class="keyword" href="https://www.w3.org/WoT/">Web of Things</a>, <a class="keyword" href="https://www.w3.org/2016/tvcontrol/">TV Control API</a>와 같은 표준 그룹도 활발하게 운영되고 있습니다. 이러한 흐름의 대표적인 사례로, E-book의 국제 표준을 관장하는 IDPF 표준화 기구가 최근 W3C에 흡수 합병되는 <a class="keyword" href="http://idpf.org/news/idpf-members-approve-plan-to-combine-with-w3c">사건</a>이 있습니다 (2016.11).</p>
<p>그 외에 웹 기술의 핵심이 되는 언어인 JavaScript도 계속해서 그 저변을 넓혀가는 가운데 새로운 사양이 계속해서 개발되고 있으며, 관련 Framework도 쉼없이 쏟아져 나오면서 웹 기술 패러다임 변화를 주도하고 있습니다. 이러한 웹 기술의 최신 동향을 공유하고 관련 사내 부서에서 겪고 있는 고충사항, 유용한 정보, Best Practice 등을 공유하는 창구로서 웹 뉴스레터가 활용되었으면 합니다. <a class="keyword" href="http://collab.lge.com/main/display/WEBNEWS">웹 뉴스레터 Collab</a>에서 위에 언급한 각 표준 그룹 및 최신 웹 기술에 대해 상세하게 분석 정리한 내용 확인이 가능합니다. 그 밖에도 궁금한 사항 및 제보할 내용이 있으신 경우 <a class="keyword" href="mailto:webtech@lge.com">webtech@lge.com</a>으로 연락 부탁 드립니다.</p>
</td>
<td width="15"></td>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- 기획 기사 2 -->
<tr>
<td colspan="3" align="center">
<table class="section" width="680" height="40" cellspacing="0">
<tr>
<td class="sectiontitle" height="40" >
<table cellpadding="0" cellspacing="0" border="0">
<td width="10"></td>
<td height="1" width="670">
<h1 style="font-family: 'Malgun Gothic', Gulim, Arial; font-size: 14pt; color: #ffffff;">웹 브라우저에서 웹 플랫폼으로</h1>
</td>
<td></td>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="5" cellspacing="0" height="10" border="0">
<td width="10"></td>
<td width="650">
<center><img src="https://raw.githubusercontent.com/lgewst/images/master/browser.jpg" style="margin-top: 5px; margin-bottom: 5px;"></img></center>
</td>
<td width="10"></td>
</table>
</td>
</tr>
<tr>
<td>
<table width="680" border="0" >
<td width="15"></td>
<td width="650">
<p>웹 기술은 PC 브라우저를 통해 90년대 초 이후 널리 확산되었습니다. 정보 검색, 미디어 재생, 은행 업무 등이 모두 브라우저 위에서 서비스 되었고, 요즈음은 문서 편집이나 영상 통화와 같은 기능까지 순수 웹 기술만으로 이용할 수 있게 되었습니다. 세계는 이러한 웹 기술로 인해 긴밀하게 연결될 수 있었으며, 그로 인한 파급 효과는 정말 엄청났던 것이 사실입니다. 스마트폰의 등장과 함께 잠시 그 자리를 Android, iOS 앱에게 내주기도 하였으나, 향후 모바일 너머의 디바이스들에서는 웹이 다시 중요한 역할을 맡게 될 것이라고 전망되고 있습니다.</p>
<p>웹 기술의 발전을 주도한 곳은 브라우저를 만드는 회사였습니다 (클라이언트 기술에 한정). MS, 구글, 애플, 모질라, 오페라가 대표적인 브라우저를 만드는 곳입니다. 이들은 각기 다른 목적과 사업영역을 토대로 브라우저와 표준 웹 기술을 발전시켜 나갔습니다. PC, 모바일, 임베디드 등의 환경에서 브라우저를 만들던 그들은, 이제 TV, Signage, Automotive, IoT와 같은 산업에까지 그 영향력을 확대해 가고 있습니다. Android와 iOS가 가진 플랫폼 생태계에 종속되지 않기 위한 방안 및 대안으로 웹이 이야기 되고 있으며, 브라우저 벤더들은 이를 새로운 기회로 여기며 <a class="keyword" href="https://www.opera.com/ko/opera-tv/">Opera TV</a>, <a class="keyword" href="https://www.mozilla.org/ko/firefox/os/devices/tv/">Firefox TV</a>와 같은 제품들을 출시하고 있습니다. 삼성의 Tizen과 LG의 webOS도 이러한 배경에서 웹 기술을 전면에 내세우고 있습니다.</p>
<p>웹은 URL 기반의 친숙한 UX, 방대한 개발자 커뮤니티, 매시업 용이성 등의 장점을 가지고 있습니다. 그리고 항시 서버와의 인터랙션을 수행하는 구조로 인한 클라우드 친화적 환경을 제공합니다. 무엇보다 전 세계적으로 구축되어 있는 방대한 컨텐츠와 더불어 단말과 플랫폼을 가리지 않고 대부분의 기기에서 웹 앱을 실행시킬 수 있는 인프라를 생각해 보면, 앞으로의 웹의 잠재력은 무궁무진하다고 할 수 있습니다. 물론 그 이면에는 성능 제약, 오프라인 실행 불가, 디바이스 API 접근성 등의 한계점도 있지만, 최근 <a class="keyword" href="https://www.w3.org/">W3C</a> 표준화 기구와 <a class="keyword" href="https://www.chromium.org/Home">Chromium</a>과 같은 오픈소스 진영에서의 여러 노력을 통해 많은 개선이 이루어 지고 있습니다. LG webOS 플랫폼도 이러한 웹의 특징을 제대로 이해하여 단점을 보완하고 장점을 극대화 하는 접근을 통해 보다 경쟁력 있는 플랫폼으로 발돋움 할 수 있기를 바라봅니다.</p>
</td>
<td width="15"></td>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- 기획 기사 3 -->
<tr>
<td colspan="3" align="center">
<table class="section" width="680" height="40" cellpadding="0" cellspacing="0">
<tr>
<td class="sectiontitle" height="40" >
<table cellpadding="0" cellspacing="0" border="0">
<td width="10"></td>
<td height="1" width="670">
<h1 style="font-family: 'Malgun Gothic', Gulim, Arial; font-size: 14pt; color: #ffffff;">웹 이벤트 이해하기</h1>
</td>
<td></td>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="5" cellspacing="0" height="10" border="0">
<td width="10"></td>
<td width="650">
<center><img src="https://raw.githubusercontent.com/lgewst/images/master/event-title.png" width="650" style="margin-top: 5px; margin-bottom: 5px;"></img></center>
</td>
<td width="10"></td>
</table>
</td>
</tr>
<tr>
<td>
<table width="680" border="0" >
<td width="15"></td>
<td width="650">
<p>브라우저에서는 다양한 형태의 이벤트가 발생합니다. 마우스 및 키보드를 통한 사용자 입력 이벤트, 네트워크를 통해 전달된 정보 수신을 위한 이벤트, 하드웨어로부터 전달 받는 데이터 업데이트에 따른 이벤트 등 그 종류는 굉장히 다양합니다. 앞으로 웹 페이지에서 가능한 일들이 많아짐에 따라 웹에서 처리하는 <a class="keyword" href="https://developer.mozilla.org/en-US/docs/Web/Events">이벤트의 종류</a>는 더욱 많아질 전망입니다.</p>
<p>이벤트가 발생하면 이를 적절히 처리할 수 있는 코드를 작성해야 합니다. 이벤트 리스너(Event Listener)가 그러한 역할을 담당하게 되는데, 이벤트가 발생한 웹 요소(divElement)에 이벤트 리스너를 붙이는 방법은 아래와 같이 세 가지가 있습니다.</p>
<p>
1. HTML 요소의 속성에 설정 (DOM2)<br/>
<img src="https://raw.githubusercontent.com/lgewst/images/master/event_img2.png" style="margin-top: 5px; margin-bottom: 5px;"></img><br/>
2. DOM 요소의 프로퍼티에 설정 (DOM2)<br/>
<img src="https://raw.githubusercontent.com/lgewst/images/master/event_img3.png" style="margin-top: 5px; margin-bottom: 5px;"></img><br/>
3. DOM 요소에 addEventListner()를 설정 (DOM3)<br/>
<img src="https://raw.githubusercontent.com/lgewst/images/master/event_img4.png" style="margin-top: 5px; margin-bottom: 5px;"></img><br/>
</p>
<p>특정 HTML 요소의 속성과 DOM 요소의 프로퍼티에 이벤트 핸들러 함수를 지정하는 경우, DOM2 표준에서는 이벤트 타입 앞에 'on'을 붙인 키워드를 활용하도록 정의되어 있습니다. on을 붙일 수 있는 이벤트 타입의 종류는 <a class="keyword" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers-on-elements,-document-objects,-and-window-objects">링크</a>에서 확인 가능합니다. 하지만 요즘에는 이러한 방법은 잘 쓰이지 않습니다. 그 대신에 DOM3 표준에서 정의된 <a class="keyword" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a> 방식을 사용하여 이벤트 핸들러를 작성합니다. 해당 방식의 장점은, 하나의 이벤트 타입에 여러 이벤트 핸들러를 연결할 수 있고 옵션을 통해 이벤트 처리 시점이나 방식을 조정할 수 있습니다. 이러한 이벤트 리스너에 명시하는 파라미터는 (1) event-name(이벤트 타입), (2) callback(핸들러 함수), (3) option(동작 방식 설정을 위한 옵션) - 세 가지가 있습니다.
<center><img src="https://raw.githubusercontent.com/lgewst/images/master/event_img1.png" width="600" style="margin-top: 5px; margin-bottom: 5px;"></img></center>
option에 명시할 수 있는 항목 역시 세 가지가 있는데, (1) capture(핸들러 함수가 실행되는 시점), (2) once(이벤트 리스너의 일회성 호출), (3) passive(이벤트의 default 동작과 비동기적으로 실행) 입니다.</p>
<p>이번에는 이벤트가 발생하는 웹 요소에 이벤트가 전달되는 과정에 대해 살펴보고자 합니다. 이를 다른 말로 이벤트 전파(Event Propagation)라고도 합니다. 예를 들어, 웹 페이지가 아래와 같이 구성되어 있다고 생각해봅니다.
<center><img src="https://raw.githubusercontent.com/lgewst/images/master/event-flow.png" width="650" style="margin-top: 5px; margin-bottom: 5px;"></img></center>
<p>이 때 웹 페이지에서 p요소를 클릭하게 되면, 해당 클릭 이벤트는 웹 페이지 최상위인 window 요소에서부터 DOM 트리를 따라 내려가며 타겟인 p 요소까지 전파가 되고 다시 window 요소로 올라가며 전파된 후에 사라집니다. 여기서 클릭한 p요소는 이벤트가 발생한 요소, 즉 "이벤트 타겟(Target)"이라고 합니다. 이러한 이벤트 흐름은 크게 두 단계로 구분해 볼 수 있는데, 첫째는 window 객체에서 시작해 DOM 트리를 따라 아래로 이벤트가 전파되는 "이벤트 캡처링(Capturing)" 단계이고, 둘째는 DOM 트리의 가장 깊은 곳에 있는 요소에서 다시 DOM 트리를 따라 위로 올라가면서 이벤트가 전파되는 "이벤트 버블링(bubbling)" 단계입니다. 또한 캡처링/버블링 단계를 통해 이벤트가 전파되는 과정에서 중간에 위치한 요소의 이벤트 핸들러 함수에 <a class="keyword" href="https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation">stopPropagation()</a>이 명시되면, 그 시점에서 이벤트 전파는 중단됩니다.</p>
<p>웹에서 이벤트 처리를 어떻게 하는지는 페이지 전체 성능이나 UX에 영향을 미칩니다. touch 이벤트의 예시를 통해 설명해 보겠습니다. <a class="keyword" href="https://www.w3.org/TR/touch-events/#the-touchmove-event">touch move</a> 이벤트는 default 동작으로 scroll을 발생시킵니다. 이 때 이벤트의 default 동작이 수행되지 않게 하는 <a class="keyword" href="https://www.w3.org/TR/touch-events/#dfn-preventdefault">preventDefault()</a> 함수를 touch move 이벤트 핸들러 함수 내에서 사용하면, scroll 동작은 발생하지 않게 됩니다. 일반적으로 모바일 브라우저에서 발생하는 scroll의 경우 브라우저 내부적으로 touch move 이벤트 받아서 동작하게 되는데, 이 때 touch move에 대한 이벤트 핸들러 함수가 있는 경우 해당 이벤트 핸들러 함수 내 코드가 다 실행된 이후에 default 동작인 scroll 동작을 실행하게 됩니다. 이에 핸들러 함수의 내용이 길거나 연산량이 많다면, scroll 동작의 성능이 저하됩니다.</p>
<p>이 때 이벤트 리스너의 파라미터인 option에 <a class="keyword" href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md">passive</a>값을 true로 명시하면, 브라우저에서는 이벤트 리스너나 preventDefault() 함수 유무에 관계없이 바로 scroll 동작을 비동기적으로 수행하기 때문에 성능 저하가 발생하지 않게 됩니다. 이처럼 이벤트의 흐름에 대해 바로 이해하고 상황에 따라 적절한 옵션을 명시한다면, UX와 성능 모두 훌륭한 웹 페이지를 만들어 낼 수 있습니다. 이벤트에 대한 <a class="keyword" href="http://10.177.221.47/project/webevent-demos/">데모 페이지</a>를 보시면 설명한 내용을 이해하는 데에 도움이 될 것입니다.</p>
</td>
<td width="15"></td>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- 기획 기사 4 -->
<tr>
<td colspan="3" align="center">
<table class="section" width="680" height="40" cellpadding="0" cellspacing="0">
<tr>
<td class="sectiontitle" height="40" >
<table cellpadding="0" cellspacing="0" border="0">
<td width="10"></td>
<td height="1" width="670">
<h1 style="font-family: 'Malgun Gothic', Gulim, Arial; font-size: 14pt; color: #ffffff;">웹 교육 과정 소개</h1>
</td>
<td></td>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="5" cellspacing="0" height="10" border="0">
<td width="10"></td>
<td width="650">
<center><img src="https://raw.githubusercontent.com/lgewst/images/master/sw-web-course.png" width="650" style="margin-top: 5px; margin-bottom: 5px;"></img></center>
</td>
<td width="10"></td>
</table>
</td>
</tr>
<tr>
<td>
<table width="680" border="0" >
<td width="15"></td>
<td width="650">
<p>일반적으로 웹 기술 학습에 대한 수요는 상당히 높은 편입니다. 이는 학습을 위한 진입 장벽이 상대적으로 높지 않으면서도 모든 플랫폼에서 웹을 지원하기에 활용도가 높기 때문입니다. 업무에 직간접적으로 쓰일 뿐만 아니라 개인 용도를 위한 블로그나 카페 운영 또는 홈페이지 역시 웹 기술을 통해 개발합니다. 이에 사내 외에서 접할 수 있는 웹 기술에 대한 학습 방법을 정리해 보았습니다.</p>
<p><b>1. 사내 교육 과정 - LG SW College 2017</b></p>
<p>
<a class="keyword" href="http://collab.lge.com/main/pages/viewpage.action?pageId=75369739">LG SW College 2017 교육 과정</a>에 대한 공지가 게시판과 메일을 통해 안내 되었으며 1월 23일부터 수강 신청이 시작되었습니다. 올해부터 <a class="keyword" href="http://collab.lge.com/main/display/SWC/%5B3%5D+Web">웹 분야 과정</a>의 경우 기초 과정은 MOOC 온라인 과정을 통해서만 진행이 됩니다. <a class="keyword" href="http://collab.lge.com/main/display/SWC/2.+LG+Software+MOOC">MOOC 과정</a>이란, 수강 시간으로 학습을 평가하는 것이 아니라 강의 내용을 제대로 이해하고 있는지 평가하며 온라인에서도 양질의 교육을 제공하자는 취지로 시작되었습니다. 이를 위해 현업 연구원들이 직접 퀴즈 문제를 출제 및 채점하며, 프로젝트 과제 진행 안내 및 Q&A까지 대응하고 있습니다. 한편, 웹에 대한 기본적인 이해가 있으신 분들은 오프라인 과정을 통해 더 깊이 있는 웹 기술에 대해 학습할 수 있습니다. 그 중 두 가지 과정에 대해 아래와 같이 소개 드립니다.</p>
<p>(1) <a class="keyword" href="http://collab.lge.com/main/pages/viewpage.action?pageId=457586446">객체 지향 JavaScript</a><br/>JavaScript의 중급 기능(클로저, 바인딩 등), 최신 표준인 ES6, 그리고 객체 지향적인 개발 방법에 대한 내용을 다룹니다. 또한 개발자 도구, 프로파일러 사용법과 함께 실제 웹 개발에 대한 여러 노하우들을 얻을 수 있습니다. JavaScript를 통해 개발을 해본 경험이 약간만 있으면 수업을 따라오는 것에는 문제가 없습니다.</p>
<p>(2) <a class="keyword" href="http://collab.lge.com/main/pages/viewpage.action?pageId=457586480">AJAX 기반 Web Programming</a><br/>JavaScript의 다양한 내장 객체 활용법과 이벤트 처리 기법, 그리고 AJAX를 활용한 비동기 통신 기법에 대한 내용을 다룹니다. 이를 통해 웹 페이지를 동적으로 구성할 수 있으며 데이터를 효과적으로 처리할 수 있는 여러 기법을 습득할 수 있습니다.</p>
<p><b>2. 사외 교육 과정 - 온라인 학습 사이트</b></p>
<p>
사내 교육 과정으로 배움의 목마름이 해소되지 않는 분들을 위한 훌륭한 사외 온라인 학습 사이트들이 있습니다. 그 중에 Udemy, Udacity는 사내 MOOC 과정과 비슷하게 구성된 온라인 강의를 제공하고 있습니다. <a class="keyword" href="https://www.udemy.com/courses/development/web-development/">Udemy</a>의 경우 강의 내용이 웹 기술뿐만 아니라 인문학에 이르기까지 아주 다양하며 한국어 강의도 제공해줍니다. 하지만 넓은 분야를 다루고 있는 만큼 웹 기술 관련된 강의의 종류는 많지 않으며 모두 유료라는 단점이 있습니다. <a class="keyword" href="http://www.udacity.com/">Udacity</a>는 개발자를 위한 강의를 전문적으로 제공하고 있으며 웹 개발 분야는 기초적인 내용부터 심화된 내용까지 퀄리티 높은 다양한 과정이 무료로도 제공되고 있습니다. 특히 구글 개발자들이 대거 참여하여 강의를 개발하였기에 웹 기술에 대한 전문성과 최신성을 두루 갖추는 데에 도움이 됩니다. 그 중에 두 가지 과정들을 추천 드리니 도전해보세요!</p>
<p>(1) <a class="keyword" href="https://www.udacity.com/course/responsive-web-design-fundamentals--ud893">Responsive Web Design Fundamentals 과정</a><br/>다수의 디바이스 각각에 적절한 화면을 보여주기 위한 반응형 웹에 대해 학습합니다. 이를 위해 뷰포트 태그 및 CSS 미디어 쿼리를 사용하여 반응형 레이아웃을 만드는 방법에 대해 배울 수 있으며, 다양한 조건의 디바이스에서 어떻게 화면이 보이는지를 확인하기 위한 원격 디버깅, 에뮬레이터 활용 방법도 습득할 수 있습니다.</p>
<p>(2) <a class="keyword" href="https://www.udacity.com/course/website-performance-optimization--ud884">Website Performance Optimization 과정</a><br/>화면에 웹 페이지를 보여주는 과정에서 브라우저가 어떤 것들을 하는지를 학습합니다. 그 과정에서 웹 앱의 성능을 프로파일하고 코드를 최적화하는 방법을 배워서 보다 빠르게 동작하는 서비스를 제공할 수 있게 됩니다.</p>
<p><b>3. 온라인 튜토리얼 및 에디터</b></p>
<p>온라인 강의 사이트 외에도, <a class="keyword" href="http://www.w3schools.com/">w3schools</a>이나 <a class="keyword" href="https://developer.mozilla.org/ko/docs/Web">MDN</a> 사이트를 통해 웹 기술에 대한 튜토리얼과 간단한 예제들을 바로 확인해 볼 수 있어서 웹 기술에 입문하는 분들에게 매우 유익합니다. 또한 웹 기술을 학습하고자 할 때, <a class="keyword" href="https://jsfiddle.net/">JSFiddle</a>, <a class="keyword" href="https://codepen.io/">Codepen</a>, <a class="keyword" href="https://thimble.mozilla.org/">Thimble</a>과 같은 온라인 에디터를 사용해보세요. 온라인 에디터는 브라우저 상에서 HTML, CSS 코드를 작성하고 그 결과를 바로 확인할 수 있으며, 개발에 도움이 되는 다양한 기능을 제공하기에 초심자가 학습할 때 좋은 가이드를 제공 받을 수 있습니다.</p>
</td>
<td width="15"></td>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- 웹 기술 동향 -->
<tr>
<td colspan="3" align="center">
<table class="section" width="680" height="40" cellpadding="0" cellspacing="0">
<tr>
<td class="sectiontitle" height="40" >
<table cellpadding="0" cellspacing="0" border="0">
<td width="10"></td>
<td height="1" width="670">
<h1 style="font-family: 'Malgun Gothic', Gulim, Arial; font-size: 14pt; color: #ffffff;">웹 기술 동향</h1>
</td>
<td></td>
</table>
</td>
</tr>
<tr>
<td height="40">
<table width="680" border="0" >
<td width="10"></td>
<td width="670">
<h2 style="margin-bottom: -18px;"><a style="font-size:12pt; font-weight: bold;" target="_blank" href="http://www.zdnet.co.kr/news/news_view.asp?artice_id=20161207142405">네이버가 던진 4차 산업혁명 시대의 웹 역할론 (2016.12.07)</a></h2>
</td>
</table>
</td>
</tr>
<tr>
<td height="30">
<table width="680" border="0" >
<td width="20"></td>
<td width="640">
<p style="font-size:10pt;">네이버는 웹 기반 검색 광고 및 관련 서비스를 기반으로 성장해 왔습니다. 그리고 4차 산업 혁명의 주요 키워드인 AI, IoT, VR/AR 등이 웹 기반에서 잘 융화되어, 그들의 수익 모델을 계속해서 확장해 나가길 바라고 있습니다. 이를 위해 지식백과, 지식쇼핑, 번역 등 다양한 서비스에서 직간접적으로 AI 기술을 활용하고 있습니다. 하지만 웹 기술은 현재 이를 보여주는 창구 역할에 그치고 있다고 지적하면서, 산업 변화에 비해 웹의 변화가 너무 느리다는 분석 결과를 제시합니다. 웹에서의 AI 기술 중 하나인 시맨틱 웹이 산업에서 잘 활용되고 있지 않는 상황에서, 웹의 역할론에 대해 생각해 볼만한 여러 시사점들을 이야기 합니다.</p>
</td>
<td width="20"></td>
</table>
</td>
</tr>
<tr>
<td height="40">
<table width="680" border="0" >
<td width="10"></td>
<td width="670">
<h2 style="margin-bottom: -18px;"><a style="font-size:12pt; font-weight: bold;" target="_blank" href="http://neurogadget.net/2016/12/07/adobe-flash-player-smart-tv-vr-devices/48558">모바일 기기 뿐만 아니라 스마트 TV에서도 Flash 퇴출은 시간 문제 (2016.12.07)</a></h2>
</td>
</table>
</td>
</tr>
<tr>
<td height="30">
<table width="680" border="0" >
<td width="20"></td>
<td width="640">
<p style="font-size:10pt;">Adobe Flash는 동영상, 애니메이션 등의 미디어 플레이어 역할을 하는 브라우저 플러그인으로, PC, 스마트폰, 스마트 TV 등에서 널리 활용되어 왔습니다. 하지만 Adobe는 최근 모바일과 스마트 TV에서의 Flash 업데이트 지원을 공식적으로 중단한다고 밝혔습니다. 플러그인의 특성상 보안 잠재 위협에 노출될 수 밖에 없는 상황에서 Adobe 마저 손을 놓게 됨에 따라, HTML5로의 이동이 본격화될 것으로 전망됩니다. 하지만 TV 제조사 입장에서는 Flash의 잠재 보안 리스크와 Flash를 원하는 개발자 사이에서의 애로사항이 발생할 것으로 예상됩니다.</p>
</td>
<td width="20"></td>
</table>
</td>
</tr>
<tr>
<td height="40">
<table width="680" border="0" >
<td width="10"></td>
<td width="670">
<h2 style="margin-bottom: -18px;"><a style="font-size:12pt; font-weight: bold;" target="_blank" href="http://www.zdnet.co.kr/news/news_view.asp?artice_id=20170101024927">구글-애플, 'HTTPS' 확산 나섰다 (2017.01.01)</a></h2>
</td>
</table>
</td>
</tr>
<tr>
<td height="100">
<table width="680" border="0" >
<td width="20"></td>
<td width="640">
<p style="font-size:10pt;">구글과 애플이 암호화 기능 강화를 위해 HTTPS 사용을 유도하고 있습니다. 구글은 크롬 56 버전부터 비밀번호나 카드번호와 같은 데이터를 다루는 사이트가 HTTP를 사용하는 경우에, 이는 안전하지 않다는 문구를 표기할 방침입니다. 애플은 앱스토어의 모든 iOS 앱에 인터넷 통신을 HTTPS로 처리하는 앱 통신 보안 기능인 '앱트랜스포트시큐리티(ATS)' 적용을 의무화하는 계획을 갖고 있습니다. 페이스북 역시 HTTPS를 통해 모든 서비스를 제공하는 것을 기본 설정으로 하면서 이러한 움직임에 합류하고 있습니다.</p>
</td>
<td width="20"></td>
</table>
</td>
</tr>
<tr>
<td height="40">
<table width="680" border="0" >
<td width="10"></td>
<td width="670">
<h2 style="margin-bottom: -18px;"><a style="font-size:12pt; font-weight: bold;" target="_blank" href="http://www.bloter.net/archives/270588">미래형 웹브라우저, 오페라 네온 써보니 (2017.01.13)</a></h2>
</td>
</table>
</td>
</tr>
<tr>
<td height="100">
<table width="680" border="0" >
<td width="20"></td>
<td width="640">
<p style="font-size:10pt;">브라우저 시장은 1993년 모자이크를 시작으로 20년이 넘게 이어져 오고 있습니다. 익스플로러는 건재하고, 구글 크롬은 영토를 넓혔습니다. 파이어폭스는 주춤거리고, 사파리는 애플 생태계를 등에 업고 명맥을 잇고 있습니다. 이러한 상황에서 최근 오페라는 미래형 웹 브라우저라는 타이틀을 내세우며 오페라 <a class="keyword" href="http://www.opera.com/ko/computer/neon">네온 브라우저</a>를 발표했습니다. 기존에 브라우저라고 하면 떠오르는 북마크 막대, 탭 막대 등을 다 없애고 양쪽 사이드바를 활용한 독창적인 UX가 인상적입니다. 이에 마치 하나의 독자적인 플랫폼으로 느껴지기도 합니다. 브라우저를 쓰는 사용자에게 가장 중요한 핵심 가치는 무엇일까요?</p>
</td>
<td width="20"></td>
</table>
</td>
</tr>
<tr>
<td height="40">
<table width="680" border="0" >
<td width="10"></td>
<td width="670">
<h2 style="margin-bottom: -18px;"><a style="font-size:12pt; font-weight: bold;" target="_blank" href="https://risingstars2016.js.org">2016 JavaScript Rising Stars</a></h2>
</td>
</table>
</td>
</tr>
<tr>
<td height="100">
<table width="680" border="0" >
<td width="20"></td>
<td width="640">
<p style="font-size:10pt;">자바스크립트에는 다양한 프레임워크가 홍수를 이루고 있습니다. 그래도 무엇이 부족한지 계속해서 새로운 것이 정말 쉼 없이 쏟아져 나옵니다. 핫한 Framework가 나와서 그 분야를 평정해도 그것이 1년이 채 가지 못하는 경우가 부지기수입니다. 가령 2015년 <a class="keyword" href="https://facebook.github.io/react">React</a>가 나와서 기존에 <a class="keyword" href="https://angularjs.org">Angular</a>가 차지하고 있던 지분을 상당히 가져가더니, 2016년에는 또 <a class="keyword" href="https://vuejs.org">Vue.JS</a>라는 것이 나와서 React의 지분을 가져가는 식의 양상을 보였습니다. 2016년 JavaScript의 라이징 스타가 누구인지를, 각 분야별로 그래프와 간결한 설명을 통해 한 눈에 파악해 봅시다.</p>
</td>
<td width="20"></td>
</table>
</td>
</tr>
<tr>
<td height="15">
<table width="680" border="0" >
<td width="10"></td>
<td width="670">
<h2 style="margin-bottom: -18px;"><a style="font-size:12pt; font-weight: bold;" target="_blank" href="https://css-tricks.com/guide-2017-conferences/">2017 웹 분야 컨퍼런스 리스트</a></h2>
</td>
</table>
</td>
</tr>
<tr>
<td height="100">
<table width="680" border="0" >
<td width="20"></td>
<td width="640">
<p style="font-size:10pt;">2017년에 개최되는 웹 기술 분야의 주요 컨퍼런스 약 100여개정도가 월별로 정리되어 있는 사이트입니다. 아직은 연초라 Google I/O, HTML5DevConf 등 주요 컨퍼런스에 대한 정보는 없지만, 이 목록은 일년 내내 업데이트 될 예정입니다. 현재 리스트의 내용 중, <a class="keyword" href="https://smashingconf.com/">Smashing Conf</a>는 프론트엔드 최신 동향 및 UX 전략에 대한 인사이트를 얻을 수 있으니 관심 있으신 분들은 참고해 보시면 좋겠습니다.</p>
</td><td width="20"></td>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- 퀴즈 -->
<tr>
<td colspan="3" align="center">
<table class="section" width="680" height="40" cellpadding="0" cellspacing="0">
<tr>
<td class="sectiontitle" height="40" >
<table cellpadding="0" cellspacing="0" border="0">
<td width="10"></td>
<td height="1" width="670">
<h1 style="font-family: 'Malgun Gothic', Gulim, Arial; font-size: 14pt; color: #ffffff;">퀴즈</h1>
</td>
<td></td>
</table>
</td>
</tr>
<tr>
<td>
<table width="680" border="0" >
<td width="10"></td>
<td width="670">
<p style="font-size:10pt; color: #a50034">뉴스레터 내용에 대한 퀴즈를 풀어 정답을 보내주세요. 퀴즈를 맞힌 분들 중 추첨을 통해 상품을 드립니다!</p>
</td>
</table>
</td>
</tr>
<tr>
<td>
<table width="680" border="0" >
<td width="10"></td>
<td width="660">
<p style="font-size:10pt">Q1. E-book의 국제 표준 규격을 만드는 곳으로 최근 W3C에 흡수 합병된 국제 표준화 기구의 이름은?</p><br>
<p style="font-size:10pt">Q2. 해당 코드로 작성된 페이지에서 "이벤트" 텍스트를 클릭했을 때 console에 출력되는 내용은 무엇일까요?</p>
<center><img src="https://raw.githubusercontent.com/lgewst/images/master/issue6_quiz2.png" style="margin-top: 5px; margin-bottom: 5px;"></img></center>
</td>
<td width="10"></td>
</table>
</td>
</tr>
<tr>
<td>
<table width="680" height="20" border="0" cellpadding="0" cellspacing="0">
<tr height="15">
<td width="560"></td>
<td width="110">
<a href="mailto:webtech@lge.com?subject=Quiz Answers&body=A1. A2." style="color:#a50034; font-weight: bold; font-size: 10pt;">[Send Answers]</a>
</td>
<td width="10"></td>
</tr>
<tr height="5"></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr cellpadding="0" cellspacing="0">
<td cellpadding="0" cellspacing="0" style="padding: 0px; margin: 0px;">
<div style="padding: 5px; margin: 0px;">[<a href="#top">Top</a>]</div>
</td>
</tr>
<tr>
<td colspan="3" style="background-color: #efefef">
<div style="text-align: right;">
<a href="mailto:webtech@lge.com?subject=Subscribe&body=구독 신청합니다." style="color:#a50034; font-weight: bold; font-size: 10pt; ">[구독 신청]</a>
<a href="mailto:webtech@lge.com?subject=Unsubscribe&body=구독 해제 신청합니다." style="color:#a50034; font-weight: bold; font-size: 10pt; ">[구독 해제]</a>
</div>
</td>
</tr>
</table>
</body>
</html>