[HTML5] LocalStorage 와 크로스브라우저

크로스 브라우저 스토로지 (크로스 브라우저 쿠키)
HTML5 에 새로 추가된 Web Storage 는 쿠키와 유사하지만 조금 더 진보된 형태의 클라이언트 저장소를 지원한다. Web Storage 는 영구데이터를 위한 localStorage 와 세션 범위의 SessionStorage 로 나뉘어진다. 자세한 내용은 다음의 글을 참고 바란다
=> [HTML5] Web Storage

localStorage 에 관련한 다음의 질문에 답해 보기 바란다

'크롬 브라우저에서 저장한 localStorage의 값을 사파리 브라우저에서 조회할 수 있는가?'

금방 답 할 수 있으면 일단 다행(?)이다. 그럼 이 질문은 어떤가?

'IE 브라우저에서 저장한 쿠키(Cookie)를 크롬 브라우저에서 조회할 수 있는가?'

이 두 질문은 동일한 이슈를 다루고 있다. 즉 '크로스브라우저(Cross Browser)' 이슈이다
크로스 브라우저는 각기 다른 브라우저 환경을 말하며, '크로스 브라우저 가능' 이라는 말은 브라우저가 달라도 기술의 구현이나 사용은 동일(일관)하다는 의미로 해석된다

다시 질문으로 돌아가 보자
HTML5의 localStorage 까지 갈 것도 없이, 쿠키(Cookie)의 크로스 브라우저 문제를 생각해 보자. 
'각기 다른 브라우저(크롬,사파리,파이어폭스,오페라 등)에서 쿠키의 공유가 가능한가?' 하는 문제이다

좀 더 현실적인 예로 다시 풀어 보면,
'쿠키로 사용자 인증 처리를 하는 사이트의 경우 IE에서 로그인한 사용자가 크롬에서 해당 사이트에 접근했을 때 로그인이 유지되는가?' 하는 문제이다

이전에 한번이라도 이와 유사한 이슈를 경험해 본 사람은 쉽게 답할 수 있을 것이다
그러나 모르긴 몰라도 꽤 많은 사람이 헷갈려 하지 않나 싶다(이 글을 쓰는 나 역시 헷갈렸다 ㅡ.ㅡ)


크로스브라우저 쿠키의 착각, IE 의존성이 가져온 결과?
고민(?)의 발단은 이러했다
HTML5의 localStorage 를 위한 저장소는 각 브라우저별로 서로 다른, 즉 자신만의 위치에 데이터를 저장하기 때문에 '크로스 브라우저 스토로지'가 지원되지 않는다는 자연스러운(?) 결론에 이르게 되었다

그러나 한편 생각해 보면 여러 브라우저를 사용하는 사람에게는 꽤 문제가 될 수 있지 않나 싶었다
기껏 유용한(또는 주요한) 정보를 localStorage 에 저장해 뒀는데 다른 브라우저로 접근하면 사용할 수 없다는 것은 사이트 개발자는 물론 사용자의 불편을 야기시킬 수 있기 때문이다

이즈음 든 생각은, '그럼 쿠키는?' 이었다
여기서 나의 착각이 시작되었다. 순간 당연히 쿠키는 크로스 브라우저가 된다고 생각한 것이다
'쿠키는 크로스브라우저가 가능한데 쿠키의 개선 버전이라는 localStroage 가 안되다니?'
'이건 뭐 제약사항이 하나 더 늘었구만!!' 하는 어처구니 없는 착각 ^^;

하지만 웹 실무를 벗어난지 꽤 오랜 시간 되었고 이건 착각일 수도 있겠다라는 의문이 들어 테스트를 해 보기로 했다.

테스트 결과, 당연히 될 줄로만 알았던 '크로스 브라우저 쿠키'가 안되는 것이었다
음.. 이건 뭥미? 하며 잠시 멍 때린 후, 생각을 정리하기로 했다

'그래, 쿠키가 표준이지 쿠키 저장소가 표준은 아니다' 라는 것이다

즉 웹을 위한 클라이언트 측 데이터 저장소로써 쿠키라는 개념이 통용되지만 그 저장 위치는 정해져 있지 않다는 것이다. 곰곰히 생각해 보면 저장 위치를 딱 한 곳으로 표준화 할 수도 없다는 것이다

이러한 나의 착각은 어디에서 비롯되었을까? 하고 생각해 봤더니, 'IE 의존적인 개발로 인한 착각' 이라는 생각이 들었다.(물론 제대로 알지 못한 나 자신이 1차 문제인건 안다 ㅡ.ㅡ)

내가 한참 웹 개발 실무를 디테일하게 수행했던 시기는 2000년대 초반이었으며 그 당시에는 지금보다 훨씬 더 IE 의존적인 환경이었다. 웹 2.0 이라는 트랜드도 낯설었거니와 몇몇 독특한 사람을 제외하고는 거의 대부분의 사람이 IE를 사용하고 있었으며 웹 표준이라는 개념 역시 지금처럼 일반화되지 않는 시기였다. 따라서 대부분의 웹 개발은 IE 를 기준으로 작성되었으며 크로스브라우저 테스트는 거의 해 보지 않았다는 것이다. (간혹 여러개의 브라우저를 띄워서 데이터 공유가 되는가.. 하는 등의 테스트는 해 보았지만, 이것 역시 IE를 여러개 띄운 테스트가 대부분이었다)

결국 IE 의존적인 개발은, IE 에 한정된 테스트 환경에 그쳤으며 IE 적 개념이 점차 정립된 것이다
'크로스브라우저 쿠키의 착각'도 이러한 IE 의존성에서 비롯되었다라고 해도 과언은 아닐 듯 싶다
(물론 제대로 된 조직 및 개인은 그 당시에도 크로스 브라우저 테스트및 개념이 있었겠죠?
 이 글은 저의 경우, 저의 착각에 한해 예기 하는 것이니 오해 사절 입니다)

지금에야 아이폰을 필두로 한 모바일 웹의 급 부상, 이미 오래된 웹 2.0 트랜드, 웹 표준 이슈, HTML5 등장, 과거와는 다른 브라우저간 경쟁 및 발전으로 IE 의존성이 점차 해소되는 분위기이며 특히 개발자들은 더욱 다양한 브라우저를 체험하고 있다. 

사실  나 역시 모바일 웹, HTML5에 관심을 두기 전에는 거의 IE만 사용했었다
근래 들어 크롬, 사파리, 파이어폭스, 오페라와 같은 브라우저를 동시에 사용하고 있다. 
이 글 역시 여러 브라우저를 동시에 사용했기에 든 의문이며 그렇지 않다면 꽤 오랜시간 착각과 망각속에 살지 않았겠나.. 싶다


크로스 브라우저 쿠키, 크로스 브라우저 스토로지, 가능한 시나리오는 없는가?
브라우저를 넘나드는 클라이언트 데이터 저장소의 실현을 고민해 보자

크로스 환경이 필요한가를 먼저 따지자
우선 원론적인 질문을 해 보자. '브라우저 경계를 넘어서는 데이터 공유가 필요한가?' 이다
다시 말해 IE에서 저장한 데이터를 크롬에서 불어와야 되는가? 하는 것이다
예를 들어 IE에서 로그인한 사용자가 크롬에서도 여전히 로그인이 되어 있어야 하는가? 이다
매우 크리티컬한 이슈가 아니라면 적당히 양보(?)할 수도 있을 것이다
크로스 브라우저가 정말로 필요한지? 서버측 데이터 공유로 풀어도 되지 않는지? 하는 원론적인 고민을 해 보고 반드시 그럴 필요가 없다면 굳이 크로스 환경을 지원하지 않아도 된다는 말이다
그러나 반드시 크로스 환경이 보장되어야 한다면 다음 글로 넘어가자

브라우저마다 각각 저장하자
불편하기는 하지만 가장 심플한 해결책이다
매번 브라우저에서 쿠키가 존재하는지 검사하고 없다면 쿠키를 기록하는 것이다
예를 들어 IE에서 쿠키를 저장하고 크롬에서 쿠키를 읽어 올때 존재하지 않는다면 다시 쿠키를 기록하도록 하는 것이다. 다른 브라우저도 마찬가지로.
사용자 인증 시나리오에서 이 기법이 적용된다면 사용자는 브라우저를 교체할 때 로그인을 다시 해야 하는 불편은 감수해야 한다. 그러나 용납할 만한 수준이지 않는가
(이 시나리오는 HTML5 localStorage에도 그대로 적용된다)

플래시의 Shared Object 를 이용하라
플래시에는 클라이언트 측 데이터 저장과 공유를 위한 Shared Object 라는것이 존재한다
플래시 런타임은 브라우저와는 별도의 플러그인 환경이기 때문에 브라우저가 달라진다고 해서 문제될 것이 없다. 다만 플래시 런타임이 브라우저에 설치되어 있어야 한다는 문제가 있다
웹 표준, 특히 아이폰과 같은 모바일 환경에서는 무리수 일 수 있다는 것이다

PersistJS 라이브러리를 이용하라
Paul Duncan 이라는 사람이 만든 라이브러리이다. 클라이언트 측 자바스크립트 영구 저장소를 구현한 것이다. 플래시 플레이어와 같은 별도의 플러그인이 필요 없으며 크로스 브라우저를 지원하는 API가 제공된다. 이 라이브러리를 직접 이용해 보진 않았지만 아마 locaStroage나 Shared Object 와 같은 기존 스토로지 솔루션에 기반하여 데이터를 저장하며 크로스 브라우저를 위한 자동화된 처리가 포함된 듯 하다. 관심 있는 자 테스트 해 보기 바란다. 아래 주소에서 라이브러리 다운로드 및 확인이 가능하다.
http://pablotron.org/?cid=1557