코로나19 사태 동안 모든 사용자가 웹사이트를 사용할 수 있도록 지원하세요

웹사이트의 핵심 기능이 항상 이용 가능하고, 액세스할 수 있고, 안전하고, 유용하고, 검색 가능하고, 빠르게 제공되도록 하는 방법

이 페이지에서는 웹사이트를 모든 사용자가 언제든지 사용할 수 있고, 액세스할 수 있으며, 안전하게 사용할 수 있도록 하는 방법을 안내합니다.

이 페이지의 안내는 코로나19 상황에서 사람들을 안전하게 보호할 수 있는 웹사이트를 지원하기 위해 단기적으로 초점을 맞추고 있는 Google 내 여러 부서의 팀을 기반으로 작성되었습니다. 이러한 Google 직원은 중요한 정보를 찾는 사람들로 인해 사이트에 대한 수요가 전례 없이 증가하는 상황에 직면해 있음을 확인했습니다. 이들 중 다수는 이전에 웹을 거의 또는 전혀 사용해 본 적이 없는 사람들입니다. 이 기간 동안 사이트의 가용성을 유지하고 모두가 액세스할 수 있도록 하는 것은 어려울 수 있습니다.

가이드

가용성, 신뢰성, 복원력, 안정성

사이트 트래픽이 급증하고 있지만 사이트가 실패하거나 장애가 발생하지 않도록 하려는 경우 아래 가이드를 참조하면 신속하게 문제를 해결하거나 심각한 문제가 되기 전에 감지할 수 있습니다.

  • 과부하된 서버 문제 해결을 읽고 트래픽 급증 문제를 감지, 완화, 방지하는 방법을 알아보세요.
  • 불필요한 이미지, 동영상, 스크립트, 글꼴을 삭제합니다. 각 페이지가 사이트 사용자에게 실제로 필요한 기능을 제공하는 데만 집중하도록 합니다.
  • 이미지를 최적화하면 이미지가 웹 팽창의 가장 큰 원인이므로 서버 대역폭 사용량을 크게 줄일 수 있습니다.
  • 정적 콘텐츠를 최대한 많이 CDN으로 오프로드하세요. 일반적인 제공업체 자세히 알아보기: AWS, Azure, Cloudflare, Google Cloud, Firebase
  • CDN에 동적 이미지 압축, 텍스트 압축 또는 JS 및 CSS 리소스의 자동 축소와 같이 쉽게 사용 설정할 수 있는 최적화가 있는지 확인합니다.
  • HTTP 캐싱을 최적화하면 최소한의 코드 변경으로 서버 수요를 크게 줄일 수 있습니다. 개요는 HTTP 캐시: 첫 번째 방어선을, 구체적인 권장사항은 HTTP 캐싱과 캐싱 권장사항을 참조하세요. Lighthouse에서 효율적인 캐시 정책을 사용하여 정적 애셋 제공 감사를 수행하면 캐시되지 않는 리소스를 빠르게 감지할 수 있습니다. 리소스 유형에 따라 최신 상태 요구사항이 다르기 때문에 캐싱 전략도 다르다는 점에 유의하세요.
  • 서비스 워커는 서버 수요를 크게 줄이는 또 다른 방법이지만 상당한 기술 투자가 필요할 수 있습니다. 또한 웹사이트가 오프라인으로 작동하도록 하여 인터넷에 연결되지 않은 재방문 사용자에게 영업시간, 전화번호, 기타 정보를 표시할 수 있습니다. Workbox는 많은 상용구를 자동화하고 권장사항을 더 쉽게 따르고 하위 수준의 ServiceWorker API를 직접 사용할 때 흔히 발생하는 미묘한 버그를 방지하므로 서비스 워커를 웹사이트에 추가할 때 권장되는 방법입니다.
  • 사이트의 사용량이 크게 증가하는 경우 이제 사이트가 더 매력적인 표적이 될 수 있으므로 DDoS 공격으로부터 적절히 보호되고 있는지 확인하세요. 일반적인 제공업체(AWS, Azure, Cloudflare, Google Cloud)에서 자세한 내용을 확인하세요.

자세한 내용은 네트워크 안정성을 참고하세요.

접근성

다양한 요구사항이 있는 사람들이 사이트에 액세스할 수 있으므로 접근성에 초점을 맞추는 것이 그 어느 때보다 중요합니다. 아래 가이드라인에 따라 웹사이트의 핵심 기능에 누구나 액세스할 수 있도록 하세요.

ID, 보안, 개인 정보 보호

중요한 수정사항을 빠르게 도출하고 싶을 수 있지만, 그 과정에서 보안에 허점이 생기지 않도록 항상 주의해야 합니다. 사람들은 극도로 비공개적인 주제에 관한 콘텐츠에 액세스해야 합니다. 웹사이트는 어떠한 경우에도 이러한 민감한 사용자 데이터를 보호하고 사람들에게 개인 식별 정보 (PII)가 안전하다고 확신시켜야 합니다.

자세한 내용은 안전 및 보안을 참고하세요.

사용성, UI 및 UX

사람들은 기본적인 니즈를 충족하기 위해 웹에 점점 더 많이 의존하고 있습니다. 이러한 사용자 중 상당수는 웹을 자주 사용하지 않습니다. 사이트의 핵심 기능의 사용성을 감사하고 사이트를 가능한 한 간단하고 쉽게 사용할 수 있는지 확인하는 것이 좋습니다.

  • 웹사이트 상단에 서비스 업데이트를 명확하게 전달하는 눈에 잘 띄는 배너 (X 버튼으로 삭제할 수 있음)를 추가하는 것이 좋습니다. 배너에 클릭 유도 문구를 사용하여 사용자를 보다 구체적인 리소스로 유도합니다. 다른 페이지 콘텐츠와 눈에 띄는 고유한 색상과 글꼴을 사용하는 것이 좋습니다. 공감을 표현하고, 사용자의 요구사항에 집중하고, 기대할 수 있는 서비스의 종류를 투명하게 공개하세요.
  • 중요한 사용자 여정 (CUJ)에서 물리적 상호작용을 최소화할 기회를 모색하고 이러한 변경사항을 제품팀에 제안합니다. 예를 들어 배달 서비스에 일반적으로 서명이 필요한 경우 이를 해결할 방법이 있는지 확인합니다.
  • CUJ가 최대한 간단하고 직관적인지 다시 확인하고 개선의 여지가 있다면 제품팀에 변경사항을 제안합니다.
  • 좋은 모바일 디자인의 원칙을 검토하고 다양한 휴대기기에서 CUJ를 시도하여 눈에 띄는 문제가 없는지 확인합니다. 웹을 자주 사용하지 않아 갑자기 웹에 더 의존해야 하는 사용자는 휴대기기에서 사이트에 액세스할 가능성이 높습니다.
  • 사이트를 리팩터링하여 반응형 디자인 패턴을 최대한 사용하세요.
  • 양식이 효율적이고 잘 디자인되었는지 확인하세요.

검색엔진 최적화

사람들은 건강 및 직업과 관련된 중요한 정보를 찾고 있습니다. 사이트가 모든 검색엔진에서 검색될 수 있도록 하는 것이 중요합니다. Lighthouse 검색엔진 최적화 감사는 기본적인 문제를 감지하는 데 도움이 될 수 있습니다. 검색엔진의 공식 블로그(Google, Bing, Baidu, DuckDuckGo, Yandex)에서 최신 안내 및 업데이트를 확인하세요. 코로나19 관련 최신 게시물:

자세한 내용은 검색 가능을 참고하세요.

성능

일부 ISP (예: 인도)는 가정용 인터넷 사용량이 급증하고 수요 증가를 충족하기 위한 인프라가 없습니다. 이와 같은 상황에서는 자신의 잘못이 아닌데도 웹사이트 속도가 느려질 수 있습니다. 부하 성능을 최적화하면 줄어든 대역폭으로 인한 역풍을 상쇄할 수 있습니다. 즉, 페이지를 로드하기 위해 네트워크를 통해 전송해야 하는 바이트 수를 줄이면 감소된 대역폭으로 인한 성능 영향을 상쇄할 수 있습니다.

  • 이미지는 웹에서 팽창을 유발하는 주요 원인입니다. 이미지를 최적화하여 웹사이트의 대역폭 사용량을 크게 줄일 수 있습니다. Squoosh는 이미지를 빠르게 압축할 수 있는 간단한 오픈소스 이미지 압축 도구입니다.
  • WebPageTest 또는 Lighthouse를 실행하여 최고의 성능 개선 기회를 찾아보세요.
  • 텍스트 압축을 사용 설정하여 텍스트 리소스의 네트워크 크기를 줄이세요. 최소한의 기술 투자로 쉽게 실적을 얻을 수 있는 경우가 많습니다.
  • 여러 부서 간 웹사이트 속도 수정을 읽고 다른 부서와의 공동작업 및 동의를 얻는 방법을 알아보세요.
  • 이미지에 표준화된 지연 로드를 사용하여 사람들이 실제로 볼 수 없는 이미지 요청을 최소화하세요. 브라우저 호환성이 100% 는 아니지만 점진적인 개선 기능으로 취급될 수 있습니다. 즉, 특정 브라우저가 표준화된 지연 로드를 지원하지 않으면 이미지가 평소와 같이 로드되어야 합니다.
  • 사이트에 더 비동기식으로 로드할 수 있는 A/B 테스트 또는 맞춤설정 스크립트가 있는지 또는 스크립트에 사용 중지할 수 있는 중요하지 않은 기능이 있는지 확인합니다. A/B 테스트 및 맞춤설정 스크립트는 일반적으로 페이지 콘텐츠가 로드되기 전에 실행되어야 하므로 완전히 비동기식으로 로드할 수 없습니다. 하지만 스크립트의 일부를 더 비동기식으로 로드할 수도 있습니다. 일반적인 동기 스크립트 (렌더링 차단 스크립트라고도 함)와 페이지 로드 시간의 기본적인 절충점을 알아보려면 주요 렌더링 경로를 참고하세요. 그런 다음 페이지 로드 시간보다 렌더링 차단 스크립트에 우선순위를 두어야 하는지 또는 그 반대로 해야 하는지를 결정하세요.
  • 서드 파티 코드는 대부분의 웹사이트에서 전체 요청의 약 절반을 차지합니다. 사이트 실행의 기본이 아닌 서드 파티 코드를 optimizing하거나 일시적으로 삭제 또는 사용 중지하는 것이 좋습니다.
  • 기능 출시의 우선순위가 낮아진 경우 지금이 정리하기에 좋은 시기일 수 있습니다. 태그 관리자에서 태그를 삭제하고, 지나치게 큰 CSS 및 JS를 정리하고, 지원 중단된 기능이나 코드를 삭제합니다. Chrome DevTools의 범위 탭과 Puppeteer의 Coverage 클래스를 사용하면 사용되지 않는 코드를 감지할 수 있습니다.

자세한 내용은 빠른 로드 시간을 참고하세요.

Unsplash에 제공된 NASA의 히어로 이미지