ghost-progress-plugin 미리보기

스크롤하면 상단 바가 0%에서 100%로 채워집니다. 왼쪽 패널에서 옵션을 바꾸면 임베드 코드도 함께 갱신됩니다.

들어가며

ghost-progress-plugin은 Ghost용의 가볍고 의존성 없는 읽기 진행 바입니다. Ghost 전용으로 시작했지만, Notion 기반 블로그에서도 동작하며 스크립트를 넣을 수 있는 곳이면 어디서나 동작합니다. 읽는 동안 얇은 바가 채워져 글의 어디쯤인지 보여줍니다. 이 페이지가 바로 그 예시로, 상단의 바가 실제로 동작하는 위젯입니다.

설치 방법

빌드 과정도, 테마 파일 수정도 없이 아래 스니펫 한 번이면 설치가 끝납니다:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.css">
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.min.js"
        data-content=".gh-content"
        data-position="top"></script>

코드 인젝션

Ghost에서는 Settings → Code injection → Site Footer 에 붙여넣습니다. Notion 기반 호스팅이라면 커스텀 코드 주입란에 넣습니다. oopy는 사이트 설정의 head/footer 코드란, super.so는 Custom Code 영역이며, 이때 data-content를 .notion-page-content로 지정하세요. 그 밖의 사이트라면 닫는 </body> 태그 바로 앞에 두면 됩니다.

옵션 설정

동작은 모두 스크립트 태그의 data-* 속성으로 설정합니다: 본문 선택자, 위치, 두께, z-index를 지정할 수 있습니다:

data-content=".gh-content"
data-position="top"
data-height="4"
data-z-index="100"

커스터마이즈

바의 색과 두께는 자유롭게 조절할 수 있습니다. 모든 클래스와 CSS 변수는 greedylabs-ghost-progress로 네임스페이스가 걸려 있어 테마와 절대 충돌하지 않습니다.

색상

채움 색은 기본적으로 Ghost 테마 강조색(--ghost-accent-color)을 따릅니다. 바꾸려면 data-color를 주거나 CSS 변수를 덮어쓰면 됩니다. 읽지 않은 부분의 트랙은 기본이 투명이니, 0%에서도 바가 보이게 하려면 트랙에 색을 주세요:

.greedylabs-ghost-progress {
  --greedylabs-ghost-progress-track: rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  .greedylabs-ghost-progress {
    --greedylabs-ghost-progress-track: rgba(255,255,255,.14);
  }
}

위치

data-position으로 위/아래를, data-height로 두께(px)를 정합니다. 바는 글 상단이 뷰포트 위에 닿으면 0%, 글 하단이 뷰포트 바닥에 닿으면 100%가 됩니다.

자주 묻는 질문

전체 페이지 기준인가요, 본문 기준인가요?

data-content로 가리킨 본문 기준입니다. 헤더, 대표 이미지, 푸터는 진행률에 포함되지 않습니다.

맨 위에서 바가 안 보여요.

0%에서는 채움 폭이 0이고 트랙이 기본 투명이라 그렇습니다. 트랙에 색을 주면(색상 섹션 참고) 비어 있어도 바가 보입니다.

Ghost가 아니어도 되나요?

됩니다. 스크립트를 넣을 수 있는 곳이면 data-content로 본문 컨테이너만 가리키면 됩니다. Notion은 .notion-page-content입니다.

마치며

ghost-progress-plugin은 MIT 라이선스 오픈소스이며, 소스와 이슈는 GitHub에 있습니다. 왼쪽 패널에서 옵션을 바꿔 확인한 뒤 마음에 들면 임베드 코드를 복사하세요. 도움이 되었다면 커피 한 잔 부탁드려요 ☕.