크롬(Chrome) 콘솔 창에 나타나는 "Not allowed to load local resource(로컬 리소스를 로드할 수 없습니다)" 오류는 주로 브라우저가 이미지, CSS 파일 또는 스크립트를 불러오지 못할 때 발생합니다. 이 문제는 웹페이지가 다른 도메인이나 프로토콜을 통해 로컬 파일 시스템의 리소스에 접근하려고 할 때 나타나며, 여러 원인이 있지만 그중에서도 크롬의 보안 정책이 주요 원인인 경우가 많습니다.
그 외에도 오래된 호스트 캐시, 교차 출처 리소스 공유(CORS) 정책, 잘못된 파일 경로나 URL 문제 등 다양한 요인이 이 오류를 유발할 수 있습니다. 이 글에서는 오류가 발생하는 원인을 하나씩 살펴보고, 각 상황에 맞는 구체적인 해결 방법을 단계별로 안내해 드리겠습니다.
1. 크롬 보안 설정 비활성화하기
크롬은 기본적으로 강력한 보안 기능을 탑재하여 사용자를 악성 활동과 로컬 리소스에 대한 무단 접근으로부터 보호합니다. 하지만 오류가 교차 출처 리소스 공유(CORS)나 파일 경로 문제처럼 합법적인 원인에서 비롯된 경우라면, 보안 설정을 일시적으로 비활성화하는 것만으로도 리소스 로딩 문제가 해결될 수 있습니다.
다만 보안 기능을 끄면 브라우저와 시스템이 위험에 노출될 수 있으므로, 반드시 문제 해결 목적으로만 일시적으로 사용하고 작업 후에는 원래 설정으로 되돌리는 것이 좋습니다. 설정 방법은 다음과 같습니다.
- 컴퓨터에서 Google 크롬을 실행합니다.
- 화면 우측 상단의 점 세 개(⋮) 메뉴 버튼을 클릭합니다.
- 드롭다운 메뉴에서 '설정'을 선택합니다.
- 설정 창 왼쪽 메뉴에서 '개인정보 및 보안'을 클릭한 뒤, '보안' 항목으로 들어갑니다.
- '세이프 브라우징' 섹션에서 '보호 기능 사용 안 함(권장하지 않음)'을 선택합니다.
- 확인 창이 나타나면 '사용 중지' 버튼을 클릭합니다.
- 나중에 원래대로 되돌리려면 동일한 순서로 다시 설정하면 됩니다.
- 설정 변경을 마친 후 설정 탭을 닫습니다.
2. DNS 설정 변경하기
DNS 설정에 문제가 있는 경우에도 이 오류가 발생할 수 있습니다. 잘못된 DNS 구성, 오작동하는 DNS 서버, DNS 조회 실패 등의 문제가 생기면 브라우저가 리소스와 연결된 도메인 이름을 제대로 확인하지 못하게 됩니다. 그 결과 브라우저는 유효한 연결을 맺지 못하고 해당 리소스를 '로드할 수 없는' 것으로 판단합니다. 아래 단계에 따라 DNS 설정을 변경해 보세요.
- Windows + R 키를 동시에 눌러 실행 대화 상자를 엽니다.
- 실행 창에 ncpa.cpl을 입력하고 Enter 키를 누릅니다. 그러면 네트워크 연결 창이 열립니다.
- 현재 사용 중인 네트워크 어댑터를 선택하고 '속성' 버튼을 클릭합니다.
- 목록에서 '인터넷 프로토콜 버전 4(TCP/IPv4)'를 선택한 후 '속성' 버튼을 클릭합니다.
- '다음 DNS 서버 주소 사용'을 선택하고 아래 IP 주소를 입력합니다.
- 기본 설정 DNS 서버에 8.8.8.8을 입력합니다.
- 대체 DNS 서버에는 8.8.4.4를 입력합니다.
- '끝낼 때 설정 확인' 옵션에 체크 표시를 합니다.
- 변경 사항을 저장합니다.
3. 호스트 캐시 삭제하기
호스트 캐시를 삭제하는 것도 이 오류를 해결하는 데 효과적인 방법입니다. 브라우저는 웹사이트 로딩 속도를 높이기 위해 사이트 정보를 캐시에 저장하는데, 이 캐시가 오래되었거나 손상되면 리소스를 올바르게 가져오지 못할 수 있습니다. 호스트 캐시를 삭제하면 브라우저가 낡은 정보를 버리고 최신 데이터를 새로 받아오기 때문에 오류가 해결될 가능성이 높아집니다.
- 크롬을 실행합니다.
- 주소창에 다음 주소를 입력합니다.
chrome://net-internals/#dns
- 'Clear Host Cache(호스트 캐시 삭제)' 버튼을 클릭합니다.
- 브라우저를 재시작합니다.
문제가 해결되었는지 확인하고, 그렇지 않다면 다음 단계로 넘어가세요.
4. HTTP 서버 구축하기
일부 경우에는 HTTP 서버를 직접 구축하는 것이 가장 확실한 해결책이 됩니다. 리소스를 HTTP 서버에 올려두면 적절한 도메인과 프로토콜을 통해 접근할 수 있어 브라우저의 로컬 리소스 차단 정책을 우회할 수 있습니다. 이렇게 하면 리소스가 정상적으로 로드되어 웹페이지 기능도 문제없이 동작합니다. 설정 방법은 다음과 같습니다.
- 여기를 클릭해 웹 서버 확장 프로그램을 다운로드합니다.
- 'Add to Chrome(Chrome에 추가)' 버튼을 클릭합니다.
- 확인 창이 뜨면 '앱 추가' 버튼을 클릭합니다.
- 설치가 완료되면 애플리케이션을 실행합니다. 앱은 chrome://apps/ 주소에서 찾을 수 있습니다.
- 'Choose Folder(폴더 선택)' 버튼을 클릭하고 프로젝트 폴더를 지정합니다.
- 표시된 URL을 클릭하여 프로젝트를 실행합니다.
이 방법을 사용하면 로컬 리소스 관련 문제를 확실하게 해결할 수 있습니다. 네 가지 방법 중 상황에 맞는 해결책을 적용해 보시길 바랍니다.