psvm203

깃허브 블로그 댓글 시스템 추가하기

Thu, 04 Jun 2026 00:00:00 GMT

댓글 시스템 비교

Disqus

Disqus는 웹 사이트에 손쉽게 댓글 기능을 추가할 수 있는 플랫폼이다. 코드 몇 줄만 넣으면 댓글 시스템을 추가할 수 있어 블로그 같은 정적 사이트에 많이 쓰인다.

다만 무료 플랜에서는 광고가 삽입되고 방문자 데이터가 수집된다는 단점이 있다. 이를 대체하고자 등장한 것이 utterances다.

utterances

utterances는 깃허브 issues를 사용하는 댓글 시스템이다.

Open source. 🙌

No tracking, no ads, always free. 📡🚫

No lock-in. All data stored in GitHub issues. 🔓

다분히 Disqus를 저격하는 듯한 설명이 눈에 띈다.

giscus

giscus는 utterances에서 영감을 받은 댓글 시스템이다. 깃허브 Issues 대신 Discussions를 기반으로 작동한다.

Issues는 본래 버그 리포트나 작업 관리를 위한 기능이다. 이를 댓글 용도로 쓰면 레포지토리의 Issues 목록이 댓글로 가득 차 본래 목적을 살리기 어려워진다. 반면 Discussions는 대화를 위한 기능이라 용도에 더 잘 맞으며, 반응이나 중첩 답글처럼 댓글 시스템에 적합한 기능도 제공한다.

giscus 설치하기

giscus 앱 추가

https://github.com/apps/giscus 에 접속해 giscus 깃허브 앱을 설치하고, 댓글 시스템을 적용할 레포지토리로 설정한다.

깃허브 Discussions 활성화

깃허브 레포지토리 설정에 들어가 Discussions를 활성화한다.

https://giscus.app/ko 에서 저장소 이름을 입력하면 체크 표시가 나오는 걸 확인할 수 있다.

Discussions 연결 옵션

블로그 글과 Discussions의 제목을 어떻게 연결할지 설정할 수 있다.

블로그 글의 URL이 https://psvm203.github.io/posts/blog-comments 라면, 각 옵션의 Discussion의 제목은

페이지 경로: posts/blog-comments
- http가 https로 바뀌거나 origin이 바뀌어도 인식한다.
- 가장 추천하는 방식이다.
페이지 URL: https://psvm203.github.io/posts/blog-comments
- http가 https로 바뀌거나 origin이 바뀌면 다른 Discussions가 생성된다.
페이지 title(og:title): 깃허브 블로그 방문자 통계 확인하기 - psvm203
- 제목이 수정되면 다른 Discussions가 생성된다.

Discussions 카테고리

카테고리는 Announcements로 설정한다. 다른 카테고리는 방문자가 Discussions를 생성할 수 있어 오염될 우려가 있다.

적용하기

원하는 테마를 고르고, 생성된 소스 코드를 댓글을 넣고 싶은 위치에 붙여넣으면 댓글 시스템이 적용된다.

위는 Giscus를 적용한 예시이다.

깃허브 블로그 방문자 통계 확인하기

Tue, 02 Jun 2026 00:00:00 GMT

블로그를 운영하다 보면 자연스럽게 '방문자 수가 얼마나 될까?'라는 궁금증을 가지게 된다. 네이버 블로그나 티스토리에서는 이런 방문자 통계를 별도 설정 없이 손쉽게 확인할 수 있다. (벨로그는 좀 예외다.)

깃허브 블로그에서 방문자 통계를 확인할 때 십중팔구 구글 애널리틱스를 추천한다. 점유율이 압도적으로 높고, 무료이며, 기능도 많다. 사실상 웹 분석 도구의 표준처럼 여겨진다.

그런데 나는 구글 애널리틱스를 며칠 쓰다 결국 떼어냈다. 그리고 그 자리에 GoatCounter를 붙였다. 널리 알려지지도 않고 기능도 더 적은 도구로 굳이 갈아탄 이유를 이 글에 정리하려 한다.

구글 애널리틱스를 버린 이유

처음에는 별 고민 없이 구글 애널리틱스를 설치했다. 구글에 '깃허브 블로그 방문자 통계'를 검색하면 온통 구글 애널리틱스밖에 안 나오기 때문이었다.

하지만 프라이버시 문제가 마음에 걸렸다. 구글 애널리틱스는 방문자 브라우저에 쿠키를 심고 방문자 정보를 구글 서버로 넘긴다. 그러다 보니 GDPR 같은 규제를 신경 써야 하고, 쿠키 동의 배너를 띄워야 하는 부담도 생긴다. 글 하나 읽으러 들어온 사람에게 추적당한다는 찜찜함을 안겨주고 싶지는 않았다.

GoatCounter를 선택한 이유

그래서 대안을 몇 가지 찾아보았다. 조건은 명확했다. 쿠키 없이 동작하고, 개인정보를 과다하게 수집하지 않으며, 무료 플랜을 지원할 것.

선택지가 많지는 않았다. 깃허브에서 analytics를 스타 순으로 검색해 나온 분석 도구 중 무료로 쓸 수 있는 건 Umami와 GoatCounter 정도였다. Umami 무료 플랜은 데이터를 6개월간 보관하는 반면, GoatCounter는 데이터를 영구 보관한다. Umami도 좋은 도구지만, 무료 플랜의 제한이 상대적으로 여유로운 GoatCounter를 선택했다.

쿠키를 전혀 쓰지 않고, 개인을 식별하는 데이터를 수집하지 않으면서도, 대시보드 화면에서 방문자 수와 유입 경로, 인기 글을 바로 확인할 수 있었다. 기능은 구글 애널리틱스에 비해 적었지만 내게 필요한 기능은 다 들어있었다.

사용법

https://www.goatcounter.com 에 들어가 가입한다.

<script
  data-goatcounter="https://{yoursite}.goatcounter.com/count"
  async
  src="//gc.zgo.at/count.js"
></script>

{yoursite} 부분을 수정하고, 이 스크립트를 html의 아무 곳에나 추가하면 된다. 나는 </head> 직전에 추가했다.

https://{yoursite}.getcounter.com 에서 대시보드를 확인할 수 있다.

마무리

나는 도구를 고를 때 장점이 많은 것보다 단점이 적은 것을 선호한다. 구글 애널리틱스가 나쁜 도구인 것은 아니다. 다만 내 기준에 더 어울리는 것이 GoatCounter였을 뿐이다.

맥북 필수 프로그램 Homebrew로 삶의 질 높이기

Sun, 31 May 2026 00:00:00 GMT

Homebrew란?

Homebrew는 macOS용 서드파티 패키지 관리자로, 터미널에서 프로그램을 설치, 삭제, 업데이트할 수 있다. macOS에는 윈도우의 winget이나 리눅스의 apt 같은 공식 패키지 관리자가 없어 Homebrew가 그 역할을 대신한다.

웹사이트를 일일이 찾아다니며 .dmg 파일을 내려받고, 마운트하고, 옮기고, 언마운트하는 번거로운 과정을 명령어 한 줄로 줄여준다. 또한 .dmg 파일로 설치한 프로그램은 하나씩 직접 실행해서 업데이트해야 하지만, Homebrew를 쓰면 설치된 모든 프로그램을 명령어 한 줄로 한 번에 업데이트할 수 있다.

이처럼 Homebrew는 흩어져있는 번거로운 프로그램 관리 작업을 터미널 하나로 깔끔하게 모아준다. 한번 익숙해지면 다시는 .dmg 파일을 보고 싶지 않아질 만큼 편리하다. 이제 Homebrew를 설치하는 방법과 사용법을 알아보자.

Homebrew 설치 방법

아래 명령어로 설치할 수 있다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

프로그램 설치

brew install {프로그램 이름} 을 입력하면 된다. 프로그램 이름은 구글에 brew {설치할 프로그램} 을 검색하면 Homebrew 웹 페이지에 나온다.

brew install wget

GUI 프로그램의 경우, --cask 옵션을 사용해야 하지만 생략해도 작동한다.

brew install --cask visual-studio-code

brew info로 설치 없이 정보만 확인할 수도 있다.

brew info visual-studio-code

brew list로 설치된 프로그램 목록을 확인할 수 있다.

brew list

프로그램 삭제

brew uninstall {프로그램 이름} 을 입력하면 된다.

brew uninstall wget

GUI 프로그램의 경우 --zap 옵션을 사용하면 프로그램이 남긴 설정 파일, 데이터 같은 잔여 파일까지 삭제하므로 brew uninstall --zap으로 삭제하는 걸 추천한다.

brew uninstall --zap visual-studio-code

프로그램 정리

brew autoremove는 어떤 프로그램도 의존하지 않는 프로그램, 즉 더 이상 필요 없어진 프로그램을 삭제하고, brew cleanup은 오래된 버전의 패키지, 캐시, 임시 파일을 삭제한다. 주기적으로 실행하면 용량 관리에 도움이 된다.

brew autoremove
brew cleanup

프로그램 업데이트

brew update를 하면 프로그램 정보(카탈로그)를 최신 상태로 업데이트한다. 이름과는 달리 프로그램을 업데이트하지는 않는다. 다른 brew 명령 실행 시 자동으로 갱신되는 경우가 많으므로 직접 실행하지 않아도 괜찮다.

brew update

brew upgrade를 하면 brew로 설치한 모든 프로그램을 최신 상태로 업그레이드한다.

brew upgrade

특정 프로그램만 업그레이드하고 싶으면 프로그램 이름을 붙이면 된다.

brew upgrade visual-studio-code

brew pin으로 특정 프로그램의 버전을 고정, 즉 업그레이드를 방지할 수 있다. 단, brew upgrade만 방지되므로 GUI 프로그램의 자체 업데이트는 가능하다. brew unpin으로 해제할 수 있다.

brew pin visual-studio-code
brew unpin visual-studio-code

여담: --cask 옵션

GUI 프로그램을 설치, 삭제, 업그레이드할 때는 --cask 옵션을 사용해야 한다.

--cask 옵션을 붙이지 않으면 CLI 프로그램(formula)을 우선적으로 검색하고, 붙이면 GUI 프로그램(cask)만을 찾는다.

다만 이름이 같은 CLI/GUI 프로그램은 이 글을 작성하는 시점에서 존재하지 않으므로 (docker은 겹친 적이 있으나 이름을 바꾸었다.) 대부분의 경우 --cask 옵션을 생략해도 된다. 명확성을 위해서는 명시하는 것이 좋다.

Node.js와 pnpm 설치하기

Sat, 30 May 2026 00:00:00 GMT

Node.js는 자바스크립트를 브라우저 밖에서 실행할 수 있는 런타임 환경이다. 현재 자바스크립트 런타임의 사실상 표준 위치를 차지하고 있다.

pnpm은 Node.js 생태계에서 사용하는 패키지 매니저다. npm과 같은 역할을 하지만, 패키지 설치 속도가 빠르고 디스크 공간을 적게 차지한다.

이 글에서는 Node.js와 pnpm을 설치하는 법을 정리하려 한다.

Windows

방법 1: msi 프로그램

방법은 간단하지만 웹페이지에 접속해야하고 설치가 느리다는 단점이 있다.

https://nodejs.org/ko/download 에 들어가 아래처럼 생긴 버튼을 눌러 Node.js를 설치한다.

<a href="https://nodejs.org/ko/download" class="w-full min-w-56 sm:w-auto" style="display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff;padding:8px 16px;border:1px solid #417e38;border-radius:.25rem;background-color:#417e38;font-weight:500;font-size:14px;text-decoration:none;box-sizing:border-box;box-shadow:0 1px 2px 0 rgba(16,24,40,.05);">Windows 설치 프로그램 (.msi)</a>

그 후 아래 명령어로 pnpm을 설치한다.

npm install -g corepack@latest
corepack enable pnpm

방법 2: winget

터미널 하나로 모든 설치 작업을 수행할 수 있어 편리하다.

아래 명령어로 Node.js와 pnpm을 설치한다.

winget install OpenJS.NodeJS.LTS
npm install -g corepack@latest
corepack enable pnpm

방법 3: fnm

fnm은 Node.js의 버전 관리 프로그램으로, nvm과 같은 역할을 하지만 더 빠르다. 여러 버전의 Node.js를 사용할 일이 있을 때 특히 유용하다.

winget install Schniz.fnm
fnm install --lts
npm install -g corepack@latest
corepack enable pnpm

macOS

방법 1: Homebrew

Homebrew 설치 방법은 맥북 필수 프로그램 Homebrew로 삶의 질 높이기 에서 확인할 수 있다.

아래 명령어로 Node.js와 pnpm을 설치한다.

brew install node
npm install -g corepack@latest
corepack enable pnpm

방법 2: fnm

여러 버전의 Node.js를 사용할 일이 있을 때 특히 유용하다.

brew install fnm
fnm install --lts
npm install -g corepack@latest
corepack enable pnpm

Linux

방법 1: fnm

curl -o- https://fnm.vercel.app/install | bash
fnm install --lts
npm install -g corepack@latest
corepack enable pnpm

apt 로도 설치가 가능하지만, apt 저장소에는 fnm이 존재하지 않아 Node.js를 직접 설치해야하는데, npm과 분리되어 설치되고, 버전도 오래된 경우가 많아 fnm으로 설치하는 걸 권장한다.

내가 깃허브 블로그로 옮긴 이유

Thu, 28 May 2026 00:00:00 GMT

그동안 티스토리, 벨로그로 개발 블로그를 운영했고, 각 플랫폼마다 분명한 장단점이 있었다. 이 글에서는 블로그 플랫폼의 장단점을 비교하고, 최종적으로 깃허브 블로그에 정착한 이유를 정리하려 한다.

네이버 블로그

네이버 블로그는 국내에서 대중적인 플랫폼이지만, 개발 블로그로는 적합하지 않았다.

가장 큰 문제는 검색 엔진 최적화(SEO)다. 구글에서 네이버 블로그 글이 잘 검색되지 않고, 검색되었을 때 데스크톱 환경에서 모바일 버전으로 노출되는 경우도 많다. 개발자들이 정보를 찾을 때 대부분 구글을 사용한다는 점을 생각하여, 검색이 불편한 네이버 블로그는 처음부터 후보에서 제외하였다.

티스토리

티스토리는 네이버보다 검색 노출이 잘 되고 광고 연동이 가능하다는 장점이 있다.

하지만 커스터마이징이 불편하고 마크다운 문법을 온전히 지원하지 않아 벨로그로 이주하였다. 티스토리에서도 물론 마크다운 사용이 가능하지만, 텍스트 에디터와의 호환이 매끄럽지 않다. 개발 글을 작성하다 보면 코드와 텍스트, 마크다운을 섞어 사용해야 하는데, 이 부분에서 사용 경험이 좋지 않았다.

벨로그

벨로그는 기본 디자인이 깔끔하고 마크다운 문법을 완벽하게 지원한다. 코드 블록과의 연동도 자연스러워 커스터마이징이 필요한 경우도 적었다. 개발 포스팅에 특화되어 있다는 점에서 가장 만족스러운 플랫폼이었다.

다만 결정적인 아쉬움이 있었는데 바로 카테고리 기능이 빈약하다는 점이다. 벨로그는 태그 기반으로 글을 분류하는데, 시리즈 기능이 있긴 하지만 계층적인 카테고리 구조를 만들기는 어렵다. 글이 쌓일수록 체계적으로 분류하고 정리하고 싶은 욕구가 커졌는데, 벨로그의 분류 체계로는 한계가 있었다.

결론: 왜 깃허브 블로그인가

여러 플랫폼을 거치며, 내가 원하는 블로그의 조건이 명확해졌다.

검색 엔진 최적화가 가능할 것: 구글에서 잘 검색되어야 한다
마크다운 문법을 지원할 것: 코드와 글을 편하게 작성할 수 있어야 한다
커스터마이징이 자유로울 것: 플랫폼에 마음에 들지 않는 부분이 생기면 수정할 수 있어야 한다
카테고리 기능을 갖출 것: 글을 체계적으로 분류할 수 있어야 한다

이 조건을 모두 만족하는 플랫폼은 결국 깃허브 블로그밖에 없었다. 깃허브 블로그는 마크다운으로 글을 작성하고, SEO를 세밀하게 관리할 수 있다. 테마를 자유롭게 고르거나 직접 만들 수 있어 커스터마이징의 제약이 사실상 없고, 폴더 구조나 설정을 통해 원하는 만큼 카테고리를 구성할 수 있다.

무엇보다 모든 글이 내 깃 저장소에 남는다. 콘텐츠가 특정 플랫폼에 종속되지 않고 온전히 내 소유로 관리된다는 점은 큰 매력이다.

물론 초기 설정이 다른 플랫폼보다 번거롭고, 필요한 기능을 직접 붙여야 한다는 진입 장벽은 있다. 하지만 한 번 환경을 갖춰두면 그 이후의 자유도는 다른 플랫폼이 따라올 수 없다. 그래서 나는 깃허브 블로그로 이사를 결심했다.