“Cookies”, 로그인은 어떻게 기억할까?

들어가며

웹사이트에 로그인하고 브라우저를 닫았다가 다시 접속했는데도 로그인이 유지되는 경우가 있습니다.

분명히 웹페이지를 닫았는데 사이트는 내가 누구인지 알고 있습니다.

그렇다면 웹사이트는 사용자를 어떻게 기억하고 있는 걸까요?

이때 자주 등장하는 것이 바로 Cookie(쿠키)입니다.

개발자 입장에서 Cookies는 단순히 “브라우저에 저장되는 작은 데이터” 정도로만 알고 넘어가기에는 꽤 중요한 기능입니다.

특히 로그인 상태, 사용자 설정, 세션 관리, 쇼핑몰 장바구니 등 웹사이트를 만들다 보면 Cookies를 접할 일이 많습니다.

그리고 크롬 개발자 도구를 사용하면 현재 웹사이트가 어떤 Cookie를 저장하고 있는지 직접 확인할 수 있습니다.

오늘은 개발자 도구에서 Cookies를 확인하는 방법부터 각각의 옵션이 어떤 의미를 갖는지, 그리고 Local Storage나 Session Storage와는 무엇이 다른지 하나씩 알아보겠습니다.

Cookie란 무엇일까?

Cookie는 웹사이트가 사용자의 브라우저에 저장해두는 작은 데이터입니다.

웹사이트와 브라우저가 서로 정보를 주고받을 때 사용되며, 특정 상태를 유지하는 데 많이 활용됩니다.

예를 들어 로그인을 했다고 생각해보겠습니다.

로그인 요청이 정상적으로 처리된 뒤 서버가 사용자의 브라우저에 특정 Cookie를 저장하도록 할 수 있습니다.

그 이후 브라우저가 서버에 요청을 보낼 때 해당 Cookie가 함께 전달되면서 서버가 사용자의 상태를 확인할 수 있습니다.

개념적으로 보면 이런 흐름입니다.

사용자
 ↓
로그인 요청
 ↓
서버에서 인증 처리
 ↓
Cookie 설정
 ↓
브라우저에 저장
 ↓
이후 서버 요청에 Cookie 전달
 ↓
서버가 사용자 상태 확인

물론 실제 로그인 시스템은 사용하는 인증 방식이나 프레임워크에 따라 훨씬 복잡할 수 있습니다.

그래도 “브라우저와 서버 사이에서 상태를 유지하는 데 Cookie가 사용될 수 있다” 정도로 이해하면 기본 개념을 잡는 데 도움이 됩니다.

개발자 도구에서 Cookies 확인하기

크롬에서 웹사이트를 열고 F12를 누르면 개발자 도구를 열 수 있습니다.

상단 메뉴에서 Application 탭으로 이동합니다.

왼쪽 메뉴를 보면 Storage 영역이 있습니다.

그 안에 Cookies라는 항목이 보입니다.

Cookies를 펼치면 현재 웹사이트와 관련된 도메인이 표시됩니다.

해당 도메인을 선택하면 오른쪽 화면에 저장되어 있는 Cookie 목록이 나타납니다.

보통 다음과 같은 정보를 확인할 수 있습니다.

Name
Value
Domain
Path
Expires / Max-Age
Size
HttpOnly
Secure
SameSite

처음 보면 항목이 많아서 복잡해 보일 수 있습니다.

하지만 몇 가지 핵심 항목만 이해해도 개발자 도구에서 Cookie를 확인하는 데 상당히 익숙해질 수 있습니다.

Name과 Value는 무엇일까?

가장 먼저 볼 수 있는 것이 Name과 Value입니다.

Cookie도 기본적으로 이름과 값의 형태로 데이터를 관리합니다.

예를 들어 다음과 같은 Cookie가 있다고 해보겠습니다.

theme = dark

여기서 theme이 Name이고 dark가 Value입니다.

JavaScript에서는 다음과 같은 방식으로 Cookie를 다룰 수도 있습니다.

document.cookie

그러면 현재 페이지에서 접근 가능한 Cookie 정보가 문자열 형태로 반환됩니다.

다만 개발자 도구의 Cookies 화면에서는 각각의 항목을 좀 더 보기 쉽게 확인할 수 있습니다.

개발 중 특정 값이 제대로 저장되고 있는지 확인할 때 유용합니다.

Domain은 왜 있을까?

Domain은 해당 Cookie가 어느 도메인에 적용되는지를 나타냅니다.

예를 들어 특정 웹사이트에서 생성한 Cookie라면 해당 사이트의 도메인과 연결되어 있을 수 있습니다.

이 설정에 따라 어떤 요청에서 Cookie가 전송될 수 있는지가 달라집니다.

개발하다 보면 “Cookie를 저장했는데 다른 페이지에서는 왜 보이지 않지?” 같은 문제가 발생할 수 있습니다.

이럴 때 Domain과 Path 설정을 확인해보는 것이 좋습니다.

특히 여러 개의 서브도메인을 사용하는 서비스라면 Cookie의 적용 범위를 정확하게 이해하는 것이 중요합니다.

Path도 확인해야 한다

Path는 Cookie가 적용되는 URL 경로를 지정합니다.

예를 들어 특정 경로에서만 사용하도록 설정된 Cookie라면 사이트 전체에서 동일하게 동작하지 않을 수 있습니다.

개발자 도구에서 Cookie가 존재하는 것을 확인했는데 특정 페이지에서는 동작하지 않는다면 Domain뿐만 아니라 Path도 확인해야 합니다.

Cookie 문제를 찾을 때 생각보다 자주 확인하게 되는 항목입니다.

Expires와 Max-Age

Cookie에는 유지 기간과 관련된 설정도 있습니다.

개발자 도구에서 Expires / Max-Age 항목을 확인하면 해당 Cookie가 언제까지 유지되는지 확인할 수 있습니다.

여기에서 중요한 개념이 Session Cookie입니다.

만료 시간이 별도로 지정되지 않은 Cookie는 세션 Cookie로 동작할 수 있습니다.

반면 만료 시간이 설정된 Cookie는 지정된 기간까지 유지될 수 있습니다.

따라서 “브라우저를 종료했는데 왜 Cookie가 없어졌지?” 또는 반대로 “브라우저를 다시 열었는데 왜 Cookie가 그대로 남아 있지?” 같은 상황을 확인할 때 이 부분을 살펴보면 됩니다.

HttpOnly는 꼭 알아두자

Cookie를 공부하면서 개인적으로 가장 중요하게 봐야 할 옵션 중 하나가 HttpOnly입니다.

HttpOnly가 설정된 Cookie는 일반적인 JavaScript 코드에서 직접 접근할 수 없도록 제한됩니다.

예를 들어 개발자 도구의 Cookies 목록에는 Cookie가 보이는데

document.cookie

에서는 해당 Cookie가 나타나지 않는 경우가 있습니다.

이때 HttpOnly 설정을 확인해볼 수 있습니다.

특히 인증과 관련된 Cookie에서 자주 볼 수 있는 옵션입니다.

다만 HttpOnly라고 해서 Cookie 자체가 모든 보안 문제에서 안전해지는 것은 아닙니다.

Cookie의 보안은 여러 설정과 서버 측 구현이 함께 고려되어야 합니다.

Secure 옵션은 무엇일까?

Secure는 Cookie가 HTTPS와 같은 보안 연결을 통해 전송되도록 제한하는 데 사용됩니다.

개발자 도구에서 Secure 항목에 체크되어 있는 Cookie를 볼 수 있습니다.

실제 운영 환경에서 로그인이나 인증과 관련된 Cookie를 다룬다면 HTTPS와 Cookie 보안 설정을 함께 살펴보는 것이 중요합니다.

개발 환경에서는 HTTP로 테스트하다가 운영 환경에서는 HTTPS를 사용하는 경우도 있기 때문에 환경이 달라졌을 때 Cookie가 예상대로 동작하는지 확인해야 합니다.

SameSite도 알아두면 좋다

SameSite는 Cookie가 다른 사이트에서 발생하는 요청과 관련해 어떻게 전송될지를 제어하는 데 사용되는 설정입니다.

개발자 도구에서는 Strict, Lax, None 등의 값을 확인할 수 있습니다.

특히 최근 웹 개발에서는 서로 다른 도메인이나 외부 서비스와 통신하는 과정에서 Cookie가 예상대로 전달되지 않는 문제를 만날 수 있습니다.

“분명 Cookie가 있는데 서버에서는 인증이 안 된다.”

이런 상황이라면 Cookie가 실제 요청에 포함되고 있는지와 함께 SameSite 설정도 확인해볼 필요가 있습니다.

Cookie와 Local Storage는 어떻게 다를까?

Cookie를 공부하다 보면 자연스럽게 Local Storage와 비교하게 됩니다.

둘 다 브라우저에 데이터를 저장한다는 공통점이 있지만 사용 목적에는 차이가 있습니다.

Local Storage는 브라우저에서 데이터를 저장하고 JavaScript를 통해 읽고 쓰는 용도로 많이 사용됩니다.

반면 Cookie는 HTTP 요청과 함께 서버로 전달될 수 있다는 점이 큰 특징입니다.

예를 들어 사용자 화면 설정처럼 브라우저 내부에서만 필요한 데이터라면 Local Storage가 편리할 수 있습니다.

반면 서버가 사용자의 상태를 확인해야 하는 인증 관련 정보에서는 Cookie 기반 방식이 사용될 수 있습니다.

단순히 “Cookie가 더 좋다” 또는 “Local Storage가 더 좋다”라고 생각하기보다는 데이터의 목적과 보안 요구사항에 따라 선택하는 것이 중요합니다.

Session Storage와도 다르다

Session Storage 역시 브라우저에 데이터를 저장하지만 Cookie와는 동작 방식이 다릅니다.

Session Storage는 주로 현재 브라우징 세션에서 필요한 데이터를 저장하는 용도로 사용됩니다.

반면 Cookie는 서버와 통신하는 과정에서 함께 사용될 수 있다는 특징이 있습니다.

개발자 도구에서 보면 세 가지 저장 공간을 한 번에 확인할 수 있기 때문에 각각의 차이를 직접 비교해보는 것도 좋습니다.

Cookies
 └─ 서버와의 HTTP 통신과 상태 유지에 활용

Local Storage
 └─ 브라우저에 비교적 오래 데이터를 저장

Session Storage
 └─ 현재 세션 동안 필요한 데이터 저장

이렇게 역할을 나누어 생각하면 훨씬 이해하기 쉽습니다.

개발할 때 Cookies를 확인해야 하는 순간

실제 개발에서는 Cookie를 언제 확인하게 될까요?

대표적으로 로그인 관련 문제가 발생했을 때입니다.

로그인은 정상적으로 된 것 같은데 새로고침하면 로그아웃되어 있다거나, 특정 페이지에서만 인증이 풀리는 문제가 발생할 수 있습니다.

이럴 때 개발자 도구의 Application → Cookies를 확인하면 저장된 인증 관련 Cookie가 있는지 살펴볼 수 있습니다.

그리고 Network 탭을 함께 확인하면 실제 서버 요청에 Cookie가 포함되어 전송되고 있는지도 확인할 수 있습니다.

즉, Cookie 문제를 확인할 때는

Application → Cookies

그리고

Network → 요청 정보

를 함께 보는 습관을 들이면 좋습니다.

마무리

Cookies는 웹 개발을 처음 시작했을 때는 단순한 저장 기능처럼 보입니다.

하지만 로그인, 인증, 세션, 서버와의 통신을 조금씩 다루다 보면 Cookie가 웹 서비스에서 얼마나 중요한 역할을 하는지 알게 됩니다.

특히 크롬 개발자 도구의 Application → Cookies 화면을 직접 열어보면 지금 보고 있는 웹사이트가 어떤 Cookie를 사용하고 있는지 한눈에 확인할 수 있습니다.

처음에는 Name과 Value만 보다가 Domain, Path, Expires, HttpOnly, Secure, SameSite까지 하나씩 살펴보면 어느 순간 Cookie 설정을 보는 것이 익숙해집니다.

개발 중 로그인 문제가 생겼다면 무작정 코드를 수정하기 전에 개발자 도구부터 열어보는 것도 좋은 방법입니다.

Cookie가 실제로 저장되어 있는지, 만료된 것은 아닌지, 어떤 Domain과 Path가 적용되어 있는지, 보안 옵션은 어떻게 설정되어 있는지를 확인하는 것만으로도 원인을 빠르게 찾을 수 있는 경우가 많습니다.

웹 개발자라면 Console이나 Network뿐만 아니라 Application 탭도 자주 확인하는 습관을 만들어두는 것을 추천합니다.

Cookie를 이해하면 단순히 브라우저 저장소 하나를 배우는 것을 넘어, 웹 브라우저와 서버가 사용자의 상태를 어떻게 주고받는지 이해하는 데도 큰 도움이 됩니다.