“IndexedDB”, 웹사이트 데이터가 이렇게 많이 저장된다고?

들어가며

웹사이트를 개발하다 보면 브라우저에 데이터가 저장되는 모습을 직접 확인해야 할 때가 있습니다.

처음에는 대부분 Local Storage부터 확인하게 됩니다. 로그인 상태나 간단한 설정값, 최근 검색어 같은 데이터가 들어 있는 경우가 많기 때문입니다.

그런데 개발자 도구의 Application 탭을 조금 자세히 살펴보면 Local Storage 말고도 눈에 띄는 저장공간이 하나 더 있습니다.

바로 IndexedDB입니다.

처음 봤을 때는 이름부터 조금 낯설었습니다.

“이것도 브라우저에 데이터를 저장하는 기능인가?”

결론부터 이야기하면 맞습니다. 다만 Local Storage보다 훨씬 많은 양의 구조화된 데이터를 다루는 데 적합하다는 차이가 있습니다.

IndexedDB란 무엇일까?

IndexedDB는 웹 브라우저에서 사용할 수 있는 클라이언트 측 데이터베이스입니다.

쉽게 말하면 웹사이트가 사용자의 브라우저 안에 데이터베이스를 만들어 데이터를 저장할 수 있도록 해주는 기능이라고 보면 됩니다.

Local Storage는 Key와 Value 형태로 비교적 간단한 데이터를 저장하는 데 적합합니다.

반면 IndexedDB는 여러 개의 데이터를 구조적으로 저장하고 검색해야 하는 경우에 사용할 수 있습니다.

예를 들어 웹 애플리케이션에서 많은 데이터를 브라우저에 저장해야 한다면 IndexedDB가 유용할 수 있습니다.

웹메일, 오프라인으로 동작하는 웹 애플리케이션, 대용량 캐시가 필요한 서비스, 복잡한 웹앱 등에서 활용되는 이유도 여기에 있습니다.

개발자 도구에서 IndexedDB 찾는 방법

직접 확인하는 방법은 생각보다 간단합니다.

먼저 Chrome에서 확인하려는 웹사이트를 열고 F12를 눌러 개발자 도구를 실행합니다.

또는 마우스 오른쪽 버튼을 클릭한 다음 검사를 선택해도 됩니다.

개발자 도구가 열리면 상단 메뉴에서 Application 탭을 찾습니다.

만약 Application이 바로 보이지 않는다면 상단의 >> 버튼을 눌러 숨겨진 메뉴를 확인하면 됩니다.

Application 화면으로 들어가면 왼쪽에 여러 가지 저장소 관련 항목이 나타납니다.

여기에서

Storage → IndexedDB

를 찾아볼 수 있습니다.

웹사이트가 IndexedDB를 사용하고 있다면 그 아래에 데이터베이스 이름이 표시됩니다.

데이터베이스를 펼쳐보면 Object Store라는 항목이 나타나는 경우가 있습니다.

이 부분부터 Local Storage와는 상당히 다른 느낌을 받을 수 있습니다.

Object Store는 무엇일까?

IndexedDB를 처음 접했을 때 가장 헷갈리는 부분 중 하나가 Object Store입니다.

쉽게 생각하면 데이터베이스 안에 만들어진 일종의 데이터 저장 공간이라고 볼 수 있습니다.

하나의 IndexedDB 데이터베이스 안에 여러 개의 Object Store가 존재할 수 있습니다.

그리고 각 Object Store에는 여러 데이터가 저장될 수 있습니다.

따라서 구조를 단순화해서 생각하면 다음과 같은 형태입니다.

웹사이트 → IndexedDB → Database → Object Store → 데이터

실제 구조는 서비스에 따라 조금씩 달라질 수 있지만, 개발자 도구에서 IndexedDB를 살펴볼 때 이런 계층 구조를 알고 있으면 훨씬 이해하기 쉽습니다.

IndexedDB에는 어떤 데이터가 저장될까?

여기서 중요한 점이 있습니다.

IndexedDB에 데이터가 있다고 해서 모든 웹사이트가 동일한 종류의 데이터를 저장하는 것은 아닙니다.

서비스마다 목적이 다르기 때문입니다.

예를 들어 어떤 웹 애플리케이션은 사용자가 오프라인 상태에서도 작업할 수 있도록 데이터를 저장할 수 있습니다.

또 다른 서비스는 서버에서 내려받은 데이터를 브라우저에 임시로 저장해 다음 접속 때 빠르게 사용할 수도 있습니다.

웹앱의 캐시나 사용자 작업 데이터, 대량의 구조화된 데이터 등이 저장될 수도 있습니다.

그래서 개발자 도구에서 IndexedDB를 발견했다면 단순히 “이게 무슨 데이터인가?”라고 보기보다는 “이 웹사이트에서 이 저장소를 어떤 목적으로 사용하고 있을까?”라는 관점으로 살펴보는 것이 좋습니다.

Local Storage와 IndexedDB의 차이

둘 다 브라우저에 데이터를 저장한다는 점에서는 비슷합니다.

하지만 사용하는 목적은 꽤 다릅니다.

Local Storage는 비교적 간단한 데이터를 저장할 때 편리합니다.

예를 들어 화면 설정이나 간단한 상태값처럼 작은 데이터를 저장하는 데 사용할 수 있습니다.

반면 IndexedDB는 좀 더 복잡한 구조의 데이터를 다루는 데 적합합니다.

특히 여러 데이터를 저장하고 필요한 데이터를 검색하거나 관리해야 하는 웹 애플리케이션에서는 IndexedDB가 훨씬 적합할 수 있습니다.

쉽게 비유하면 Local Storage가 작은 메모장이라면 IndexedDB는 브라우저 안에 만들어 놓은 작은 데이터베이스에 가깝습니다.

물론 실제 동작에는 훨씬 많은 차이가 있지만 처음 개념을 잡을 때는 이런 식으로 생각하면 이해하기 편합니다.

IndexedDB 데이터를 직접 확인해보면

개발자 도구에서 IndexedDB를 열어보면 데이터가 표 형태로 표시되는 경우가 있습니다.

이 화면을 보면 실제로 어떤 값들이 저장되어 있는지 확인할 수 있습니다.

특히 웹사이트를 직접 개발하고 있다면 상당히 유용합니다.

내가 작성한 JavaScript 코드에서 IndexedDB에 데이터를 저장했는데 원하는 값이 제대로 들어가지 않는다면 개발자 도구에서 바로 확인할 수 있기 때문입니다.

데이터가 저장되지 않았는지, 예상과 다른 값이 들어갔는지, 데이터가 여러 건 쌓이고 있는지 등을 확인하는 데 도움이 됩니다.

개발 과정에서는 이런 식으로 코드 → 브라우저 저장소 → 실제 데이터를 연결해서 확인하는 습관이 상당히 중요합니다.

IndexedDB 데이터가 보이지 않는다면?

반대로 IndexedDB 메뉴를 열었는데 아무것도 나오지 않을 수도 있습니다.

이것도 이상한 상황은 아닙니다.

해당 웹사이트가 IndexedDB를 사용하지 않을 수도 있고, 아직 데이터베이스가 생성되지 않았을 수도 있습니다.

또한 특정 기능을 실행해야 데이터가 생성되는 서비스도 있습니다.

따라서 IndexedDB가 비어 있다고 해서 웹사이트에 데이터 저장 기능이 전혀 없다고 단정해서는 안 됩니다.

Local Storage, Session Storage, Cookies, Cache Storage 등 다른 저장 방식을 함께 사용하는 경우도 있기 때문입니다.

개발자 도구를 같이 살펴보면 더 재미있다

웹사이트의 동작 원리를 조금 깊게 살펴보고 싶다면 Application 탭만 보는 것보다 Network 탭과 Console을 함께 확인하는 방법도 좋습니다.

예를 들어 어떤 버튼을 눌렀을 때 서버 요청이 발생하는지 Network에서 확인하고, JavaScript 실행 과정에서 문제가 발생했는지는 Console에서 확인할 수 있습니다.

그리고 브라우저에 어떤 데이터가 저장되는지는 Application에서 확인할 수 있습니다.

이렇게 각각의 도구를 연결해서 보면 웹사이트가 단순한 HTML 페이지가 아니라는 것을 조금씩 이해하게 됩니다.

화면에 보이는 결과 뒤에서 JavaScript가 실행되고, 서버와 데이터를 주고받고, 필요한 정보는 브라우저 저장소에 기록하는 식으로 여러 과정이 동시에 움직이고 있기 때문입니다.

마무리

IndexedDB는 처음 접하면 이름부터 어렵게 느껴질 수 있습니다.

하지만 개발자 도구에서 직접 열어보고 구조를 하나씩 살펴보면 생각보다 개념은 단순합니다.

브라우저에서 데이터를 저장하고 관리하기 위한 데이터베이스 기능이라고 이해하면 출발하기 좋습니다.

특히 웹 애플리케이션을 개발하고 있다면 IndexedDB를 직접 확인하는 것만으로도 내가 만든 서비스가 실제 브라우저에서 데이터를 어떻게 관리하고 있는지 파악하는 데 큰 도움이 됩니다.

다음에 Chrome 개발자 도구를 열었다면 Local Storage만 확인하지 말고 Application → IndexedDB도 한번 열어보세요.

평소에는 그냥 지나쳤던 웹사이트의 저장 구조가 보이기 시작하면 개발자 도구를 보는 재미도 조금 달라질 겁니다.

처음에는 데이터베이스 이름이나 Object Store 이름이 낯설어도 괜찮습니다.

하나씩 눌러보고 어떤 데이터가 들어 있는지 확인하다 보면 웹 브라우저가 단순히 웹페이지를 보여주는 역할만 하는 것이 아니라, 상당히 많은 데이터를 직접 관리하고 있다는 것을 자연스럽게 알 수 있습니다.