2025년 8월 17일한국어

영구 저장소 API에 대한 포괄적인 가이드로, 저장소 할당량 관리, 사용량 추적, 영구 저장 요청 및 최신 웹 개발을 위한 모범 사례에 중점을 둡니다.

영구 저장소 API: 웹 애플리케이션의 저장소 할당량 이해 및 관리

영구 저장소 API는 웹 개발자가 사용자 브라우저 내에서 저장소 할당량을 요청하고 관리할 수 있는 표준화된 방법을 제공합니다. 크기가 제한적이고 자동 제거 대상인 쿠키나 localStorage와 같은 기존 저장소 메커니즘과 달리, 영구 저장소 API는 애플리케이션이 더 많은 저장소 양을 요청하고, 결정적으로 저장소가 영구적으로 유지되도록 요청할 수 있도록 합니다. 이는 저장소 압력이 있는 경우에도 브라우저가 자동으로 데이터를 지우지 않음을 의미합니다.

영구 저장소가 중요한 이유

오늘날의 웹에서 프로그레시브 웹 앱(PWA)이 점점 보편화되고 사용자가 풍부한 오프라인 경험을 기대함에 따라, 안정적인 저장소는 필수적입니다. 다음 시나리오를 고려해 보세요:

문서 오프라인 접근: 문서 편집 애플리케이션(예: Google Docs)은 사용자가 인터넷 연결 없이도 작업을 계속할 수 있도록 문서를 로컬에 저장해야 합니다.
미디어 재생: Spotify나 Netflix와 같은 스트리밍 서비스는 사용자가 오프라인 재생을 위해 콘텐츠를 다운로드할 수 있도록 허용하며, 상당한 저장 공간을 필요로 합니다.
게임 데이터: 온라인 게임은 부드럽고 반응성이 좋은 경험을 제공하기 위해 사용자 진행 상황, 레벨 및 자산을 로컬에 저장하는 경우가 많습니다.
대규모 데이터셋 캐싱: 매핑 애플리케이션(예: Google Maps, OpenStreetMap 기반 앱)과 같은 대규모 데이터셋을 다루는 애플리케이션은 네트워크 요청을 줄이고 성능을 향상시키기 위해 데이터를 로컬에 캐싱하는 이점을 얻습니다.
로컬 데이터 처리: 이미지 편집, 비디오 편집과 같이 많은 데이터 처리를 수행하는 웹 애플리케이션은 반복적인 계산을 피하기 위해 중간 결과를 로컬에 저장할 수 있습니다.

영구 저장소가 없으면 기기의 공간이 부족할 때 브라우저가 이러한 애플리케이션이 사용하는 저장소를 자동으로 지울 수 있으며, 이는 사용자에게 불쾌한 경험과 잠재적인 데이터 손실을 초래할 수 있습니다. 영구 저장소 API는 애플리케이션이 영구 저장소를 요청하고 저장소 사용량을 추적할 수 있는 메커니즘을 제공하여 이 문제를 해결합니다.

저장소 할당량 이해

모든 브라우저는 각 오리진(도메인)에 일정량의 저장 공간을 할당합니다. 이 저장소 할당량은 고정되어 있지 않으며, 기기의 총 저장 용량, 사용 가능한 여유 공간, 사용자 브라우저 설정과 같은 요인에 따라 달라질 수 있습니다. 저장소 API는 사용 가능한 저장소 할당량과 이미 사용된 저장소 양을 쿼리하는 메서드를 제공합니다.

저장소 할당량 쿼리

navigator.storage 인터페이스는 저장소 관련 정보에 대한 접근을 제공합니다. estimate() 메서드를 사용하여 사용 가능한 저장소 할당량과 애플리케이션이 사용한 저장소 양을 추정할 수 있습니다. 반환되는 객체에는 바이트 단위로 측정된 usage 및 quota 속성이 포함됩니다.

            
async function getStorageEstimate() {
  if (navigator.storage && navigator.storage.estimate) {
    const estimate = await navigator.storage.estimate();
    console.log(`Usage: ${estimate.usage}`);
    console.log(`Quota: ${estimate.quota}`);
    console.log(`Percentage used: ${(estimate.usage / estimate.quota * 100).toFixed(2)}%`);
  } else {
    console.warn("Storage estimate API not supported.");
  }
}

getStorageEstimate();

예시: estimate.usage가 10485760(10MB)을 반환하고 estimate.quota가 1073741824(1GB)를 반환한다고 가정해 봅시다. 이는 애플리케이션이 1GB 할당량 중 10MB를 사용했으며, 이는 사용 가능한 저장소의 약 1%에 해당함을 나타냅니다.

할당량 값 해석

quota 값은 애플리케이션이 사용할 수 있는 최대 저장소 양을 나타냅니다. 그러나 이 할당량이 보장되는 것은 아님을 이해하는 것이 중요합니다. 기기의 저장 공간이 부족하거나 사용자가 브라우저 데이터를 지우면 브라우저가 할당량을 줄일 수 있습니다. 따라서 애플리케이션은 사용 가능한 저장소가 보고된 할당량보다 적은 상황을 처리하도록 설계되어야 합니다.

모범 사례: 저장소 사용량을 모니터링하고 애플리케이션이 저장소 한계에 접근하면 사용자에게 사전에 알리는 메커니즘을 구현하세요. 사용자가 불필요한 데이터를 지우거나 저장소 플랜을 업그레이드할 수 있는 옵션(해당하는 경우)을 제공하세요.

영구 저장소 요청

애플리케이션에 충분한 저장소 할당량이 있더라도, 브라우저는 저장소 압력 하에서 애플리케이션의 데이터를 자동으로 지울 수 있습니다. 이를 방지하려면 navigator.storage.persist() 메서드를 사용하여 영구 저장소를 요청할 수 있습니다.

            
async function requestPersistentStorage() {
  if (navigator.storage && navigator.storage.persist) {
    const isPersistent = await navigator.storage.persist();
    console.log(`Persistent storage granted: ${isPersistent}`);

    if (isPersistent) {
      console.log("Storage will not be cleared automatically.");
    } else {
      console.warn("Persistent storage not granted.");
      // Provide guidance to the user on how to enable persistent storage in their browser.
    }
  } else {
    console.warn("Persistent storage API not supported.");
  }
}

requestPersistentStorage();

persist() 메서드는 영구 저장소 요청이 승인되었는지 여부를 나타내는 불리언 값을 반환합니다. 브라우저는 영구 저장소를 승인하기 전에 사용자에게 권한을 요청할 수 있습니다. 정확한 프롬프트는 브라우저 및 사용자 설정에 따라 달라집니다.

사용자 상호작용 및 권한

브라우저가 영구 저장소를 승인하는 결정은 다음을 포함한 여러 요인에 따라 달라집니다:

사용자 참여: 브라우저는 사용자가 자주 상호작용하는 애플리케이션에 영구 저장소를 승인할 가능성이 높습니다.
사용자 설정: 사용자는 영구 저장소 요청 처리 방식을 제어하도록 브라우저 설정을 구성할 수 있습니다. 모든 요청을 자동으로 승인하거나, 모든 요청을 거부하거나, 각 요청에 대해 프롬프트를 표시하도록 선택할 수 있습니다.
사용 가능한 저장소: 기기의 저장 공간이 심각하게 부족한 경우, 사용자 참여나 설정과 관계없이 브라우저가 영구 저장소 요청을 거부할 수 있습니다.
오리진 신뢰: 일반적으로 영구 저장소에는 보안 컨텍스트(HTTPS)가 필요합니다.

중요: 영구 저장소 요청이 항상 승인될 것이라고 가정하지 마십시오. 애플리케이션은 저장소가 영구적이지 않은 상황에 대비해야 합니다. 데이터를 서버에 백업하거나 데이터 손실을 원활하게 처리하기 위한 전략을 구현하십시오.

기존 영구 저장 여부 확인

navigator.storage.persisted() 메서드를 사용하여 애플리케이션에 영구 저장소가 이미 승인되었는지 확인할 수 있습니다.

            
async function checkPersistentStorage() {
  if (navigator.storage && navigator.storage.persisted) {
    const isPersistent = await navigator.storage.persisted();
    console.log(`Persistent storage already granted: ${isPersistent}`);
  } else {
    console.warn("Persistent storage API not supported.");
  }
}

checkPersistentStorage();

저장소 기술과 할당량

영구 저장소 API는 브라우저에서 사용 가능한 다양한 저장소 기술과 상호작용합니다. 이러한 기술이 할당량에 어떻게 영향을 받는지 이해하는 것이 중요합니다.

IndexedDB: 클라이언트 측에서 구조화된 데이터를 저장하기 위한 강력한 NoSQL 데이터베이스입니다. IndexedDB는 저장소 할당량 제한의 영향을 받으며 영구 저장소로부터 상당한 이점을 얻을 수 있습니다.
Cache API: 서비스 워커가 네트워크 요청을 캐싱하여 오프라인 접근 및 성능 향상을 가능하게 하는 데 사용됩니다. Cache API를 통해 생성된 캐시도 전체 저장소 할당량에 기여합니다.
localStorage & sessionStorage: 소량의 데이터를 위한 간단한 키-값 저장소입니다. While localStorage is persistent by default (unless the user clears browser data), it's limited in size and doesn't benefit from the persistence guarantees provided by the Persistent Storage API as much as IndexedDB or the Cache API. 그러나 이들의 사용량도 전체 할당량에 포함됩니다.
쿠키: 기술적으로는 저장 메커니즘이지만, 쿠키는 일반적으로 대량의 데이터를 저장하기보다는 세션 관리 및 추적에 사용됩니다. 쿠키는 자체 크기 제한이 있으며 저장소 API가 관리하는 저장소 할당량과는 다릅니다.

예시: PWA는 IndexedDB를 사용하여 사용자 프로필 및 오프라인 데이터를 저장하고, Cache API를 사용하여 이미지 및 JavaScript 파일과 같은 정적 자산을 캐시합니다. 영구 저장소를 요청하면 이 캐시된 데이터가 제거될 가능성이 줄어들어 일관된 오프라인 경험을 제공합니다.

저장소 할당량 관리를 위한 모범 사례

효과적인 저장소 할당량 관리는 강력하고 사용자 친화적인 웹 애플리케이션을 구축하는 데 필수적입니다. 다음은 따라야 할 몇 가지 모범 사례입니다:

1. 저장소 사용량 정기적으로 모니터링

navigator.storage.estimate()를 사용하여 애플리케이션의 저장소 사용량을 주기적으로 모니터링하는 메커니즘을 구현하세요. 이를 통해 잠재적인 저장소 문제를 사전에 식별하고 사용자 경험에 영향을 미치기 전에 시정 조치를 취할 수 있습니다.

2. 저장소 관리 UI 구현

사용자에게 저장소를 관리하기 위한 명확하고 직관적인 인터페이스를 제공하세요. 이 UI는 사용자가 다음을 수행할 수 있도록 해야 합니다:

현재 저장소 사용량 보기.
가장 많은 저장소를 소비하는 데이터 식별.
불필요한 데이터 삭제(예: 캐시된 파일, 다운로드된 콘텐츠).

예시: 사진 편집 애플리케이션은 개별 사진 및 앨범에 사용된 저장소 분석을 사용자에게 보여주는 UI를 제공하여 사용자가 더 이상 필요 없는 사진을 쉽게 삭제할 수 있도록 할 수 있습니다.

3. 데이터 저장소 최적화

저장소 공간을 최소화하도록 애플리케이션의 데이터 저장소를 최적화하세요. 여기에는 다음이 포함됩니다:

저장하기 전에 데이터 압축.
효율적인 데이터 형식 사용(예: Protocol Buffers, MessagePack).
불필요한 데이터 저장 피하기.
오래되거나 사용되지 않는 데이터를 자동으로 삭제하는 데이터 만료 정책 구현.

4. 점진적 기능 저하 전략 구현

저장소가 제한되거나 영구 저장소가 승인되지 않는 상황을 우아하게 처리하도록 애플리케이션을 설계하세요. 여기에는 다음이 포함될 수 있습니다:

상당한 저장소를 요구하는 특정 기능 비활성화.
사용자에게 경고 메시지 표시.
데이터를 서버에 백업할 수 있는 옵션 제공.

5. 사용자에게 영구 저장소에 대해 교육

애플리케이션이 영구 저장소에 크게 의존하는 경우, 사용자에게 영구 저장소 권한을 부여하는 것의 이점에 대해 교육하세요. 영구 저장소가 애플리케이션의 성능을 어떻게 향상시키고 데이터가 자동으로 지워지지 않도록 하는지 설명하세요.

6. 저장소 오류를 우아하게 처리

애플리케이션이 저장소 할당량을 초과할 때 발생할 수 있는 QuotaExceededError와 같은 저장소 오류를 처리할 준비를 하세요. 사용자에게 유익한 오류 메시지를 제공하고 가능한 해결책(예: 저장소 지우기, 저장소 플랜 업그레이드)을 제안하세요.

7. 서비스 워커 사용 고려

서비스 워커는 정적 자산 및 API 응답을 캐싱하여 웹 애플리케이션의 오프라인 기능을 크게 향상시킬 수 있습니다. 서비스 워커를 사용할 때는 저장소 할당량을 염두에 두고 캐시를 효과적으로 관리하기 위한 전략을 구현하세요.

국제화 고려사항

애플리케이션의 저장소 관리 UI를 설계할 때 다음 국제화(i18n) 측면을 고려하세요:

숫자 형식: 저장소 사용량 값을 표시할 때 다른 로케일에 적합한 숫자 형식을 사용하세요. 예를 들어, 일부 로케일에서는 쉼표가 소수점 구분 기호로 사용되는 반면, 다른 로케일에서는 마침표가 사용됩니다. JavaScript의 toLocaleString() 메서드를 사용하여 사용자 로케일에 따라 숫자를 형식화하세요.
날짜 및 시간 형식: 애플리케이션이 날짜와 시간을 저장하는 경우, 저장소 관리 UI에 표시할 때 사용자 로케일에 따라 형식화하세요. JavaScript의 toLocaleDateString() 및 toLocaleTimeString() 메서드를 사용하여 로케일 인지 날짜 및 시간 형식화를 수행하세요.
단위 현지화: 저장소 단위(예: KB, MB, GB)를 다른 지역에서 사용되는 규칙과 일치하도록 현지화하는 것을 고려하세요. 표준 단위는 널리 이해되지만, 현지화된 대안을 제공하면 사용자 경험을 향상시킬 수 있습니다.
텍스트 방향: 저장소 관리 UI가 왼쪽에서 오른쪽(LTR) 및 오른쪽에서 왼쪽(RTL) 텍스트 방향을 모두 지원하는지 확인하세요. CSS 속성인 direction 및 unicode-bidi를 사용하여 텍스트 방향을 올바르게 처리하세요.

보안 고려사항

영구 저장소를 다룰 때 보안은 가장 중요합니다. 다음 보안 모범 사례를 따르세요:

HTTPS 사용: 전송 중인 데이터를 보호하고 중간자 공격을 방지하기 위해 항상 HTTPS를 통해 애플리케이션을 제공하세요. HTTPS는 또한 많은 브라우저에서 영구 저장소의 요구 사항입니다.
사용자 입력 정리: 교차 사이트 스크립팅(XSS) 취약성을 방지하기 위해 사용자 입력을 저장하기 전에 모두 정리하세요.
민감한 데이터 암호화: 무단 접근으로부터 보호하기 위해 민감한 데이터를 로컬에 저장하기 전에 암호화하세요. 암호화를 위해 Web Crypto API 사용을 고려하세요.
안전한 데이터 처리 관행 구현: 데이터 유출을 방지하고 저장된 데이터의 무결성을 보장하기 위해 안전한 코딩 관행을 따르세요.
코드 정기적으로 검토 및 업데이트: 최신 보안 위협 및 취약성에 대한 정보를 파악하고 정기적으로 코드를 검토 및 업데이트하여 이를 해결하세요.

다양한 지역별 예시

다양한 지역에서 저장소 할당량 관리가 어떻게 다를 수 있는지 고려해 봅시다:

대역폭이 제한된 지역: 인터넷 대역폭이 제한적이거나 비싼 지역에서는 사용자가 오프라인 접근 및 캐싱에 더 의존할 수 있습니다. 따라서 애플리케이션은 효율적인 저장소 사용을 우선시하고 캐시된 데이터 관리에 대한 명확한 지침을 제공해야 합니다. 예를 들어, 아프리카 또는 동남아시아의 일부 지역에서는 데이터 비용이 중요한 문제입니다.
데이터 개인 정보 보호 규정이 있는 지역: 유럽 연합(GDPR)과 같이 엄격한 데이터 개인 정보 보호 규정이 있는 지역에서는 애플리케이션이 저장소 사용 방식에 대해 투명해야 하며 개인 데이터를 저장하기 전에 사용자로부터 명시적인 동의를 얻어야 합니다. 또한 사용자에게 데이터에 접근하고, 수정하고, 삭제할 수 있는 기능을 제공해야 합니다.
구형 기기를 사용하는 지역: 사용자가 구형 또는 성능이 낮은 기기를 사용할 가능성이 높은 지역에서는 애플리케이션이 저장소 사용에 특히 유의하고 기기 성능에 미치는 영향을 최소화하기 위해 데이터 저장소를 최적화해야 합니다.
특정 언어 요구 사항이 있는 지역: 저장소 관리 UI는 숫자 형식(예: 소수점 구분 기호로 쉼표 또는 마침표 사용), 날짜/시간 형식 및 올바른 텍스트 방향을 고려하여 완전히 현지화되어야 합니다.

예시: 인도 사용자를 대상으로 하는 뉴스 애플리케이션은 간헐적인 인터넷 연결 가능성을 인식하여 사용자가 오프라인 읽기를 위해 뉴스 기사를 다운로드할 수 있도록 허용할 수 있습니다. 이 애플리케이션은 또한 여러 인도 언어로 명확한 저장소 관리 UI를 제공하여 사용자가 다운로드한 기사를 쉽게 삭제하여 공간을 확보할 수 있도록 합니다.

저장소 API의 미래

영구 저장소 API는 지속적으로 발전하고 있으며, 최신 웹 애플리케이션의 증가하는 요구를 충족시키기 위해 새로운 기능과 역량이 추가되고 있습니다. 몇 가지 잠재적인 미래 개발 사항은 다음과 같습니다:

향상된 저장소 할당량 관리: 저장소 할당량에 대한 보다 세분화된 제어를 통해 애플리케이션이 다양한 유형의 데이터에 특정 양의 저장소를 할당할 수 있도록 합니다.
클라우드 저장소 통합: 클라우드 저장소 서비스와의 원활한 통합을 통해 로컬 저장소가 제한될 때 애플리케이션이 데이터를 클라우드에 투명하게 저장할 수 있도록 합니다.
고급 데이터 동기화: 로컬 저장소와 클라우드 간에 데이터를 효율적으로 동기화할 수 있도록 하는 보다 정교한 데이터 동기화 메커니즘.
표준화된 저장소 암호화: 로컬 저장소에 저장된 데이터를 암호화하기 위한 표준화된 API를 통해 민감한 데이터를 보호하는 프로세스를 간소화합니다.

결론

영구 저장소 API는 풍부한 오프라인 경험을 제공할 수 있는 견고하고 사용자 친화적인 웹 애플리케이션을 구축하고자 하는 웹 개발자를 위한 강력한 도구입니다. 저장소 할당량 관리를 이해하고, 영구 저장소를 요청하며, 데이터 저장 및 보안에 대한 모범 사례를 따르면, 신뢰할 수 있고, 성능이 좋으며, 사용자 개인 정보를 존중하는 애플리케이션을 만들 수 있습니다. 웹이 계속 발전함에 따라 영구 저장소 API는 차세대 웹 애플리케이션을 가능하게 하는 데 점점 더 중요한 역할을 할 것입니다.