🧠 소개
웹서핑하다가 "오, 이거 괜찮은데?" 싶은 글을 발견하면 어떻게 하시나요?
저는 항상 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 를 이용해 웹 클리핑 결과
GPES
개인 클리핑 목적으로 사용하기 때문에
터미널에서 로컬 호스트로 실행해 클리핑하는 프로그램 완성했습니다.
한국 컴퓨터 화면의 스크린 샷
원하는 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와 함께 한번 시도해보세요. 생각보다 재미있을 거예요!
---
💬 궁금한 점이나 같이 개발해보고 싶은 분들은 댓글로 얘기해요!
