Umami 도입기

용인사는 개발자·2026년 2월 2일

Umami란?

Umami는 오픈소스로 제공되는 웹 분석(Analytics) 도구다. 웹사이트에 방문자 수, 페이지 조회 수, 유입 경로 같은 기본적인 트래픽 데이터를 수집해서 대시보드 형태로 보여준다.

상용 분석 서비스들과 달리 구조가 단순하고 가벼워서, 복잡한 마케팅 분석보다는 “내 사이트에 사람이 얼마나 오는지” 같은 기본 지표를 확인하는 데 잘 어울린다. 또한 개인정보 수집을 최소화하는 방향으로 설계되어 있어서, 개인 프로젝트나 작은 사이트에 부담 없이 붙이기 좋다는 점도 특징이다

Why Umami?

내 블로그에 DB 테이블을 따로 만들어 방문자 수를 집계할 수도 있었지만, 숫자만 쌓이는 방식보다는 직관적으로 얼마나 사람들이 들어오는지 한눈에 보고 싶었다.

여러 분석 도구들이 있었지만, 내가 중요하게 본 기준은 딱 두 가지였다.
무료일 것, 그리고 설정이 복잡하지 않을 것.

처음에는 Google Analytics도 함께 고려했다. 워낙 널리 쓰이는 서비스라 기능도 강력하고 참고할 자료도 많아서 좋아 보였다.

하지만 막상 적용하려고 보니 설정 과정이 생각보다 복잡하게 느껴졌다. 계정 구조나 속성 설정, 추적 코드 방식도 여러 단계로 나뉘어 있어서 가볍게 시작하기엔 조금 부담이 있었다. “일단 방문자 수만 확인하고 싶다”는 내 목적에 비해 기능이 너무 많다는 느낌도 들었다.

그래서 방향을 바꿔, 더 단순하고 바로 사용할 수 있는 도구를 찾게 됐고, 그때 선택한 게 Umami였다.

Umami의 효능..

Umami는 기능이 많은 분석 도구는 아니지만, 개인 프로젝트에서 쓰기엔 딱 필요한 것들만 갖추고 있다.

주요 기능

기본 트래픽 분석

페이지뷰(Pageviews) — 각 페이지의 조회 수 통계
유니크 방문자(Visitors) — 중복 제거된 방문 수 확인
이탈률(Bounce Rate)
평균 세션 시간(Session Duration)
유입 경로(Referrers) — 어디서 트래픽이 들어왔는지 확인
기기 / 브라우저 / 운영체제 / 국가 등 방문 환경 정보 확인 가능

커스텀 이벤트 추적 (Events)

Umami는 기본 pageview 외에도 사용자 정의 이벤트를 기록할 수 있다.

HTML 속성 기반 이벤트

<button data-umami-event="signup_click">Sign up</button>

JavaScript 기반 이벤트

if (window.umami) {
  window.umami.track('post_view', {
    postId
  });
}

커스텀 이벤트는 대시보드에서 이벤트별로 집계/조회 가능하며,
이벤트 속성(Properties)도 함께 확인할 수 있다.

자동 추적 vs 수동 추적

기본 설정에서는 페이지 방문 시 자동으로 pageview가 수집됨
data-auto-track="false" 옵션을 사용하면 자동 수집을 끄고
원하는 시점에만 이벤트를 보내는 수동 트래킹 방식 사용 가능

실시간 & 인터페이스

실시간 방문 현황(Realtime) 확인 가능
복잡하지 않은 직관적인 대시보드 UI 제공

기타 특징

경량 추적 스크립트 — 사이트 성능에 부담이 적음
다중 사이트 지원 — 하나의 Umami 인스턴스로 여러 사이트 분석 가능
프라이버시 친화적 설계 — 개인정보 최소 수집, 쿠키 없이 동작

사용법

https://cloud.umami.is/login (Umami 사이트)
사용법은 무지무지 간단하다. 영알못인 나도 그냥 슉슉샥샥?으로 끝내버릴수 있었다.

위에 링크를 타고 들어가서 Sign Up 을 하고 이메일 인증을 통해 계정을 만들어준다
그리고 이런식으로 단순하게 Add Website 버튼을 클릭하여 간단하게 폼을 입력해주고 save버튼을 클릭하여 사이트를 추가하면 된다
만들어진 아이템을 클릭하여 우측상단에 Edit버튼을 클릭해준다. 그리고 WebSite ID를 복사해준다
아래 코드처럼 사용하고자하는 프로젝트에 넣어준다 (아래는 Next.js환경)

//next.js
<Script
 src="https://cloud.umami.is/script.js"
      data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
      strategy="afterInteractive" />

끝 이제 마음껏 확인해보면 된다

결과물

위에 이미지처럼 통계를 확인할수 있다.

기본 스크립트만 사용할 경우, 사용자가 어떤 페이지를 방문하든 모두 자동으로 페이지뷰로 집계된다. 전체적인 방문자 수를 보는것도 좋지만 “어떤 글이 실제로 조회됐는지”를 알고 싶었다.

그래서 Umami의 Events 기능을 활용해 글 조회 시점에만 직접 이벤트를 보내도록 처리했다. 글 페이지가 렌더링된 뒤에 아래와 같이 커스텀 이벤트를 호출하는 방식이다.

if (window.umami) {
  window.umami.track("post_view", {
    postId,
    slug: postData?.data.slug,
  });
}

이렇게 하면 단순한 페이지 진입이 아니라, 실제로 특정 게시글이 열렸을 때만 위에 두번째 이미지처럼 post_view 이벤트가 기록된다.
또한 postId와 slug 같은 정보를 함께 넘겨서, 어떤 글이 얼마나 조회됐는지까지 구분해서 확인할 수 있도록 했다.

덕분에 단순 트래픽 수치가 아니라, 콘텐츠 단위의 조회 데이터를 볼 수 있게 되었고 어떤 글이 관심을 받는지도 파악할 수 있었다.

마무리

처음에는 다른 블로그들처럼 그냥 따라 붙여본 느낌이었는데, 막상 적용하고 나니 생각보다 자주 들여다보게 된다. 숫자가 많고 적고를 떠나서, 누군가 실제로 글을 읽고 갔다는 흔적이 남는다는 게 은근한 동기부여가 됐다. 작은 기능이지만 프로젝트에 생동감을 더해준 요소였던 것 같다.

용인사는 개발자

용인에 거주하는 개발자입니다. 사이드프로젝트의 진행사항, 오류해결, 배운것들을 적습니다