목차

4차 산업혁명, 인공지능 그리고 웹

W3C HTML5 Conference 2016 주제 4차 산업혁명, 인공지능, 그리고 웹.. 이름이 깁니다.
W3C 주최의 컨퍼런스에 다녀왔습니다.

인공지능, VR, 웹의 미래에 대해서 다양한 주제로 강연하는 컨퍼런스 였습니다.

좋은 내용도 많았지만 트랙도 많아서 들을 때 너무 고민 됐습니다.

처음에 갔을 때, 별 생각없이 코엑스 그랜드불룸에서 하는줄 알았는데..? 가보니 문이 닫혀있더군요.

알아보니 401번 룸이네요.. 다시 찾아갔습니다.
좀 늦었는지 벌써 사람들이 바글바글합니다.

참가업체의 전시도 많이 있었고 전시참여시 휴대용 가습기를 주는 이벤트도 하고있었습니다.

옆에서는 서울 디자인 페스티벌도 하고 있었습니다.




인사말 & 축사

참가자들이 한번에 너무 몰려서 입장을 다 하지 못해 인사말 축사는 생략되었습니다.

Keynote.1 4차혁명(인공지능)과 웹

네이버 기술협력총괄 박종목님께서 첫번째 키노트를 시작 하셨습니다.

우선 네이버에서 시도하고 있는 인공지능 기술을 소개해 주었습니다.

네이버에서 하고있는 인공지능 관련 기술

HTML5 음성인식 기능(Speech Recognition)
음성합성
기계번역
Voice Translation - Papago
음성인식번역합성 지원
Intelligent Chat Bots - AMICA.ai
AI In Web Browser - WHALE 브라우저

그외 인공지능 기술

Intelligent Assistants

Chat bots

  • 페이스북 메신저의 봇 등

Autonomous Driving

  • 자동주행 자동차 등

Keynote.2 자유롭고 느슨한 웹을 동경하는 일에 대하여 - 김국현

만화가 혹은 개발자이신 김국현님의 키노트가 시작되었습니다.

알고보니 프로그래머가 넘침에 따른 우려를 인력시장에 비유하여 여기 JAVA 2명이요~ 라고 하는 유명한 짤을 그리신 분이셨습니다.


IT를 세대로 나누어 3세대로 설명해주셨습니다.
나누어지는 세대에 따른 개발언어 변화와 개발언어간의 갭으로 인하여 생기는 경력단절.
경력단졀된 개발자 줄여서 경단개발자 문제에 대한 얘기를 하였습니다.

그 후 Node.js 쇼크 - JS 분리 독립의 성공을 주제로 넘어갔습니다.
자바스크립트의 Polyfill 문화와 JS 컴파일 발전에 의한 자유로운 ES5~ES7도 맘껏 사용할 수 있는 환경 발전에 대하여 이야기 했습니다.

지금 생각해보니 위에서 말한 경단 개발자가 생기는 걸 자바스크립트가 방지해 준다는 얘기로 정리가 되네요

그 외 Fetch API의 편리함에 대해 말씀하시고 직접 만든 어플리케이션에 관련된 이야기도 풀어주셨습니다.

패널토의

패널들의 토의시간이었습니다.

앞으로 변화할 웹 기술에 대한 주제로 이루어 졌습니다.

갑자기 일이 생겨서.. 제대로 듣질못했기 때문에 이 부분에 대한 설명은.. 넘어가도록 하겠습니다.


코엑스의 Lu에서 점심제공을 했습니다.

불고기가 넉넉하니 좋았습니다.

점심시간을 가지고 본격적인 컨퍼런스가 시작되었습니다.

35년차 개발자가 바라본 웹 개발의 현재와 미래

35년차 개발자 김영보(Core Chain 개발자)님께서 발표해 주셨습니다.

54년생 (밝혀도 되나..?)이라고 하시는데 제 아버지보다 나이가 많으시네요. 의미하는 바가 크다고 봅니다.

발표하는데 발성도 좋으시고 유머도 좋으시고 준비 많이 하신 게 느껴져서 좋았습니다.(젊으신데도 웅얼웅얼 발표하시는분들 너무 많아요!)

사실 오늘 들었던 컨퍼런스중 발표 제일 재밌고 유익했다고 생각했습니다.

웹의 역사?와 웹기술의 미래에 대해서 말해주시고 마지막에는 질문시간이 있었습니다. 사실 이 트랙을 선택한 이유가 30분은 기술설명에 턱없이 짧은시간이기 때문에 이 트랙의 주제는 짧게 끝내고 질문답변시간에 집중할 수 있을거라는 생각에 들어왔는데 정확한 판단이었습니다.

지루하지도 않고 특히 질문/답변 시간에는 개발자 직을 오래 하셔서 그런지 답해주시는게 너무 폭넓고 정확해서 좋았습니다. 한 단어로 우문현답이라고 할까요? 연륜이 묻어나는 커뮤니케이션 스킬과 여유는 마치 나프콘에 임백준님이 떠올랐습니다. 껄껄

마지막으로 "빅데이터와 머신러닝이 발전할수록 그것을 보여주기 위한 웹에 대한 수요가 많아질 것이다."라며 개발자들에 희망과 도전정신을 불어넣어주셨습니다.

주변에서는 트랙제목만 보고 35년 개발자? 별로네 하고 안 들었습니다만, 저는 마지막에 생각을 바꿔서 트랙을 옮겼습니다. 듣고나서 드는 생각은 옮긴게 신의 한 수 였던 것 같습니다. 

단순히 한국의 개발자로써도 나의 미래에 대해서도 느낄게 많은 발표 였습니다. 기술관련 발표야 관련 문서를 찾아 볼 수 있지만... 이 발표는 정말이지.. 듣지 않은 사람들은 영원히 못 느낄 경험이라고 확신합니다. 

Bringing Web Services to IoT IoTivity Node

삼성전자 책임 Sanjeev가 발표해 주었습니다.

바로가기 - IoTivity

바닐라 JS나 웹RTC 보다 흥미로운 주제라고 생각하고 갔는데..
네.. 통역이 있을 줄 알았는데 없었습니다. 그나마 특유의 발음으로 (빅뱅이론..?)좀 듣긴했는데 후반에는 정신이 혼미..

리스닝 공부도 열심히 해야겠어요 휴

어쨌든 background에서의 IoT 서비스 NodeJS바인딩에 대해서 강연을 했..다고합니다.

아 울렁증..

Automotive Web

ETRI 선임이신 이원석님께서 발표해주셨습니다.

전체적인 주제는 자동차와 웹의 프로토콜 그리고 W3C 였습니다.

앞으로의 발전이 기대되는 분야네요. 일본 중고차 시장에서는 벌써 쓰고있기도 하구요..!

앞으로도 웹개발자는 (지금도 그렇지만) 배울거도 계속늘어나고 할 것도 계속 늘어나는구나.. 싶네요. 물론 긍정적인 면으로 생각하고 있습니다.

Angular1 + ES6 - 한장현

Angular와 ES6에 대한 소개와 쓰는 이유에 대해서 설명합니다.

간단하게 ES5와 ES6의 차이에 대해서도 설명하였습니다.

바로가기 - 한장현입니다(블로그)

Angular를 좀 써봤어야 잘 들을 수 있었던 발표 같았습니다.

파워포인트의 소스 화면이 작기도 했구요.. 아쉽지만 잘 들었습니다.

그 외에도 BDD에 대해서 설명을 해주셨습니다.

이 부분은 정리를 제대로 못해서 해당 링크를 참고하시면 좋을 듯 합니다.

바로가기 - TDD와 BDD의 차이

Universal Rendering (React.JS 중심)

Automattic개발자 김태곤님이 발표해 주셨습니다.

워낙 유명하신 분이라..

바로가기 - 코드쓰는 사람
Webframework.kr

유니버설 렌더링

유니버설 렌더링이란? 서버사이드 렌더링, 클라이언트 사이드 렌더링을 동시에 지원

  • 주로 클라이언트 사이드 렌더링이 위주인 환경에서 출발하여 서버 사이드 렌더링을 추가

장점

서버와 클라이언트 렌더링이 따로 되기 때문에 빠르다.

대신 두개 다 구현 해줘야 함.

사용자 입장에서 클라이언트 렌더링 전에 서버에서 렌더링 되서 나오기 때문에 더 빠르게 나온다고 인식 한다.

하지만 클라이언트에서 렌더링할 데이터가 많지 않을 경우 별 차이 없다고 느낀다.

확실히 서버렌더링이 빠른다는 의견
페북/인스타그램도 안쓰고 UX에 딱히 도움되는지 못찾는다.
http://goo.gl/qvMoif

검색엔진최적화 SEO 측면에서 유리하다.

페이스북, 트위터 등 다른 서비스와 연동에 유리.

단점

같은 코드도 각각 테스트
고려할 점이 많다 수고스럽다
유지보수가 어려워짐
투자하는 시간에 다른 차라리 걸

앱에서는 초기 로딩시간이 의미 없다.
사내 인트라넷이나 금융관련등 연동할 필요가 없는애플리케이션은 필요 없다
구글에서 검색되니 상관없다(구글크롤러는 자바스크립트도 실행)

필요한 구성요소

웹서버
API서버
자바스크립트 렌더러

다른 언어 웹서버 구성방식

쟝고+노드 구성방식
http://goo.gl/L9agTw

파이썬 웹서버 + 파이썬 리액트페키지 + 노드 렌더링 서버

노드웹서버 + 다른언어 api서버

https://taegon.kim/archives/5312

Best practices
npm 버전보다는 최소화 버전성능이 좋음
NODE_ENV=production으로 설정
html결과물은 가능하다면 캐시
JS 모듈보다는 Node서버 사용

  • Java8이 nashorn엔진은 node보다 9배가량 느림

  • 쟝고 + Jinja 환경에서 서버사이드 React렌더링으로 바꾸면서 Node렌더링 서버 선택

  • JS모듈은 프로토타이핑이 빠르지만 별도의 렌더링 서버를 두는게 불안정한 JS 모듈보다 나음 (관리비용은 증가)

위와같이 적용 후 렌더링 서버의 응답속도를 1250ms -> 30ms로 개선

위와같이 정리되네요 30분치고 상당히 내용이 많고 집중이 잘됐습니다.


발표 다음섹션 화장실가느라 잠시 나왔는데 집에 가시는거 같아서 인사드리고 같이 셀피 찍었네요!!

나프콘 케빈님 이후로 두번째 유명인 셀피 하하.

폰카 성능이 후덜덜합니다. 자동으로 피부잡티가 전부 사라지네요 하하

ReactiveX + Meteor 종단간 암호화 구현사례

이재호 앱솔루트 대표께서 ReactiveX와 Meteor(풀 스택 자바스크립트 플랫폼)를 이용한 종단암호화 구현사례에 대해서 발표해 주셨습니다.

교육경험이 많다고 하셨는데 정말 암호화에 대해서 간단하게 설명해 주셨습니다.

몇몇은 이미 알고 있는 부분이었는데 다시 좋은 복습이 되었습니다.

후반부에는 실제 샘플 사이트를 통해서 암호화 복호화 과정을 보여주셨습니다.

Electron 이해하기

스튜디오씨드 개발자 이웅재 님께서 발표해 주셨습니다.

아 발표가 내용도 좋았지만 피곤하지 않게 재밌게 해주셔서 집중해서 들었네요! 정리한 내용은 아래와 같습니다.

발표내용 정리

Electron 이란?

아톰을위해 깃헙에서 만든 프레임워크이다.
Electron을 이용하여 웹기술로 데스크톱 애플리케이션 만들 수 있다.

Slack, Atom, Visual Studio Code 등이 이 걸로 만들어졌다.

노드웹킷과 다른점?

ES6 지원

angular-electron, react-electron도 존재

보안이슈

패키지보기로 접근 가능하며 소스를 다 볼수 있음.

크롬이기때문에 크롬 개발자 도구 사용가능.

그래서 찾은개 아래 enclosejs를 통한 암호화

바로가기 - enclosejs

DEVTRON

Electron용 Extention

  • 모니터링

  • 이벤트체크

  • IPC모니터링

  • LINT

SPECTRON

테스팅 프레임워크
Spectron 설정하기

Electron 프로덕션시 참고 사이트 및 패키지

  • Electron Userland : Electron 유저커뮤니티

  • electron-packager : 자동 패키징

  • electron-builder : 전체를 다해줌 자동업데이트 등

그 외

TypeScript 사용 추천
디버깅 이슈 strict규칙을 사용하기 때문에 리팩토링에 용의하니 추천!

길지만 재밌던 발표였습니다.

기본 패키지용량이 단점이지만 뭐 요새는 다운속도도 빠르고 하니 큰 문제는 아니겠지요.


아쉬운 부분

후반부 트랙 1의 발표 시간이 30분을 초과하는 바람에 후반에 다른 섹션은 들을 수가 없었습니다! 50분씩 해버리니 뒤로 밀리고 컨퍼런스 자체도 늦게 끝나고 혼란스러워 졌네요. 다른 트랙으로 들으러 갔더니 이미 끝나있다던지..

트랙을 나눈 의미가 무엇인지?? 애초에 시간을 더 분배 하던지 했어야 하지 않나 싶은 아쉬움이 쪼매 있네요!

후기

흠.. 최근에 이런 생각을 잠깐 해봤습니다..

웹이 이렇게나 발전했습니다.

배울거 많습니다.

시간은 한정적입니다.

누군가는 말합니다.


"이런 컨퍼런스 가도 정작 발표자들도 실제 업무에서 하는건 당장 별 차이 없다."
"잠깐은 열정이 생기지만 다시 식을 거다" 라며 마치 시간낭비인듯 말하는 사람이 있습니다.

네 그분들은 평생 안주한 채로 그렇게 발전없이 사실테니 하등 신경쓰지 마시고, 컨퍼런스로 받을 작은 영감이 나의 발전에 어떻게 이로운 영향을 줄지에 집중합시다.

다들 화이팅입니다.



저작자표시