#089
2 min read · 391 words
이번 기록은 ToolSignal Pro 테마에서 실제로 터진 레이아웃 복구 작업이다. 글 본문 오른쪽이 잘리고, 이를 고치는 과정에서 원래 좌측 흐름이던 글 구조가 가운데 정렬로 바뀌었다. 눈으로는 단순한 정렬 문제처럼 보였지만, 원인은 빈 광고 영역과 글 구조 변경이 함께 만든 폭 계산 사고였다.
문제 상황
일부 Blogger 글에서 본문 오른쪽이 잘렸다. 같은 테마의 다른 글은 정상이라서 테마 전체 문제처럼 보이지 않았다. 특히 Blogger API, 라벨 정리, 색인 분류를 다룬 글 몇 개에서만 폭이 깨지는 모습이 반복됐다.
사용자 입장에서는 더 이상한 점도 있었다. 우측 잘림을 잡는 과정에서 글 전체가 가운데 정렬처럼 보이기 시작했다. 기술적으로는 폭을 중앙에 고정하면 안전해 보일 수 있지만, 이 테마의 원래 감각은 좌측에 차분히 붙은 기술 매거진형 흐름이었다.
원인
핵심 원인은 숨겨진 광고 영역이었다. 화면에는 보이지 않지만, 빈 광고 블록이 실제 폭 계산에는 남아 있었다. 이 영역이 본문 옆 공간을 차지하면서 일부 글의 본문 폭이 줄었고, 그래서 오른쪽이 잘린 것처럼 보였다.
여기에 AI가 색인 분류와 글 구조를 만지는 과정에서 HTML 구조가 조금씩 달라졌다. 같은 테마인데 어떤 글은 멀쩡하고 어떤 글만 깨진 이유가 여기 있었다. 테마 하나의 문제가 아니라, 글 내부 구조와 숨은 영역이 같이 충돌한 것이다.
잘못된 임시 해결
처음에는 글 영역을 전부 가운데 폭으로 묶었다. 이 방식은 우측 잘림을 빠르게 막아 주기는 했다. 하지만 ToolSignal Pro의 원래 분위기와 맞지 않았다. 글, 목차, 하단 내부 링크까지 모두 가운데 흐름이 되면서 기술 블로그 특유의 읽는 리듬이 사라졌다.
특히 하단 내부 링크와 색인 목록은 중앙 정렬이 되면 정보 목록이 아니라 장식처럼 보인다. 썸네일이 없는 색인 화면에서는 더 심했다. 그래서 중앙 정렬은 최종 해법으로 두지 않았다.
최종 처리
최종 방향은 단순했다. 원래 좌측 흐름은 되돌리고, 실제로 폭을 망치던 빈 광고 영역만 제거했다. 이렇게 하면 테마의 성격은 유지하면서도 오른쪽 잘림은 막을 수 있다.
색인 화면은 썸네일이 없는 구조에 맞춰 더 압축했다. 한 번에 더 많은 글이 보이도록 목록을 줄이고, 불필요하게 긴 본문 미리보기는 감췄다. 하단 내부 링크도 가운데 정렬이 아니라 본문 흐름에 맞는 좌측 목록으로 정리했다.
목차는 본문과 완전히 같은 선에 붙으면 답답해 보였다. 그래서 좌측 흐름은 유지하되, 목차만 살짝 안쪽으로 들여 읽기 시작점을 분리했다.
검증 결과
공개 글 화면에서 가로 스크롤과 오른쪽 잘림이 사라진 것을 확인했다. 글 본문은 다시 원래처럼 좌측 흐름으로 돌아왔고, 숨겨진 광고 블록은 화면 폭을 차지하지 않는다.
라벨 색인 화면도 첫 진입 시 더 많은 글을 보여 주도록 정리했다. 첫 화면에서 바로 더 보기 마지막 글입니다가 붙어 보이던 어색함도 줄였다. 이번 복구의 결론은 명확하다. 레이아웃 사고는 큰 재설계보다, 실제로 폭을 잡아먹는 작은 원인을 정확히 제거하는 편이 더 낫다.