프론트엔드만 하던 우리가 서비스를 직접 만들기까지

안녕하세요!
저희는 링크를 정말 잘 저장하고, 다시 꺼내보게 만드는 서비스를 만들고 있는 작은 팀입니다.
바로 링크 드라퍼(Link Dropper)라는 이름의 서비스인데요,
하루에도 수십 개씩 쌓이는 링크들을 단순히 ‘보관’하는 것이 아니라,
‘기록’하고 ‘되돌아보는 습관’을 만들어주는 도구를 목표로 하고 있습니다.

이 서비스는 단 2명의 프론트엔드 개발자가
프론트, 백엔드, 인프라, 배포까지 모두 직접 구축해나가고 있습니다.

---

🔧 기술 스택 소개

영역	기술 스택
프론트엔드	Next.js 14 (App Router), TypeScript, Mantine UI
백엔드	Next.js API Routes, MySQL, (NestJS: 별도 구축 중)
인프라	AWS EC2, RDS, S3, Lambda + ECR
배포 자동화	GitHub Actions + Vercel, AWS CLI

---

😵‍💫 가장 막막했던 순간들

1. Python으로 직접 크롤러를 만들기까지

링크 드라퍼의 핵심은 ‘링크를 드롭하면 알아서 정보가 정리된다’는 경험입니다.
이를 위해 OpenGraph 정보를 자동으로 크롤링해오는 기능이 필수였죠.

이미 open-graph-scraper 같은 패키지가 있지만,
동적 렌더링이 필요한 사이트나 보안이 철저한 페이지에서는 정보를 제대로 불러오지 못하는 이슈가 있었습니다.
결국 직접 크롤링 코드를 만들기로 결정했습니다.

문제는…

“우리는 Python 기초만 알았다는 점.”

초반엔 정적 크롤링만으로 구현해보려 했지만 실패율이 너무 높았습니다.
그래서 playwright를 도입해 동적 크롤링을 구현했고,
이제는 대부분의 사이트에서 안정적으로 title, description, image 등을 추출할 수 있게 되었습니다.

이 과정은 너무 배운 게 많아서, 다른 글로 자세히 다뤄보려 합니다 :)

---

2. NestJS로 백엔드 따로 구성하기

처음엔 Next.js API Routes 기반으로 모든 API를 처리하고 있었습니다.
하지만 시간이 지날수록 이런 생각이 들었습니다.

“우리는 크롬 익스텐션, 모바일 앱, 데스크톱 앱도 만들고 싶다.”

“그러려면 프론트엔드에서 완전히 분리된 독립적인 API 서버가 필요하지 않을까?”

그렇게 저희는 NestJS로 백엔드를 따로 구축하기로 결정합니다.
문제는, NestJS를 단 한 줄도 써본 적이 없다는 것이었습니다.

그래서 가장 먼저 한 일은…
강의 듣기 📺
공식 문서 반복 읽기 📄
그리고 계속해서 뜨는 타입 에러와 전쟁하기 ⚔️

그럼에도 불구하고 API 설계와 서비스 계층 구조, 모듈 단위의 책임 분리 등
NestJS가 제공하는 철학은 굉장히 큰 도움이 되었습니다.

지금은 완전히 분리된 백엔드 구조를 향해 조금씩 나아가고 있습니다.

---

🚀 현재는 베타 오픈 중입니다!

링크 드라퍼는 지금 베타 서비스로 오픈되어 있습니다.
직접 써보시고, 어떤 점이 좋았는지 / 부족한 점은 무엇인지 피드백을 주시면
저희에겐 정말 큰 도움이 됩니다.

👉 🔗 링크 드라퍼 체험하러 가기
👉 📝 링크 사용 습관 설문 참여하기

---

마무리하며

프론트엔드만 하던 우리가
“서비스를 만들기 위해 필요한 모든 것”을 배우고 부딪히며 만들어가고 있습니다.

누군가는 ‘풀스택’이라는 단어가 부담스럽다고 느낄지 모르지만,
저희는 이걸 두 명의 생존 개발기라고 부르고 싶어요.

앞으로도 Velog를 통해
실제 개발하면서 겪은 기술적 시행착오와 해결 과정들을
꾸준히 기록해보겠습니다.

감사합니다 🙌