DEV Community

nly.kr
nly.kr

Posted on

API로 URL 단축하기: JavaScript와 cURL로 긴 링크 자동으로 줄이는 방법

API로 URL 단축하기: JavaScript와 cURL로 긴 링크 자동으로 줄이는 방법

긴 URL을 한두 번 줄이는 정도라면 URL 단축 사이트에 접속해서 직접 처리하면 됩니다.

하지만 개발 과정에서 URL을 반복해서 생성해야 한다면 이야기가 달라집니다.

예를 들어 이런 경우입니다.

  • 게시물이 등록될 때 공유용 짧은 링크를 자동 생성
  • 긴 UTM 링크를 생성한 뒤 자동으로 URL 단축
  • 관리자 페이지에서 버튼 한 번으로 공유 링크 생성
  • 사내 도구나 개인 프로젝트에서 짧은 링크 생성
  • 여러 URL을 처리하는 자동화 작업

이럴 때는 웹페이지에서 하나씩 URL을 입력하는 것보다 URL 단축 API를 사용하는 방식이 편합니다.

이번 글에서는 nly.kr의 URL 단축 API를 이용해 cURL과 JavaScript에서 긴 링크를 짧게 만드는 기본 흐름을 정리해보겠습니다.

URL 단축 API를 사용하면 무엇이 달라질까?

일반적인 URL 단축 과정은 다음과 같습니다.

  1. URL 단축 사이트를 연다.
  2. 긴 URL을 붙여넣는다.
  3. 단축 버튼을 누른다.
  4. 생성된 짧은 URL을 복사한다.
  5. 필요한 곳에 붙여넣는다.

한두 번이라면 전혀 문제가 없습니다.

하지만 프로그램에서 URL이 계속 생성된다면 이 과정을 사람이 반복할 필요는 없습니다.

API를 사용하면 프로그램이

긴 URL 생성
↓
URL 단축 API 호출
↓
짧은 URL 응답
↓
DB 저장 또는 화면 표시
Enter fullscreen mode Exit fullscreen mode

처럼 처리할 수 있습니다.

nly.kr URL 단축 API 기본 구조

nly.kr에서는 다음 Endpoint로 URL 단축 요청을 보낼 수 있습니다.

POST https://nly.kr/api/shorten
Enter fullscreen mode Exit fullscreen mode

요청 데이터는 application/x-www-form-urlencoded 형식으로 전송합니다.

API Key는 헤더에 포함할 수 있습니다.

X-API-Key: YOUR_API_KEY
Enter fullscreen mode Exit fullscreen mode

단축 요청에는 기본적으로 두 가지 값이 필요합니다.

url
category
Enter fullscreen mode Exit fullscreen mode

url은 줄이려는 원본 주소이고, category는 해당 링크의 분류입니다.

예를 들어 개발 관련 문서라면 dev 카테고리를 사용할 수 있습니다.

cURL로 URL 단축하기

터미널에서 가장 간단하게 테스트하려면 cURL을 사용할 수 있습니다.

curl -X POST "https://nly.kr/api/shorten" \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Accept: application/json" \
  -H "Content-Type: application/x-www-form-urlencoded" \
  --data-urlencode "url=https://example.com/docs/getting-started" \
  --data-urlencode "category=dev"
Enter fullscreen mode Exit fullscreen mode

정상적으로 처리되면 결과는 JSON 형태로 받을 수 있습니다.

예를 들면 이런 구조입니다.

{
  "status": "success",
  "short_url": "https://nly.kr/Ab3XkQ",
  "original_url": "https://example.com/docs/getting-started",
  "code": "Ab3XkQ",
  "category": "dev"
}
Enter fullscreen mode Exit fullscreen mode

프로그램에서는 여기서 short_url 값을 가져와 저장하거나 사용자에게 보여주면 됩니다.

JavaScript에서 URL 단축하기

JavaScript에서도 같은 방식으로 요청할 수 있습니다.

아래는 Node.js 등 서버 측 JavaScript에서 사용할 수 있는 간단한 예입니다.

const apiKey = "YOUR_API_KEY";

const params = new URLSearchParams({
  url: "https://example.com/docs/getting-started",
  category: "dev"
});

async function createShortUrl() {
  const response = await fetch("https://nly.kr/api/shorten", {
    method: "POST",
    headers: {
      "X-API-Key": apiKey,
      "Accept": "application/json",
      "Content-Type": "application/x-www-form-urlencoded"
    },
    body: params
  });

  const data = await response.json();

  if (!response.ok) {
    console.error("URL shortening failed:", data);
    return;
  }

  console.log("Short URL:", data.short_url);
}

createShortUrl();
Enter fullscreen mode Exit fullscreen mode

성공하면 data.short_url을 이용해 이후 작업을 이어갈 수 있습니다.

예를 들어 DB에 저장하거나 이메일, 알림 메시지, 관리자 페이지 등에 짧은 주소를 표시할 수 있습니다.

API Key는 프론트엔드에 노출하지 않는 것이 좋다

JavaScript 예제를 볼 때 주의할 점이 하나 있습니다.

API Key가 필요한 API라면 실제 서비스에서는 API Key를 브라우저 JavaScript 코드에 그대로 넣지 않는 것이 좋습니다.

브라우저에 전달된 코드는 사용자가 확인할 수 있기 때문입니다.

따라서 실제 서비스에서는 보통 다음과 같은 구조가 더 적합합니다.

Browser
   ↓
내 서버
   ↓
URL Shortener API
Enter fullscreen mode Exit fullscreen mode

API Key는 서버에 저장하고 브라우저에서는 자신의 서버를 호출하도록 구성하는 방식입니다.

UTM 링크 자동화에도 활용할 수 있다

URL 단축 API가 특히 유용한 경우 중 하나가 UTM 링크입니다.

마케팅이나 유입 분석을 위해 URL에 여러 파라미터를 붙이면 주소가 금방 길어집니다.

예를 들어:

https://example.com/product/123
?utm_source=newsletter
&utm_medium=email
&utm_campaign=summer_event
Enter fullscreen mode Exit fullscreen mode

실제로는 한 줄의 URL이지만 사람이 보기에는 상당히 길어질 수 있습니다.

이런 시스템을 만들고 있다면

원본 URL
↓
UTM 파라미터 생성
↓
완성된 UTM URL
↓
URL 단축 API
↓
짧은 공유 URL
Enter fullscreen mode Exit fullscreen mode

순서로 자동화할 수 있습니다.

여기서 중요한 점은 UTM 파라미터까지 포함된 완성된 원본 URL을 먼저 만든 후 단축하는 것입니다.

사용자는 짧은 링크를 공유하지만, 링크를 통해 이동할 때는 원래 목적지의 UTM 정보를 그대로 사용할 수 있는 구조가 됩니다.

직접 URL을 줄일 때와 API를 사용할 때

두 방식 중 무조건 하나가 좋은 것은 아닙니다.

웹 URL 단축기가 편한 경우

몇 개의 링크만 빠르게 줄이고 싶다면 굳이 코드를 작성할 필요가 없습니다.

nly.kr 무료 URL 단축기에서 긴 URL을 입력해 바로 짧은 링크를 만들 수 있습니다.

웹 방식은 직접 URL을 줄이거나 QR 코드까지 함께 활용하고 싶을 때 편합니다.

API가 편한 경우

반대로 아래처럼 반복적인 처리가 있다면 API 방식이 더 적합합니다.

게시물 등록
→ 짧은 공유 URL 자동 생성

상품 등록
→ 공유 링크 자동 생성

UTM 링크 생성
→ 짧은 캠페인 링크 자동 생성

관리자 도구
→ 버튼 클릭 시 URL 단축
Enter fullscreen mode Exit fullscreen mode

결국 기준은 간단합니다.

사람이 가끔 만드는 링크라면 웹 도구, 프로그램이 반복해서 만들어야 한다면 API입니다.

URL 단축과 SEO는 별개의 문제다

URL을 짧게 만들었다고 해서 원본 페이지의 Google 검색 순위가 올라가는 것은 아닙니다.

URL 단축은 주로

  • 긴 링크 정리
  • SNS 및 메신저 공유
  • 문서에 넣을 링크 정리
  • UTM 주소 단순화
  • QR 코드 활용
  • 프로그램 자동화

같은 목적에 사용하는 것이 적절합니다.

검색 노출을 늘리려면 결국 검색엔진이 평가하는 실제 콘텐츠와 원본 페이지를 개선해야 합니다.

즉, 단축 URL은 SEO 기법이라기보다 링크를 공유하고 관리하는 도구에 가깝습니다.

마무리

URL 단축은 기능 자체는 단순합니다.

하지만 API와 연결하면 활용 범위가 꽤 넓어집니다.

단순히 긴 주소를 줄이는 것을 넘어

콘텐츠 생성
→ URL 생성
→ UTM 추가
→ URL 단축
→ 저장 및 공유
Enter fullscreen mode Exit fullscreen mode

과정 전체를 자동화할 수 있기 때문입니다.

직접 URL을 줄이고 싶다면:

👉 nly.kr URL 단축기

프로젝트에서 자동으로 단축 URL을 생성하고 싶다면:

👉 nly.kr URL 단축 API 문서

를 참고할 수 있습니다.

작은 자동화라도 반복되는 복사·붙여넣기를 없애면 개발 흐름이 훨씬 단순해집니다.

DEV.to Tags

webdev api javascript productivity

Top comments (0)