항공권 두 장에 쿠키 하나라니, 브라우저가 서랍을 늘렸다

Summary

• W3C가 2009년 4월 23일 공개한 첫 Web Storage 작업 초안은 같은 사이트에서 항공권 두 장을 창을 나눠 예약하는 상황을 제시했다. 공통 쿠키에 한 건의 ‘현재 항공편’만 기록하면 두 예약의 선택이 뒤섞일 수 있다.
• sessionStorage는 최상위 창과 출처마다 작업 공간을 둔다. localStorage는 같은 출처의 창들이 함께 쓰고 세션 뒤에도 남길 수 있는 공간을 제공하며, 값이 HTTP 요청마다 자동으로 실려 가지 않는다.

아침 일찍 뜨는 비행기와 밤늦게 뜨는 비행기를 비교한다고 해 보자. 한 창에서는 수하물 요금을 보고, 다른 창에서는 좌석을 고른다. 첫 창으로 돌아와 결제 버튼을 눌렀는데 두 번째 비행편이 나타난다. 쿠키는 ‘현재 항공편’을 성실히 기억했다. 다만 현재가 두 개였다는 사정을 듣지 못했다.

W3C의 2009년 4월 23일 Web Storage 첫 작업 초안에는 이 항공권 이야기가 실려 있다. 같은 사이트의 두 창에서 항공편을 예약할 때, 현재 예약을 쿠키 하나로 관리하면 한쪽의 선택이 다른 쪽으로 새어 들어간다. 초안은 이용자가 모르는 사이 같은 항공편 표를 두 장 살 수도 있다고 적었다. 추상적인 상태 관리 문제가 카드 명세서에 찍히는 장면이다.

쿠키는 조건에 맞는 요청을 서버로 보낼 때 함께 간다. 서버가 브라우저를 알아보는 데에는 쓸모가 크다. 그러나 같은 사람이 같은 사이트에서 두 가지 거래를 동시에 진행하면 ‘현재 예약’이라는 공통 칸은 어느 창의 일을 가리키는지 알려주지 않는다. 브라우저는 각 문서가 어느 최상위 창에 속하는지 이미 안다. Web Storage는 그 경계를 스크립트가 쓸 수 있는 저장 주소로 만들었다.

첫 번째 서랍은 sessionStorage다. 2013년 W3C 권고안은 최상위 브라우징 문맥마다, 또 출처마다 세션 저장 영역을 둔다. 같은 창에서 항공편 선택 화면을 지나 승객 정보와 결제로 넘어가도 해당 예약의 값은 이어진다. 다른 창은 자기 영역을 가진다. 기존 창과 연결되어 열린 새 창은 처음에 내용을 복사받을 수 있지만 이후에는 두 복사본이 따로 변한다. 늦은 밤 비행편을 다시 살펴봐도 아침 편의 좌석이 멋대로 바뀌지 않는다.

출처는 서랍의 주인을 정한다. 다른 사이트가 이 저장 영역을 마음대로 열 수 없다. 진행 중인 예약 값의 주소에는 사이트 출처와 창이라는 두 단서가 필요하다. 화면만 둘이고 저장 칸은 하나였던 때와 달리, 프로그램은 이용자가 어느 여행을 손보고 있는지 분간할 수 있다.

두 번째 서랍 localStorage는 더 오래 머무른다. 같은 출처의 창들이 값을 공유하고 한 번의 브라우징 세션이 끝나도 남길 수 있다. 초안은 이용자가 쓴 문서나 메일함 데이터를 브라우저에 보관하는 용도를 떠올렸다. 페이지를 몇 번 열었는지 세는 작은 예도 들었다. 쿠키는 맞는 요청마다 서버로 떠나지만 로컬 값은 브라우저에 있다가 스크립트가 읽고 애플리케이션이 보낼 때만 전해진다. 방문 횟수 하나 기억하자고 매번 장부를 우편에 끼워 넣을 필요가 줄었다.

2016년 제2판 권고안은 서랍 손잡이의 동작을 구체화했다. setItem, getItem, removeItem, clear로 키와 값을 다룬다. 쓰기나 삭제가 실패하면 저장 영역은 이전 상태를 유지한다. 공간이 부족하거나 저장이 막혀 있으면 setItem에서 QuotaExceededError가 날 수 있다. 같은 영역에 접근하는 다른 문서에는 변경 뒤 storage 이벤트가 전달된다. 스크립트가 일관된 값을 보도록 요구하지만 모든 호출이 실제 디스크 기록 완료를 기다리도록 하지는 않는다.

서랍을 여러 손이 여는 순간 비용 문제가 생겼다. 2013년 권고안의 쟁점 항목은 창 사이의 경합을 막기 위한 저장 잠금이 일부 구현자에게 지나치게 무겁게 보였다고 기록한다. 간단한 키 하나를 쓰는 API 뒤에는 서로 다른 창의 읽기와 쓰기 순서를 조정하는 브라우저의 일이 있었다. 항공권 예시가 보여 준 편리함에도 엔지니어의 계산서가 붙어 있었다.

W3C의 발행 이력을 따라가면 2009년 초안, 2013년 권고안, 2016년 제2판이 이어진다. 두 장의 항공권은 같은 질문을 계속 던진다. 지금 결제하는 여행의 기억은 어느 창에 있는가. 다음 방문까지 남길 초안은 어느 출처에 속하는가. 서버로 떠나는 요청에는 무엇이 실리는가. 저장 위치를 분명히 하자 이용자는 다시 항공편 자체를 비교할 수 있게 됐다.