쿠키(Cookie)란? 🍪

웹사이트에 접속하면 "쿠키 사용에 동의하시겠습니까?"라는 메시지를 자주 보게 됩니다. 쿠키가 정확히 무엇이고, 왜 필요한지 초보자도 쉽게 이해할 수 있도록 설명해드릴게요!

쿠키를 일상생활로 비유하면?

쿠키를 영수증으로 비유해볼까요?

카페 영수증 이야기 ☕

첫 방문:
고객: "아메리카노 주세요"
카페: "여기 커피와 영수증이요"
      [영수증: 고객번호 #123, 좋아하는 메뉴: 아메리카노]

다음 방문:
고객: [영수증 보여줌]
카페: "아, #123 고객님! 아메리카노 드릴까요?"

쿠키도 똑같아요!

첫 방문:
브라우저: "이 사이트 처음이에요"
웹사이트: "여기 쿠키 드릴게요"
         [쿠키: 사용자ID, 선호설정 등]

다음 방문:
브라우저: [쿠키 보여줌]
웹사이트: "아, 돌아오셨군요! 로그인 유지할게요"

쿠키의 정의

쿠키 (Cookie)

• 웹사이트가 브라우저에 저장하는 작은 텍스트 파일
• 웹사이트가 당신을 "기억"하는 방법
• 크기: 보통 4KB 이하

쿠키는 어디에 저장될까?

내 컴퓨터/스마트폰
└── 브라우저 (Chrome, Safari 등)
    └── 쿠키 저장소
        ├── google.com 쿠키
        ├── naver.com 쿠키
        └── github.com 쿠키

쿠키가 하는 일

1. 로그인 상태 유지 🔐

쿠키 없이:

1. 로그인
2. 다른 페이지 이동
3. 로그아웃됨... 😭
4. 다시 로그인
5. 또 다른 페이지 이동
6. 또 로그아웃됨... 😭

쿠키 사용:

1. 로그인
2. 쿠키에 로그인 정보 저장
3. 다른 페이지 이동해도 로그인 유지! ✅
4. 브라우저 닫아도 로그인 유지! ✅

2. 장바구니 기억 🛒

쇼핑몰에서:
1. 상품 A를 장바구니에 담음
2. 다른 상품 보러 감
3. 장바구니에 상품 A가 그대로! ✅

3. 개인화 설정 ⚙️

웹사이트 설정:
- 언어: 한국어
- 테마: 다크모드
- 글자 크기: 큼

→ 다음 방문 시 자동 적용! ✅

4. 추적 및 광고 📊

당신이 본 상품:
- 신발 A
- 가방 B

→ 다른 사이트에서 관련 광고 표시

쿠키의 구조

쿠키는 이름=값 형태로 저장돼요:

이름: user_id
값: 12345
도메인: example.com
경로: /
만료일: 2025-12-31
보안: Secure, HttpOnly

실제 쿠키 예시

session_id=abc123xyz; Domain=example.com; Path=/; Expires=Fri, 31 Dec 2025 23:59:59 GMT; Secure; HttpOnly

쿠키의 종류

1. 세션 쿠키 (Session Cookie) 🕐

브라우저를 닫으면 삭제되는 쿠키

생명주기: 브라우저 실행 중에만
용도: 임시 로그인, 장바구니
특징: 만료일 없음

예시:

브라우저 열기 → 쇼핑 → 브라우저 닫기 → 장바구니 비워짐

2. 영구 쿠키 (Persistent Cookie) 📅

지정된 날짜까지 유지되는 쿠키

생명주기: 만료일까지 또는 수동 삭제까지
용도: "로그인 상태 유지", 개인화 설정
특징: 만료일 지정됨

예시:

"로그인 상태 유지" 체크
→ 30일 동안 자동 로그인 ✅

3. 퍼스트파티 쿠키 (First-party Cookie) 🏠

방문한 웹사이트가 직접 만든 쿠키

example.com 방문
→ example.com이 설정한 쿠키
→ example.com에서만 사용

용도:

• 로그인 유지
• 장바구니
• 사이트 설정

4. 서드파티 쿠키 (Third-party Cookie) 🕵️

다른 웹사이트가 만든 쿠키 (주로 광고)

example.com 방문
→ 페이지에 있는 광고 회사 스크립트 실행
→ ads.com이 쿠키 설정
→ 여러 사이트에서 당신 추적

용도:

• 광고 추적
• 사용자 행동 분석
• 맞춤형 광고

Warning

서드파티 쿠키는 프라이버시 문제로 점점 차단되고 있어요! Chrome, Safari 등이 서드파티 쿠키를 차단하는 중입니다.

쿠키 작동 과정

1. 쿠키 설정 (Set-Cookie)

브라우저 → 웹사이트 요청
웹사이트 → 응답 + 쿠키 전송

HTTP Response:
Set-Cookie: user_id=12345; Expires=...

2. 쿠키 저장

브라우저가 쿠키를 저장소에 보관

3. 쿠키 전송

브라우저 → 웹사이트 재요청 + 쿠키 함께 전송

HTTP Request:
Cookie: user_id=12345

4. 쿠키 사용

웹사이트가 쿠키 읽고 사용자 식별
→ "아, 12345번 사용자구나!"

쿠키의 속성

Domain (도메인)

example.com 쿠키는
example.com에서만 사용

Path (경로)

Path=/shop
→ /shop 경로에서만 쿠키 전송

Expires/Max-Age (만료일)

Expires=2025-12-31
→ 이 날짜까지 유지

Max-Age=3600
→ 3600초(1시간) 후 삭제

Secure (보안)

Secure 플래그
→ HTTPS에서만 쿠키 전송
HTTP에서는 전송 안 함

HttpOnly

HttpOnly 플래그
→ JavaScript로 접근 불가
XSS 공격 방어

SameSite

SameSite=Strict
→ 같은 사이트에서만 쿠키 전송
CSRF 공격 방어

쿠키의 장점

✅ 사용자 경험 향상

• 로그인 유지
• 개인화된 콘텐츠
• 편리한 쇼핑

✅ 상태 유지

• HTTP는 상태가 없음 (Stateless)
• 쿠키로 상태 유지 가능

✅ 간단한 구현

• 서버/클라이언트 둘 다 쉽게 사용
• 추가 설정 거의 불필요

쿠키의 단점

❌ 보안 위험

• 탈취 가능성 (XSS, CSRF 공격)
• 민감한 정보 저장 부적합

❌ 프라이버시 문제

• 사용자 추적 가능
• 서드파티 쿠키로 광고 추적

❌ 크기 제한

• 쿠키 하나당 4KB 제한
• 도메인당 쿠키 개수 제한 (보통 20~50개)

❌ 매 요청마다 전송

• 모든 HTTP 요청에 쿠키 포함
• 트래픽 증가

쿠키 vs 로컬 스토리지 vs 세션 스토리지

특징	쿠키	로컬 스토리지	세션 스토리지
크기	4KB	5-10MB	5-10MB
생명주기	만료일 설정	영구	탭 닫으면 삭제
서버 전송	✅ 매번	❌ 전송 안 함	❌ 전송 안 함
접근	서버/JS	JS만	JS만
용도	인증, 추적	대용량 데이터	임시 데이터

언제 무엇을 사용할까?

쿠키: 로그인 토큰, 서버가 알아야 할 정보
로컬 스토리지: 사용자 설정, 오프라인 데이터
세션 스토리지: 임시 폼 데이터, 일회성 정보

쿠키 보안

1. Secure 플래그 사용 🔒

Set-Cookie: token=abc; Secure
→ HTTPS에서만 전송

2. HttpOnly 플래그 사용 🛡️

Set-Cookie: session=xyz; HttpOnly
→ JavaScript 접근 차단
→ XSS 공격 방어

3. SameSite 플래그 사용 🚫

Set-Cookie: id=123; SameSite=Strict
→ CSRF 공격 방어

4. 민감한 정보 저장 금지 ⚠️

❌ 비밀번호
❌ 신용카드 번호
❌ 주민등록번호

✅ 세션 ID (암호화된 토큰)
✅ 사용자 설정

쿠키 관리하기

브라우저에서 쿠키 보기

Chrome:

설정 → 개인정보 보호 및 보안 → 쿠키 및 기타 사이트 데이터
→ 모든 쿠키 및 사이트 데이터 보기

개발자 도구:

F12 → Application 탭 → Storage → Cookies

쿠키 삭제하기

1. 특정 사이트 쿠키만 삭제
2. 모든 쿠키 삭제
3. 쿠키 자동 삭제 설정 (브라우저 종료 시)

JavaScript로 쿠키 다루기

쿠키 설정:

document.cookie = "username=홍길동; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

쿠키 읽기:

console.log(document.cookie);
// "username=홍길동; theme=dark; ..."

쿠키 삭제:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

실제 사용 예시

예시 1: 로그인 유지 🔐

// 로그인 성공 시
Set-Cookie: auth_token=eyJhbGc...;
            Expires=Mon, 31 Jan 2025 23:59:59 GMT;
            Secure;
            HttpOnly;
            SameSite=Strict

// 다음 요청마다 자동으로:
Cookie: auth_token=eyJhbGc...

예시 2: 테마 설정 🎨

// 사용자가 다크모드 선택
document.cookie = "theme=dark; max-age=31536000; path=/";

// 페이지 로드 시
if (document.cookie.includes("theme=dark")) {
  enableDarkMode();
}

예시 3: 언어 설정 🌏

// 언어 선택
Set-Cookie: lang=ko; Max-Age=31536000; Path=/

// 서버에서 쿠키 읽고 한국어 콘텐츠 제공

쿠키 동의 팝업

왜 쿠키 동의를 받나요?

GDPR (유럽 개인정보 보호법):

웹사이트는 쿠키 사용 전에
사용자 동의를 받아야 함

필수 쿠키 vs 선택 쿠키:

필수: 로그인, 장바구니 (동의 불필요)
선택: 광고 추적, 분석 (동의 필요)

자주 묻는 질문 (FAQ)

Q1: 쿠키를 차단하면 어떻게 되나요?

A: 많은 웹사이트가 제대로 작동하지 않습니다.

• 로그인 불가
• 장바구니 사용 불가
• 설정 저장 안 됨

Q2: 쿠키는 안전한가요?

A: 적절히 사용하면 안전합니다.

• Secure, HttpOnly 플래그 사용
• 민감한 정보 저장하지 않기
• HTTPS 사용

Q3: 쿠키로 바이러스에 감염될 수 있나요?

A: 아니요! 쿠키는 단순 텍스트 파일입니다.

• 코드 실행 불가
• 바이러스 포함 불가

Q4: 쿠키를 자주 삭제해야 하나요?

A: 개인 선택입니다.

• 장점: 프라이버시 향상
• 단점: 로그인 풀림, 설정 초기화

Q5: 시크릿 모드에서 쿠키는?

A: 임시로 사용됩니다.

• 시크릿 창 닫으면 모두 삭제
• 추적 방지 향상

쿠키의 미래

1. 서드파티 쿠키 폐지

Chrome, Safari 등이 서드파티 쿠키 차단
→ 광고 회사들이 대안 모색 중

2. 대안 기술

- Privacy Sandbox (Google)
- FLoC (Federated Learning of Cohorts)
- 개인정보 보호 강화된 새로운 표준

다음 단계 🚀

쿠키를 이해했다면:

1. ✅ 캐시(Cache)란? - 데이터를 빠르게 불러오는 또 다른 방법
2. ✅ VPN이란? - 온라인 프라이버시 보호
3. ✅ HTTP 요청/응답 이해하기 - 쿠키가 전송되는 방식

마무리

쿠키는 웹사이트가 당신을 기억하는 방법이에요! 🍪

기억할 포인트:

• 쿠키 = 작은 텍스트 파일
• 브라우저에 저장됨
• 로그인 유지, 장바구니, 설정 저장
• 보안 주의 (Secure, HttpOnly 사용)
• 서드파티 쿠키는 추적용 (차단 가능)

쿠키 덕분에 편리하게 웹을 사용할 수 있지만, 프라이버시도 신경 써야 해요! 🔐