쿠키와 세션, 그리고 캐시

 

 

서비스 기획자가 기획을 잘하기 위해서는 어느 정도 기술에 대한 이해가 필요하다. 그러나 직접 코딩이나 디자인을 하지 않기 때문에 인터넷에서 찾아보거나 해당 직군의 설명을 들어도 이해가 어렵거나 안 되는 경우가 많다. 그래서 어려운 기술 용어를 기획자가 알아야 할 정보 중심으로 풀어서 설명해보고자 한다.

 

---

 

HTTP 인터넷 통신은 사용자의 인풋에 의해 클라이언트가 서버에 요청(Request)을 보내면 서버는 클라이언트 요청에 맞는 응답(Response)을 보내고 연결을 끊는 비연결 지향(Connectionless)이라는 특성과 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 서버에서 변경되는 상태 정보를 실시간 반영하지 않는다(Stateless)는 특성을 가지고 있다.

 
비연결 지향이라는 특성으로 인해 실시간 통신을 하지 않기 때문에 사용자 입장에서는 데이터 및 배터리 사용량을 줄이고, 서비스를 제공하는 기업 입장에서는 불필요한 트래픽을 줄임으로써 사용자와 기업 모두 리소스를 낭비하지 않는다는 장점이 있다. 하지만 이런 특성으로 인해 한 페이지에서 로그인한 후 다른 페이지로 이동을 하게 되면 해당 사용자가 이전 페이지에서 로그인한 동일 사용자인지를 알 수가 없다. 웹페이지는 개별 URL을 가진 독립된 페이지이기 때문에 사실 한 페이지에서 로그인을 했다고 하더라도 다른 페이지로 이동을 하면 로그인 여부는 물론이거니와 어떤 계정이 로그인을 했는지 알 수가 없다. 때문에 해당 계정의 로그인 상태를 유지하기 위해 쿠키(Cookie)와 세션(Session)이라는 기술을 사용한다.

 

또한 실시간 상태 정보를 유지하지 않기 때문에 기획자가 클라이언트를 기획할 때 많은 고민을 하게 되는데 예컨대, 전자상거래를 기획할 때 관리자를 통해 변경된 가격이나 사용자들의 구매를 통한 재고 수량의 변화를 실시간 반영할 수 없기 때문에 화면의 이동이나 자동 리프레시(Auto Refresh) 등을 통해 이를 반영하게 되고 이때 발생하는 여러 엣지 케이스를 정의하고 처리해줘야 한다. 이러한 인터넷 통신의 특성으로 인해 주가창과 같이 실시간 정보의 제공이 중요한 기능을 개발하는 경우에는 HTTP 인터넷 통신을 사용하지 않고 웹소켓(WebSocket) 통신을 사용하여 데이터를 주고받는다. 웹소켓 통신은 실시간으로 데이터를 주고받기 때문에 데이터 소모가 많아 보통 매우 작은 데이터를 주고받으며 배터리 소모가 커 단말기가 빠르게 뜨거워지는 것을 확인할 수 있다. 따라서 쇼핑 앱에서 변경된 가격이나 재고 수량을 실시간 반영하기 위해 웹소켓 통신을 사용하지는 않는다. 

 

이러한 인터넷 통신의 특성이자 약점을 보완하기 위해 쿠키와 세션, 캐시 등의 기술을 사용하는데 이 기술에 대해 기획자가 자세히 알 필요는 없으나 이 기술을 이해하거나 활용해야만 기획이 가능한 기능이 있기 때문에 이해가 필요하다.

 

 

쿠키(Cookie)란?

보통 기획자나 개발자들이 쿠키(Cookie)와 쿠키 스토리지(Cookie Storage)를 모두 쿠키라고 표현하는데, 쿠키 스토리지는 브라우저 설치 시에 컴퓨터의 하드디스크에 쿠키를 저장하기 위해 할당된 저장 공간으로 이 스토리지에 웹사이트 방문 시 전송된 쿠키를 저장하게 된다. 쿠키는 웹사이트 방문 시 해당 서비스를 제공하는 서버에서 생성해 사용자 단말기의 쿠키 스토리지에 저장되는 이름(Name)과 값(Value), 도메인(Domain), 만료 날짜(Expires/Max-Age) 등의 정보를 담고 있는 키와 값으로 구성된 작은 데이터 파일이다. 따라서 서비스를 제공하는 기업의 서버에 저장을 하게 되면 해당 기업이 그 보안을 책임져야 하지만 사용자의 단말기에 저장되기 때문에 보안이 취약해 민감한 데이터를 저장하지는 않는다. 다만, 쿠키 스토리지는 해당 쿠키를 생성한 서버만이 열람이 가능하고 사용자에 의해 브라우저 설정 화면이나 개발자 도구에서 삭제할 수 있다. 기획자는 이 쿠키와 쿠키 스토리지를 활용하여 자동 로그인 기능이나 팝업에서 ‘오늘 하루 열지 않기’, 사용자가 원하는 스타일의 레이아웃 설정값을 유지하는 기능 등을 제공할 수 있다. 이러한 데이터는 보안이 중요한 데이터가 아닌 데다 서버에 저장해서 매번 조회하는 것이 비효율적이기 때문이다.

 

 

세션(Session)이란?

세션(Session)은 세션이라는 표현보다는 세션아이디(SessionId)라는 표현으로 더 자주 듣게 된다. 쿠키와 동일하게 쿠키 스토리지에 저장되는데, 이 세션은 사용자가 웹사이트에 회원가입이나 로그인을 했을 때 서버에서 정한 암호화 알고리즘에 의해 생성되어 쿠키 스토리지에 저장되고 암호를 풀 수 있는 키를 통해서만 열람이 가능하다는 점에서 쿠키와는 차이가 있다. 회원가입 또는 로그인 시 서버에서 생성한 SessionId를 쿠키 스토리지에 저장하고 페이지를 이동할 때마다 서버가 쿠키 스토리지에 저장된 이 SessionId를 해시하며 로그인 상태를 유지할 수 있는 것이다. 그래서 자동 로그인을 지원하는 웹 서비스의 경우에는 PC방 등의 공공장소에서 자동 로그인 기능을 사용하지 말라고 경고하는데 체크했을 때 SessionId가 해당 컴퓨터에 저장되고 해커가 이 SessionId를 해킹해 다른 PC에서 로그인이 가능하기 때문이다. 그래서 자동 로그인을 지원하는 경우에는 SessionId를 해킹한 제 3자가 비밀번호까지 수정해 계정 전체를 탈취하지 못하도록 비밀번호 수정 페이지 진입 전이나 비밀번호 수정 시 현재 비밀번호를 재차 확인하는 인풋 박스를 제공해야 한다. 본인을 확인할 방법이 없는 서비스의 경우에는 해당 계정의 소유권을 되찾기가 쉽지 않기 때문이다. 물론 쿠키와 같이 만료 날짜가 존재하여 기간이 만료되면 자동 로그아웃이 되고, 다시 로그인을 통해 SessionId를 생성해야 한다. 따라서 기획자는 이 세션 유지 기간을 정해야 하는데, 보안이 중요한 금융 서비스의 경우에는 10분 정도로 매우 짧게 가져가는 반면 보안이 중요하지 않은 SNS의 경우에는 3개월씩 유지하기도 한다.
참고로 토큰(JWT, Jason Web Token)은 로그인을 유지하기 위한 세션이 웹 기술인 데다 네이버, 카카오와 같이 다수의 도메인 서비스를 가지고 있는 기업에서 사용자의 통합 ID를 지원하거나 타사에 [네이버 아이디로 로그인하기]나 [카카오 계정으로 로그인하기]와 같이 싱글 로그인(SSO, Single Sign-On) 기능을 제공하기 위해 등장한 대체 기술이다. 그래서 최근엔 세션보다는 토큰을 많이 사용하는 추세다.

 

 

캐시(Cache)란?

 

마지막으로 캐시(Cache) 스토리지는 쿠키 스토리지와 같이 브라우저 설치 시 컴퓨터의 하드디스크에 이미지나 CSS, JS 파일 등을 저장하기 위해 할당된 저장 공간으로 보통 캐시라고 부른다. 웹사이트 방문 시 서버를 통해 보안이 중요하진 않지만 용량이 큰 이미지나 CSS, JS 파일(웹 페이지에서 화면 전환이나 애니메이션 효과와 같은 동적 기능을 구현하기 위한 파일) 등의 사본을 캐시 스토리지에 저장하여 재방문 시 해당 파일을 서버에서 다시 다운로드하지 않고 캐시 스토리지에 저장된 사본 파일을 사용하여 사용자 입장에서는 데이터 소모량을 줄이고 페이지 로딩 속도를 빠르게 하며, 기업 입장에서는 트래픽을 줄일 수 있는 기술이다. 이 캐시 스토리지에는 파일이 파일명(Name)과 파일 경로(Domain) 형태로 저장되는데 페이지 새로고침이나 이동 시 저장된 파일과 일치하지 않는 파일명이나 파일 경로가 존재하면 서버에서 해당 파일을 다운로드하여 새로운 정보로 갱신한다. 이 캐시 때문에 가끔 변경한 배너나 콘텐츠를 확인하지 못해 개발자에게 변경 유무를 물어봤을 때 “캐시를 지우세요!”라는 답변을 듣게 되는 것이다.

 

혹여나 잘못 설명된 내용이 있다면, 댓글을 통해서 알려주시면 감사하겠습니다.

 

 

세균무기가 알려주는 서비스 기획의 모든 것 | 세균무기 - 교보문고