인터넷을 사용하다 보면 아주 긴 URL(Uniform Resource Locator)을 자주 접하게 됩니다. 많은 사이트는 언어, 지역 정보, 식별자, 프로모션 참조 코드 등 다양한 정보를 URL에 담아 전달하기 때문에 URL이 비정상적으로 길어지곤 합니다.
CodeCanyon에서 판매 중인 Premium URL Shortener는 이렇게 긴 URL을 짧게 줄여주는 솔루션입니다. 이 튜토리얼에서는 자신의 시스템에 직접 URL 단축 서비스를 구축하고 활용하는 방법까지 단계별로 살펴보겠습니다.
URL 단축 서비스란 무엇인가?
웹을 탐색할 때마다 우리는 URL을 사용합니다. URL은 특정 웹 페이지와 콘텐츠를 식별하는 역할을 하는데, 폼 제출이나 검색 엔진 요청 시 각종 파라미터가 포함되면서 URL이 상당히 길어질 수 있습니다.
https://tutsplus.com/tutorials/search/How%20to%20Draw%20Animals:%20Horses,%20Their%20Anatomy%20and%20Poses
위 URL은 Tuts+ 사이트에서 "How to Draw Animals: Horses, Their Anatomy and Poses"라는 문자열을 검색하기 위한 주소입니다. 이 문자열만 무려 74자에 달하며, 필자는 200자가 넘는 URL도 본 적이 있습니다.
https://bit.ly/2oO8BqO
bit.ly 같은 URL 단축 서비스를 이용하면 훨씬 짧은 주소를 얻을 수 있습니다. 동일한 URL이 겨우 15자로 줄어든 것입니다. 누군가 이 링크를 클릭하면 bit.ly 서버가 브라우저를 원래 URL로 리디렉션해 줍니다. 추가 조회 과정 때문에 페이지 로딩이 약간 느려지긴 하지만, 체감할 정도는 아닙니다.
Docker 설치하기
로컬 서버를 만드는 가장 쉬운 방법은 가상화 환경을 활용하는 것입니다. 하지만 완전한 시스템 가상화 도구는 리소스 소모가 큽니다. Docker는 터미널 기반 시스템을 위한 경량화된 가상화 도구로, 적은 시스템 자원으로도 Docker 컨테이너(작은 유닉스 서버)를 실행할 수 있습니다.
컨테이너를 실행하려면 먼저 Docker를 설치해야 합니다. Docker 공식 웹사이트에서 운영체제에 맞는 설치 파일을 내려받으세요.
Docker 설치 후에는 곧 만들 웹 서비스를 시스템이 찾을 수 있도록 설정해야 합니다. 이를 위해 시스템 파일 하나를 수정해야 합니다. Linux나 macOS에서는 /etc/hosts 파일에, Windows에서는 c:\windows\System32\drivers\etc\lmhosts 파일에 다음 줄을 추가하세요:
127.0.0.1 s.dev
이렇게 하면 https://s.dev로 향하는 모든 요청이 로컬 시스템으로 연결됩니다. 서비스 설정 전에 적절한 호스트명을 부여하기 위한 작업입니다.
개발 환경 준비하기
개발 디렉터리를 하나 만들고 그 안에 Premium URL Shortener zip 파일을 넣어 압축을 해제하세요. 그러면 다음과 같은 디렉터리 구조가 완성됩니다:
문서 파일인 main.zip도 마찬가지로 압축을 해제합니다. 해제 후에는 다음과 같은 구조가 됩니다:
main.zip 파일에는 서비스의 모든 소스 코드와 리소스가 들어 있습니다. 이 디렉터리가 Docker 인스턴스에 연결될 폴더입니다.
LAMP 스택 컨테이너 실행하기
이제 fauria가 배포한 Docker LAMP 스택을 받아야 합니다. Docker가 실행 중인 상태에서 터미널에 다음 명령어를 입력하세요:
docker pull fauria/lamp
이 명령은 Fauria LAMP(Linux, Apache, MySQL, PHP) 스택을 Docker에 내려받습니다. 다운로드가 끝나면 다음 명령으로 컨테이너를 생성할 수 있습니다:
docker run --rm --name linkshort -p 80:80 -e LOG_STDOUT=true -e LOG_STDERR=true -e LOG_LEVEL=debug -v {{service source directory}}:/var/www/html fauria/lamp
{{service source directory}} 부분은 소스 파일과 리소스가 있는 디렉터리의 전체 경로로 바꿔주세요. 이 명령은 포트 80에서 작동하는 linkshort라는 이름의 컨테이너를 생성하고, 모든 에러 및 로그 메시지를 표준 출력으로 내보냅니다.
데이터 영속성 확보하기
현재 상태로는 컨테이너를 중지했다가 다시 시작할 때마다 모든 데이터가 사라집니다. 재시작할 때마다 데이터를 보존하려면 데이터베이스 정보를 소스 코드 디렉터리로 옮겨야 합니다. 터미널 창에서 다음 명령어를 차례로 실행하세요:
docker exec -i -t linkshort bash mkdir /var/www/html/data cp -R /var/lib/MySQL/* /var/www/html/data exit
첫 번째 명령은 컨테이너 안에서 bash 셸을 열어줍니다. 두 번째 명령은 소스 코드 디렉터리에 data 폴더를 생성합니다(컨테이너는 소스 코드 디렉터리를 /var/www/html로 인식합니다). 세 번째 명령은 데이터베이스 정보를 해당 폴더로 복사하고, exit로 컨테이너를 빠져나옵니다.
이제 다음 명령으로 컨테이너를 중지합니다:
docker stop linkshort
컨테이너를 멈출 때마다 이 명령을 사용하면 됩니다.
그다음, 올바른 데이터 디렉터리를 사용하도록 컨테이너를 다시 시작하는 명령은 다음과 같습니다:
docker run --rm --name linkshort -p 80:80 -e LOG_STDOUT=true -e LOG_STDERR=true -e LOG_LEVEL=debug -v {{service source directory}}:/var/www/html -v {{service source directory}}/data:/var/lib/mysql fauria/lamp
이번에는 컴퓨터에 저장된 데이터베이스 데이터를 MariaDB 서버가 사용하도록 컨테이너를 생성했습니다. 앞으로 서비스를 실행할 때는 이 명령을 사용하면 됩니다. 필자는 키보드 확장 도구인 Typinator를 이용해 이 명령을 빠르게 입력합니다.
데이터베이스 생성하기
이제 URL 단축기가 사용할 데이터베이스를 만들어야 합니다. 컨테이너 안으로 셸에 접속해야 하므로, 새 터미널 창에서 다음 명령을 입력하세요:
docker exec -i -t linkshort bash
이 명령은 컨테이너 안에 bash 셸을 생성합니다. 컨테이너 내부를 조정해야 할 때마다 이 명령을 사용하면 됩니다. 다음으로 MariaDB 셸을 엽니다:
mysql -u root
이제 MariaDB에 데이터베이스를 만들고 웹 서버에 접근 권한을 부여할 수 있습니다:
create database urlshort;
create user 'www-data'@'localhost' identified by '{{password}}';
grant all on urlshort.* to 'www-data'@'localhost';
quit;
{{password}}에는 데이터베이스 사용자에게 부여할 비밀번호를 입력하세요. 나중에 서비스 설정 시 필요하니 꼭 기억해 두세요.
웹 브라우저에서 서비스 설정하기
컨테이너에서 서비스가 실행 중이라면, 웹 브라우저로 https://s.dev에 접속해 보세요.
설정을 올바르게 마쳤다면 위와 같은 페이지가 보일 것입니다. 이 페이지는 URL 단축 서비스의 요구 사항과 현재 설정 상태를 보여줍니다. Docker의 fauria 컨테이너를 사용했기 때문에 모든 의존성이 이미 충족되어 있을 겁니다. 페이지 하단의 파란 버튼을 클릭하세요.
다음 화면은 서비스의 설정 파일 생성 페이지입니다. 여기서 앞서 만든 데이터베이스의 이름과 비밀번호를 프로그램에 알려줄 수 있습니다.
위 이미지처럼 각 필드를 채워 넣으세요. Database Host는 컨테이너의 localhost입니다. Database Name은 설정 단계에서 만든 urlshort이고, Database User는 www-data, 비밀번호는 초기 데이터베이스 설정 시 지정한 값입니다. Database Prefix는 서비스가 생성하는 각 테이블 이름의 접두어로, 필자는 short_를 사용했습니다. Security Key는 설치 프로그램이 자동으로 생성해 주며, 나중을 위해 이 키를 따로 보관해 두세요.
VPS(가상 사설 서버)에 설치한다면 이 값들은 해당 호스팅 환경에 맞게 달라집니다. 일부는 동일하고 일부는 변경해야 할 것입니다.
정보를 모두 입력했다면 페이지 하단의 파란 버튼을 눌러 3단계로 진행하세요.
Basic Configuration 화면에서는 관리자 계정의 사용자명, 이메일, 비밀번호를 설정합니다. 본인에게 맞는 값으로 입력하세요. Site URL은 앞서 hosts 파일에 설정한 대로 https://s.dev로 지정해야 합니다. 입력을 마쳤으면 화면 하단의 파란 버튼을 누르세요.
다음 화면은 서비스 설정이 완료되었음을 알려줍니다. Delete install.php라고 적힌 파란 버튼을 누르세요. 실제 웹 서버 운영 시 보안을 위한 기능이지만, 로컬 설치에서는 굳이 필요하지 않습니다. 다만 이 작업을 거쳐야 설치가 최종 완료됩니다.
축하합니다! 이제 서비스가 정상적으로 작동합니다. 위와 같은 화면이 보일 겁니다. Paste a long url 입력란에 긴 URL을 붙여넣고 파란 Shorten 버튼을 누르면 단축된 URL을 얻을 수 있습니다. 단축된 URL은 데이터베이스에도 저장되므로 나중에 다시 찾아볼 수 있고, 훌륭한 북마크 도구로도 활용할 수 있습니다.
API 활용하기
URL 단축 서비스가 돌아가기 시작했으니 이제 제대로 활용할 차례입니다. 하지만 매번 웹 페이지를 열어야 한다면, 로컬 페이지라 해도 속도가 느려질 수밖에 없습니다. 더 빠르게 사용하려면 API(Application Programming Interface)를 활용하는 것이 좋습니다. 전체 API 문서를 참고할 수도 있습니다.
서비스가 실행 중인 상태에서 https://s.dev/user/settings 페이지를 여세요.
이 페이지를 보려면 계정에 로그인해야 합니다. 사이드바 우측 하단에 Your API Key:라는 항목과 영숫자로 된 키가 보일 겁니다. 이 키를 복사해서 저장해 두세요. 이 번호가 있어야 API에 접근할 수 있습니다.
Ruby 스크립트로 단축 링크 만들기
API를 활용하려면 Ruby 프로그램을 만들어 접근할 수 있습니다. macOS와 Linux에는 대개 Ruby가 기본 설치되어 있고, Windows에서는 별도로 설치해야 합니다.
짧은 링크를 생성하는 최소한의 Ruby 코드는 다음과 같습니다:
require 'net/http'
require 'json'
API = '{YourAPIKey}'
short = JSON.parse(Net::HTTP.get('s.dev', '/api?api=' + API + '&url=' + ARGV[0]))
if short["error"] == 0 then
print short["short"]
else
print "An error happened: "
print short["error"]
print "\n"
end
이 스크립트를 shortener.rb라는 이름으로 저장하고, {YourAPIKey}를 앞서 복사한 API 키로 교체한 뒤, 명령줄에서 다음과 같이 실행하세요:
ruby shortener.rb 'google.com'
해당 URL의 단축 링크가 출력될 것입니다. 이제 단축 URL을 만들 수 있게 되었지만, 아직은 편의성이 좀 떨어집니다.
PopClip 확장 기능 만들기
Mac에서 PopClip은 선택한 텍스트를 처리하는 데 유용한 작지만 강력한 프로그램입니다. 단축 링크 생성을 더욱 쉽게 만들기 위해 PopClip 확장 기능을 만들어 보겠습니다. 확장 기능 제작의 모든 세부 사항을 다 설명하지는 않겠지만, 제작 원리는 PopClip: Scripting Extensions 튜토리얼에서 자세히 익힐 수 있습니다.
PremiumURLShortener.popclipext라는 이름의 PopClip 확장을 만들고, 확장 디렉터리 안의 Config.plist 파일에 다음 내용을 넣으세요:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Actions</key>
<array>
<dict>
<key>After</key>
<string>paste-result</string>
<key>Image File</key>
<string>PremiumURLShortener.png</string>
<key>Script Interpreter</key>
<string>/usr/bin/ruby</string>
<key>Shell Script File</key>
<string>PremiumURLShortener.rb</string>
<key>Title</key>
<string>Shortener</string>
</dict>
</array>
<key>Options</key>
<array>
<dict>
<key>Option Identifier</key>
<string>apikey</string>
<key>Option Type</key>
<string>string</string>
<key>Option Label</key>
<string>API Key: </string>
</dict>
</array>
<key>Credits</key>
<array>
<dict>
<key>Name</key>
<string>Richard Guay</string>
<key>Link</key>
<string>https://customct.com</string>
</dict>
</array>
<key>Extension Description</key>
<string>Create shortened URLs with PremiumURLShortener locally</string>
<key>Extension Identifier</key>
<string>com.customct.popclip.extension.premiumurlshortener</string>
<key>Extension Name</key>
<string>Shortener</string>
<key>Required Software Version</key>
<integer>701</integer>
</dict>
</plist>
그다음 확장용 스크립트 파일인 PremiumURLShortener.rb를 만들고 다음 코드를 넣으세요:
#!/usr/bin/ruby
require 'net/http'
require 'json'
Encoding.default_internal = Encoding::UTF_8
Encoding.default_external = Encoding::UTF_8
input = ENV['POPCLIP_TEXT'].to_s.strip()
API = ENV['POPCLIP_OPTION_APIKEY'].to_s.strip()
short = JSON.parse(Net::HTTP.get('s.dev', '/api?api=' + API + '&url=' + input))
if short["error"] == 0 then
print short["short"]
else
print "An error happened: "
print short["error"]
print "\n"
end
새 확장 기능을 불러오면 API 키를 입력하라는 메시지가 뜹니다. 키를 입력하고 Okay를 누르면 PopClip에서 바로 사용할 수 있습니다.
링크를 선택하면 PopClip이 옵션 목록과 함께 나타납니다. 여기서 Shortener 옵션을 고르면 잠시 처리 후 올바르게 단축된 URL이 붙여넣기됩니다. 완성된 확장 기능 전체는 이 튜토리얼의 다운로드 파일에 포함되어 있습니다. 이제 여러분도 무궁무진하게 활용할 준비가 되었습니다!
마무리
이제 여러분은 프라이빗 URL 단축기를 갖게 되었을 뿐만 아니라, Docker로 로컬 컨테이너를 실행하는 방법, 사용하는 URL을 손쉽게 관리하는 방법, 그리고 단축 링크를 빠르게 생성하는 방법까지 익혔습니다.
이 Ruby 스크립트는 Alfred 3나 Keyboard Maestro와 함께 사용할 수도 있습니다. 새로 만든 서비스를 즐기면서 다양한 기능도 실험해 보세요.