어느덧 14번째 시간이 되었네요…
심심할때, 공부하기 답답할때 슬금슬금 써오던게 어느덧 14번째 시간이 되었습니다. 뭐… 이 강좌로 공부하시는 분들이 있을까 라는 생각이 들기도 하지만, 걍 취미삼아 계속 쓰고 있죠.
공부라는게... A 라는 사람이 개삽질을 해서 배운걸, B 라는 사람이 좀 더 편하게 배울수 있는 방법은 없습니다. 공부를 하는데 있어서 진짜 중요한 것 중에서 하나는 "보다 효율적으로 삽질을 할 각오" 가 아니라, "보다 빠르게, 보다 많이 삽질을 할 각오" 거든요. no pain, no gain… 남이 뒈지게 고생하고 죽는다 소리를 하면서 배운것을, 쉽게 배울수 있는 방법은 없다고 생각해요. 신이 그렇게 세상을 만들어놨으면 죽어서 신하고 맞짱 한 번 뜰겁니다, 뭐 일단은 세상은 평등하다 믿으면서 삽니다. 남들보다 1년 늦게 시작했으면 뭐 1년동안 2년치만큼 눈깔 빠질 정도로 공부해서 따라잡는거죠 뭐…
무식하게, 얍삽하지 않게, 우직하게 "세상은 평등한 노력에 평등한 댓가를 준다" 라고 생각하면서 살면 마음이 좀 편해집니다. 뒈지게 힘들어도 좀 들 억울하죠. 뭐 가끔 존내 잘하는 사람들 보면서 "이새끼는 유기농만 먹고 자랐나?" 할때도 있는데, 그럴때 그런 마음가짐이 도움이 됩니다. "난 안돼… 난 DNA 레벨에서 쓰레기야…" 하면서 좌절하고 자빠져 있느니, "ㅆㅂ 다른 새끼들은 내가 밥상에 밥쳐먹을때 모니터앞에서 컵라면 먹으면서 공부한다" 라고 생각하는게 훨씬 남는 장사잖아요.
뭐 사실 지금까지 저보다 잘하는 사람들 중에 저보다 노력하지 않는 사람은 본적이 없으니… 그러려니 하면서 삽니다.
근데… 뭐 말이 뻔드르한거지 사실은…
Html 전송보기
우리가 흔히 사용하는 URLLoader 역시 편리하게 사용되도록 만들어진 내장기능 입니다. 그보다 더 원시적인 레벨로 내려가면 또다른 원리가 있지요. 그게 뭐냐? 라는 질문에 대답을 하려면 상당히 노가다를 뛰어야 하므로, 일단 눈으로 확인하도록 하죠. (돈받는 것도 아니고 뭐…;;; 고생하고 싶지 않아요… 하하하하하…)
우리가 주구장창 보는 네이버 메인화면 입니다. 이 화면을 구성하기 위해서 받아들이는 통신을 볼까요?
저기 보이는 상단 패킷 리스트 스크롤바 보이시죠? 저게 네이버 메인화면을 한 번 보기 위해 받아들이는 통신들 입니다. 대충 html 을 조금 아시는 분이라면 깜샷 날릴수 있겠지만, 하단 내용창에 보이는 패킷들이 html 이나 javascript, image 등을 요청, 수신하는 통신 패킷입니다.
윗쪽에 진한 파랑으로 써진 부분이 "요청하는 부분" 입니다. 이걸 Request (요구, 요청) 이라고 부릅니다.
그리고, 아랫쪽에 보이는 흐린 파랑 부분이 "받아들이는 부분" 입니다. 이걸 Response (응답, 대답) 이라고 부릅니다.
인터넷 통신이라는 것은 인간의 자연스러운 대화, 커뮤니케이션의 표현 중 하나입니다. 단지, "응답자" 가 사람이 아니라 컴퓨터 (서버) 인 것 이지요. 네이버 서버가 죽으면 응답자가 띵간 상태가 되어버리므로, 당연히 웹페이지는 열리지 않습니다. Request 는 날리지만, 그에 대한 Response 는 도착하지 않는것이지요.
HTTP Request 패킷의 구조
우리가 사용하는 인터넷은 기본적으로 HTTP 라는 양식을 통해서 요청, 수신 합니다. 대충 깜샷 날리면서 확인해 볼까요?
html 통신을 배울때 우리가 주구장창 보게되는 GET, POST 에 대한 설정은 이렇게 쓰여집니다. 여기에 GET 이라고 쓰면 저렇게 ia_flash.js?u=2000… 처럼 변수를 붙여서 보내주고, POST 의 경우에는
이렇게 파일명만 써주고, 변수들은 아래에 따로 써주게 됩니다. Host 를 같이 보내서 파일명과 합쳐서 어떤 파일을 받아들이려 하는지에 대한 full url 을 구성하게 되지요.
그리고 이 부분들은 딱히 알 필요가 없는 것이지만, 하여튼 이렇게 여러가지 정보들을 요청할때 같이 보내게 됩니다. 뭐 가끔 "내 홈페이지엔 이런 브라우저들이 접속했다" 라는 통계 프로그램들을 보면서 "우워~ 신기해~" 했던적 있으시죠? 이런식으로 보내주니깐 아는겁니다. (프로그래밍이 마법이 아니라니껜…)
그리고, 이렇게 Cookie 역시 보내주죠. 이 Cookie 를 보내기 때문에 PHP 같은 서버사이드 언어들에서도 브라우저에 내장되어 있는 여러가지 Cookie 데이터를 사용할 수 있습니다. Referer 는 "이 홈페이지를 무슨 경로를 통해서 접속했나?" 라는 추적 데이터 인데요. 뭐 테터툴즈, 티스토리 같은 블로그 프로그램에서 내 블로그에 이런 경로를 통해 접속했다… 라고 보여주죠? 이런 리퍼러 정보를 보내주기 때문입니다.
뭐 복잡하게 이야기 할 생각은 없구요. 통신 규약 이란게 나름 어려운 내용이라서…;;; 그냥 이런게 있다. 통신은 이렇게 된다… 라는 이야기를 먼저 하고 넘어가려고 주절 주절 이야기 하는겁니다. 너무 심각하게 공부하려 들지 마시고, 오늘은 걍 "우왕~ 신기해~" 하면서 멍때리면서 보시면 되요.
HTTP Response 패킷의 구조
위에 처럼 요청을 보내면, 그 요청을 받아들인 서버는 아래와 같이 응답을 하게 됩니다.
일단 이게 어떤 통신규약을 통해서 내 컴퓨터의 웹브라우저에게 전달되는지를 알려줍니다. 저기 HTTP/1.1 이란건 이런 형식으로 전송할테니 그에 맞게 해석해서 봐라… 라는 이야기이구요. 그 옆에 200 이 재밌는 내용인데, 우리가 가끔 보는 404 에러 같은거 있죠? 웹 페이지 안떠버릴때 나오는 것들이요. 그럴때 쓰는겁니다. 그런 전송코드는 아래와 같습니다.
이런 상태코드들을 보내주기 때문에 웹브라우저는 그것을 해석해서 이런저런 상황들을 여러분에게 알려주게 됩니다. 이건 flash 역시 마찬가지 입니다. flash 에도 HTTP 코드를 받아들입니다.
그리고, 이렇게 잡다한 정보들을 같이 보내줍니다. 어떤 서버언어로 구성되었는지, 어떤 서버를 사용하는지, 뭐 이런저런 것들을 보내주죠.
그리고, 보내는 데이터의 데이터타입도 알려줍니다. text/html 이란건 text 형식으로 된 html 파일 이란거죠. 문자셋은 euc-kr 로 되어있다고 알려주네요. 그리고, Connection : close 라고 되어있는 부분은 HTTP 통신이라서 그럽니다. 웹페이지를 관리하는 서버는 한번 데이터를 보내면 접속을 닫아버리거든요. 그렇게 보내고 닫아버리기 때문에 html 만으로는 채팅같은걸 만들수가 없는거죠.
그리고, 그 아랫쪽에 드디어 html 내용을 보내게 됩니다. html 은 이렇게 텍스트로 보내고…
이미지 같은 경우엔 이렇게 사람이 알아볼 수 없는 byte code 로 보내게 됩니다. ㅎㅎ… 이미지라고 해서 설마 그림이 전송되지는 않겠죠. 이렇게 특정한 문자코드 형식을 통해서 전송되면, 웹브라우저가 그것을 그림으로 해석해서 우리에게 그림으로 보여주게 됩니다.
FTP 보기
ftp 는 이런 형식으로 요청과 응답이 계속~ 이어집니다.
뭐 어디서 많이 본듯하죠? 이런 형식으로 ftp 의 어떤 폴더로 들어가면 리스트를 전송받게 됩니다.
HTTPS 암호화된 페이지
은행, 쇼핑몰 같이 보안통신이 필요한 경우엔 이렇게 https 를 통해서 암호화된 요청, 응답을 주고 받게 됩니다. 왜 https 로 했을까? 라는 의문을 가졌었나요? 이렇게 암호화 시켜서 보내기 때문입니다. 이렇게 하면 중간에서 크랙커가 패킷을 가로챈다고 해도 어떻게 활용할 수가 없기 때문이죠. 저기 위해 모자이크 처리를 해놓은게 있듯이 보통 http 통신은 암호까지 그냥 쌩으로 보내버리거든요…;;; 물론 암호화 시키는 경우도 있지만, 보통은 그런 처리를 잘 안합니다. 여러분이 사용하는 테터툴즈 같은것도 중간에 패킷을 가로채면 암호 쌩으로 다 보여지게 됩니다…;;;
flash 로 랭킹게임을 만드는 것이 위험한 이유는 이런것 때문입니다. 사실 패킷을 읽는것은 걍 프로그램만 깔면 되는데… 만일 랭킹게임을 통해서 어떤 순위가 결정, 거기에 상품이 있다치면 쉽게 조작이 가능하거든요. flash 안에서 무슨 지랄을 해놓던간에 이렇게 통신 패킷 한 번 보면 다 나옵니다.
URLLoader, sendToURL 을 알기 위해 알아야 하는 것
이 강좌를 보는 초보들에게 RFC, TCP 통신을 공부하라고 보여준 것은 아닙니다. 단지, 우리가 흔하게 사용하는 URLLoader, sendToURL 같은 것들을 사용하는데 있어서, 그 아랫단에서는 이런게 돌아간다… 라는걸 먼저 알고 넘어가면 접근을 하는데 있어서 굉장히 마음이 편해지기 때문입니다.
다음 시간부터 URLLoader 나 navigateToURL 같은 내용을 나갈건데, 사실 통신이 어떻게 이루어지는지도 모르는 상태에서 그걸 배우면 장님 코끼리 만지기가 되어버릴 가능성이 높거든요.
"경험보단 원리"
그림이나 글쓰기 같은것이 수준이 높아질수록 상당히 형이상학 적이 되어버리기 일쑤인것과 다르게, 컴퓨터는 굉장히 낮은 수준의 원리로 내려가는 특징이 있습니다. 보다 쉽게 알려면, 보다 잘 알려면 보다 낮은걸 추구하려는 자세가 필요합니다. 이것은 이 강좌를 보는 디자이너들의 형이상학 추구적 개념과는 다르죠… 보다 높이 올라가기 위해서 높은 정신을 추구하려 하는것이 보통 일반적인 인간의 사고방식인데 프로그래밍은 거꾸로인 경우가 상당히 많으니까요. 그리고, 그런 사고방식의 차이를 이해하지 못함이 디자이너들이 중간에 "이건 뭐신지 하나도 모르겄어…" 라면서 프로그래밍을 포기하게 되는 주요한 이유가 되곤 합니다. (올라가는데 익숙해진 사람들에겐 원리로 내려가는 흐름은 쉬이 받아들이기 힘들죠…)
오늘 내용을 통해서 알려드리려 하는것은 간단합니다. 매트릭스의 장면을 실제로 눈에 보여드리려는 거죠. 눈으로 확인하면 마음은 가벼워지니깐요. ^^ 귀신도 눈에 빤히 보이면 무섭지 않잖아요. 앞으로 나아가는데 방해가 되는것은 실력보단 공포인 경우가 많고, 그 공포는 무지에서 오니까요…
가끔씩은 이 내용을 생각하면서, "내가 보는 인터넷이 그런 문자들이 왔다갔다 한다…" 라는것을 생각해보세요. (뭐 심하게 내려가서 0 과 1 까지 생각할 필요는 없습니다…;;;)
이 내용은 http://ssen.name/recipe 에서도 볼 수 있습니다.
