구글 단축URL을 만들자

작업하면서 2번 고생을 하게됬는데, 처음에는 개발자 키를 만드는 것으로 한글지원이 안되서 였고, 두번째는 API사용하는데 약간의 딜레이가 있어서 바로 사용이 안되서 였다. 처음부터 정리해보자.

우전 첫번째로 기본적인 것이지만 구글에 가입되어있어야한다. 그리고 개발자 콘솔에서 API를 관리 할 수 있는데, 단축URL API를 사용할 수 있도록 구글 API에서 설정하자. 그런데 사실 처음에 어떻게 만들었는지 생각이 나지 않는다. 사용하다가 문득 생각이나서 블로깅하다보니 한계가 있다.

https://console.developers.google.com/

여기에 가보면 다음과같은 화면이 나온다.

이걸 내가 만들었던가... 그래서 다시 만들어보기로 했다. Create project를 눌러보자.

이런 창이 나오는데 Project ID는 자동으로 생성해주므로 그대로 사용했다. 그럼 생성이되는데 시간이 좀 걸린다.

Test Project가 만들어졌다. 기존과 좀 다르네... 이제 Test Project를 클릭하고 들어가보자.

[APIs & auth > APIs]로 이동해서 URL Shortener API를 켜면 내 계정으로 단축URL관리가 가능해진다. 하지만 처음에는 기본으로 몇개 켜져있는데 그냥 OFF시켰다. 그리고 APIs 바로 아래 메뉴인 Credentials로 들어가보면 key를 확인할 수가 있다.

여기서 API key가 필요하다. 이게 있어야 단축URL을 생성할 수 있다. 처음에는 없을 것이다. 옆에 보이는 Create New Key를 클릭해서 만들면 된다. 나는 browser key로 만들었다.

https://developers.google.com/api-client-library/javascript/samples/samples

이 사이트에 가면 설명이 있다. 내가 사용한 방법으로 설명을 하자면 다음과 같다.

<script src="https://apis.google.com/js/client.js?onload=load"></script>

위 스크립트를 페이지에 넣는다. 여기서 주의할 점은 load이다. onload라고 써있는 걸 보면 감이 오는 사람도 있겠지만, script를 호출하면 페이지 내의 load함수를 호출하게 되어있다. 여기서 로딩시간이 약간 발생되는데 성급한 사람이라면 로딩기전에 버튼을 클릭할 수 있으니 거기에 대비해서 스크립트를 작성해야겠다.

function load() {

  gapi.client.setApiKey('YOUR API KEY');

}

이제 load함수를 작성했다. 난 여기서 API Key 설정만 했다. 여러가지 생각해봤는데 여기선 이것만 하는게 제일 무난하겠다.

function createShortenUrl(longUrl, callback){

_longUrl = longUrl;

_shortenUrl = longUrl;

gapi.client.load('urlshortener', 'v1', function(){

gapi.client.urlshortener.url.insert({"resource": {'longUrl': longUrl}}).execute(function(resp){

console.log('Shorten URL: ' + resp.id);

_shortenUrl = resp.id;

if( typeof(callback) == 'function'){

callback(resp.id);

}

});

});

}

이렇게 만들었다. 위에 걸어논 sample 페이지와는 약간 다르지만 잘 된다. 하나의 함수에 모든걸 때려넣으면 소스가 길어지는데, 난 그런걸 싫어하므로 callback을 만들었다. 고맘게도 같은 URL을 단축URL로 만들면 동일한 단축URL이 나온다. 그래서 따로 관리할 필요는 없다. 

리포트에서 보면 사용량을 확인할 수 있다. 사용량이 많은 곳에서는 유료결제가 필요하니 잘 알아보고 사용하면 되겠다.