워드프레스 관리자 대시보드에서 깨진 CSS를 수정하는 방법

워드프레스 관리자 에서 CSS가 깨져서 문제가 발생했나요 ? 정말 골치 아픈 일이죠? 깔끔한 관리자 화면 대신 지저분하고 스타일이 적용되지 않은 페이지만 보인다면 얼마나 답답할까요! 그렇다면 워드프레스 관리자 화면에서 깨진 CSS를 어떻게 수정해야 할까요?

이 문제는 단순히 대시보드의 외관을 망치는 데 그치지 않고, 사이트 관리 자체를 불가능하게 만들 수 있어 심각한 문제입니다. 더욱이 원인이 다양하기 때문에 초보 사용자들은 어디서부터 해결해야 할지 막막해하는 경우가 많습니다. 바로 이럴 때 워드프레스 지원팀의 도움이 필요합니다. 하지만 지원을 요청하기 전에 먼저 문제의 근본 원인을 파악해야 합니다.

그러니 걱정하지 마세요. 저희가 모든 문제 해결 단계를 꼼꼼히 살펴보고 가장 간단한 해결책을 찾아냈습니다. 이 가이드에서는 워드프레스 관리자 대시보드에서 깨진 CSS를 수정하는 방법을 안내해 드리겠습니다.

자, 그럼 시작해 볼까요!

워드프레스 관리자 영역에서 깨진 CSS 이해하기

솔직히 말해서, 워드프레스 관리자 화면이 갑자기 엉망진창으로 스타일도 없이 보일 때, 마치 사이트가 심술을 부린 것 같은 기분이 들죠.

걱정 마세요! CSS가 깨지는 건 흔한 일이고, 원인을 알면 쉽게 해결할 수 있는 경우가 많습니다. 이런 현상이 발생하는 간단한 이유를 아래에서 설명해 드릴게요

플러그인 드라마

플러그인은 룸메이트와 같습니다. 잘 작동하다가도 문제가 생기면 곤란해지죠. 코딩이 제대로 되지 않은 플러그인은 워드프레스의 기본 스타일과 충돌하여 대시보드를 엉망으로 만들 수 있습니다. 새 플러그인을 설치한 후 문제가 발생한다면, 그 플러그인이 원인일 가능성이 큽니다.

HTTPS와 HTTP의 대결

혼합 콘텐츠 문제는 교묘한 골칫거리입니다. 웹사이트가 HTTPS를 사용하지만 일부 CSS 파일이 HTTP로 제공되는 경우, 브라우저가 해당 파일을 차단할 수 있습니다. 그 결과는 무엇일까요? 바로 스타일이 적용되지 않은 관리자 화면입니다. 웹사이트 설정을 확인하고 모든 콘텐츠가 동일한 (보안) 페이지에 있는지 확인하세요.

HTTP 캐싱의 작동 원리와 활용법을 알아보세요

테마가 엉망이 되다

일부 테마는 호환성이 좋지 않습니다. 자체 관리자 스타일을 적용하거나 WordPress 핵심 파일과 충돌하는 경우가 있습니다. 최근에 테마를 변경했다면 Twenty Twenty-Three와 같은 기본 테마를 사용해 보고 대시보드가 ​​정상적으로 작동하는지 확인해 보세요.

캐싱 카오스

캐시는 속도 를 향상시키기 위한 것이지만, 오래된 캐시된 CSS 파일은 레이아웃 오류를 일으켜 속도를 저하시킬 수 있습니다. 브라우저 캐시, 플러그인 캐시, 서버 캐시(모두 삭제해야 합니다)를 모두 지우고 관리자 페이지 속도가 향상되는지 확인해 보세요.

CDN의 장난

잘못 구성된 콘텐츠 전송 네트워크 (CDN)는 오래된 CSS 파일을 제공하거나 아예 로드하지 못할 수 있습니다. CDN을 사용하는 경우 캐시를 삭제하여 최신 파일을 제공하도록 하세요.

관련 항목: WordPress CDN: 웹사이트에 추가하여 성능 향상시키기

파일 권한

CSS 파일은 접근 가능해야 하며, 파일 권한이 잘못 설정되면 서버에서 해당 파일을 잠가버릴 수 있습니다. 기술적인 용어처럼 들리더라도 걱정하지 마세요. 호스팅 제공업체 권한을 수정하면 됩니다.

손상된 파일

때때로 업데이트나 마이그레이션 과정에서 문제가 발생하여 CSS 파일이 손상되거나 누락될 수 있습니다. 이러한 파일을 교체하거나 다시 업로드하면 문제를 해결할 수 있습니다.

여기에서 알아보세요: 손상되거나 고장난 워드프레스 웹사이트를 복구하는 방법

브라우저 확장 프로그램 문제

광고 차단 프로그램이나 확장 프로그램이 관리자 CSS를 방해하고 있을 수 있습니다. 시크릿 모드로 대시보드를 열거나 다른 브라우저를 사용하여 확장 프로그램이 문제를 일으키는지 확인해 보세요.

호스팅의 특이점

때때로 서버 자체가 문제의 원인일 수 있습니다. 파일 접근을 차단하거나 리소스 사용량을 제한하는 등의 문제가 발생할 수 있죠. 다른 모든 방법이 효과가 없다면 호스팅 지원팀에 문의해 보세요.

알아두세요: 워드프레스 웹사이트에 저렴한 호스팅을 피해야 하는 이유

보세요? 워드프레스에서 깨진 CSS를 고치는 게 꼭 골치 아픈 일일 필요는 없죠. 보통은 문제의 원인을 찾아서 제거하면 되니까요! 자, 이제 수정 방법을 살펴볼까요?

더 읽어보기: 문제 해결을 위한 WordPress 디버깅 도구

워드프레스 관리자 대시보드에서 깨진 CSS를 수정하는 단계

워드프레스 관리자 페이지에 로그인했는데 평소처럼 깔끔한 레이아웃이 아닌 뒤죽박죽된 텍스트와 버튼들이 보인다면, CSS 오류가 원인일 가능성이 높습니다. 짜증스러울 수 있지만, 다행히 대부분 해결 가능합니다!

다음은 워드프레스 관리자 화면에서 깨진 CSS를 수정하는 간단한 방법입니다.

1단계: 플러그인 충돌 확인

플러그인은 때때로 온갖 문제를 일으킬 수 있는데, 특히 플러그인 자체의 CSS가 워드프레스의 기본 스타일과 충돌하는 경우 더욱 그렇습니다. 하지만 걱정하지 마세요. 생각보다 쉽게 ​​해결할 수 있습니다

모든 플러그인을 비활성화하세요:

• WordPress 관리자 화면에서 플러그인 > 설치된 플러그인 으로 이동하세요
• 모든 플러그인을 선택한 다음 일괄 작업 메뉴를 사용하여 비활성화하세요.
• 관리자 페이지를 새로고침하세요. CSS가 제대로 로드되면 플러그인이 문제의 원인입니다.

플러그인을 하나씩 다시 활성화하세요:

• 플러그인을 하나씩 다시 활성화하고, 활성화할 때마다 관리자 영역을 새로고침하세요.
• 특정 플러그인을 다시 활성화한 후에도 CSS가 다시 깨진다면, 그 플러그인이 문제의 원인입니다.

플러그인을 수정하거나 교체하세요:

• 문제가 있는 플러그인에 대한 업데이트를 확인하세요.
• 업데이트가 제대로 작동하지 않으면 다른 플러그인을 찾거나 플러그인 개발자에게 문의하여 지원을 받아야 할 수도 있습니다.

팁: 관리자 영역에 접근할 수 없는 경우, FTP를 플러그인 폴더의 이름을 임시로 변경하여 플러그인을 비활성화할 수 있습니다.

다음 내용을 읽어보세요: 플러그인과 사용자 정의 CSS를 사용하여 워드프레스 웹사이트에 최고의 애니메이션 효과를 추가하는 방법은 무엇일까요?

2단계: 혼합 콘텐츠 오류 수정(HTTP/HTTPS)

혼합 콘텐츠는 종종 눈에 띄지 않는 교묘한 문제의 원인입니다. 웹사이트가 HTTPS(보안 연결)를 사용하지만 일부 파일(예: CSS)은 여전히 ​​HTTP(보안되지 않은 연결)를 통해 로드될 때 발생합니다. 최신 브라우저는 이러한 파일을 차단하여 CSS가 제대로 작동하지 않게 만듭니다.

사이트 URL을 확인하세요:

• 설정 > 일반 으로 이동하여 WordPress 주소와 사이트 주소가 모두 HTTPS로 시작하는지 확인하세요.
• 그렇지 않다면 HTTPS로 업데이트하세요.

관리자 영역에 HTTPS 강제 적용: URL이 이미 HTTPS인 경우, WordPress에서 HTTPS를 강제로 사용하도록 하려면 wp-config.php 파일에 다음 줄을 추가하세요.

php define('FORCE_SSL_ADMIN', true);

HTTPS 플러그인을 사용하세요: Really Simple SSL 과 같은 플러그인을 설치하여 관리자 영역을 포함한 사이트의 모든 부분이 HTTPS를 사용하도록 하세요.

혼합 콘텐츠 확인: 브라우저의 개발자 도구를 (페이지를 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택). 콘솔 탭에서 "혼합 콘텐츠" 경고가 있는지 확인합니다.

다음 내용도 알아보세요: Elementor 사용자 정의 CSS가 실제 웹사이트에 반영되지 않는 문제 해결 방법

3단계: 주제 충돌 여부 확인

테마가 관리자 스타일과 충돌하는 추가 CSS를 로드하는 경우, CSS 오류가 발생하는 원인이 될 수 있습니다.

기본 테마로 전환:

• 외관 > 테마 로 이동하여 Twenty Twenty-Four와 같은 기본 테마를 활성화하세요.
• 관리자 페이지를 새로고침하여 CSS 문제가 해결되었는지 확인하세요.

테마를 업데이트하거나 사용자 정의 코드를 수정하세요:

• 기본 테마로 전환했을 때 문제가 해결된다면 현재 사용 중인 테마를 확인해 봐야 합니다.
• 최신 버전인지 확인하세요.
• 사용자 정의 CSS 또는 functions.php 파일에 대한 수정 사항에 오류가 있는지 확인하십시오. 이러한 오류가 스타일링 문제의 원인인 경우가 많습니다.

향후 문제 방지: WPCode를 사용하여 사용자 지정 코드 스니펫을 안전하게 관리하면 수정 사항으로 인해 나중에 문제가 발생하는 것을 방지할 수 있습니다.

다음 방법을 확인해 보세요: WordPress에서 "패키지를 설치할 수 없습니다. 테마에 style.css 스타일시트가 없습니다." 오류를 쉽게 해결하는 방법

4단계: 캐시 지우기

브라우저와 캐싱 플러그인은 CSS를 포함한 오래된 파일을 저장할 수 있습니다. 이로 인해 캐시가 제대로 업데이트되지 않으면 CSS가 깨질 수 있습니다.

브라우저 캐시를 삭제하세요:

• 브라우저 설정으로 이동하여 캐시, 특히 이미지 및 파일 캐시를 삭제하세요. 이렇게 하면 최신 CSS 파일이 로드됩니다.

워드프레스 캐시 지우기:

• 캐싱 플러그인을 사용 중이라면 플러그인 설정으로 이동하여 워드프레스 캐시를 지우세요.

팁: Cloudflare 와 같은 일부 CDN 서비스는 파일을 캐시하기도 합니다. 문제 해결 시 CDN 캐시도 함께 삭제해야 합니다.

이미지 최적화 및 웹사이트 속도 향상 방법은 무엇일까요

5단계: CDN 문제 해결

CDN을 사용하여 콘텐츠를 제공하는 경우, 설정 오류로 인해 CSS가 깨지는 경우가 있습니다. 해결 방법은 다음과 같습니다

콘솔에서 오류를 확인하세요:

• 브라우저의 개발자 도구를 열고 콘솔 탭에서 CDN 관련 오류가 있는지 확인하세요.

CDN 캐시를 삭제합니다

• CDN 제공업체(예: Cloudflare)에 로그인하고 ' 모든 항목 삭제' 옵션을 사용하여 캐시를 지우세요.

중요: 일부 CDN 서비스는 WordPress 관리자 영역에 대한 특정 규칙을 설정해야 할 수 있습니다. 필요한 경우 설명서 또는 지원팀에 문의하십시오.

자세히 알아보기: 콘텐츠 전송 네트워크(CDN)가 워드프레스 속도에 미치는 영향

6단계: 파일 권한 수정

파일 권한이 잘못 설정되면 서버에서 CSS 파일에 접근할 수 없게 되어 관리자 영역이 제대로 작동하지 않을 수 있습니다.

FTP를 통한 권한 업데이트:

• FTP 클라이언트를 사용하여 WordPress 사이트에 연결하고 루트 디렉토리로 이동합니다.
• 디렉터리의 권한은 755로, 파일의 권한은 644로 설정하십시오.
• 이러한 권한을 모든 파일과 하위 디렉터리에 재귀적으로 적용하십시오.

팁: 파일 권한이 잘못 설정되는 경우는 마이그레이션이나 호스팅 변경 후에 자주 발생합니다. 최근에 사이트를 이전했다면 파일 권한을 다시 한번 확인해 보세요.

놓치지 마세요: WP 관리자 페이지에 접속할 수 없으신가요? 빠르고 간편한 해결 방법과 팁을 확인하세요!

7단계: 손상된 파일 복구

손상된 WordPress 파일은 CSS 오류를 유발할 수 있습니다. 해결 방법은 다음과 같습니다.

WordPress 핵심 파일 재설치:

• WordPress.org 에서 최신 버전의 WordPress를 다운로드하세요 .
• FTP를 통해 새 파일을 업로드하여 기존 파일을 덮어쓰세요.

안전 수칙: 핵심 파일을 변경하기 전에 항상 사이트를 백업하십시오.

자세히 알아보기: 사이트를 손상시키지 않고 워드프레스를 안전하게 업데이트하는 방법은 무엇인가요?

8단계: 브라우저 확장 프로그램 비활성화

일부 브라우저 확장 프로그램(예: 광고 차단기 또는 개인 정보 보호 도구)은 WordPress 관리자 영역에서 CSS가 표시되는 방식을 변경할 수 있습니다.

모든 확장 프로그램을 비활성화하세요:

• 브라우저의 확장 프로그램 메뉴로 이동하여 모든 확장 프로그램을 일시적으로 비활성화하세요.
• 관리자 영역을 새로고침하여 CSS 문제가 해결되었는지 확인하세요.

문제를 좁혀보세요:

• 어떤 확장 프로그램이 문제를 일으키는지 파악하기 위해 각 확장 프로그램을 하나씩 다시 활성화하십시오.

문제가 있는 확장 프로그램을 확인했으면 설정을 조정하거나 다른 확장 프로그램을 찾아볼 수 있습니다.

추가 정보: 워드프레스 유지보수 모드: 활성화, 비활성화 및 문제 해결

이 단계를 따르면 WordPress 관리자 영역의 CSS가 깨지는 원인을 파악하고 해결할 수 있을 것입니다. 시간이 다소 걸릴 수 있지만, 원인을 정확히 찾아내면 그 이후로는 순조롭게 진행될 것입니다. 여전히 문제가 해결되지 않으면 호스팅 업체나 저희 WordPress 전문가 .

결론

워드프레스 관리자 화면에서 깨진 CSS를 수정하는 것은 까다로워 보일 수 있지만, 대개 원인을 찾아 단계별로 수정하면 해결됩니다. 플러그인 충돌, 테마 간섭 또는 캐싱 문제 등 어떤 원인이든, 저희가 공유한 문제 해결 단계를 따르면 문제를 신속하게 해결할 수 있을 것입니다.

변경 작업을 하기 전에 항상 사이트를 백업하는 것을 잊지 마세요. 문제가 해결되면 관리자 대시보드가 ​​정상으로 돌아오고, 다시 작업을 시작할 수 있습니다!