프론트엔드 개발자였던 우리가, 직접 서비스를 만들기까지
단 두 명의 프론트엔드 개발자가 풀스택으로 직접 만든 서비스, ‘링크 드
안녕하세요.
우리는 ‘링크를 잘 저장하고, 다시 꺼내보게 만드는 서비스’를 만들고 있는 작은 팀입니다.
이름은 링크 드라퍼(Link Dropper).
하루에도 수십 개씩 쌓이는 링크를 단순히 ‘보관’하는 게 아니라,
‘기록하고, 되돌아보는 습관’을 만들어주는 도구를 목표로 하고 있어요.
> 단 2명의 프론트엔드 개발자가
> 프론트, 백엔드, 인프라, 배포까지 모두 직접 만들어가고 있습니다.
⚙️ 우리가 사용한 기술들
• 프론트엔드는 Next.js 14(App Router)와 TypeScript, Mantine UI를 사용해 구축했습니다.
• 백엔드는 초기에는 Next.js API Routes를 사용했지만, 현재는 독립적인 서버 구축을 위해 NestJS로 별도 이전을 진행 중입니다.
• 인프라는 AWS EC2, RDS, S3, Lambda, 그리고 ECR을 활용해 구성했습니다.
• 배포 자동화는 GitHub Actions와 Vercel, 그리고 AWS CLI를 이용해 설정했습니다.
가장 막막했던 순간
Python으로 직접 크롤러를 만들기까지
링크 드라퍼의 핵심은 ‘링크를 드롭하면 알아서 정보가 정리되는’ 경험이었습니다.
처음에는 오픈 소스 패키지를 활용하려 했지만,
보안이 강한 사이트나 동적 렌더링이 필요한 페이지에서는 제대로 작동하지 않았습니다.
결국 직접 만들기로 했습니다.
Python은 정말 기초만 알고 있었지만,
playwright를 도입해 동적 크롤링을 구현했고,
이제는 대부분의 링크에서 title, description, image를 안정적으로 추출할 수 있게 되었어요.
이 과정은 우리에게 너무 소중한 경험이 되었고,
언젠가 따로 글로 정리해보려 합니다.
NestJS로 백엔드를 따로 구성하기
처음에는 Next.js API Routes만으로 충분하다고 생각했어요.
하지만 시간이 지날수록, 크롬 익스텐션이나 모바일 앱, 데스크탑 앱을 만들고 싶다는 욕심이 생겼습니다.
"프론트와 완전히 분리된 독립적인 API 서버가 필요하다."
그렇게 우리는 NestJS를 선택했습니다.
NestJS는 처음이었고,
공식 문서를 반복해서 읽고, 타입 에러와 끊임없이 싸워야 했습니다.
하지만 그 과정을 거치면서,
API 설계, 서비스 계층 구조, 모듈 분리 같은 것들을 체득할 수 있었어요.
조금씩이지만, 확실히 더 좋은 방향으로 나아가고 있습니다.
지금은 베타 오픈 중입니다
링크 드라퍼는 현재 베타 서비스로 오픈되어 있습니다.
직접 사용해보시고, 느낀 점이나 개선할 부분을 알려주시면 정말 큰 힘이 됩니다.
마무리하며
우리는 프론트엔드만 하던 개발자들이었습니다.
"서비스를 만들기 위해 필요한 모든 것"을 처음부터 하나하나 배우고 부딪히며 여기까지 왔습니다.
누군가는 풀스택이라는 말이 부담스럽다고 느낄지도 모릅니다.
하지만 우리는, 이걸 두 명의 생존 개발기라 부르고 싶어요.
앞으로도 Velog와 브런치를 통해,
실제 개발하면서 겪은 시행착오와 배운 것들을 꾸준히 기록해보겠습니다.
읽어주셔서 감사합니다.
