블로그스팟 썸네일 안 보임, 테마 전체 파일로 클로드와 챗GPT에게 해결한 경험

저는 개발자가 아닙니다. HTML이나 CSS를 따로 배운 적도 없습니다.

그런데 최근 블로그 메인화면에서 대표 썸네일이 잘려 보이는 문제가 생겼습니다. 이번 글은 그걸 고치다가 겪은 일을 그대로 적은 것입니다.

테마 전체 파일을 두 AI와 함께 점검해 사라진 썸네일을 복구한 과정입니다.

처음엔 그냥 이미지가 잘려 보였습니다

배너 이미지 양옆이 잘려서, 원래 글자가 다 안 보이고 일부만 보였습니다.

AI와 대화하면서 코드를 하나씩 고쳐봤습니다. 이 부분을 바꿔보고, 저 부분을 바꿔보고, 다시 확인하고, 또 바꿔보는 과정을 여러 번 반복했습니다.

처음엔 이렇게 양옆이 잘려서 나왔습니다.

고치다 보니 썸네일이 아예 사라졌습니다

이상하게도 고치면 고칠수록 상황이 나아지지 않았습니다.

고치는 과정에서 오히려 다른 모양으로 계속 잘렸습니다.

나중에는 잘려 보이던 썸네일이 아예 화면에서 통째로 사라졌습니다. 자리는 있는데 이미지가 하나도 안 보이는 상태였습니다.

여기서부터는 혼자서, 그리고 AI와 대화만으로는 어디가 잘못됐는지 찾기가 어려웠습니다.

원본 파일 전체를 그대로 보여줬습니다

그래서 방법을 바꿔봤습니다.

부분적으로 물어보는 대신, 블로그 테마의 원본 코드 파일 전체(6,891줄)를 다른 AI(챗GPT)에게 그대로 첨부해서 이렇게만 물었습니다.

“이 블로그 테마 파일인데, 메인화면 썸네일이 잘려 보이다가 지금은 아예 안 보인다. 잘못된 부분이 있는지 확인해줘.”

혼자서는 이렇게 개발자 도구까지 열어서 확인해봐도 원인을 찾기 어려웠습니다.

 

원인이 한 번에 정리되어 나왔습니다

솔직히 놀랐습니다. 대화로는 계속 안 풀리던 게, 파일 전체를 보여주니 한 번에 원인이 정리되어 나왔습니다.

정리하면 이런 문제들이 겹쳐 있었습니다.

확인된 문제	화면에서 나타난 결과	이번에 확인한 대응
이미지 주소를 만드는 코드 일부가 깨짐	이미지를 불러오는 과정이 정상적으로 이어지지 않음	깨진 문자열이 남은 부분을 정상 코드로 수정
같은 오류가 테마 파일 안 여러 곳에 존재	한 곳만 수정해도 다른 영역에서 문제가 반복될 수 있음	테마 전체를 검색해 총 8곳을 함께 점검
썸네일을 작은 정사각형 크기로 강제 처리	가로형 배너 이미지의 양옆 글자와 이미지가 잘려 보임	원본 이미지 비율을 고려하도록 썸네일 처리 방식 조정
모바일 썸네일 높이가 고정	기기 화면과 원본 비율에 따라 이미지가 답답하거나 잘려 보일 수 있음	모바일 화면에서도 비율이 자연스러운지 별도로 확인

이미지 주소를 만드는 코드 일부가 깨져 있었습니다. 정상 코드가 아니라 rt;1:1" 같은 이상한 글자가 남아 있었습니다.

같은 문제가 파일 안에 총 8곳 있었습니다. 또 썸네일 이미지를 원래보다 훨씬 작은 크기, 정사각형으로 강제로 자르도록 되어 있었습니다.

이미지가 화면에 나타나려면 자바스크립트가 정상 작동해야 하는데, 이미지 주소가 깨져 있으니 그 과정도 계속 실패하고 있었습니다. 모바일 화면에서는 썸네일 높이도 고정되어 있어 원본 이미지 비율과 맞지 않을 수 있는 상태였습니다.

즉 하나의 실수가 아니라, 여러 문제가 이어져서 생긴 상황이었습니다.

수정된 파일을 받아서 그대로 적용했습니다

챗GPT는 원인 설명만 하지 않고, 원본은 그대로 둔 채 문제를 고친 

새 파일을 따로 만들어줬습니다.

이 파일을 블로그 테마에 그대로 업로드했더니, 썸네일이 다시 정상적으로 보였습니다.

수정한 파일을 적용하니 썸네일이 온전하게 나왔습니다.

이번 일로 느낀 점

이 글에서 하고 싶은 말은 “어떤 AI가 더 뛰어나다”가 아닙니다.

같은 AI를 쓰더라도, 대화로 부분부분 물어보는 것과 원본 파일 전체를 통째로 보여주고 검토를 부탁하는 것은 결과가 다를 수 있다는 걸 직접 겪었습니다.

특히 코드처럼 글자 하나만 틀려도 전체가 깨지는 작업에서는, 부분만 계속 들여다보기보다 전체를 한 번에 보여주는 방법도 있다는 걸 이번에 배웠습니다.

따라 하실 분들을 위한 체크리스트

• 코드를 수정하기 전에는 반드시 원본을 먼저 백업해두세요. Blogger에서는 테마 > 더보기 > 백업 > 다운로드 방식으로 현재 테마 사본을 저장할 수 있습니다.
• 부분적으로 고쳐도 문제가 계속되면, 전체 파일을 통째로 AI에게 보여주고 검토를 요청해보세요.
• 수정 요청을 할 때는 “무엇이 어떻게 보이는지”를 최대한 구체적으로 설명해주세요.
• 받은 수정 파일은 바로 실제 블로그에 적용하지 말고, 원본과 무엇이 다른지 먼저 확인해보세요.
• 가능하다면 수정 전 원본 XML, 수정 파일, 수정 날짜를 별도 폴더에 함께 보관해두세요.
• PC 화면뿐 아니라 모바일에서도 메인화면, 글 목록, 개별 글 화면을 각각 확인해보세요.
• 저처럼 개발자가 아니어도, 문제 상황을 설명하고 결과를 확인하는 것만으로 충분히 해결할 수 있습니다.

참고: 이 글은 개인적으로 블로그 테마 문제를 해결한 경험을 기록한 내용입니다. 테마 파일을 수정하거나 교체하기 전에는 반드시 현재 테마 XML을 백업하고, 수정 후에는 실제 화면과 모바일 화면을 함께 확인하는 편이 안전합니다.