웹 스토리지는 클라이언트 측에서 데이터를 저장할 수 있는 다양한 기술을 의미하며, 사용자 경험을 향상시키고 서버 요청을 줄이는 데 중요한 역할을 합니다. 오늘날 대부분의 웹 애플리케이션에서는 localStorage, sessionStorage, Cookie뿐 아니라, 대용량 및 구조화 데이터를 위한 IndexedDB까지 활용됩니다. 이 네 가지 방식은 기능, 보안, 저장 방식, 브라우저 처리 방식에서 각각 다른 특성을 가지고 있으며, 실무와 면접 모두에서 명확한 이해가 필요합니다.
웹 스토리지란 무엇인가? (개념과 기술 진화)
웹 스토리지(Web Storage)는 브라우저가 클라이언트 측에서 데이터를 저장할 수 있도록 제공하는 기능입니다. 대표적인 저장 방식은 다음과 같습니다:
- localStorage: 브라우저에 영구적으로 데이터를 저장
- sessionStorage: 탭 단위로 데이터를 저장하며 브라우저 탭 종료 시 제거
- Cookie: 클라이언트와 서버 간 전송 가능한 데이터. HTTP 요청에 포함됨
- IndexedDB: 객체 저장이 가능한 비동기 구조의 클라이언트 DB
이 네 가지 방식은 모두 클라이언트 저장이라는 공통점을 갖지만, 작동 방식과 목적은 매우 다릅니다. 최신 프론트엔드에서는 웹 성능 최적화와 보안 강화를 위해 이 기술들을 상황에 맞게 조합해 사용합니다.
IndexedDB의 구조와 특징
IndexedDB는 구조화된 데이터를 저장할 수 있는 비동기 기반 NoSQL 데이터베이스입니다. 일반적으로 다음과 같은 계층 구조를 가집니다:
- Database: 하나의 데이터베이스 단위로 생성
- Object Store: 테이블 개념. 키 기반 저장소
- Index: 특정 필드를 기준으로 빠른 검색 가능
- Transaction: 읽기/쓰기 작업을 묶어 처리
const openRequest = indexedDB.open("ShopDB", 1);
openRequest.onupgradeneeded = (e) => {
const db = e.target.result;
const store = db.createObjectStore("products", { keyPath: "id" });
store.createIndex("by_price", "price");
};이 구조는 대용량 데이터를 클라이언트에 안전하게 저장해야 하는 PWA나 오프라인 기능이 있는 앱에서 필수적입니다.
localStorage vs sessionStorage vs 쿠키 vs IndexedDB 상세 비교
| 속성 | localStorage | sessionStorage | Cookie | IndexedDB |
|---|---|---|---|---|
| 지속성 | 무제한 지속 (명시적 삭제 전까지) | 탭 또는 창 닫을 때까지 유지 | 만료일 설정 가능 (기본 세션) | 무제한 지속 |
| 용량 제한 | 약 5~10MB (브라우저별 다름) | 약 5MB | 약 4KB | 수백 MB~수 GB |
| 서버 전송 | 전송되지 않음 | 전송되지 않음 | 자동 전송 (HTTP Header) | 전송되지 않음 |
| 데이터 타입 | 문자열만 저장 | 문자열만 저장 | 문자열만 저장 | 객체, 파일 등 구조화 데이터 저장 가능 |
| 동기/비동기 | 동기 | 동기 | 동기 | 비동기 (Promise/Callback) |
| 보안 | XSS 취약 | XSS 취약 | XSS/CSRF 모두 취약 (보완 가능) | XSS 취약 |
| 사용 용도 | 테마, 언어 설정 등 장기 저장 | 폼 입력 임시 저장 등 단기 저장 | 세션 ID, 로그인 상태 (HttpOnly) | 오프라인 캐시, 대용량 로그, 이미지 등 |
주의: XSS & CSRF 위협과 대응
웹 스토리지는 클라이언트 측에 저장되므로 XSS(교차 사이트 스크립팅)에 매우 취약합니다. 예를 들어 localStorage에 저장된 토큰은 악성 스크립트가 삽입될 경우 탈취될 수 있습니다. 반면, 쿠키는 HttpOnly 및 SameSite 속성 설정을 통해 보안 강화를 할 수 있습니다.
// 안전한 쿠키 설정 예시 (서버 측)
Set-Cookie: token=abc123; HttpOnly; Secure; SameSite=Strict실무 활용 전략과 면접 질문 대응법
1. 실무 적용 전략
- localStorage: 설정값 저장, 비회원 장바구니 등 간편한 장기 저장용
- sessionStorage: 다단계 폼 입력값 유지, 비로그인 임시 상태 관리
- Cookie: HttpOnly + Secure 옵션을 이용한 인증 토큰 저장
- IndexedDB: 오프라인 캐시, 대용량 데이터(이미지, 로그) 저장, 검색 최적화
2. 예시: 인증 상태 유지 방식 비교
- localStorage: XSS에 취약하므로 권장하지 않음
- Cookie: HttpOnly + SameSite=Strict 설정 시 가장 안전
- IndexedDB: 구조화된 보안 저장소로 활용 가능하나, 인증 토큰에는 과도함
3. 면접에서 자주 묻는 질문
- “웹 스토리지의 종류와 차이점을 설명해주세요.”
- “토큰 저장에 localStorage와 Cookie 중 무엇이 더 안전한가요?”
- “IndexedDB는 언제 사용하나요?”
4. 모범 답변 팁
“웹 스토리지는 목적과 보안 수준에 따라 다르게 사용됩니다. 설정값 저장에는 localStorage가 적합하지만, 인증 토큰은 XSS에 안전한 HttpOnly 쿠키에 저장하는 것이 바람직합니다. IndexedDB는 구조화된 대용량 데이터를 클라이언트에 저장할 때 유용하며, 오프라인 앱과 PWA에서 자주 사용됩니다. 실제 프로젝트에서는 localStorage + 쿠키 조합 또는 IndexedDB를 캐시 저장소로 활용한 경험이 있습니다.”
결론
localStorage, sessionStorage, Cookie, IndexedDB는 웹 개발자에게 중요한 도구입니다. 이들은 단순한 저장소를 넘어서 보안, 퍼포먼스, 사용자 경험에 직결되는 요소입니다. 각 기술의 특징을 명확히 이해하고, 실무 목적과 보안 수준에 맞게 조합하는 전략이 필요합니다.
면접에서는 단순한 차이점 설명을 넘어, 언제 어떤 기술을 선택하고 왜 그렇게 했는지를 이야기할 수 있어야 합니다. 최신 기술까지 포함해 웹 저장소의 전체 흐름을 이해하고, 실전에서 활용할 수 있다면 실력 있는 개발자로서의 신뢰를 높일 수 있습니다.