구글 FDL서비스로 웹주소 단축 개인 url 대체
구글 FDL서비스로 웹주소 단축 개인 url 대체

구글 FDL서비스로 웹주소 단축 개인 url 대체

[lwptoc]

웹주소 단축 url서비스를 개인이 구성할 수 있을까? 라는 생각으로 생초보가 글을 써본다.


단축 url 서비스 HTML구성

구글 웹주소 단축 url 서비스를 Coplilot을 이용해서 작성해 달라고 하면 다음과 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹주소 단축 및 복사</title>
<script>
function shortenURL() {
var url = document.getElementById('urlInput').value;
var shortenedURL = 'https://bit.ly/' + Math.random().toString(36).substring(2, 8);
document.getElementById('shortenedURL').value = shortenedURL;
}

function copyToClipboard() {
var copyText = document.getElementById('shortenedURL');
copyText.select();
document.execCommand('copy');
alert('복사되었습니다: ' + copyText.value);
}
</script>
</head>
<body>
<label for="urlInput">기존 웹주소:</label>
<input type="text" id="urlInput" placeholder="여기에 웹주소를 입력하세요">
<button onclick="shortenURL()">단축하기</button>
<br><br>
<label for="shortenedURL">단축된 주소:</label>
<input type="text" id="shortenedURL" readonly>
<button onclick="copyToClipboard()">복사</button>
</body>
</html>

이 코드는 사용자가 웹주소를 입력하면 임의의 단축 URL을 생성하고, 생성된 단축 URL을 복사할 수 있게 해줍니다.

HTML 데모 실행 방법

데모를 실행하는 방법은https://jsbin.com/ 을 주소창에서 실행하면 됩니다.

실제로 작동하는 단축 URL을 생성하려면, Bitly와 같은 단축 URL 서비스의 API를 사용해야 합니다. 위의 예시는 단순히 데모 목적으로 임의의 값을 생성합니다. 실제 서비스를 구현하려면 해당 서비스의 API 문서를 참조하여 필요한 로직을 추가해야 합니다.
즉, Bitly와 연결해야 합니다.

Bitly API를 사용하여 실제로 작동하는 웹주소 단축 기능을 구현하려면 다음 단계를 따라야 합니다:

  1. Bitly에서 계정을 만들고, API 키를 받습니다. 계정 생성은 여기에서 할 수 있으며, API 키는 계정 설정에서 확인할 수 있습니다.
  2. API 요청을 보내기 위해 JavaScript 코드에 HTTP 요청을 추가합니다. 이를 위해 fetch 함수나 XMLHttpRequest를 사용할 수 있습니다.
  3. 사용자가 입력한 원래의 긴 URL을 Bitly API에 전송하고, 응답으로 받은 단축된 URL을 사용자에게 보여줍니다.

function shortenURLWithBitly() {
var longUrl = document.getElementById('urlInput').value; // 사용자가 입력한 긴 URL
var accessToken = 'YOUR_BITLY_ACCESS_TOKEN'; // 여기에 Bitly 액세스 토큰을 입력하세요

fetch('https://api-ssl.bitly.com/v4/shorten', {
method: 'POST',
headers: {
'Authorization': `Bearer ${accessToken}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({ long_url: longUrl })
})
.then(response => response.json())
.then(data => {
if(data.link) {
document.getElementById('shortenedURL').value = data.link; // 단축된 URL을 입력 필드에 표시
} else {
console.error('Error:', data);
}
})
.catch(error => {
console.error('Error:', error);
});
}

이 함수는 사용자가 입력한 긴 URL을 Bitly API로 전송하고, 단축된 URL을 받아서 페이지에 표시합니다. 실제로 사용하기 전에 ‘YOUR_BITLY_ACCESS_TOKEN’을 Bitly에서 발급받은 유효한 액세스 토큰으로 교체해야 합니다.

위의 코드를 기존 HTML 코드에 통합하고, ‘단축하기’ 버튼의 onclick 이벤트에 shortenURLWithBitly 함수를 연결하면, 실제로 작동하는 웹주소 단축 기능을 가진 웹 페이지를 만들 수 있습니다.

이런 과정이 복잡하고 전문적인 지식이 있어야 되기 때문에 다음의 과정을 밟을 수 밖에 없습니다.

bit.ly api 얻는 방법

Bitly API 키를 얻으려면 다음 단계를 따라야 합니다:

  1. Bitly 웹사이트에 가입하고 로그인합니다.
  2. ‘Settings’ 메뉴로 이동한 다음 ‘API’ 섹션을 찾습니다.
  3. ‘Generic Access Token’을 생성하기 위해 비밀번호를 입력하거나, ‘OAuth’ 섹션에서 ‘Register for OAuth’를 클릭하여 OAuth 토큰을 생성합니다.
  4. 생성된 API 키 또는 토큰을 안전하게 저장합니다.

Bitly API를 사용하면 URL을 프로그래밍 방식으로 단축하고, 분석 데이터를 수집하며, Bitly의 다양한 기능을 활용할 수 있습니다. API 키를 사용할 때는 보안을 유지하는 것이 중요하므로, 키를 공개적으로 공유하거나 노출시키지 않도록 주의해야 한다.

구글의 URL 단축 서비스 Goo.gl

구글의 URL 단축 서비스인 Goo.gl은 사용자들이 긴 웹 주소를 기억하기 쉽게 짧게 줄일 수 있도록 하는 서비스였습니다. 하지만 구글은 2018년에 이 서비스를 종료하고, 기존 사용자들에게는 2019년까지만 서비스를 제공했습니다. 현재는 구글의 공식 URL 단축 서비스를 사용할 수 없으며, 대신 다른 서비스들을 이용해야 합니다.

구글의 FDL(Firebase Dynamic Link) 서비스

Firebase Dynamic Link (FDL) 서비스는 사용자가 링크를 열 때 가장 적합한 플랫폼 경험을 제공하는 링크를 생성할 수 있게 해주는 서비스입니다. 사용자가 iOS나 Android에서 FDL을 열면, 앱이 설치되어 있다면 앱 내의 특정 콘텐츠로 직접 이동할 수 있고, 앱이 설치되어 있지 않다면 앱 스토어로 이동하여 앱을 설치한 후 해당 콘텐츠를 볼 수 있습니다. 데스크톱 브라우저에서는 웹사이트의 해당 콘텐츠로 이동합니다.

FDL은 앱 설치 여부에 관계없이 여러 플랫폼에서 작동하며, 사용자가 앱을 이미 설치했는지 여부에 따라 다른 동작을 할 수 있습니다. 또한, 사용자가 자신의 도메인을 사용하여 동적 링크를 만들거나, Firebase 콘솔에서 무료로 제공되는 page.link 하위 도메인을 사용할 수도 있습니다

그러나 중요한 점은, Firebase Dynamic Links 서비스는 2025년 8월 25일에 종료될 예정이며, 그 이후에는 모든 FDL 기반 링크가 작동을 멈추고 새로운 링크 생성도 불가능해질 것이라는 점입니다 따라서 새로운 프로젝트에서는 FDL을 사용하지 않는 것이 권장됩니다. 기존 사용자의 경우, 서비스 종료 전에 다른 솔루션으로의 마이그레이션을 고려해야 합니다.

FDL을 사용하는 방법은 무엇인가요?

Firebase Dynamic Links (FDL)를 사용하는 방법은 다음과 같습니다:

  1. Firebase 콘솔에서 동적 링크 생성:
    • Firebase 콘솔에 로그인하고 ‘Dynamic Links’ 섹션으로 이동합니다.
    • ‘새 링크 생성’을 클릭하고, 링크에 대한 정보를 입력합니다. 이 정보에는 링크 URL, 앱의 정보, 동작 설정 등이 포함됩니다.
    • 설정을 완료한 후 ‘완료’ 버튼을 클릭하여 링크를 생성합니다.
  2. 앱에서 동적 링크 수신 설정:
    • 앱에서 동적 링크를 수신하고 처리할 수 있도록 설정합니다. 이는 iOS, Android, Flutter 등의 플랫폼에 따라 다를 수 있다.
  3. 동적 링크의 실적 추적:
    • Firebase 콘솔 또는 Analytics REST API를 통해 동적 링크의 실적을 추적할 수 있습니다.
  4. 커스텀 도메인 설정 (선택 사항):
    • 자신의 도메인을 사용하여 동적 링크를 만들고자 하는 경우, Firebase 콘솔에서 ‘URL 프리픽스 추가’를 클릭하여 도메인과 경로 프리픽스를 지정할 수 있습니다2.

위의 단계를 통해 Firebase Dynamic Links를 생성하고 사용할 수 있습니다. 하지만, FDL 서비스는 2025년 8월 25일에 종료될 예정이므로, 새로운 프로젝트에서는 다른 솔루션을 고려하는 것이 좋습니다.

일단 너무 복잡하다.

관련 게시물

error: Content is protected !!

Contents

→ 바로가기
위로 스크롤