누구나 쉽게, 무료로 따라 할 수 있는 IT 프로젝트, 그리고 링크 단축 서비스

안녕하세요! 저는 갓잉 팀의 대표이자, 과학고등학교에 다니고 있는 학생이자, 개발자이자, 여러 프로젝트를 직접 기획하고 개발하는 메이커 임정훈이라고 합니다.

아, 이런 서비스가 필요할 거 같은데, 그 기능 하나만을 위해 새로 만들기는 힘들어.

이 기능을 만들려면 이 SaaS 서비스가 필요한데, 무료로 할 수는 없을까?

내가 쓰고 있는 서비스에서 이 부분은 ~하게 작동했으면 좋겠는데, 다시 만들고 싶다.

메이커라면 누구나 한 번쯤은 생각해 보셨을 만한 말입니다. 물론 저도 여러 프로젝트를 진행하고, 제품을 만들며 수도 없이 고민해 보았습니다.

이럴 때 우리는 “누가 오픈소스로 올려주면 안되나?”라는 생각을 해 봅니다.

무언가 이런 문제를 해결하는데 조금이나마 기여해 보고자 그 방법에 대해 고민해 보았는데, 많은 분들이 아시는 생활코딩님이 떠올랐습니다. 코딩을 이해하고, 여러 프로젝트를 해 보는 데에 큰 도움을 주시고, 코딩에 입문하는 분들이 코딩에 무엇보다 흥미를 갖게 해주시는 점에서 누구나 재미있고 부담없게 즐길 수 있는 코딩 프로젝트를 제공해 보고 싶다는 생각이 들었습니다.

첫 번째 프로젝트에 대해 고민하다, 저에게 위에서 언급한 질문들이 가장 많았던 문제가 링크 단축 서비스였음을 떠올렸습니다. 또 누구나 한 번쯤은 써봤을 만한 서비스였기에 이 서비스를 한 번 만들어 보기로 하였습니다.

기존 프로덕트

bit.ly

아마 누구나 한 번쯤은 써봤을 만한 유명한 링크 단축 서비스입니다.

써 보신 분들은 아시겠지만, 내가 소유한 도메인을 등록하거나 커스터마이징을 하려면 월 8달러~199달러에 달하는 금액을 내야 합니다. 또 이런 서비스들의 특성상 갈수록 혜택이 줄어들거나, 가격이 올라 부담되기도 합니다.

특히 저는 링크 단축 서비스를 거의 개인적인 목적으로, 헤비하게 사용하지 않기에 이를 위해 돈을 지불하고 싶지는 않았습니다.

Firebase Dynamic Link

아무래도 bit.ly를 사용하고 싶지는 않아 저는 훌륭한 대안으로 Firebase Dynamic Link를 사용했습니다.

거의 bit.ly의 유료 버전 기능에 API까지 무료로 제공해 주어 아주 편리하게 사용했습니다.

하지만, 이마저도 지원이 종료되어 버립니다.

직접 만들자

그래서 저는 다양한 기능도 추가해 보고, 개발 연습도 할겸 링크 단축 서비스를 무작정 만들어 보기로 하였습니다.

이 때 진행하던 프로젝트가 API 서버 구축과 관련된 프로젝트였기에, 자연스럽게 Node.js가 떠올랐고, 간단하게 만들 수 있지 않을까? 하고 생각하였습니다.

(우선 토이 프로젝트의 수준이기에 보안상 취약점이나 여러 문제가 있을 수 있지만, 양해 부탁드리며 혹여나 코드에서 이러한 점을 발견하실 경우 제보해 주시면 정말 감사드리겠습니다.)

구상과 시작

바로 Git 리포지토리를 하나 만들고, VSCode를 열어 npm init부터 시작했습니다.

전체적인 구조를 먼저 구상해 보았는데, SQL 데이터베이스에 링크를 저장하고 Node.js 서버에서 관리 기능을 쿼리해 주며 접속 또한 처리하기로 하였습니다.

아래 기능도 유용하게 쓰고 있었거나, 필요한 기능이었기에 추가해 보기로 하였습니다.

API 기반의 링크 생성
링크 접속 시의 권한 설정 (비밀번호 입력, 관리자 전용, 전체공개 등)
링크를 쉽게 관리할 수 있는 페이지
iOS/Android를 구분하는 딥링크 기능
접속 로그 관리

잠깐 개발 과정에 대해 간략하게 설명드리겠습니다.

자바스크립트 개발에 익숙하시지 않다면 그냥 이렇게 했구나~ 정도로만 생각해 주시거나, 관심이 생기신다면 한 번 전체 가이드를 읽어보시는 것도 추천드립니다.

DB 생성

이전에 사용하던 MySQL 서버에 데이터베이스를 하나 생성해 주고, 컬럼 구조를 작성했습니다.

코드 작성

이후, 해당 데이터베이스와 연결되도록 Node.js를 이용해 코드를 작성해 주었고, 관리 페이지(홈화면, 링크 생성 화면, 수정 및 삭제 화면, 로그 정보 확인 화면 등)를 html 템플릿으로 디자인해 주었습니다.

마지막 엔드포인트로 * (와일드카드)을 주어 특수 URL을 제외한 나머지를 데이터베이스와 비교하고, 만약 링크가 없는 경우 커스텀 404.html이 표시되도록 하였습니다.

여러 링크 단축 서비스에서 제공하는 사용자 클라이언트 감지를 위해 Request 정보를 분석하여 iOS나 Android인지 확인하도록 하였고, 로그 정보 또한 별도의 DB로 관리하여 확인이 가능하도록 하였습니다.

또, Basic Auth로 사용자 인증 정보를 확인하고, 관리자 페이지를 접속할 때마다 인증을 하도록 하였습니다.

호스팅

아마 디스콰이엇의 메이커 분들은 알고 계실 Vercel이라는 플랫폼을 이용해 코드를 무료로 호스팅할 수 있도록 하였습니다. 또한, Vercel에서 제공하는 커스텀 도메인을 연결해 제가 개인적으로 사용하는 도메인의 서브도메인으로 사용하였습니다.

더 많은 사람들을 위해

우선 이로써 1차적으로 제가 개인적으로 사용할 서비스는 완성되었습니다.

다만, 저는 이전에 가지고 있던 가상머신에 MySQL을 설치해 사용 중인 상태였기에 일반 사용자들이 더욱 편하게 사용할 수 있도록 위에서 언급한 Vercel의 무료 데이터베이스 기능을 이용해 코드를 다시 작성했습니다.

// Get database URL from environment variable
const databaseUrl = process.env.DATABASE_URL;
if (!databaseUrl) {
    console.error("DATABASE_URL environment variable is missing. Please set it.");
    process.exit(1);
}

// Create a Postgres client
const client = new Client({
    connectionString: databaseUrl,
    ssl: {
        rejectUnauthorized: false
    }
});

이렇게 완성한 코드는 GitHub에서 확인하실 수 있습니다.

가이드 작성

이후, 저는 재작성한 코드를 바탕으로 Vercel이나 GitHub 계정을 만드는 방법에서부터 시작해서 전체 코드에 대한 설명과 원리, 전반적인 내용과 사용법에 이르기까지 모든 과정을 Step-By-Step으로 확인할 수 있도록 가이드를 작성하였습니다.

가이드는 제가 운영 중이던 블로그에 새 카테고리를 만들어 작성하였으며, 무엇보다 무료로, 쉽게 따라할 수 있으며 코딩에 흥미가 생길 수 있도록 생각하며 작성했습니다. 완성된 게시물은 아래에서 보실 수 있습니다.

시행착오

위 가이드에는 나와있지 않지만, 모든 코딩 프로젝트가 그러하듯이 저는 사실 이 프로젝트를 진행하며 여러 번의 시행착오를 겪었습니다.

MySQL을 PostgreSQL로 옮기는 과정이나, 호스팅 과정에서 발생하는 오류, 기타 자잘한 오류 등 여러 버그를 잡으며 무엇보다 뿌듯했습니다.

내가 만든 코드가 처음 돌아가는 그 순간

혹시 여러분은 처음 코딩을 시작하시고, Build Complete가 뜨고, 원하는 대로 작동하는 프로그램을 보셨을 때의 첫 느낌을 기억하시나요?

특히 첫 프로젝트를 완성하셨을 때의 쾌감은 아마 오래 갖고 계시는 분들이 많을 것 같습니다.

저에게 그 첫 느낌은 대회를 위해 애플리케이션을 개발했던 순간이었습니다.

이전에 전국학생과학발명품경진대회에 출품하여 수상한 경험이 있는데, 당시 영양소 검출을 주제로 애플리케이션을 만들고, 머신러닝까지 살짝 연결시켜 프로젝트를 완성했던 그 순간은 아직도 잊지 못합니다.

제 포트폴리오의 첫장을 장식한 이 프로젝트를 완성했던 성취감으로 시작해서 저는 이제 프로젝트 메이킹에 중독(?)되어 버렸습니다..ㅋㅋ

사실 코드를 제공해 드리며 이를 이용해 따라해 보는게 큰 일이 아니게 느껴질 수는 있습니다.

하지만, 저는 이 프로젝트를 하며 특히 코딩에 관심이 없으신 분들께 첫 프로젝트를 만들었다는 그 첫 느낌을 드리고, 코딩에 흥미를 갖게 도와드리고 싶었습니다.

맺음말

첫 문단을 보신 분들은 아시겠지만, 저는 사실 아직 아무것도 모르는 학생입니다.

학생으로써 할 수 있는 일이 많지는 않지만, 조금이나마 프로젝트 메이킹과 코딩에 많은 분들이 관심을 가져주시기를 바라며 시작한 첫 가이드 프로젝트를 마치며 이후에도 다양한 가이드 프로젝트를 만들어 나가고자 합니다.

현재 잇(IT)! 가이드 라는 이름으로 제 블로그에서 연재하고 있으며, 새로운 프로젝트가 나오면 디스콰이엇과 블로그에서 소개드리도록 하겠습니다. 블로그 운영은 아직도 서툰지라 많은 분들께서 글을 봐주시지는 않았지만, 널리널리 퍼져 더 많은 분들께 도움이 되었으면 좋겠습니다.

가이드 프로젝트를 만들어 본 것은 처음이라 글이 잘 읽히실지는 모르겠습니다. 어떤 내용이던 의견이 있으시다면 언제나 커피챗이나 댓글 주시면 정말 감사드리겠습니다. (admin@scian.xyz로 메일 주셔도 괜찮습니다!)

긴 글 읽어주셔서 감사드리며, 오늘도 좋은 하루 보내시길 바라겠습니다 :)

JeongHoon Lim님의 아티클