Cloudflare를 활용한 무료 브랜디드 링크(단축 URL) 만들기

브랜디드 링크는 도메인을 활용한 맞춤형 단축 URL이다. 예를 들어 abc.com/123... 같은 긴 주소를 자신의 도메인을 이용해 짧고 직관적인 링크로 변환할 수 있다. bit.ly 같은 주소 단축 서비스에서도 브랜디드 링크 기능을 제공하지만, Growth 유료 플랜(월 $29) 이상에서만 사용할 수 있다. Cloudflare에 도메인을 등록했다면 Sink 라는 무료 오픈소스를 통해 자신만의 짧은 주소 서비스를 구축할 수 있다. 브랜디드 링크뿐만 아니라 애널리틱스, 링크 유효기간 설정 등 다양한 기능을 제공하며, 현재도 활발하게 개발이 진행 중인 프로젝트다.

 

이미지 출처 Sink

 

1. 브랜디드 링크 - 도메인 연동 및 맞춤형 단축 URL 생성
2. 애널리틱스 - 방문수, 리퍼러, 지역, 디바이스, 언어, OS 등 통계 제공
3. 링크 유효기간 - 특정 날짜 이후 링크 자동 만료
4. AI Slug - 페이지에 따라 URL 경로 자동 추천
5. 대시보드 - 링크 관리 및 통계 확인
6. 크롬 확장 기능 제공

 

 

시작하기 앞서

---

• Cloudflare에 도메인이 등록되어 있어야 한다
• GitHub 계정이 필요하다 (무료 생성)

 

 

레포지토리 포크 / Cloudflare Page 생성

---

https://github.com/ccbikai/Sink 레포지토리(저장소) - 우측 상단 'Fork' 버튼을 클릭하여 레포지토리 포크

 

Cloudflare 대시보드 → 좌측 메뉴 중 Workers 및 Pages 클릭 → '생성' 버튼 클릭

 

Pages 탭 클릭 → 'Git에 연결' 클릭

 

GitHub 계정 선택 → Sink 레포지토리 선택(GitHub Installations에서 권한 부여 필요) 후 '설정 시작' 버튼 클릭

 

빌드 설정 및 배포 설정 페이지 → '프레임워크 미리 설정' 옵션에 Nuxt.js를 선택한 후 아래 환경 변수를 각각 추가한다.

 

• NUXT_SITE_TOKEN: 대시보드 비밀번호(최소 8자 이상). 로그인할 때 필요하므로 잘 기억해 둔다.
• NUXT_CF_ACCOUNT_ID: Cloudflare 도메인 계정 ID (확인 방법 링크 참고)
• NUXT_CF_API_TOKEN: Cloudflare API Token (사용자 API 토큰 페이지에서 분석 및 로그 읽기 템플릿으로 생성)

 

 

환경변수를 모두 추가한 후 '저장 및 배포' 버튼을 클릭한다.

 

 

네임스페이스 바인딩

---

Cloudflare 대시보드 → 좌측 메뉴 중 '스토리지 및 데이터베이스' → KV 클릭 → '+ 생성' 버튼 클릭 후 Sink 이름으로 추가

 

Workers 및 Pages → sink 프로젝트 → 설정 탭 → 바인딩 항목에서 '+ 추가' 버튼 클릭

 

목록에서 'KV 네임스페이스' 선택 → '변수 이름'에 KV 입력, KV 네임스페이스 Sink 선택 후 저장

 

이후 생성되는 단축 URL은 KV 네임스페이스에 키값 쌍으로 저장된다(키는 단축 주소 Slug, 값은 단축 주소 정보).

// key
link:...

// value
{"id":"...","url":"...","slug":"...","createdAt":1742025057,"updatedAt":1742025057,"expiration":1742137199}

 

 

Workers AI 바인딩

---

Workers 및 Pages → sink 프로젝트 → 설정 탭 → 바인딩 항목에서 '+ 추가' 버튼 클릭

 

목록에서 'Workers AI' 선택 → '변수 이름'에 AI 입력 후 저장

 

 

Analytics Engine 바인딩

---

Workers 및 Pages 페이지 → 우측 하단 Analytics Engine '설정' 버튼 클릭 후 활성화

 

Workers 및 Pages → sink 프로젝트 → 설정 탭 → 바인딩 항목에서 '+ 추가' 버튼 클릭

 

목록에서 'Analytics Engine' 선택 → 변수 이름에 ANALYTICS, 데이터 세이트에 sink 입력 후 저장

 

 

도메인 연동

---

Workers 및 Pages → 사용자 설정 도메인 탭 → '사용자 도메인 설정' 버튼 클릭 → 원하는 (서브) 도메인 입력 후 연동

 

 

재배포 및 접속 테스트

---

Workers 및 Pages → 배포 탭 → 최신 배포 항목의 우측 ··· 버튼 클릭 → '배포 다시 시도' 클릭

 

재배포를 완료한 후 연동한 도메인으로 접속해 보자. 아래 화면이 나오면 성공. 우측 상단 Dashboard 버튼을 클릭한 후 NUXT_SITE_TOKEN 환경변수에 지정했던 값으로 로그인할 수 있다.

 

 

크롬 확장 프로그램

---

크롬 Sink 확장 프로그램 패널

 

크롬 Sink 확장 프로그램을 이용하면 현재 페이지 URL에 대한 단축 주소를 생성할 수 있다. 페이지에 대한 Slug를 추천하거나, QR 코드 이미지를 생성할 수도 있다. 아직 크롬 웹 스토어에는 올라가 있지 않아서 아래 방법으로 수동 설치해야 한다.

 

1. 최신 버전 다운로드 → 압축해제
2. 크롬 확장 프로그램 페이지 접속 (주소창에 chrome://extensions 입력)
3. 우측 상단 개발자 모드 켜기
4. 확장 프로그램 폴더를 크롬으로 드래그
5. Sink 확장 프로그램 옵션 페이지에서 로그인 (Instance URL에는 https:// 포함해서 입력)

 

💡 크롬 확장 프로그램 외에도 Raycast Extension, Apple Shortcut(단축어)를 제공한다.

 

 

(번외) Sink 자동 업데이트

---

포크한 레포지토리(github.com/유저이름/Sink)에서 'Sync fork' 버튼을 클릭하면 원본 저장소(upstream)의 최신 코드가 병합된다. 그럼 Cloudflare가 이를 감지하고 최신 코드베이스를 기준으로 배포를 진행한다. 일종의 업데이트라고 보면 된다. 하지만 매번 Sync fork 버튼을 누르기 번거롭기 때문에 repo-sync라는 GitHub Action을 이용하여 저장소 Sync 작업을 자동화할 수 있다.

Sync fork 버튼을 누르면 원본 저장소의 최신 코드가 병합된다

 

① GitHub Settings 페이지에서 레포지토리 권한이 있는 Personal Access Token 생성 (repo 체크박스 선택)

 

② 포크한 레포지토리 - Settings 탭 - Secrets and variables - Actions - PAT 이름으로 Repository secret추가.

 

③ 포크한 레포지토리 → Code 탭 → master ⏷ 버튼 클릭 → action 입력 후 'Create branch ...' 버튼 클릭 (action 브랜치 생성)

 

④ 포크한 레포지토리 - Settings 탭 - General - Default branch에서 기본 브랜치를 action으로 변경. repo-sync 액션은 원본 저장소 코드로 강제 덮어쓰기를 수행하기 때문에(force push) 액션 파일을 유지할 수 없는 문제가 발생한다. GitHub 액션은 기본 브랜치를 기준으로 실행되므로, 기본 브랜치를 action으로 설정하면 master 브랜치를 대상으로 원본과 동기화할 수 있다.

 

⑤ 포크한 레포지토리 - Actions 탭 → 'New workflow' 클릭 → 'Set up a workflow yourself' 클릭

 

아래 코드를 붙여 넣고 파일 이름을 sync.yml로 변경한 후 Commit changes... 버튼 클릭. 액션 파일을 성공적으로 추가했다면 매일 자정(UTC 기준) 원본 저장소와 동기화 작업을 수행한다. 

on:
  schedule:
    - cron: '0 0 * * *' # Every day at midnight (UTC)
  workflow_dispatch: # Manual trigger

jobs:
  repo-sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          persist-credentials: false
      - name: repo-sync
        uses: repo-sync/github-sync@v2
        with:
          source_repo: 'ccbikai/Sink'
          source_branch: 'master'
          destination_branch: 'master'
          sync_tags: 'true'
          github_token: ${{ secrets.PAT }}