웹은 웹브라우저에서 웹사이트로 보내는 모든 요청이 별개로 처리되도록 설계되었습니다. 웹은 설계상 '메모리'가 없습니다. 웹페이지를 열 때마다 방문하는 웹사이트에서 마지막 세션의 정보를 기억할 수 없습니다. 이렇게 하면 요청과 응답을 추적하는 메커니즘이 필요하지 않으므로 웹을 효율적으로 만들 수 있습니다.
하지만 웹의 망각적인 특성도 문제가 됩니다. 예를 들어 사용자가 방문한 웹사이트에서 사용자가 장바구니에 넣은 항목을 기억하지 못하면 장바구니가 어떻게 작동할 수 있을까요?
쿠키는 이 문제를 해결하기 위해 발명되었습니다.
쿠키는 웹사이트에 메모리를 제공합니다.
웹사이트의 페이지를 방문하면 웹브라우저에서 HTML, CSS, JavaScript, 이미지 등 페이지에 포함된 리소스를 웹사이트 서버에 요청합니다.
웹브라우저와 웹사이트는 HTTP 프로토콜을 따라 상호작용합니다. 이는 커뮤니케이션을 위한 표준화된 규칙 세트입니다.
리소스에 대한 HTTP 요청에 대한 응답으로 웹사이트 서버는 리소스 자체와 함께 헤더라는 추가 정보를 포함할 수 있습니다. HTTP 응답에 포함된 Set-Cookie 헤더는 브라우저에 이름과 값이라는 텍스트를 저장하도록 지시합니다. 이를 쿠키라고 합니다. 예를 들어 응답 헤더 Set-Cookie: cat=tabby는 브라우저에 이름이 'cat'이고 값이 'tabby'인 쿠키를 저장하도록 지시합니다.
이 쿠키가 설정되면 브라우저에서 웹사이트로 보내는 후속 요청에는 Cookie: cat=tabby 헤더가 포함됩니다. 웹사이트의 서버는 요청 헤더에서 쿠키에 액세스하여 값을 사용할 수 있습니다.
쿠키 작동 방식: 단계별
cats.example 웹사이트를 방문한다고 가정해 보겠습니다. 사이트에서 무작위 고양이 이미지를 표시하고 사용자에게 표시된 고양이를 기록하려고 합니다.
다음 단계에서는 쿠키를 사용하여 이를 수행하는 방법을 설명합니다.
1. 브라우저가 파일을 요청함
웹사이트 cats.example의 홈페이지를 방문합니다.
브라우저가 홈페이지 HTML을 처리하면 cats.example에서 cat.jpg를 비롯한 페이지의 파일을 요청합니다.
2. 웹사이트 서버가 응답함
cats.example의 서버가 이미지 파일 cat.jpg로 응답합니다.
서버는 응답과 함께 Set-Cookie: cat=tabby 헤더를 포함합니다.
3. 브라우저가 응답을 수신함
브라우저가 이미지 파일을 수신하고 이미지 파일에 포함된 Set-Cookie: cat=tabby 헤더를 처리합니다.
쿠키가 저장됩니다(이름 cat, 값 tabby).
4. 브라우저에서 추가 요청을 보냄
이제 브라우저가 cats.example에 대한 요청에 Cookie: cat=tabby 헤더를 포함합니다.
cats.example 웹 서버가 요청을 받으면 쿠키를 처리하고 해당 값으로 원하는 작업을 할 수 있습니다. 예를 들어 동일한 얼룩무늬 고양이 이미지를 다시 보내지 않도록 할 수 있습니다.
전체 쿠키 프로세스는 다음과 같습니다.
- 브라우저가 웹사이트 서버에 파일을 요청합니다.
- 서버는 요청에 대한 응답으로 전송하는 파일에
Set-Cookie: cat=tabby과 같은 헤더를 포함할 수 있습니다. - 브라우저가 응답을 수신하면 쿠키를 저장합니다.
- 후속 요청마다 브라우저가
Cookie: cat=tabby헤더에 쿠키를 서버로 전송합니다.
JavaScript로 쿠키 액세스
이전 예에서는 Set-Cookie 응답 헤더를 사용하여 쿠키를 설정합니다.
document.cookie 메서드를 사용하여 JavaScript로 쿠키를 만들 수도 있습니다.
데모를 사용해 보세요(javascript-cookie.glitch.me).
자세히 알아보기: 문서: 쿠키 속성
쿠키가 필요한 이유는 무엇인가요?
1994년 엔지니어 루 몬툴리는 소프트웨어 회사 넷스케이프에서 근무했습니다. 넷스케이프는 1990년대 중반 가장 인기 있는 웹브라우저를 구축했습니다.
한편 통신 회사인 MCI는 세계 최초 온라인 상점 중 한 곳을 위한 장바구니를 구축하려고 했습니다. MCI는 Montulli에게 연락하여 문제를 설명했습니다. Montulli는 사이트가 사용자 웹브라우저에 소량의 텍스트, 이름, 값(예: cart-id=123)을 저장할 수 있는 기능을 HTTP에 추가하여 이에 응답했습니다. 그는 이를 '쿠키'라고 불렀습니다. 당시 프로그래머들은 데이터 통신에 포함된 작은 추가 정보를 '매직 쿠키'라고 불렀기 때문입니다.
Montulli는 일주일도 안 돼 HTTP 쿠키 작업을 완료했습니다. 쿠키가 광고, 로그인, 결제, 사기 감지 등 중요한 웹 플랫폼 기능에 필수적인 요소가 될 줄은 몰랐습니다. 쿠키는 겉으로 보기에는 단순한 기술이지만 광범위한 부작용을 일으켰습니다.
쿠키 사용
쿠키를 사용하면 브라우저가 사용자에 관한 소량의 정보를 저장하여 여러 요청에서 무언가를 '기억'할 수 있습니다. 쿠키는 다음과 같은 여러 용도로 사용됩니다.
- 세션 관리
웹사이트가 사용자를 인식하도록 허용합니다(예: 여러 페이지에서 로그인 상태를 유지). - 개인화
언어, 테마, 최근에 본 항목과 같은 사용자 환경설정을 저장하여 웹사이트 환경을 맞춤설정합니다. - 추적
이전에는 쿠키가 타겟팅 광고 및 기타 사용 사례를 위해 웹사이트 전반에서 사용자 행동을 추적하는 데 사용되었습니다.
쿠키는 정보를 직접 저장하는 데 사용되기보다는 식별자에 주로 사용됩니다.
예를 들어 온라인 반려동물 상점의 장바구니 쿠키는 제품을 나열하지 않고, 대신 반려동물 상점이 서버 측 데이터 저장소에서 장바구니에 있는 항목을 조회할 수 있는 계정 ID를 제공합니다.
반려동물 가게 서버에 대한 요청에는 다음과 같은 쿠키 헤더가 포함될 수 있습니다.
Cookie: _cart=CART1.2.34567890.123456789
그러면 서버가 데이터 저장소에서 _cart 계정을 조회하고 요청에 관한 기타 정보를 포함할 수 있습니다.
자세히 알아보기
- 쿠키 속성
- 서드 파티 쿠키란 무엇인가요?
- HTTP 요청 및 응답
- 쿠키 도구
- 쿠키 데모
- HTTP 쿠키 사용
- The Magic Cookie: How Lou Montulli cured the Web's amnesia(마법 쿠키: 루 몬툴리가 웹의 기억상실증을 치료한 방법)
- HTTP 쿠키 (원래 사양)
- HTTP 쿠키 또는 프로토콜을 설계하지 않는 방법