🧠 소개
웹서핑하다가 "오, 이거 괜찮은데?" 싶은 글을 발견하면 어떻게 하시나요?
저는 항상 Obsidian에 저장해두는 편인데요.
처음에는 "Obsidian Web Clipping" 플러그인으로 했었거든요.
하지만 설명 텍스트를 이렇게 클리핑해서
손 좀 봐야겠다라는 생각이 들었습니다
그런데 이게 생각보다 번거로운 일이더라고요:
- 제목이랑 URL, 날짜 일일이 기록하기
- YAML 프론트매터 문법이 뭔지 몰라서 메타데이터가 뒤죽박죽
- 나중에 찾으려니까 태그도 없고 분류도 안 되어 있고...
"이거 자동화하면 어떨까?" 하는 생각이 들면서, 두 가지 방법을 실제로 써봤습니다.
🆚 두 가지 방법 비교해보기
🕐 방법 1: Chrome Web Clipper 플러그인 사용
가장 쉬운 방법부터 시도해봤어요.
Chrome 스토어에서 "Obsidian Web Clipper" 검색하면 나오는 플러그인입니다.
🏈작업방향
1. 옵시디언 스터디장, 구요한님의 예스24 템플릿을 Cursor 에 분석요청
2. Cursor 에게 원하는거 던지고 해줘해줘 부탁하기
완성된 JSON 파일을 "Obsidian Web Clipper" 확장 프로그램에 들여오기
👍 좋았던 점
- 설치하고 바로 쓸 수 있어요 (진입장벽 거의 0)
- 클릭 한 번으로 바로 클리핑 완료
- YAML 프론트매터가 자동으로 생성되니까 일관성 있음
👎 아쉬웠던 점
- 템플릿을 내 마음대로 바꾸기 어려워요
- 이미지는 제대로 안 가져와지고
- 모바일에서는 쓰기 힘들더라고요
- 템플릿 수정하는 유연성이 아쉽기도 합니다.
💭 솔직한 후기
초심자라면 이걸로 충분해요.
근데 조금 써보니까 Cursor 로 커스터마이징하고 싶다는 욕구가 생기더라고요.
마음이 그렇다면 해야겠죠..
🕑방법 2: Cursor로 직접 만든 Web Clipper
1단계 : PRD 아이디어 구체화
처음은 이렇게 가볍게 시작하지만
갑자기 Puppeteer? 라는 기능도 넣어야 합니다
이후 PRD 문서를 만들고 Cursor 와 작업 진행했습니다.
🛠️ 어떻게 작동하나요?
1. 웹페이지 URL을 프로그램에 입력
2. Puppeteer로 페이지 내용 크롤링
3. 마크다운으로 변환 + YAML 메타데이터 자동 생성
4. 내가 설정한 폴더에 파일 자동 저장
👍 좋았던 점
- 완전 자동화! (제목, 날짜, 태그, 백링크까지)
- 내 마음대로 템플릿 수정 가능
- 나중에 AI 요약 기능도 추가할 수 있어요
- Git 자동 백업까지 연동 가능
👎 아쉬웠던 점
- 처음 세팅할 때 좀 번거로워요
- 가끔 웹사이트 구조가 특이하면 에러 날 때도 있고
- 코드 수정이 필요한 경우가 있어요
Cursor 를 이용해 웹 클리핑 결과
개인 클리핑 목적으로 사용하기 때문에
터미널에서 로컬 호스트로 실행해 클리핑하는 프로그램 완성했습니다.
원하는 URL 넣으면
1. AI 요약
2. 요약된 문서는 원하는 경로에 추가 + 연관된 문서 [[]] 연결
3. 일간 노트에 [[]] 연결 + 3줄 요약
하는 간단한 URL 클리핑 프로그램 Cursor 와 함께 작업 완성했습니다.
🤦♂️ 주요 시행착오들
에러 1: 이미지 경로 문제
처음엔 이미지가 안 나오더라고요.
상대경로/절대경로 문제였는데, Cursor가 해결책 제시해줬어요.
에러 2: 한글 인코딩 이슈
한글 제목이 깨지는 문제가 있었어요. UTF-8 설정 추가하니까 해결됐어요.
에러 : 크롤링 속도 문제
웹사이트 로딩 기다리는 시간을 안 줘서 빈 파일이 계속 생성됐었어요.
waitForSelector 추가하니까 해결!
📊 최종 비교표
🚀 현재 결과와 향후 계획
지금 상황
- Reference 폴더에 들어가는 모든 웹 클리핑이 자동으로 정리돼요
- 백링크, 태그, 요약까지 자동으로 생성되니까 나중에 찾기도 쉽고
- Git 백업도 자동으로 되니까 안심이에요
앞으로 추가하고 싶은 기능
- AI 요약 기능 (GPT API 연동)
- 키워드 기반 자동 분류
- 중복 콘텐츠 감지
- 클리핑 문서 + 저장한 문서 중 유사한 문서들을 [[]] 백링크 연결
- 웹 클리핑을 넘어 크롤링까지 Cursor 로 크롤링 작업!
💡 Cursor 입문자분들께 드리는 팁
1. 작은 프로젝트부터 시작하세요: 처음부터 복잡한 걸 만들려고 하지 마세요.
저도 단순한 URL → 파일 저장부터 시작했어요.
2. PRD 문서 작성시, 볼륨을 너무 키우면 힘들어요: 이거 정말 중요해요.
GPT 가 마지막에 제안하는 것들을 무턱대로 다 받으면 힘들어요 ㅠ
목표가 명확해야 Cursor도 더 정확하게 도와줘요.
3. 에러 무서워하지 마세요: 에러 메시지 복사해서 Cursor한테 물어보면
대부분 해결책 알려줘요.
4. 한 번에 완벽하게 만들려고 하지 마세요: 저도 처음엔 엉망이었어요.
조금씩 개선해 나가는 재미가 있어요.
🎯 마무리
솔직히 말하면 이 프로젝트 하는데 총 4시간 정도 걸렸습니다 ㅎㅎ..
4시간 중에 아이디어 빌딩에 시간을 많이 사용했습니다.
GPT 가 이거할래? 저거할래? 물어보는 것들을 "좋아 좋아 진행해" 라고 해서
프로그램 볼륨이 커져 수정하는데 시간을 많이 사용했어요
그러면서 배운 점도 있지만,
필요기능이 무엇인지 정의하는 능력이 정말 중요하다는 것을 배웠습니다.
여러분도 일상에서 "이거 자동화하면 좋겠는데" 하는 일이 있다면,
Cursor와 함께 한번 시도해보세요. 생각보다 재미있을 거예요!
---
💬 궁금한 점이나 같이 개발해보고 싶은 분들은 댓글로 얘기해요!