Ghost 블로그 만들고 나서 진행한 자잘한 추가 작업들
note

Ghost 블로그 만들고 나서 진행한 자잘한 추가 작업들

11 min read

Ghost로 블로그를 구축하는 일은 생각보다 빠르고 직관적이었다. 하지만 실제 운영 단계로 들어가면서 에러를 마주하기도 했고, 자잘하지만 필요한 작업들이 하나둘 생겨났다. 며칠 운영해보니 바로 이런 생각이 들기도 했다.

"데이터 보고 싶은데 ga4랑 서치콘솔 깜빡했네!"
"포스트 하단에 '모아보기'로 이동하는 게이트가 안보이네?"
"사이드 메뉴 글자가 너무 큰 것 같은데…"

하나하나 테스트하고 또 고쳤다. 이번 글에는 '사소한 실전 튜닝기'에 대한 내용을 담았다.

  1. GA4 & 서치콘솔 연동 – 운영의 시작
  2. 로그인 오류 디버깅 – 운영 환경 전환 시 주의점
  3. CTA 버튼 삽입 – 글 뒤의 행동을 설계하다
  4. 파비콘 삽입 – 사이트 구성의 작은 디테일
  5. 깨진 UI 수정 – HTML 요소 하나가 전체 레이아웃을 좌우할 수 있다

서치 콘솔 & GA4 연결 – 흐름이 보이는 운영을 시작하다

콘텐츠나 마케팅 업무를 하며 데이터의 중요성을 크게 느꼈었다. 그래서 ghost 블로그 또한 서치 콘솔이나 ga4를 연동하는 것은 자연스러운 일이었다. 서치 콘솔과 ga4 설정을 통해 색인과 방문자 통계 추적을 함께 시작했다.

ghost가 워드프레스만큼이나 seo친화적이라는 얘기가 있으니 검색이 잘 되었으면 좋겠고, 이왕 쓰는 글 누군가 읽어줬으면 좋겠고, 어떤 글이 많이 읽히는지도 알고 싶다. 웹사이트를 운영한다면 누구나 같은 마음일 것이다.

구글 서치 콘솔

도메인 방식으로 등록하기 (가비아 DNS 사용)

서치 콘솔에는 URL 프리픽스 방식, 도메인 전체 인증 방식 두 가지 등록 방식이 있다.나는 도메인 전체 등록 방식을 선택했다. 이 방식은 검색 노출과 추적 범위를 더 넓게 잡아주고, 하위 도메인까지 포함한다.

가비아 DNS에 TXT 레코드 삽입하기

서치 콘솔에서 도메인 등록을 시작하면 다음과 같은 TXT 레코드 형태의 값이 나온다.

google-site-verification=abc123def456ghi789

가비아에서 도메인을 구매했었기에 위 값을 그대로 복사해서 도메인 관리 페이지 → DNS 관리 → TXT 레코드 추가. 저장하고 기다리면 된다.

  • 호스트명: @
  • 레코드값: google-site-verification=...
  • TTL: 600 이상 (기본값 OK)
사이트맵 등록

도메인 인증 이후에는 사이트맵도 등록해야 한다. 아래 .xml을 구글 서치 콘솔 > [색인 > 사이트맵]에 등록하면 준비 완료. 검색 노출은 빠르면 2-3일, 길면 일주일 넘게 걸린다.

  • https://give-it-a-shot.site/sitemap.xml 등록
  • robots.txt 확인해서 색인 차단 경로 (/ghost/, /email/) 잘 설정돼 있는지 점검

GA4 연결

Ghost는 자동 연결 기능이 없어서 직접 site header에 ga4 추적 스크립트를 삽입해야 하는데 어드민에 code injection 기능이 있어서 생각보다 쉬웠다.

각자 운영하는 서비스에 맞춰서 선택하고 쭉쭉 넘어가면 된다. 마지막 단계에서 <만들고 계속하기> 누르고 나면 완료.

로딩되는 화면에서 조금 기다리면 아래처럼 구글 태그 설정이 나온다. 직접 설치를 선택해 해당 내용을 복사해서 ghost code injection의 site header에 넣어주면 끝. ga4에서 이벤트 잘 찍히는지 실시간 보고서로 확인도 잊지말자.

그리고 서치콘솔도 ga4에 연동해서 데이터 하나의 화면에서 편하게보기! (개인 블로그다보니 아직 데이터가 많이 없어서 루커 대시보드까지는 불필요하다..ㅎㅎ)

처음엔 GTM도 붙여볼까 했지만 단순한 기능으로 구현된 개인 블로그에는 GA4만 붙이는 게 더 간결한듯. Meta 픽셀, 커스텀 이벤트, 광고 태그도 관리할 경우 GTM이 필요하겠지만 그럴 단계가 아니기에 패스했다.

그리고 더 정확한 데이터 트래킹을 위해 '내부 트래픽 제외' 처리도 해두면 좋다. 기업에서 서비스를 운영하고 있다면 내부 인원이 발생시키는 이벤트가 많아서 필수. 나는 개인 블로그이지만 내가 일으킨 이벤트는 필터링하고 싶어서 세팅해두었다. 내부 트래픽 제외 설정은 구글 검색으로 찾은 이 블로그를 참고했다.

로그인 오류 – 운영환경 전환 시 누락을 주의하자

원래 접속하던 디바이스의 브라우저에서 로그인을 하면 정상 진입이 되는데, 다른 브라우저에서 로그인하면 Failed to log in, please try again 에러 메시지가 나왔다.

원래는 어느 브라우저든 로그인이 잘 되었는데 말이다. 디버깅을 하다 보니 문제는 훨씬 더 단순하면서도 치명적인 설정 누락에 있었다.

  • 개발 환경에서는 config.development.json로 잘 작동
  • 상용화 단계에서 config.production.json으로 교체

이 과정에서 config.production.json 파일에 admin 계정 정보 마이그레이션을 누락한 것..! 다행히도 전날에 작업했던 내용이어서 바로 의심되는 부분인 해당 파일들을 살펴보았다. 2개 파일을 비교해 놓친 부분을 빠르게 찾아낼 수 있었다.

Ghost는 내부적으로 admin 설정을 통해 Ghost Admin 대시보드의 접근 정보를 관리한다. 이게 빠지면 정상적으로 관리자 페이지에 접근할 수 없거나, 세션이 꼬인 듯한 현상이 발생한다.

config.production.json은 개발 버전에서 검증된 설정을 기준으로 하고
항목 누락 없이 명시적으로 복사하고 diff로 비교 검토하기

diff config.development.json config.production.json

CTA 버튼 삽입 – '읽고 나면 어디로 갈까?' 설계하기

사람들은 글을 읽고 나면 '이제 뭐 하지?', '다른 글도 있나?'하며 잠시 머뭇거리는 상태가 된다. 이때 디렉션이 명확하지 않거나 흥미가 떨어지면 쉽게 이탈할 수 있어서 가볍게 다음 행동을 안내해주는 CTA 버튼이 꼭 필요하다.

<div class="gh-canvas" style="text-align: center; margin-top: 3em;">
  <a href="https://give-it-a-shot.site/tag/note" class="button" style="display: inline-block; padding: 0.75em 1.5em; background-color: black; color: white; text-decoration: none;">
    <strong>All notes</strong>
  </a>
</div>

테마의 post.hbs 기본 템플릿에서는 연관 글만 몇 가지 보여주고 있었다. 나는 여기에 "이 글 말고도 더 있어요. 관심 있다면 한번 둘러보세요!"라는 의도를 전하고자 전체 페이지로 이동할 수 있는 버튼을 추가했다.

비슷한 의도로 게시물을 조금이라도 더 노출시키고 싶어서 사이드 메뉴도 살짝 수정했다. 포스트 타이틀 폰트 사이즈를 줄이고 3개 → 5개 노출되도록 수정했다.


깨진 UI 요소 수정 – 문을 열었으면 닫아야 한다

Ghost의 기본 테마는 꽤 완성도가 높지만 직접 글을 작성하고 HTML 요소를 넣다 보면 레이아웃이 어긋나는 순간들이 생긴다. 특히 내가 겪었던 문제는 글 하단에 삽입한 <table> 태그가 제대로 닫히지 않아 전체 UI가 깨지는 현상이었다.

다른 게시물은 정상인데 특정 게시물만 UI가 깨지고 있었다. 해당 게시물에만 하단에 표가 삽입되어 있는 점이 의심되어 HTML 코드를 확인해보았다. 역시나 마지막 <tr> 태그가 닫히지 않은 상태였고 <tbody>와 <table> 역시 닫는 태그가 누락되어 있었다.

이러한 구조적인 오류는 HTML 레이아웃을 잘못 해석하게 만들기에 콘텐츠가 왜곡되는 원인이 된다. 문제를 해결하기 위해 모든 <tr>, <tbody>, <table> 태그를 올바르게 닫아주는 방식으로 HTML을 수정한 모습은 아래와 같다.

파비콘 삽입 – 이 작은 아이콘 하나가 이미지를 좌우한다

파비콘은 기능적으로 아무 역할도 하지 않는다. 하지만 이게 없으면 관리되지 않는 죽은 사이트처럼 보이거나 에러가 발생한 것처럼 보인다. 그래서 바로 파비콘을 넣어주었다. 삽입은 어드민에서 쉽게 가능하다.

  • Admin → Settings → Design & branding(customize) → Publication icon (60x60) 추가

작지만 아이콘 하나가 사이트에 활동성을 불어넣어줬다.

마무리하며

블로그를 만든다는 건 단순한 일처럼 보인다. 요즘엔 테마 잘 골라서 몇 번 클릭하면 그럴듯한 사이트가 뚝딱 만들어지니까. 근데 고민하고 운영하는 문제는 좀 다르다. 완성된 줄 알았는데 곧 있으면 이런 생각이 든다.

"글은 썼는데, 누가 보긴 하나?"
"왜 이 글만 레이아웃이 깨지지?"
"읽고 나면 갈 데가 없네?"

결국 공간이다. 콘텐츠가 쌓이는 곳이기도 하고 누군가 들어와서 잠시 머물다 가는 곳. 그런 점에서 블로그는 단순한 페이지들의 모음이 아니라 작은 경험들이 이어지는 공간이다.

이게 잘 작동한다면 어떤 이는 필요한 정보를 얻고, 다시 찾아올 이유 하나쯤은 갖게 될 거다.

All notes