24. 브라우저에 저장되는 데이터와 한계
크롬에 넣은 링크가 사파리에는 없는 이유
같은 컴퓨터에서 크롬으로 링크 모음을 열어 ‘독서 기록’을 추가했다고 합시다. 같은 주소를 사파리에서 열면 목록이 비어 있을 수 있습니다. 이번 실습은 서버가 아니라 그 브라우저의 해당 사이트 저장 공간에 목록을 보관하기 때문입니다.
| 행동 | 이번 링크 모음에서 예상할 결과 |
|---|---|
| 같은 브라우저·프로필·주소에서 새로고침 | 저장이 정상이라면 목록 유지 |
| 다른 브라우저나 휴대전화로 열기 | 목록이 자동으로 옮겨 오지 않음 |
| 해당 사이트의 데이터 삭제 | 저장한 목록도 지워질 수 있음 |
| 방문 기록만 삭제 | 사이트 데이터 삭제와는 다름. 선택한 삭제 항목에 따라 달라짐 |
| 시크릿 창을 모두 닫고 다시 열기 | 그 비공개 세션의 저장 자료를 계속 보관한다고 기대하면 안 됨 |
중요한 목록은 먼저 내보내기로 보관하세요. 저장을 배우기 위해 실제 자료를 지우지 말고, 연습용 항목으로 확인합니다.
보이는 것과 저장된 것은 다릅니다
새 링크를 추가한 직후 목록에 나타났다고 해서 다음에 다시 열어도 남는 것은 아닙니다. 화면이 열려 있는 동안만 기억하는 방식일 수 있습니다. 저장 기능이 없다면 새로고침하거나 화면을 닫았을 때 입력이 사라질 수 있습니다. ‘나타났다’와 ‘보관됐다’를 따로 확인해야 하는 이유입니다.
데이터는 프로그램이 다루는 자료를 뜻합니다. 링크 모음에서는 이름·주소·분류가 데이터입니다. 페이지의 코드가 자료를 담을 그릇과 동작을 정한다면, 사용자가 추가한 링크는 그 안에 넣는 내용이라고 생각할 수 있습니다. 코드를 내려받았다고 모든 입력 자료까지 함께 내려받는 것은 아닙니다.
서로 다른 보관함을 그림으로 보기
직접 넣은 링크 3개
A의 목록이 자동으로 오지 않음
컴퓨터의 목록이 자동으로 오지 않음
그림에서 첫 브라우저에 넣은 세 항목은 다른 브라우저와 휴대전화에 자동으로 나타나지 않습니다. 이번 실습의 브라우저 저장 범위를 설명한 것입니다. 실제로 어떤 자료가 남는지는 사용하는 주소와 브라우저, 설정에서 확인해야 합니다. 그림이 모든 환경의 저장 동작을 보장하는 시험 결과는 아닙니다.
컴퓨터에서 넣은 자료가 휴대전화에 없다고 느낄 때는 자료가 지워졌는지보다 같은 보관 공간을 보고 있는지 먼저 생각합니다. 미리보기와 공개 주소도 서로 다른 공간을 사용할 수 있습니다. 이 차이를 알면 코드가 잘못되었다고 단정하기 전에 확인할 질문이 생깁니다.
파일로 내보내 다른 환경에서 불러오는 것은 자동 동기화와 다릅니다. 파일을 만든 시점의 자료를 옮기는 것입니다. 이후 한쪽에서 새 항목을 넣으면 다른 쪽 파일이나 목록이 자동으로 함께 바뀌지는 않을 수 있습니다. 같은 자료를 계속 공유하려면 별도의 구조가 필요할 수 있습니다.
따라서 현재 프로젝트가 약속하는 범위를 화면에 설명해 두는 것이 좋습니다. ‘이 브라우저에 저장됩니다’라는 안내는 사용자가 예상할 수 있는 행동을 정합니다. 여러 기기에서 같은 자료를 쓰고 싶어졌다면 그 요구를 새 기능으로 정의하고 자료의 위치와 사용자 접근을 다시 설계합니다.
브라우저 안에 보관하기
이번 실습에서는 브라우저의 저장 공간을 사용합니다. 코드에서는 localStorage라는 이름을 만나게 됩니다. 같은 사이트에서 다시 열었을 때 자료를 읽는 데 쓸 수 있지만, 모든 브라우저와 기기가 같은 보관함을 공유하는 것은 아닙니다.
같은 컴퓨터라도 다른 브라우저나 프로필이면 별도의 공간일 수 있습니다. 사이트 주소의 출처가 달라도 저장 공간이 구분됩니다. 따라서 AI 도구 안에서 넣은 목록이 공개한 주소에서도 자동으로 보일 것이라고 생각하지 않습니다. 공개 주소에서 별도로 확인합니다.
지워지거나 저장에 실패할 때
브라우저 자료를 지우거나 비공개 창을 닫으면 자료를 잃을 수 있습니다. 설정이나 미리보기 환경 때문에 저장이 허용되지 않을 수도 있습니다. 저장이 실패했는데 ‘저장 완료’라고 표시하면 사용자는 잘못 안심하게 됩니다. 지금 화면에만 남아 있다는 안내가 필요합니다.
자료를 읽지 못할 때도 조용히 빈 목록으로 덮어쓰지 않는 편이 좋습니다. 원래 자료가 있었는데 손상되었거나 일시적으로 읽지 못했을 수 있기 때문입니다. AI에게 저장 성공과 실패를 구분해 처리하도록 부탁하고, 실제로 확인 가능한 범위까지 시험합니다.
중요한 자료의 별도 보관
내보내기는 목록을 파일로 꺼내 보관하는 일이고, 불러오기는 그 파일에서 자료를 읽어 목록에 넣는 일입니다. 이런 파일은 사람이 읽는 문장보다 프로그램이 읽기 쉬운 형식일 수 있습니다. 예시에서는 JSON이라는 자료 형식을 사용하지만 문법을 외울 필요는 없습니다.
파일을 만들었다는 것만으로 복구가 확인된 것은 아닙니다. 중요하지 않은 예시 자료로 불러오기가 되는지 확인해야 합니다. 다른 사람의 파일을 가져올 때는 예상한 형식과 주소인지 검사해야 하고, 기존 목록을 덮어쓸지 합칠지도 알려 줘야 합니다. 백업은 나중에 다시 사용할 수 있을 때 의미가 있습니다.
여러 기기에서 쓰고 싶다면
다른 기기에서도 같은 자료를 사용하려면 기기 밖의 보관 공간과 사용자 구분 같은 추가 설계가 필요해집니다. 로그인 화면 하나를 그린다고 이 문제가 모두 해결되는 것은 아닙니다. 이번 책에서는 한 브라우저의 저장 범위를 이해하고, 더 큰 서비스가 필요한 시점을 알아보는 데까지 다룹니다.
네 번 열었는데 결과가 다른 이유
지수가 컴퓨터의 크롬에서 링크를 세 개 저장했습니다. 같은 컴퓨터의 다른 브라우저에서 열었더니 목록이 비어 있습니다. 휴대전화에서도 비어 있고, AI 도구 안의 미리보기에서는 처음 예시만 보입니다. 브라우저별 저장을 사용했다면 이런 차이는 곧바로 자료 유실을 뜻하지 않을 수 있습니다. 서로 다른 보관 공간을 보고 있을 수 있기 때문입니다.
따라서 저장 문제를 말할 때는 어느 주소, 어느 브라우저, 어느 프로필에서 입력했는지 함께 확인합니다. 같은 이름의 페이지라도 공개 주소와 미리보기 주소가 다르면 별도의 저장 공간일 수 있습니다. 이전 자료를 찾으려면 자료를 넣었던 환경부터 살펴봅니다.
저장한 자료가 다르게 보일 때
저장의 성공을 보여 주는 방법
화면에 항목이 나타났다는 것만으로 보관 성공을 알 수는 없습니다. 저장을 시도한 뒤 실제로 성공했는지 확인하는 처리가 필요합니다. 실패했다면 현재 화면에서는 보이더라도 다음에 남지 않을 수 있다는 안내를 보여 줍니다. ‘저장됨’이라는 글은 사용자가 기대하는 결과와 맞아야 합니다.
실습에서는 예시 항목을 넣고 새로고침한 뒤 같은 자료가 남는지 확인합니다. 이것은 실제 한 환경에서 시험한 결과입니다. 다른 환경에서 저장 제한이 있는지는 별도로 확인해야 합니다. 모든 브라우저에서 영구 보관된다고 넓게 말하지 않는 이유입니다.
처음 방문과 빈 목록을 구분하기
처음 방문한 사람에게 예시 항목을 보여 주는 것은 기능을 이해하는 데 도움이 될 수 있습니다. 하지만 사용자가 모든 항목을 지워 빈 목록으로 저장했다면 다음에 다시 예시를 채워 넣는 것은 원치 않는 행동일 수 있습니다. ‘자료가 아직 없음’과 ‘빈 목록을 저장함’은 구분해야 합니다.
AI에게 이 차이를 설명하면 초기 화면과 저장 규칙을 더 정확히 만들 수 있습니다. 처음 자료가 없을 때만 예시를 넣고, 사용자가 비운 상태는 그대로 유지하도록 요청할 수 있습니다. 이런 작은 차이가 사용자가 자신의 자료를 관리하고 있다고 느끼는 데 영향을 줍니다.
손상된 자료를 만났을 때
자료를 읽을 수 없을 때 빈 목록으로 조용히 덮어쓰면 원래 내용이 있었는지조차 알기 어려워질 수 있습니다. 읽기 실패를 알리고 기존 값을 보존할 수 있는지 살펴야 합니다. 초보자가 직접 복잡한 복구 코드를 쓰라는 뜻이 아니라, AI에게 원하는 실패 처리를 설명하고 결과를 확인하자는 것입니다.
중요한 자료를 넣기 전에 예시로 내보내기와 불러오기를 시험하는 이유도 여기에 있습니다. 읽을 수 없는 파일을 가져왔을 때 기존 목록이 유지되는지 확인하면 한 종류의 실패를 이해할 수 있습니다. 불러오기 실패를 이유로 전체 자료를 초기화하지 않도록 규칙을 정합니다.
기기 간 공유로 확장할 때의 질문
여러 기기에서 같은 목록을 보고 싶다면 자료를 기기 밖의 공통 공간에 둘 수 있습니다. 그때는 누가 읽고 고칠 수 있는지, 다른 사람의 자료와 어떻게 구분하는지, 서비스가 멈추면 어떻게 되는지를 생각해야 합니다. 로그인 화면은 그중 사용자를 확인하는 과정의 일부일 뿐입니다.
이번 책의 링크 모음은 그 확장을 바로 구현하지 않습니다. 대신 현재 방식이 어디까지 가능한지 알아두고 필요가 생겼을 때 질문할 기준을 만듭니다. ‘저장되니까 모두 공유되겠지’라는 기대를 갖지 않고, 나의 실제 사용 범위와 자료의 위치를 맞추는 것이 먼저입니다.
“브라우저에 저장되면 남에게는 안 보이나요?”
현재 브라우저에 저장된 자료라고 해서 모든 상황에서 비밀이 보장되는 것은 아닙니다. 같은 기기와 브라우저 프로필을 사용하는 사람은 그 자료를 볼 수 있을 수 있고, 페이지 코드의 처리 방식도 살펴야 합니다. 저장 위치와 접근 가능한 사람을 함께 생각해야 합니다.
이번 링크 모음은 예시와 개인용의 작은 범위를 배우기 위한 것입니다. 비밀번호나 민감한 개인정보를 보관하는 도구로 사용하도록 안내하지 않습니다. 그런 자료가 필요하면 적절한 보관 방식과 접근 권한, 복구를 별도로 검토해야 합니다. 브라우저 저장이라는 이름 하나가 그 검토를 대신하지 않습니다.
공유 컴퓨터에서 실습했다면 자신의 자료가 남는 범위도 확인합니다. 중요한 링크나 개인 메모를 넣기 전에 어떤 기기에서 누가 사용할 수 있는지 생각합니다. 실습을 예시 자료로 진행하면 저장의 원리를 이해하면서도 실제 자료의 노출과 유실에 대한 부담을 줄일 수 있습니다.
꼭 기억하세요
브라우저 저장은 편리하지만 영구 보관이나 기기 간 동기화를 보장하지 않습니다. 코드와 입력 자료를 구분해서 보관합니다.