React, Go, PostgreSQL를 사용해 실시간 링크 단축기와 분석을 구축했습니다

Source: Dev.to

Cut It Short. Track It Deep.

많은 링크 단축 서비스가 긴 URL을 짧게 만들어 주지만, 누군가 링크를 클릭한 뒤에 무슨 일이 일어나는지는 거의 보여주지 않습니다. 저는 이 문제를 해결하기 위해 Cut It을 만들었습니다.

실제 사이트:

Cut It은 링크를 짧게 만들고 실시간으로 상호작용 데이터를 추적합니다. 이 플랫폼은 누가 클릭했는지, 클릭이 어디서 왔는지, 어떤 기기로 링크를 열었는지, 어떤 브라우저가 요청을 처리했는지, 그리고 어떤 플랫폼을 통해 링크가 공유되었는지를 보여줍니다.

Cut It이 하는 일

• 긴 URL을 깔끔한 짧은 링크로 변환
• 실시간 클릭 수 추적
• 방문자 국가 감지
• 기기 유형 감지
• 사용 브라우저 감지
• 링크가 공유된 플랫폼 감지

예시

다음과 같은 긴 URL이

https://example.com/products/category/2026/new-arrivals/summer-sale

다음과 같이 변환됩니다

https://cutit.africa/HZVFNMHJ

클릭이 발생할 때마다 분석 데이터가 기록되고 대시보드가 즉시 업데이트됩니다.

수집된 분석 데이터

각 상호작용은 구조화된 메타데이터를 기록합니다:

• 국가
• 기기 유형
• 브라우저
• 공유 플랫폼
• 타임스탬프
• 링크 ID

공유 플랫폼 감지 예시

• WhatsApp
• X (구 Twitter)
• Facebook
• Telegram
• LinkedIn
• Email
• 직접 브라우저

왜 중요한가

많은 팀이 SMS, 소셜 미디어, 마케팅 캠페인을 통해 링크를 전송합니다. 긴 URL은 SMS 비용을 증가시키고 분석 정보를 제공하지 못합니다. Cut It은 이 두 문제를 동시에 해결합니다:

• SMS 비용 절감
• 마케팅 도달 범위 측정
• 청중 행동 이해

기술 스택

프론트엔드

React와 TypeScript 사용. UI 프레임워크 없이 순수 구현.

백엔드

고성능 동시성을 위해 Go (Golang) 사용, 빠른 리다이렉트 제공.

데이터베이스

분석 저장 및 쿼리 성능을 위해 PostgreSQL 사용.

아키텍처 흐름

1. 사용자가 긴 URL을 제출
2. 시스템이 짧고 고유한 ID 생성
3. 사용자가 짧은 링크를 공유
4. 방문자가 링크를 열음
5. 백엔드가 상호작용 메타데이터 기록
6. 방문자를 원본 URL로 리다이렉트
7. 대시보드가 실시간으로 분석 업데이트

플랫폼 사용해 보기

https://cutit.africa/

Cut It Short. Track It Deep.