워드프레스 전체 레이아웃이 갑자기 깨졌던 이유 (feat. siteurl에 숨어있던 공백 한 칸)

Troubleshooting /

Etc / 2026년 08월 18일

문제 상황

오라클 클라우드 ARM 인스턴스에 Docker로 올려서 운영 중인 워드프레스 블로그에서, 글을 쓰다 보니 어느 순간 사이트 레이아웃이 통째로 이상해졌다. 사이드바와 본문 영역이 원래는 여백을 두고 배치돼야 하는데, 화면 양쪽 끝에 여백 없이 딱 붙어버린 모습이었다. 특정 글 하나만 그런 게 아니라 블로그 목록 페이지를 포함해서 사이트 전체가 이런 상태였다.

처음엔 최근에 작성한 글에 넣은 HTML 블록이나 코드블록에서 태그가 안 닫혔나 싶었다. 워드프레스에서 흔히 겪는 문제이기도 하고, 증상도 CSS가 통째로 안 먹힌 것처럼 보였기 때문이다.

원인 추적: 개발자도구 콘솔

크롬 개발자도구 콘솔을 열어보니 답이 바로 나왔다. CSS, JS 리소스 요청이 전부 net::ERR_NAME_NOT_RESOLVED로 실패하고 있었다. 그런데 요청 URL을 자세히 보니:

https://ts.world-currency.org%20/wp-content/themes/astra/assets/css/minified/main.min.css

도메인 뒤에 %20(URL 인코딩된 공백)이 붙어 있었다. 브라우저 입장에서는 ts.world-currency.org%20이라는, 존재하지 않는 호스트로 요청을 보내는 셈이니 당연히 이름 해석에 실패하고, 그 결과 CSS/JS가 단 하나도 로드되지 못해서 스타일이 통째로 날아간 것처럼 보였던 것.

즉 개별 글의 문제가 아니라, 사이트 전체 URL 설정에 문제가 있다는 뜻이었다.

DB에서 직접 확인하기

워드프레스는 사이트 주소를 wp_options 테이블의 siteurl, home 값으로 관리한다. 컨테이너 안에서 mysql로 접속해서 확인해봤다.

SELECT option_name, option_value FROM wp_options WHERE option_name IN ('siteurl','home');

결과값을 눈으로 봤을 땐 https://ts.world-currency.org로 멀쩡해 보였다. 하지만 mysql 콘솔은 컬럼 폭을 맞추려고 출력할 때 공백을 채워 넣기 때문에, 눈으로만 봐서는 진짜 끝에 공백이 있는지 판단할 수가 없다.

그래서 길이와 마지막 바이트를 직접 찍어봤다.

SELECT option_name,
       LENGTH(option_value) AS byte_len,
       CHAR_LENGTH(option_value) AS char_len,
       HEX(RIGHT(option_value, 5)) AS last5_hex
FROM wp_options
WHERE option_name IN ('siteurl','home');

결과:

+-------------+----------+----------+------------+
| option_name | byte_len | char_len | last5_hex  |
+-------------+----------+----------+------------+
| home        |       30 |       30 | 2E6F726720 |
| siteurl     |       30 |       30 | 2E6F726720 |
+-------------+----------+----------+------------+

https://ts.world-currency.org는 원래 29글자여야 하는데 30바이트가 찍혔다. 마지막 5바이트를 HEX로 풀어보면:

  • 2E = .
  • 6F = o
  • 72 = r
  • 67 = g
  • 20 = 공백(space)

.org 뒤에 스페이스 한 칸이 그대로 저장돼 있었다. 언제 어떻게 들어갔는지는 정확히 알 수 없지만, 아마 설정 화면에서 URL을 복사/붙여넣기 하는 과정에서 끝에 공백이 같이 딸려 들어간 것으로 추정된다.

해결

원인을 알고 나면 해결은 간단하다. TRIM()으로 앞뒤 공백을 제거해주면 된다.

UPDATE wp_options SET option_value = TRIM(option_value) WHERE option_name IN ('siteurl','home');

적용 후 다시 길이를 확인해서 29바이트로 줄어든 것까지 확인하고, 브라우저에서 강력 새로고침(Ctrl+F5)을 해보니 레이아웃이 바로 정상으로 돌아왔다.

정리

  • 증상: 사이트 전체 레이아웃이 여백 없이 깨짐, 개별 글이 아니라 모든 페이지에서 동일하게 발생
  • 원인: wp_options의 siteurl / home 값 끝에 공백 한 칸이 섞여 들어가면서, 정적 리소스 요청 URL에 %20이 붙어 전부 ERR_NAME_NOT_RESOLVED로 실패
  • 확인 방법: LENGTH() / HEX()로 눈에 안 보이는 문자를 직접 찍어서 확인
  • 해결: TRIM()으로 옵션 값 정리

레이아웃이 깨졌는데 CSS/HTML 코드 자체는 멀쩡해 보인다면, 개발자도구 콘솔에서 리소스 요청이 실제로 성공하고 있는지부터 확인하는 게 빠른 길이다. 특히 도메인 설정처럼 사람 눈에는 똑같아 보이는 문자열이 원인일 땐, LENGTH()나 HEX()로 눈에 안 보이는 문자까지 까보는 게 확실하다.

Subscribe
Subscribe