고스트 블로그 대표 이미지가 너무 클 때 줄이는 방법 (Code Injection)

지금은 딱 맞게 수정

고스트(Ghost) 블로그로 글을 쓰다 보면 한 번쯤 마주치는 문제가 있습니다. 바로 글 상단에 들어가는 대표 이미지(Feature Image)가 너무 크게 나오는 현상입니다. 저도 최근에 이 문제로 한참 애를 먹었고, 결국 해결한 과정을 정리해두려고 합니다. 저처럼 헤매는 분들에게 도움이 됐으면 합니다.

문제 상황 - 대표 이미지가 화면을 꽉 채운다

글을 발행했더니 맨 위의 대표 이미지가 화면을 가득 메울 정도로 크게 표시됐습니다. 글보다 이미지가 더 주목받는 느낌이라 영 마음에 들지 않았습니다.

그래서 처음엔 단순하게 생각했습니다. "그럼 대표 이미지를 등록하지 말고, 그냥 본문 안에 이미지를 넣으면 되지 않을까?"

실제로 본문 안에 이미지를 넣으니 크기는 딱 적당했습니다. 그런데 새로운 문제가 생겼습니다. 메인(글 목록) 화면에서 썸네일이 사라진 것입니다.

알고 보니 고스트는 글 목록의 썸네일을 대표 이미지에서 가져옵니다. 본문 안에 넣은 이미지는 목록 썸네일로 잡히지 않습니다. 결국 이런 딜레마에 빠졌습니다.

대표 이미지를 등록하면 → 목록 썸네일은 나오지만, 글 상단 이미지가 너무 크다
본문에만 이미지를 넣으면 → 크기는 적당하지만, 목록 썸네일이 빈다

둘 다 포기할 수 없는 상황이었습니다. 정답은 "대표 이미지는 등록하되, 글 상단에 크게 나오는 부분만 작게 줄이는 것"이었습니다.

첫 번째 시도 - 테마 CSS를 고쳤는데 안 먹힌다

대표 이미지를 감싸는 CSS는 테마 파일 안에 있었습니다. 찾아보니 이런 코드였습니다.

.gh-article-image img {
    width: 100%;
}

여기에 높이 제한을 추가하면 되겠다 싶어서, 이렇게 고쳤습니다.

.gh-article-image img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}

그런데 아무리 저장하고 새로고침해도 사이트에 전혀 반영이 안 됐습니다. 분명히 코드는 맞게 넣었는데 왜일까. 한참 헤매다가 CSS 파일 맨 위 주석에서 단서를 찾았습니다.

요약하면 "이 파일은 개발용 원본이고, 실제 사이트는 압축된 빌드본(built 폴더 안의 파일)을 읽는다"는 내용이었습니다.

즉 제가 고친 건 원본 소스 파일이었고, 실제 사이트가 보는 파일은 따로 빌드된 압축본이었던 것입니다. 원본만 고치고 빌드를 다시 돌리지 않으면 변경 사항이 사이트에 나타나지 않는 구조였습니다.

빌드 명령을 돌려서 다시 만들 수도 있었지만, 그러려면 개발 환경을 갖춰야 하고 과정도 번거로웠습니다. 더 간단한 길을 찾기로 했습니다.

해결의 열쇠 - Code Injection

그 더 간단한 길이 바로 Code Injection이었습니다.

고스트 관리자 화면의 Settings → Code injection 메뉴에는 Site Header 영역이 있습니다. 여기에 코드를 넣으면 빌드 과정을 전혀 건드리지 않고도, 기존 스타일 위에 덮어쓸 수 있습니다. 테마 원본 파일을 수정하는 게 아니라서 테마를 업데이트해도 날아가지 않는다는 장점도 있었습니다.

여기에 이렇게 넣었습니다.

<style>
.gh-article-image img {
    max-height: 400px;
    object-fit: cover;
}
</style>

저장하고 글 페이지를 새로고침하니, 드디어 적용됐습니다.

한 가지 주의할 점이 있습니다. Code Injection은 CSS만 넣는 칸이 아니라 <head> 영역에 들어가는 HTML 전체를 넣는 곳입니다. 그래서 CSS를 넣을 때는 반드시 <style>...</style> 태그로 감싸야 합니다. 이걸 빼먹으면 적용되지 않습니다.

두 번째 문제 - 이미지가 잘린다

적용은 됐는데, 이번엔 이미지가 위아래로 잘려서 나왔습니다.

이건 object-fit: cover의 정상적인 동작입니다. 정해진 높이(400px)에 이미지를 꽉 채우면서, 넘치는 부분을 잘라내기 때문입니다. 썸네일처럼 일부만 보여주고 싶을 땐 유용하지만, 이미지 전체를 보여주고 싶을 땐 곤란합니다.

저는 이미지가 잘리지 않고 전체가 다 보이길 원했습니다. 그래서 방식을 바꿨습니다. 높이를 억지로 자르는 대신, 이미지의 최대 폭을 줄여서 전체적으로 작게 만드는 것입니다.

<style>
.gh-article-image img {
    max-width: 720px;
    margin: 0 auto;
}
</style>

이렇게 하니 이미지가 원본 비율 그대로, 잘림 없이, 가운데 정렬되어 적당한 크기로 나왔습니다. 폭(720px)을 600~800 사이에서 조정하면 원하는 크기로 맞출 수 있습니다.

정리하면 이렇습니다.

이미지를 의도적으로 잘라 일정한 높이로 맞추고 싶다 → max-height + object-fit: cover
이미지를 잘리지 않게, 전체를 작게 보여주고 싶다 → max-width로 폭 조절

개인적으로 느낀 점 - 워드프레스의 "추가 CSS"와 닮았다

이번 과정에서 가장 인상 깊었던 건 Code Injection의 존재였습니다. 워드프레스를 써본 입장에서 보니, 이건 워드프레스의 사용자 정의하기 → 추가 CSS와 거의 같은 역할이었습니다.

테마 원본 파일은 그대로 두고 그 위에 덮어쓰는 방식이라, 테마를 업데이트해도 내가 넣은 스타일이 유지되는 점까지 똑같았습니다. 플랫폼은 달라도 "원본은 건드리지 말고 덮어쓰기로 커스터마이징한다"는 개념은 결국 같다는 게 흥미로웠습니다.

다만 작은 차이가 하나 있습니다. 워드프레스의 추가 CSS는 CSS만 바로 입력하면 되지만, 고스트의 Code Injection은 <head>에 들어가는 HTML 영역이라 CSS를 넣을 때 <style> 태그로 감싸야 한다는 점입니다. 이 한 가지만 기억하면 워드프레스 경험이 있는 분은 어렵지 않게 적응할 수 있을 것입니다.