문제

웹 애플리케이션은 접근성, 유연성, 편리성 때문에 오늘날 가장 널리 사용되는 애플리케이션 중 하나입니다． 이들은 데스크탑 컴퓨터, 노트북 컴퓨터, 태블릿 및 스마트폰을 포함한 인터넷 연결된 모든 장치에서 접근할 수 있어 이동 중이거나 원격으로 작업하는 사용자에게 적합합니다．

웹페이지 렌더링 문제는 느린 웹페이지 로딩, 불완전한 웹페이지 로딩, 또는 전혀 로딩되지 않는 문제를 초래할 수 있습니다． 사용자가 웹 애플리케이션을 원활하게 이용할 수 있도록 하기 위해 렌더링 문제를 신속하게 해결하고 처리하는 것은 필수적입니다． 이 글에서는 웹페이지 렌더링 문제의 일반적인 원인과 문제를 추가로 격리하기 위한 문제 해결 단계에 대해 논의합니다．

가능한 원인 

웹페이지가 렌더링되지 않거나 매우 느리게 렌더링되는 이유는 여러 가지가 있습니다． 몇 가지 일반적인 예는 다음과 같습니다：

• 서버로의 차선적 라우팅 경로
• 손상되었거나 오래된 브라우저 캐시와 쿠키
• 서버 문제
• 끊어진 링크나 누락된 리소스
• 광고 차단기 또는 방화벽에 의한 콘텐츠 차단

문제 해결 

서버로의 차선적 라우팅 경로

때때로 웹페이지의 느린 로딩은 웹 서버로의 차선적 경로 때문일 수 있습니다． 사이트와 서버 간의 최적 경로를 확보하기 위해 다음 간단한 방법을 사용해 지연 시간을 확인할 수 있습니다． Ping 테스트나 트레이스라우트를 수행함으로써, 카토를 통과할 때 얻은 결과와 카토를 완전히 우회할 때 얻은 결과를 비교할 수 있습니다．

1． 핑  마크업 서버가 응답하는지 확인하기 위해 ping 명령을 사용할 수 있습니다． 서버가 도달 가능한 경우, 왕복 시간(RTT)을 포함한 서버의 응답을 받게 됩니다． 연결이 카토를 통과할 때 RTT 값이 높으면, 카토를 통한 더 높은 지연 시간을 참조하여 추가 문제 해결을 하십시오．

2． 트레이스라우트  트레이스라우트 명령을 사용하여 연결이 목적지까지 가는 경로를 확인할 수 있습니다． 트레이스라우트에 표시된 홉의 수는 연결 속도를 결정하는 결정적 요소가 아닙니다． 대신에, 연결 속도를 평가할 때 왕복 시간(RTT)이 더 중요한 의미를 가집니다．

다음 예는 이 시나리오를 강조합니다: 연결이 카토를 통과할 때 네트워크 경로의 홉 수는 상당히 감소하지만, 왕복 시간(RTT)은 연결이 우회할 때보다 예상 외로 높습니다．

다음의 연결은 카토를 우회했습니다：

아래는 동일한 연결이지만, 카토를 통과합니다：

참고: 카토 클라우드를 통과할 때 홉 수가 감소하는 것은 일반적입니다． 이것은 Cato 클라우드 인프라 내의 내부 홉이 트레이스라우트 결과에 반영되지 않기 때문입니다．

카토를 통해 발생하는 더 높은 지연 시간：

연결이 카토를 통과할 때 발생하는 높은 지연 시간을 해결하기 위해서는 다음 설정을 검토하는 것이 필수적입니다：

소켓이 가장 가까운 PoP에 연결되도록 보장

• CMA에서 모니터링 탭으로 이동한 다음 영향을 받는 사이트를 선택하십시오
• 오른쪽 창에서 최근 연결 아래, 로그 보기를 클릭하십시오． 연결된 PoP에 대한 정보를 포함한 다른 창이 열립니다．
• 사이트 위치와 가장 가까운 PoP에 연결되지 않은 경우, 네트워크 > 사이트 > 사이트 구성 > 일반 > 선호하는 PoP 위치로 이동하여 소켓이 선호하는 PoP에 수동으로 구성되었는지 확인하십시오
• 잘못된 PoP에 잘못 구성된 경우, 사이트에 대한 선호 PoP 정의하기를 따라 가장 가까운 PoP로 설정하거나, 기본 POP 위치를 자동으로 설정하십시오(기본). 그러면 소켓이 최상의 PoP를 자동으로 선택하고 연결합니다．

송신 또는 백홀 규칙 확인

• CMA에서 네트워크 규칙으로 이동하여 목록을 스캔하여 문제의 웹 서버에 관련된 규칙이 있는지 확인하고 라우팅 방식이 구성되어 있는지 확인합니다．

• 그런 게 있으면, 구성된 송신 PoP/사이트를 검토하고 웹 서버와의 근접성을 평가합니다．

• PoP/사이트가 웹 서버에서 멀리 떨어져 있는 경우, 구성 최적화를 위한 두 가지 옵션이 있습니다:
  -- 네트워크 규칙에서 웹 서버 IP 주소를 제거하여 기존 네트워크 규칙을 수정합니다． 이 변경은 (기본적으로) 소켓이 연결된 PoP에서의 송신 트래픽을 허용합니다． 그러나 이는 항상 이상적이지 않을 수 있으므로, 직접 연결된 PoP가 웹 서버에 가까이 있지 않을 수도 있습니다.
  -- 대안으로 웹 서버에 대한 새로운 네트워크 규칙을 만듭니다． 이 새로운 규칙에서 웹 서버의 실제 위치에 더 가까운 PoP/사이트로 송신을 구성하십시오．
  각각 송신 규칙과 인터넷 트래픽 백홀링을 구성하는 방법에 대한 지침은 송신 규칙 구성 방법과 인터넷 트래픽 백홀링 구성을 참조하세요．

손상된/오래된 브라우저 캐시 및 쿠키

브라우저 캐시 및 쿠키는 때때로 캐시된 리소스가 오래되었거나 손상된 경우 웹 페이지에서 렌더링 문제를 일으킬 수 있습니다． 웹 페이지의 CSS 또는 JavaScript 파일이 업데이트되었지만 브라우저가 계속해서 캐시된 버전을 사용할 경우 잘못된 렌더링이나 페이지 오류가 발생할 수 있습니다． 이 문제가 해결되었는지를 확인하기 위해 사용자는 페이지를 시크릿 모드에서 접근하여 시도해 볼 수 있습니다． 시크릿 모드에서 작동한다면, 사용자들은 브라우저의 캐시를 지우고 페이지를 다시 로드할 수 있습니다． 다음은 일반적으로 사용되는 브라우저의 캐시 및 쿠키를 지우는 방법 중 일부입니다．

구글 크롬：

• 구글 크롬을 열고 창 오른쪽 상단의 세 점 아이콘을 클릭합니다．
• "더보기"를 클릭한 후 "브라우징 데이터 지우기"를 클릭합니다．
• 지우려는 시간 범위를 선택하고 "쿠키 및 기타 사이트 데이터"의 체크박스를 선택합니다．
• "캐시된 이미지 및 파일"．
• "데이터 지우기"를 클릭합니다．

모질라 파이어폭스：

• 파이어폭스를 열고 창 오른쪽 상단의 세 줄 아이콘을 클릭합니다．
• "설정"을 클릭한 후 "개인정보 & 보안"을 클릭합니다．
• "쿠키 및 사이트 데이터" 섹션을 아래로 스크롤하고 "데이터 지우기"를 클릭합니다．

애플 사파리：

• 사파리를 열고 화면 상단 메뉴 바에서 "Safari"를 클릭합니다．
• "선호도" 또는 "설정"을 클릭한 후 "개인정보"를 클릭합니다．
• "웹사이트 데이터 관리"를 클릭합니다．
• "모두 제거"를 클릭한 후 "완료"를 클릭합니다．

마이크로소프트 엣지：

• 마이크로소프트 엣지를 열고 창 오른쪽 상단의 세 점 아이콘을 클릭합니다.
• "설정"을 클릭하고 "개인정보, 검색, 서비스"를 클릭합니다.
• "검색 데이터 지우기" 섹션에서 "지울 내용 선택하기"를 클릭합니다.
• "쿠키 및 기타 사이트 데이터" 및 "캐시된 이미지 및 파일"의 체크박스를 선택합니다.
• "지금 지우기"를 클릭합니다.

문제 추적을 통한 추가 격리

이 섹션에서는 문제가 발생한 원인을 찾기 위해 문제를 격리하는 문제 해결 기술을 탐색할 것입니다. 이 프로세스를 돕기 위해 다음 질문들을 고려해보세요:

• 이것이 중국에서만 발생하나요?
• 만약 답변이 '예'라면 중국 | 웹페이지 렌더링 문제 를 참조하여 이 문제가 중국의 GFW에 의해 차단된 트래커나 애드웨어로 인해 발생했는지 확인하십시오．
• 이 문제가 특정 (그룹의) 사용자에게만 영향을 미치나요?
  답변이 '예'라면, 이 (그룹의) 사용자가 사용하는 장치와 나머지의 차이점을 식별해야 합니다．
• 문제가 하루의 특정 시간에만 발생하나요?
  그렇다면, 이 기간 동안 대역폭 사용량과 잠재적인 패킷 손실을 점검해야 합니다． 이 기간 동안 패킷 손실이 발생한 경우, 패킷 손실 문제 해결 방법을 참조하여 추가적인 문제 해결 지침을 확인하십시오．
• 문제가 특정 사이트에만 영향을 미치나요?
  하나의 사이트에만 영향을 미친다면, 영향을 받는 사이트에서 발생하는 방화벽/네트워크 규칙이 있는지 확인하십시오． 이 규칙들이 문제가 되는지 검사하십시오． 
• 문제가 특정 국가에서 시작된 연결에서만 발생하나요?
  특정 국가에도 영향을 미친다면, 이는 지오 차단과 관련이 있을 수 있습니다． 자세한 정보는 Cato IP 블랙리스트 또는 지오 차단으로 인해 웹사이트에 접근할 수 없음을 참조하십시오.
• 문제가 Cato를 통해 연결될 때만 발생하나요?
  답변이 '예'라면, 이는 IP 블랙리스트에 의한 것일 수 있습니다． 이와 관련된 추가 세부 정보를 위해 Cato IP 블랙리스트 웹사이트를 참조하십시오．
• 문제가 특정 브라우저에서만 발생하나요?
  그렇다면, 이것은 손상된 캐시 및/또는 쿠키 때문일 수 있습니다． 이는 또한 오래된 브라우저 때문일 수 있습니다． 시크릿 모드에서 탐색하고 필요한 경우 브라우저를 업데이트하십시오． 
• 사용자가 웹사이트로 이동하기 전에 "계속하기"를 클릭해야 합니까？
  Cato 프롬프트 페이지가 표시되고 사용자가 "계속하기"를 클릭할 때 웹페이지가 부분적으로만 로드되면, 이것은 알려진 서비스 제한입니다． 이 제한에 대한 자세한 내용은 프롬프트 페이지가 있는 웹사이트가 제대로 로드되지 않음을 참조하십시오． 

기사의 이 섹션에 도달했다면, 경험하고 있는 렌더링 문제는 복잡하고 추가 분석을 위해 데이터 수집이 필요할 가능성이 높습니다． HAR, 또는 HTTP 아카이브는 웹 브라우저와 웹사이트 간의 상호 작용을 캡처하고 기록하기 위해 사용되는 파일 형식입니다． 다음 단계는 문제를 복제하면서 HAR 데이터를 수집하는 것입니다． 이 데이터는 추가 분석을 위한 유익한 정보를 제공하며, 렌더링 문제의 잠재적 원인을 식별하는 데 도움이 됩니다． 설명서는 HAR 데이터 수집 방법을 참조하십시오．

HAR 데이터를 수집한 후에는 HAR 파일을 사용하여 웹페이지 문제 분석하기를 참조하여 수집한 HAR 파일을 효과적으로 분석하는 방법에 대한 자세한 단계를 확인하십시오． 이 가이드는 렌더링 문제를 일으키는 특정 문제를 격리하고 식별하는 데 필요한 지침을 제공합니다.

카토 지원

위의 단계가 웹페이지 렌더링 문제를 식별하고 해결하는 데 도움이 되지 않은 경우, 추가 검토를 위해 지원 팀에서 필요한 데이터를 수집하는 데 도움을 요청드립니다:

• SSS를 수집하십시오. 지원에 필요한 데이터를 수집하고 제공하는 방법에 대한 자세한 설명은 지원 자기 서비스 SupportMe 포털을 참조하십시오.
• 문제를 복제하는 동안 HAR 데이터를 수집하고 지원 사례에 업로드하십시오. 자세한 지침은 HAR 데이터 수집 방법을 참조하십시오．