회사의 까다로운 방화벽을 뚫고 완성한 URL → 노션 자동 저장 시스템 (Vercel & Telegram 연동기)

사무실 youtube 나 특정 글 보다가 내 핸드폰으로 보내고 싶은데 방법이 하나 하나 적어야 하니 

너~~무 피곤

1. 프로젝트를 시작하게 된 배경

• 문제 상황: 유용한 웹 정보를 발견했을 때 노션 데이터베이스에 즉시 저장하고 싶었음.
• 기술적 제약: 처음 시도했던 특정 클라우드 서비스(예: Cloudflare Workers)나
• 개인 도메인이 회사 보안망에 걸려 전송이 차단됨.
• 해결책: 기업용 인프라로 널리 쓰여 신뢰도가 높은 Vercel을 백엔드로 활용하고, 결과 확인을 위해 텔레그램 알림을 추가함.

---

2. 전체 시스템 구조 (Architecture)

1. Frontend (HTML/JS): 사용자가 URL과 메모를 입력하는 창구.
2. Backend (Vercel Serverless Function): 데이터를 받아 노션 API 양식에 맞춰 가공하고 전송하는 중계소.
3. Database (Notion API): 최종적으로 데이터가 깔끔하게 정리되어 쌓이는 저장소.
4. Notification (Telegram Bot): 저장이 성공하면 사용자에게 즉시 푸시 알림을 보내주는 비서.

---

3. 핵심 해결 포인트 (Key Insights)

Vercel을 선택한 이유

개인 도메인이나 생소한 주소는 회사 방화벽의 '차단 대상'이 되기 쉽습니다. 하지만 Vercel에서 제공하는 기본 도메인은 신뢰도가 높아 보안망을 통과할 확률이 높습니다.

CORS와 OPTIONS 요청 처리

웹 브라우저에서 서버로 데이터를 보낼 때 발생하는 보안 정책(CORS)을 백엔드에서 어떻게 처리했는지가 핵심입니다. 사전 요청(Preflight)에 대해 올바른 응답을 주어야 브라우저가 안심하고 데이터를 보냅니다.

텔레그램 알림의 즉시성

노션 앱을 열어보지 않아도 텔레그램 알림이 오면 "아, 데이터가 잘 들어갔구나"를 바로 알 수 있어 사용자 경험이 비약적으로 상승합니다.

 

텔레그램은 데이터 삭제 할 일도 없어서 2중 백업

---

4. 설정 시 주의사항 (Tips)

• 환경 변수 관리: 노션 API 키나 텔레그램 토큰 같은 중요한 정보는 코드에 직접 적지 않고,
• Vercel의 Environment Variables 기능을 이용해 보안을 강화했습니다.
• 노션 연결 추가: 노션 API를 사용할 때는 해당 데이터베이스의 설정에서  '연결 추가'를 통해 권한 필수
•  
• 텔레그램 봇 활성화: 봇이 먼저 메시지를 보낼 수 없으므로, 사용자가 반드시 먼저 /start를 눌러야 한다는 점이 중요합니다.

---

5. 마치며

이번 프로젝트를 통해 클라우드 인프라의 차이점과 네트워크 보안 환경에 대응하는 법을 배울 수 있었습니다.

이제 어디서든 중요한 정보를 놓치지 않고 수집할 수 있는 나만의 도구를 갖게 되었습니다!

 

 

 

https://urln.vercel.app/

히히

 

텔레그램 연동 시 팁

1. 봇 생성 및 보안 팁

• BotFather 활용: 텔레그램 공식 봇인 @BotFather를 통해 단 몇 초 만에 봇을 생성하고 API 토큰을 발급받을 수 있습니다.

2. 알림 채널/그룹 활용 (확장성)

• 나만 보기: 1:1 채팅방 ID를 사용하면 개인 비서처럼 쓸 수 있습니다.
• 공유용: 만약 팀 프로젝트라면 텔레그램 **'채널'**이나 **'그룹'**에 봇을 초대하고 해당 방의 ID를 등록하여 팀원 전체가 실시간으로 수집되는 URL을 공유받을 수 있습니다.

3. 봇과의 '첫 대화' 중요성 강조

• 많은 초보자가 놓치는 부분인데, 봇은 사용자가 먼저 **/start**를 누르기 전까지는 절대 말을 걸 수 없습니다. "봇이 응답하지 않는다면 채팅방에 들어가 '시작' 버튼을 눌렀는지 확인하라"는 팁은 블로그 독자들에게 매우 친절한 가이드가 될 것입니다.