이명헌 경영 스쿨
HOME | TEXTBOOK | ARTICLE | CULTURE | TECH | FORUM | LIST | @ | JOIN |
[인터넷] 쿠키 (Cookie)
사용자 하드디스크를 이용하자
이명헌 / 2001-12-18 /
CCL문서출처: 이명헌 경영스쿨 http://www.emh.co.kr/xhtml/cookies.html
이 문서를 게시하거나 프린트하려면 위 문서출처를 반드시 포함해야 합니다.

쿠키(Cookie)란?

Cookie쿠키(Cookies)는 웹 싸이트를 만드는 쪽에서 사용자와 관련된 정보를 사용자의 하드디스크에 저장해 둔 것을 뜻합니다. 여기서 주의할 단어는 '하드디스크'입니다. 사용자의 하드디스크에 작은 텍스트 파일로 저장을 해두기 때문에 사용자가 컴퓨터를 껐다가 켜더라도 언제든지 하드디스크에 저장된 쿠키 파일을 읽어와서 거기에 기록해 놓은 내용을 활용할 수가 있습니다.

그렇다면 왜 다른 곳도 아닌 사용자의 하드디스크에 정보를 저장할까요?
그것은 HTTP 프로토콜이 'stateless' 프로토콜이기 때문입니다. http로 나누는 대화에서 설명한 것처럼, 웹 브라우져가 웹 써버에 접속을 해서 어떤 문서나 파일을 요청하면 웹 써버는 요청 받은 내용을 보내준 다음 접속을 끊습니다. 즉, 접속을 한 '상태(state)'가 지속되지 않고 요청된 것만 처리한 뒤 연결을 끊는 거죠. 그러므로 웹 서버는 일단 요청된 내용들을 클라이언트에 보내고 나면 그 뒤 사용자가 접속을 하고 있는지 어떤지 알 수가 없습니다. 나아가, 예전에 접속했던 클라이언트가 또 접속을 한 것인지 아닌지 등은 더더욱 알 수 없습니다. 그런데 웹 싸이트를 운용하는 측에서는 어떤 사용자가 다시 방문을 했는지와 같은 정보가 절실히 필요했고 바로 이런 점을 해결하기 위해, 즉 stateless한 http의 특징을 커버하기 위해 등장한 아이디어가 쿠키(Cookie)입니다.

쿠키의 아이디어는 간단합니다. 접속한 클라이언트의 하드디스크에 적당한 정보를 저장해 둠으로써 또 그 클라이언트가 접속한 경우 언제든지 하드디스크에 저장된 정보를 읽어 들여서 그 사용자를 인식할 수 있는 것입니다. '상태'에 관한 점검을 언제든지 할 수 있는 것이죠.

쿠키에 저장되는 내용은 천차만별입니다. 간단하게는, 사용자가 어떤 페이지를 읽었고, 로그인 아이디가 뭐고, 이메일 주소가 뭐고 등을 기록할 수도 있고, 사용자가 어떤 물품을 주문했는지, ip 주소가 뭐고, 어떤 싸이트를 거쳐서 우리 싸이트로 왔는지, 또는 서버에서 각 클라이언트를 식별할 특별한 정보를 기록하는 등, 거의 모든 형태의 정보를 저장할 수 있습니다. 사용자 처지에서는 사실 기분나쁠 수 있습니다. 나도 모르게 나의 행동이 하나하나 기록되어 '파일'로 저장되고 있고, 그 파일이 다른 곳도 아닌 '내' 컴퓨터에 나도 모르게 저장된다는 것은 별로 좋은 느낌은 아니죠.

쿠키 파일은 사용자가 컴퓨터를 끄든 켜든 하드디스크에 (상당 기간) 저장되어 있기 때문에, 언제든지 사용자가 다시 어떤 웹 싸이트에 접속하면 쿠키에 저장해 놓은 정보를 읽어 들여서 여러 형태의 '맞춤화된' 서비스를 제공할 수 있습니다. 이를 테면, 로그인을 한 번만 하면 그 다음부터 안 해도 된다든지, 어떤 페이지를 "몇 번 보셨군요" 라고 알려준다든지 등이 가능합니다.

쿠키의 이런 독특한 점은 결국 개인 정보 유출에 관한 문제를 불러 일으킵니다. 왜냐하면, 사용자 하드디스크에 그 사용자가 어떤 식으로 웹 써핑을 하고 있는지, 어떤 물건을 구입했는지, 이메일 주소는 무엇인지 등의 개인정보까지 저장될 수도 있기 때문에 누군가 악한 마음을 품고 쿠키를 뒤지면 민감한 정보가 유출될 수도 있을 것이기 때문입니다.

그래서 웹 브라우져에는 대개 쿠키를 항상 받아들일 것이냐, 아니면 매번 대화상자를 띄워서 물어보길 원하느냐, 그렇지 않으면 쿠키를 절대 받아들이지 않느냐를 선택하는 부분이 있습니다만, 불행히도 기본 설정은 모든 쿠키를 다 받아들이는 것으로 되어 있고, 또, 대개의 엔드유져는 쿠키란 것이 있는지도 모른 채 자기 정보를 하드 디스크에 저장을 하고 있습니다. 게다가, 쿠키를 꺼놓으면 싸이트 내용을 보는데 지장을 초래하게 하는 싸이트도 아주 많구요.

그렇다면 쿠키는 어디 있을까요?
windows 2000 유져는 C: 안의 "Documents and Settings" 폴더 속에 들어 있는 자기 폴더(로그인 유져 폴더) 안에 보면, "Cookies"라는 폴더가 있습니다. 열어 보면 이상한 .txt 파일들이 많이 들어 있습니다. 윈98 은.. 잘 생각이 안 나는데, 아마 C:의 System 폴더인가, System32이던가에 "Cookies" 폴더가 있을 것입니다.

이 쿠키 파일들은 인터넷 익스플로러에서 지울 수 있습니다.
[도구] --> [인터넷옵션] 메뉴를 선택해보면 아래 그림처럼 쿠키를 지울 수 있는 부분이 나옵니다.

remove cookies

이제 쿠키를 실제 어떻게 만드는지, 자바스크립트 예제를 통해 알아봅시다.

자바스크립트를 이용한 쿠키 만들기

쿠키를 기록하고 읽는 것은 서버 측에서 할 수도 있고 클라이언트 측에서 할 수도 있습니다. 서버 쪽에서 한다면 펄이나 PHP, ASP 같은 server-side scripting 언어를 이용해서 http의 헤더를 통해 쿠키를 기록합니다. 클라이언트 쪽에서 한다면 자바스크립트를 이용해서 만듭니다. 이 글에서는 자바스크립트를 이용한 것을 다룹니다.

문자열 처리

쿠키를 만드려면 문자열 처리와 관련된 내용을 조금 알아야 합니다. 필요한 내용은 indexOf()의 활용, 그리고 split()의 활용입니다.
indexOf() 는 괄호안의 문자가 어떤 문자열의 몇 번째에 나오는가를 알려주는 함수입니다. 예를 들어,

var name="myonghon";
 var position1 = name.indexOf("m");

이 경우 position1 변수에는 0이 담깁니다.
(m이 myonghon이라는 문자열의 첫번째자리에 나오므로 0입니다. 컴퓨터는 0부터 셉니다)
같은 식으로,

var position2 = name.indexOf("g");

의 경우엔 position2 변수에 4가 담깁니다.

"m"처럼 한 자가 아니라 한 단어를 입력하는 경우 그 단어 첫글자의 위치를 리턴합니다. 예를 들어,

var positon3 = name.indexOf("hon");

의 경우 position3 변수에는 5가 담깁니다.

만약 찾는 문자가 없으면 -1을 리턴 합니다.
어떤 문자열에 특정 문자가 있는지 없는지 알아볼 때 사용할 수 있습니다. 

var address ='';
 while (address.indexOf("@") == -1) {address = prompt("이메일 주소는요?", "")};

위와 같이 하면, @가 들어간 내용을 입력할때까지 계속 이메일 주소를 묻습니다. 물론, 이메일 주소의 유효성 확인은 위와 같이 간단히 되는 것이 아닙니다. 사실은 엄청나게 복잡합니다. ^_^

그 다음, split()은 어떤 문자열을 split() 괄호 안에 들어있는 것을 기준으로 쪼개서 그 결과를 배열로 리턴하는 겁니다.

var name="george&paul&john&lingo";
 var beatle = name.split("&");

라고 하면, beatle[0]에는 george가, beatle[1]에는 paul이, beatle[2]에는 john이 들어 가게 됩니다.
쉽죠?

이제 도구는 다 갖췄으니, 쿠키를 공략해 봅시다. 쿠키를 만드는 건 정말 쉽습니다.

쿠키 굽기

복잡하게 들어가면 많은 내용이 있지만, 이 글에서 필요한 내용에 해당하는 부분은 정말 간단합니다. 쿠키는 다음과 같은 형태를 갖는 문자열에 다름 아닙니다.

쿠키이름 = 쿠키값

쿠키 이름은 우리 마음대로 정하면 됩니다. 쿠키 값은 콤마, 콜론, 공백, 세미콜론이 오면 안된다는 규칙만 지키면 됩니다. 콜론이나 공백은 escape() 함수를 이용하면 적절한 형태로 변형됩니다.

이렇게 쿠키 이름에 쿠키 값을 할당한 다음,

document.cookie=쿠키이름;

이렇게만 하면 그 html 문서에 해당하는 쿠키가 셋팅됩니다.


 <head>
 <script name="javascript">
 function readCookie() {
 var cookie2 = document.cookie;
 my_cookie = unescape(cookie2);
 var cookie_value = my_cookie.split(":");
 var name2 = cookie_value[1];
 alert("당신이름은 " + name2 + "이군요");
 }
 </script>
 </head>
 <body onload="readCookie()">

setCookie 함수의 두번째줄은 이름을 묻는 대화상자를 띄워주는 것입니다. 예를 들어 myonghon이라고 입력했다면, 그 다음 줄은 my_cookie라는 변수에 cookie1=name%3myonghon이라고 저장하게 됩니다. name:myonghon이라는 문자열이 escape() 함수에 의해서 name%3myonghon으로 바뀌는 겁니다. escape() 함수가 콜론을 "%3"으로 바꾼 것입니다. 그런데, 이런 건 전혀 신경쓸 필요없습니다. 그냥 콜론이나 공백 등이 들어가 있는 문자열은 escape() 함수에다가 넣어 줘야 쿠키에 저장된다는 것만 기억하면 됩니다.

그 다음 줄은 my_cookie를 그 문서의 쿠키로 지정하라는 내용입니다.

<body> 테그에는 onload="setCookie()" 를 넣어서, 그 페이지가 로딩되면서 자동으로 setCookie() 함수가 호출되도록 하면 됩니다.

다 입력했으면 이 html 문서를 웹 브라우져에서 불러보세요.
이름을 묻는 대화상자가 뜰 겁니다. 예를 들어 "myonghon"이라고 입력을 하게 되면,
쿠키 파일에는 cookie1=name%3myonghon이라고 저장하게 됩니다.
cookie1은 쿠키 이름, = 다음 부분은 쿠키 값입니다.

이제 이 쿠키가 정말로 저장되었는지 확인해 봅시다. 쿠키를 읽어 들이는 것도 굉장히 간단합니다. 위에서 했던 과정을 반대로 하면 됩니다.

쿠키 읽기

새로 html 문서를 하나 열고 다음과 같이 입력해 보세요.


 <head>
 <script name="javascript">
 function readCookie() {
 var cookie2 = document.cookie;
 my_cookie = unescape(cookie2);
 var cookie_value = my_cookie.split(":");
 var name2 = cookie_value[1];
 alert("당신이름은 " + name2 + "이군요");
 }
 </script>
 </head>
 <body onload="readCookie()">

함수의 두 번째 줄은 쿠키를 읽어 들여서 cookie2라는 변수에 할당합니다. 아까 저장했던 my_cookie 안에 담겨있던 쿠키 값, name%3myonghon이 cookie2 변수에 담기게 됩니다.
세 번째 줄은 escape()를 통해서 변환했던 공백이나 콜론 등을 다시 원상태로 (%3-->:) 되돌립니다. unescape()이므로 escape()의 반대입니다. (그런데, "unescape"란 영어 단어는 없습니다. ;-)

네 번째 줄은 원상태로 되돌려놓은 값을 ":"을 중심으로 나누고(split)
그 다음 줄에서는 나눈 값 중에 2번째 값, 즉 콜론 다음값 (myonghon)을 name2 변수에 담습니다.
마지막 줄은 name2에 있는 이름을 이용해서 경고 상자를 띄웁니다.

역시 처음 예와 마찬가지로, <body> 테그에는 onload="setCookie()" 를 넣어서, 그 페이지가 로딩되면서 자동으로 readCookie() 함수가 호출되도록 하면 됩니다.

이 스크립트를 입력한 html 문서를 웹브라우져에서 보세요.
경고 상자가 뜨면서 위에서 입력한 이름이 보이죠?

쿠키 관련 라이브러리

라이브러리씩이나 되지는 않지만 쿠키를 만들고 읽을 때 자주 쓰이는 루틴이 있습니다. 많은 싸이트가 이 루틴을 카피해서 사용하고 있습니다. 어떻게 이뤄진 것인지 하나하나 설명하겠습니다.

먼저 쿠키를 세팅하는 루틴부터 봅시다.
쿠키 이름과 값만 세팅하는 경우는 앞에서 본 것처럼 escape() 함수와 document.cookie만 활용하면 간단하게 할 수 있습니다. 그런데 그건 제일 간단한 쿠키일 때의 이야기이고, 사실은 쿠키는 여러 가지 조건과 함께 셋팅할 수 있습니다. 제일 대표적인 것이 쿠키를 '언제까지 저장할 것인가'입니다.

쿠키는 사용자 하드디스크에 저장된다고 했습니다. 그런데, 아무 값도 할당하지 않고 쿠키 이름과 쿠키 값만을 세팅하면 그 쿠키는 하드디스크에 실제로 저장되지는 않고 웹 브라우져 창을 닫음과 동시에 사라지게 됩니다.(이런 것을 쿠키가 그 '세션에서만 유효하다'라고 합니다.) 만약 쿠키를 실제로 하드디스크에 저장하고 싶다면 name=value 다음에 세미콜론을 쓰고, expires=란 것을 붙여 줘야 합니다. (name=value;expires=)
이때 expires= 다음에 써 주는 시간은 반드시 표준화된 시간, 즉 GMT로 바꿔야 합니다. 그럴 때 사용하는 것이 toGMTString()이라는 함수입니다.

예를 들어 지금 현재 시간을 GMT 형식으로 출력하려면,

var today = new Date();
var mytime = today.toGMTString();
document.writeln(mytime);

이렇게 하면 7 Jan 2002 13:40:12 UTC라고 출력됩니다. 바로 이런 것이 GMT 형식입니다.

'지금으로부터 얼마 뒤'를 계산하려면 모두 다 "초"로 고치는것이 좋습니다. 이 때 주로 밀리세컨드(즉, 천분의 일초)를 사용합니다. 이렇게 날짜(Date)를 밀리세컨드로 바꿔 주는 함수가 getTime() 함수입니다. 다음 코드를 보세요.


var today = new Date();
var millisec = today.getTime();
document.writeln(millisec);

지금 시간을 해 보니까 1010410299350이군요. 그러면 지금으로부터 28일 뒤는 어떻게 될까요? 

(today.getTime() + 28 * 24 * 60 * 60 * 1000);

이것을 Date() 함수에 (엄밀하게 얘기하자면 Date() 객체에) 넣어 주면 다시 날짜로 바꿉니다.

이제 쿠키를 세팅해 봅시다. 쿠키세팅 함수는 setCookie() 이고, 퍼래미터는 name과 value, expires입니다.


  var today = new Date();
  var expiry = new Date(today.getTime() + 28 * 24 * 60 * 60 * 1000); 
  function setCookie(name, value, expires) {
	document.cookie=name + "=" + escape(value) + 
	((expires)? "; expires=" + expiry.toGMTString() : ""); 
   }

쉽게 이해가 되죠? expires? a : b는 전달받은 퍼래미터에 expires 항목이 있으면 a, 없으면 b를 택한다는 의미입니다. 위의 경우 expires 항목이 있으면 ;expires=날짜를 쿠키 값 뒤에 붙여 주고, 없으면 "", 아무 것도 안 붙이는 겁니다.

쿠키 읽어들이기

먼저 약간의 설명이 필요합니다. 앞에서 얘기한 문자열 관련 함수 중에는 substr()이란 것이 있습니다. 이렇게 사용합니다.


var myname = "paul gilbert";
var a = myname.substr(0,4);

이렇게 하면 a에는 paul이 담깁니다. 즉 substr(a,b) 라고 하면, 어떤 문자열의 a 번째 위치에서부터 b개를 세서 리턴합니다. 위의 경우 첫 글자부터 4글자를 세서 리턴합니다. 문자열을 셀 때는 0부터 센다는 것에 주의하세요.

indexOf를 조금 더 확장해 볼까요? indexOf("a",3)이라고 하면 어떤 문자열에서 a를 찾아서 위치를 돌려 주되, 3번째 글자부터 찾는다는 의미입니다.

length는 이름 그대로입니다. 글자 수를 세서 리턴합니다. 예를 들어 위에서 a.length는 4를 리턴합니다. 정리하는 의미에서 예를 하나 들어볼까요?


var wb = "webbiz";
var b = wb.length;

b에는 6이 담깁니다.

자, 이제 쿠키를 읽는 루틴을 봅시다. 이렇게 생겼습니다.

function getCookie(name) {
		var index = document.cookie.indexOf(name + "=");
		if (index == -1) return null;
			index = document.cookie.indexOf("=", index) + 1;
			var endstr = document.cookie.indexOf(";", index);
		if (endstr == -1) endstr = document.cookie.length;
			return unescape(document.cookie.substring(index, endstr));
  }

복잡해 보이나요?
이 함수는 쿠키 이름(name)을 던져 주면 쿠키 값(value)을 리턴하는 함수입니다. 개략적으로 설명해 보면, name= 다음 글자에서 부터 맨 마지막 글자까지(즉 쿠키 value)를 뽑아서 리턴하는 것입니다. 따라서 name= 다음 글자 위치와 맨 마지막 글자 위치를 알아낸 다음 substr()을 이용해서 값 부분만 추출하면 됩니다.

  1. 첫 줄은 쿠키 이름을 받아 들이는 것입니다.
  2. 그 다음 줄은 쿠키를 읽어서 그 중에 name=이라는 문자열의 첫 글자가 몇 번째에 나오는가를 세서 그 값을 index에 담습니다. document.cookie는 쿠키를 읽어들이는 것이라고 했죠?
  3. 그 다음 줄, index가 -1 즉, name=이라는 문자열이 쿠키에 없는 경우는 그 이름에 해당하는 쿠키가 없는거니까 null을 리턴합니다.
  4. 그 다음 줄은 name= 다음 문자의 위치를 index 값에 할당합니다. name= 다음 값은 그 이름에 해당하는 쿠키 값(value)의 시작 위치입니다. 생각 나죠? 쿠키는 name=value;의 형태로 되어 있다고 했습니다.
  5. 그 다음 줄은 쿠키 값의 마지막 위치인 ;을 찾아서 그 위치를 endstr이라는 변수에 할당한다는 의미입니다. 즉, document.cookie 의 마지막 위치를 endstr이라는 값에다 담는 것입니다.
    indexOf(";",index)의 의미는 ;의 위치를 찾되, index 값의 위치에서부터 찾아라는 의미입니다 그리고 현재 index 값은 = 다음 값(즉, 쿠키 value)의 첫 글자 위치입니다.
  6. 그 다 음줄은 세미콜론이 안 나온 경우에 읽어 들인 쿠키의 길이를 endstr에 할당하는 것입니다.
  7. 마지막 줄은 document.cookie를 index에서부터 세서 endstr개만큼 추?란 뒤, 그것을 unescape()하는 것입니다.

한 가지 주의할 점이 있습니다. 세미콜론이 있는 경우는 0부터 세니까 [글자수 -1]개를 뽑아내게 되고, 세미콜론이 없는 경우는 글자 수만큼 뽑아 내니까 결국에는 세미콜론이 나오기 전까지의 문자열만 substr하는 게 됩니다.(즉, 세미콜론 앞의 쿠키 value만 뽑아내는 것이죠)

그러면 counter라는 이름의 쿠키를 이용해서 페이지 방문횟수를 계산해 봅시다. 다음과 같이 하면 됩니다.

var visits = getCookie("counter");
// counter 라는 쿠키가 있으면 그 값을 꺼내서 visits 에 담아라는 얘기 입니다
if (!visits) { // 만약 visits 가 거짓이라면, 즉 counter 라는 쿠키가 없다면
   visits = 1; // visits 를 1 로 세팅하고
   document.write("이 페이지에 처음 오셨군요");
} else {
  // visits 값이 있다면 1 을 증가시킵니다
   visits = parseInt(visits) + 1; } // parseInt() 는 정수로 바꿔주는 함수..
document.write("이 페이지에 " + visits + "번째군요!");
setCookie("counter", visits, today); 
// 다시 counter 쿠키에 visits 값을 할당한 뒤 쿠키세팅

한 번 테스트 해볼까요?

현재 페이지를 다시보기(F5 또는 CTRL-R) 해 보면 위 숫자가 하나씩 올라 가는 것을 확인할 수 있습니다. 그리고 쿠키가 저장되는 디렉토리에 가보면 이 싸이트에서 저장한 counter 쿠키를 확인할 수 있습니다. :-P

즉시 활용할 수 있도록 소스를 정리해 봅니다.


<script language="javascript">
<!--
  function getCookie(name) { 
    var index = document.cookie.indexOf(name + "=");
    if (index == -1) return null;
    index = document.cookie.indexOf("=", index) + 1;
    var endstr = document.cookie.indexOf(";", index);
    if (endstr == -1) endstr = document.cookie.length;
    return unescape(document.cookie.substring(index, endstr));
  }

  var today = new Date();
  var expiry = new Date(today.getTime() + 28 * 24 * 60 * 60 * 1000);

  function setCookie(name, value, expires) {
      document.cookie = name + "=" + escape(value) + 
	  ((expires)? "; expires=" + expiry.toGMTString() : "");
  }
var visits = getCookie("counter");
if (!visits) {
  visits = 1;
  document.write("<p><font color=#990099>이 페이지에 처음 오셨군요</font>");
} else {
  visits = parseInt(visits) + 1;
  document.write("<p><font color=#990099>여기에 " + visits + " 번째시군요</font>");}
setCookie("counter", visits, today);

//-->
</script>
RELATED TOPICS:
[펄] CGI의 의미 및 펄을 이용한 간단한 CGI 개발
지금 계신 곳은: TECH > [인터넷] 쿠키 (Cookie)
HOME | TEXTBOOK | ARTICLE | CULTURE | TECH | FORUM | LIST | @ | JOIN |
CCL
© Copyright 1999-2010 www.emh.co.kr
본 싸이트의 자세한 저작권 정책은 Creative Commons License를 참조하세요.
이 싸이트의 문서를 출처와 저자 표기 없이 무단으로 사용하는 경우 저작권법에 저촉됩니다.