ajax 등장 이전부터, ajax, comet, 그리고 html5의 웹소켓까지 기술의 흐름을 간략하게 정리해 보았습니다. 웹 어플리케이션의 개발을 다뤄보지 않은 개발자들을 대상으로 처음부터 웹소켓을 다루기 전에, 1. 이전 세대의 통신 기법은 어떤 모양이었는지 2. 웹소켓이 왜 환영받을 만한 기술인지 ... 등을 공감할 수 있기 위한 목적으로 PT를 작성 하였습니다.

1. HTML5를 여행하는
비(非) 웹 개발자를 위한 안내서
The Non – Web Programmer’s Guide to the HTML5
1부. 웹 소켓
아꿈사
http://cafe.naver.com/architect1
최성기
florist.sk@gmail.com

2. 1. HTTP의 대전제
2. AJAX
3. 웹 소켓
4. Node.js
5. Java script
원래는 Node.js에 대해서 이야기 하려고
PT 배경색도 로고 이미지 바탕색이랑 맞춰두고 시작한 pt였으나
준비 부족으로 결국 Node.js는 얘기도 못 꺼내고 웹소켓 까지만 준비되었습니다...

3. 1. HTTP의 대전제
2. AJAX
3. 웹 소켓
4. Node.js
5. Java script

4. HTTP
Hyper-Text Transfer Protocol
아주 멋진super보다 더 멋진 hyper 텍스트를
전송하려고 만들어낸 통신 규약.
서버가 Html로 만들어진 문서(디자인된 문서)를
유저에게 잘 보여주는 것이 이 프로토콜의 최초 목적이었다.
이전 세대에는 터미널 창에서 오직 텍스트만 주고 받던 통신 시대였으니
차세대 통신 규약으로의 적절한 설정이었다.

5. 대.전.제
http 프로토콜을 이용한 통신의 대전제:
클라이언트는 원하는 페이지를 url로 요청하고,
서버는 그 페이지를 보내준다.
http 클라이언트(≒웹 브라우저)는 url을 보내고 결과를 받아오는 게
유일한 존재목적이고, 그 외 다른 것은 할 필요도 없었고, 할 수도 없었다.
즉,
브라우저는 서버와 통신하려면 다른 페이지로 이동해야 하는 대전제를 가진다.
근데 http는 점점 대중화되고, 페이지 보는 거 말고 다른 게 하고 싶어 졌다.
Ex) 이 사이트에 가입하고 싶어. ‘ok’버튼을 눌렀을 때 가입시켜줘.

6. 사이트 회원가입?
사진이나 동영상 올리기?
남의 글에 악플 달기?
클라이언트가 ‘페이지 읽기(이동하기)’가 아닌 다른 작업을 하고 싶을 땐
클라이언트가 할 수 있는 유일한 스킬인 ‘서버에 원하는 url 쏘기’를 시전하면서
이때 부가적인 정보를 붙이도록 했다.
http://XXX.com/join_member.htm?id=florist&name=최성기&gender=male...[1]
[1]
Url에 정보를 붙여서 보내는 GET 방식 이외에,
내부적으로 전송하는 POST 방식이 있다. (쉬운 설명을 위해 간소화.)

7. 철수는 XXX 사이트에 회원 가입을 했을 때
한 페이지 가득한 환영의 인사를 보고 기분이 좋았다.
‘날 위해 새 페이지를 보여줘 가면서까지 환영해 주고 있구나!
난 사랑 받기 위해 태어난 사람이야!’
웰컴!
격하게 환영합니다.
Join_form.htm Join_result.htm
하지만 그것은 불편한 진실이었다.
사실 http로는 무언가 새 페이지를 요청하지 않고서는
회원가입 따위의 요청을 서버에 날릴 수가 없었다.
(과연… 철수는 사랑 받기 위해 태어난 사람일까…?)

8. 그러고 보니 아이디 중복체크를 할 때도 그랬다.
서버에게 중복 검사를 요청하기 위해선 새 페이지를 요청해야만 하는데,
회원정보 작성 중에 페이지를 이동할 수 없기 때문에
새로 요청한 페이지를 팝업창으로 띄웠던 것이다.
(요즘 사이트들은 대부분 팝업창 없이 검사 가능. Ajax를 이용)
이미지 출처 : http://jinzza.net/IdCheckHowTo.html

9. 하드웨어 드라이버 다운로드 페이지
제품종류 제품시리즈 모델명
메인보드 GeForce GeForce 9800 GT
그래픽카드 nForce GeForce 9800 GX2
사운드카드 3D Vision GeForce 9600 GT
… … …
다른 예를 하나 더 들어보자.
여태 살면서 한 번쯤은 다 겪어봤을 만한 하드웨어 드라이버 다운로드 폼 구성은
다른 페이지로 이동하지 않으면서도 서버에서 모델 정보를 받아오는 것처럼 보이지만
이는 눈속임에 불과하다.

10. 하드웨어 드라이버 다운로드 페이지
제품종류 제품시리즈 모델명
메인보드 GeForce GeForce 9800 GT
그래픽카드 nForce GeForce 9800 GX2
사운드카드 3D Vision GeForce 9600 GT
… … …
graphic_serize_list.htm geforce_model_list.htm
실은 iframe이라는 태그로 페이지에 구멍을 뚫어놓고,
그 구멍에 결국 유일하게 할 줄 아는 [2] ‘새로운 url 페이지 열기’ 스킬을 시전한 것 뿐이다.
[2] 물론 오늘날의 웹은 가능하다. 지금은 원시적인 기법에 대해 이야기 하고 있다.

11. 하드웨어 드라이버 다운로드 페이지
제품종류
메인보드
그래픽카드
사운드카드
…
제품시리즈 모델명
GeForce … 실상은 이렇다. GeForce 9800 GT
nForce GeForce 9800 GX2
3D Vision GeForce 9600 GT
… …
graphic_serize_list.htm geforce_model_list.htm

12. 브라우저가 웹서버에게 뭔가를 요청하려면
페이지를 이동하지 않고서는 요청할 방법이 없었다.
이런 제한적인 환경 때문에,
웹에서 무언가 다양한 기능을 하게 해주는 꼼수들과 대체기법들이 유행했다.
플래시를 집어넣어 몽땅 플래시 기반으로 사이트를 만들기도 하고
특히 한국에서는 뭘 좀 만들어야지 싶으면 ActiveX를 얹어서
웹도 아니고 애플리케이션도 아닌 어정쩡한 결과물들이 홍수처럼 흘러 넘쳤다.

13. 그러던 한 편에선구글 이란 이름의 괴집단이
꾸준히 세력을 키워가고 있었다.
구글톡, 지메일, 구글그룹, 구글문서, 구글리더, 구글지도 등
신기한 서비스들을 연이어 내놓았는데,
구글의 서비스는 웹페이지 같지 않게 동적이고 자연스러웠다.
‘짤각’ 거리는 새로고침 소리도 들리지 않았는데도 웹페이지는 자유롭게 변환되었고
사람들은 ‘이런 게 웹에서 된단 말이야?’ 라고 말했다.
게다가 구글은,
이 모든걸 ActiveX 없이 해냈다.

14. 1. HTTP의 대전제
2. AJAX
3. 웹 소켓
4. Node.js
5. Java script

15. AJAX
Asynchronous Javascript And Xml
구글이 사용한 기법은 Ajax라는 기법이었다.
자바 스크립트와 xml을 이용한 비동기 통신. Konami, 1987
2005년 경 부터 점차 대중화 되면서 쓰이기 시작했고[3]
오늘날 Ruby, JQuery 등을 이용한 대중적인 웹 개발의 기반에도
페이지 이동 없는 통신의 근간을 이루는 기술이 되었다.
Ajax가 쓰이기 시작하면서 웹 페이지들은 페이지 이동 없이도 서버와 통신을 했고
페이지에 구멍을 뚫지 않아도 특정 영역만 업데이트하거나 조작할 수 있게 됐다.
[3]
Ajax 기법은 2005년부터 대중화되기 시작했지만, 사실 예전부터 존재하던 기법이다.
거의 알려지지 않았던 테크닉이었고, 이전엔 Ajax라는 이름도 없었다.

16. 웹 브라우저에 쓰이던 자바 스크립트에는 사실
XMLHttpRequest라는 API가 있었다. (IE 기준 5.0부터 지원)
http://dna.daum.net/TR/XMLHttpRequest/
http://ko.wikipedia.org/wiki/Ajax
이녀석을 통해 url 이동이 아닌 임의 요청을 보내고 응답을 받을 수 있었는데
그 동안엔 있는 줄도 몰랐고, 또 쓰면 이렇게 멋있어질 줄 몰랐겠지.
아무튼 구글 및 기타 선두 진영들[4]이 Ajax라는 이름을 붙여 유행시켰고
웹페이지는 이제 이전과 비교할 수 없는 다양한 표현력을 갖게 되었다.
일부 책에서는 이런 비동기 방식을 ‘XHR을 이용한 통신’이라고 부르기도 한다.
[4] 사실 구글밖에 모른다...

17. 이미지 출처 : http://goo.gl/XEey5
이젠 회원 가입할 때
버튼이나 팝업창 없이 입력 focus만 떠나면
바로 웹서버와 통신해서 중복체크를 할 수 있고

18. 검색어 추천 기능
검색창에 글씨가 한자씩 타이핑 될 때마다
웹서버에 단어를 보내
추천 검색어 리스트를 보여줄 수도 있고

19. 구글 지도
마우스 입력에 따라 브라우저에서 맵을 늘였다 줄였다…
위성 사진을 보였다가 지도를 보였다가…
이런 건 도대체 어떻게 하는 거야
웹 브라우저만 가지고도 다양한 표현이 가능해졌다.

20. Ajax의 사용으로 인해
Http 통신을 할 때의 대전제였던 ‘페이지 갱신’이라는 제약은
이제 무의미해진 옛날 말이 되었다.
Ajax를 이용한 웹사이트는 나날이 늘어났고
데스크탑 어플리케이션으로 구현됐던 상당수 프로그램이
차츰 웹 기반으로 대체되기 시작했다.
Ajax의 표현력에 반한 철수가 어느 날
MSN 메신저를 설치할 줄 모르는 영희를 위해 웹 메신저를 만들기로 결심한다.

21. 웹 기반 메신저 통신 예제 :
구글톡이 등장하기 이전에도 ActiveX없이 동작하는 웹 채팅은 존재했다.
‘별로 어렵지 않을 거야. Ajax는 짱 이니까.’
철수는 부푼 기대감을 안고 개발을 하기 시작했는데
얼마 안 가서 난관에 부딪혔다.

22. 요청
응답
요청
응답
웹 브라우저가 XMLHttpRequest를 이용해 서버로 먼저 요청을 날리고
서버가 이에 대한 응답을 보내주는 것 까지는 크게 문제가 없었지만

23. 요청
응답?
요청
응답?
서버가 요청 없는 브라우저에게 먼저 통신을 시작할 수 있는 방법이 없었다.
서버는 응답밖에 할 수 없었다.
자유로운 양 방향 통신이 불가능한 반 쪽짜리 통신이었다.

24. 출처 : 마이크로 소프트웨어 2010년 11월호 ‘모바일 실시간 그림판 구현’中..

25. 출판사 리뷰 中…
…Ajax 1.0은 시작에 불과했다. 이제 근본적인 변
화를 몰고 오는 Ajax 2.0, Comet이 온다!
Ajax가 웹에 불러온 변화들을 기억할 것이다.
Ajax로 인해 더욱 풍성해진 웹은 더욱 사용자에
가깝게 다가설 수 있었고, 결국 Web 2.0이라는
커다란 패러다임의 변화를 이끌 수 있었다.
Comet은 Ajax가 보여주었던 변화에서 한걸음
더 나아가는 기술이다. 클라이얶트가 요청하기
전에 서버가 자유롭게 메시지를 보낼 수 있고,
그 결과 양측의 컴퓨터가 웹을 통해 자유롭게 대
화할 수 있는 진정한 대화형 웹 애플리케이션의
시대, Comet이 만들어갈 새로운 웹의 모습이다.
하지만 초큼 어렵다.

26. 요즈음의 웹사이트에서 볼 수 있는
페이지 갱신 없이 이루어지는 실시간 통신들은
모두 Ajax와 Comet에 바탕을 두고 있다.
(IE에서도 잘 동작하는 것들은 모두 Ajax라고 보면 된다.)
Comet을 통해 양방향 실시간 통신이 가능해 졌지만
다소 억지스러운 테크닉은 개념을 초큼 복잡하게 만들었다.
웹은 아직도 무섭게 성장하고 있고 수요는 점점 늘어가고 있다.
그러는 와중에 HTML는 5.0 표준을 만들어 가고 있는 중인데,

27. 1. HTTP의 대전제
2. AJAX
3. 웹 소켓
4. Node.js
5. Java script

28. HTML5 표준에 쉽고 강력한 ‘웹 소켓’이라는 규약(?)이 정해지게 됐다.
개인적으로 HTML5 다른 기능도 멋지지만 웹소켓이 짱이다.
HTML5가 간달프라면 웹소켓은 간달프의 지팡이 정도랄까.
(사실 발표자가 네트워크 프로그래머라서 그렇슴)

29. http://caniuse.com/#search=socket
Web Sockets - 아직 표준화 작업 진행 중(draft)
웹 어플리케이션을 위한 양방향 통신 기법.
기존의 Tcp 소켓기반 S/C 통신처럼 웹 app을 작성할 수 있다.
인터페이스도 TCP 서버 짜오던 개발자로서 늘 작업하던 방식들과 매우 흡사하다.
기쁘지 아니할 수가 없다.

30. 클라이언트의 경우,
웹소켓을 지원하는 브라우저라면 자바 스크립트에서 생성자를 호출해
소켓을 만들어 바로 사용하면 된다.
서버의 경우,
• pywebsocket : http://code.google.com/p/pywebsocket/
• phpwebsocket : http://code.google.com/p/phpwebsocket/
• jWebSocket : http://jwebsocket.org/
• web-socket-ruby : https://github.com/gimite/web-socket-ruby
• socket.io-node : https://github.com/learnBoost/Socket.io-node
… 등등 다수의 오픈 소스 모듈 중 선택해 구축할 수 있다.
IIS에서 웹소켓 사용할 수 있는지 혹시 아시는 분?
MS가 html5의 대응에는 매우 굼뜬 것 같네요…

31. http://sideeffect.kr:8001/
동작하는 예제 중 Node.js의 Socket.IO를 이용한
‘아웃 사이더’ 님의 PT를 한 번 보자.

32. 1부. ‘웹 소켓’ 요약
웹을 기반으로 뭔가 멋있는 걸 만들어 내기가 원래는 참 힘들었다.
그러다 5~6년쯤 전 Ajax, Comet 의 등장으로 웹은 훨씬 Rich해 졌지만
다소 변칙적인 응용과 기법들로 몇몇 아쉬운 점들이 남아있었다.
이제 HTML5의 웹소켓을 통해
더욱 심플하고 강력한 실시간 통신이 가능해 질 것이다.
2부에 계속...