커서(Cursor) + 카피 코더(Copy Coder)로 이메일 스크래퍼 만들기 (무료!)_prompts & instructions

Free B2B Leads for Life! 🚀Cursor + Copy Coder = Lead Generation Email Scraper in 10 Minutes - Part 1

10분 만에 B2B 리드 획득: 커서(Cursor) + 카피 코더(Copy Coder)로 이메일 스크래퍼 만들기 (무료!)

비싼 B2B 리드 구매 비용에 지치셨나요? 이제 AI와 노코드 도구를 활용하여 무제한으로 리드를 무료로 얻을 수 있습니다! 본 튜토리얼에서는 커서(Cursor)와 카피 코더(Copy Coder)를 사용하여 10분 만에 이메일 스크래퍼를 만드는 방법을 단계별로 안내합니다. 프로그래밍 경험이 없어도 괜찮습니다. 지금 바로 시작해 보세요!

1. 이메일 스크래퍼 제작 개요

본 튜토리얼에서는 다음과 같은 기능을 갖춘 크롬 확장 프로그램을 제작합니다.

• 웹사이트 데이터 추출: 웹사이트에서 이름, 이메일, 전화번호, 주소 등 B2B 리드에 필요한 모든 정보를 추출합니다.
• 로컬 저장: 추출한 데이터를 로컬에 저장합니다.
• CSV 내보내기: 추출한 데이터를 CSV 파일로 내보냅니다.
• 백그라운드 실행: 크롬 확장 프로그램이 활성화되면 모든 웹사이트를 방문할 때마다 자동으로 연락처 정보를 검색합니다.
• 활성화/비활성화 버튼: 확장 프로그램을 켜고 끌 수 있는 버튼을 제공합니다.

2. 필요한 도구

• 커서(Cursor): AI 기반 코드 편집기 (무료 플랜 이용 가능)
• 카피 코더(Copy Coder): 이미지 기반 프롬프트 생성 도구 (유료, 하지만 초기 프롬프트 생성에만 사용)

3. 이메일 스크래퍼 제작 방법: 30단계 가이드

다음은 커서(Cursor)와 카피 코더(Copy Coder)를 사용하여 이메일 스크래퍼를 제작하는 방법을 30단계로 세분화한 가이드입니다.

단계별 설정:

1. 인스타 데이터 스크래퍼(Instad Data Scraper) 분석: 인스타 데이터 스크래퍼와 유사한 기능을 구현하기 위해 해당 크롬 확장 프로그램을 분석합니다.
2. UI 디자인 스크린샷: 인스타 데이터 스크래퍼의 UI 디자인을 캡처합니다. (최대한 깔끔한 디자인의 스크린샷을 사용)
3. 카피 코더(Copy Coder) 설정: 카피 코더에 가입하고 이미지 업로드 기능을 사용합니다.
4. 스크린샷 업로드: 캡처한 UI 디자인 스크린샷을 카피 코더에 업로드합니다.
5. 프롬프트 생성: 카피 코더가 생성한 프롬프트를 확인하고 복사합니다.
6. 페이지 구조 생성: 카피 코더에서 "Generate Page Structure" 버튼을 클릭하여 페이지 구조를 생성합니다.
7. 프롬프트 파일 다운로드: 인증 설정 여부를 선택하고 프롬프트 파일을 다운로드합니다. (본 튜토리얼에서는 인증 설정 없이 진행)
8. 커서(Cursor) 실행: 커서 AI 코드 편집기를 실행합니다.
9. 새 프로젝트 생성: 커서에서 새로운 프로젝트 폴더를 생성합니다. (예: B2B Scraper)
10. 에이전트 모드 활성화: 커서의 에이전트 모드를 활성화합니다. (Agent Mode)
11. 프롬프트 입력: 커서에 다음과 같은 프롬프트를 입력합니다.
    • (프롬프트 #1): "I am creating a Chrome extension that is going to use HTML, CSS, and JS, and it's going to be able to pull data from a website. I want that data to be stored locally, which would include all the information: name, email, phone number, address, and any other information a B2B business would need in order to contact them. Save as much data as you can. Also, I want to be able to then save that info as a CSV. I want this Chrome extension to work in the background when it's been turned on, so add a turn on/off button. All the time for every website I visit looking for contact information. I have included a design and a CLI."
12. 파일 생성 및 구조 확인: 커서가 필요한 파일 및 폴더를 자동으로 생성하는 것을 확인합니다.
13. 백그라운드 스크립트 생성 확인: 커서가 확장 프로그램 상태를 관리하고 팝업과 콘텐츠 스크립트 간의 통신을 조정하는 백그라운드 스크립트를 생성하는 것을 확인합니다.
14. 콘텐츠 스크립트 생성 확인: 커서가 실제 스크래핑을 수행하는 콘텐츠 스크립트를 생성하는 것을 확인합니다.
15. 크롬 확장 프로그램 로드: 크롬 브라우저에서 "확장 프로그램 관리" 페이지로 이동하여 개발자 모드를 활성화하고, "압축 해제된 확장 프로그램 로드" 버튼을 클릭하여 커서가 생성한 폴더를 선택합니다.
16. 아이콘 오류 확인: 아이콘 관련 오류가 발생하는 경우, 오류 메시지를 복사합니다.
17. 커서에 오류 메시지 전달: 커서에 오류 메시지를 전달하고 수정을 요청합니다.
    • (프롬프트 #2): "Got this error: [오류 메시지]. Fix it."
18. 이미지 및 라이브러리 설치 확인: 커서가 필요한 이미지 및 라이브러리를 다운로드하고 설치하는 것을 확인합니다.
19. 확장 프로그램 재설치: 크롬 확장 프로그램 관리 페이지에서 기존 확장 프로그램을 삭제하고, 수정된 코드가 적용된 새 확장 프로그램을 로드합니다.
20. 확장 프로그램 활성화 및 테스트: 크롬 브라우저에서 확장 프로그램을 활성화하고, 특정 웹사이트 (예: 레스토랑 정보 검색)를 방문하여 데이터가 제대로 추출되는지 확인합니다.
21. Gmail 주소 추출 확인: 확장 프로그램이 Gmail 주소를 제대로 추출하는지 확인합니다.
22. 추출 실패 문제 해결: Gmail 주소를 제대로 추출하지 못하는 경우, 스크린샷을 캡처하고 커서에 문제 해결을 요청합니다.
    • (프롬프트 #3): "You are not finding the Gmail on the page and adding it correctly. Fix it."
23. 이메일 형식 오류 확인: 추출된 이메일 주소 형식이 올바른지 확인합니다.
24. 이메일 형식 오류 문제 해결: 이메일 주소 형식이 잘못된 경우, 스크린샷을 캡처하고 커서에 문제 해결을 요청합니다.
    • (프롬프트 #4): "You are now pulling in the emails, but I see that the formatting is incorrect. And also, why aren't you saving the other info: the other info - name, phone, address, etc.?"
25. 추가 정보 누락 확인: 이름, 전화번호, 주소 등 다른 정보가 누락된 경우, 커서에 문제 해결을 요청합니다. (프롬프트 #4와 함께 사용)
26. 확장 프로그램 재설치 및 데이터 초기화: 크롬 확장 프로그램 관리 페이지에서 기존 확장 프로그램을 삭제하고, 수정된 코드가 적용된 새 확장 프로그램을 로드한 후, 데이터를 초기화합니다.
27. 다양한 키워드 및 지역 테스트: 다양한 키워드 (예: plumbers, San Diego)를 사용하여 검색하고, 확장 프로그램이 제대로 작동하는지 테스트합니다.
28. 자동화 기능 추가 (향후 계획): 페이지 이동 및 데이터 추출 자동화 기능 추가를 계획합니다. (Part 2 튜토리얼에서 다룰 예정)
29. 데이터 분석 및 활용 (향후 계획): 추출한 데이터를 ChatGPT와 연동하여 데이터 분석 및 활용 방안을 구상합니다. (Part 2 튜토리얼에서 다룰 예정)
30. 지속적인 개선: 사용자 피드백을 수렴하고, 새로운 기능 추가 및 성능 개선을 통해 확장 프로그램을 지속적으로 발전시켜 나갑니다.

4. 추가 팁

• 정확한 문제 설명: 커서에게 문제를 설명할 때 최대한 정확하고 자세하게 설명해야 합니다.
• 스크린샷 활용: 문제 상황을 시각적으로 보여주는 스크린샷을 적극 활용합니다.
• 인내심: AI 코딩은 시행착오를 거쳐야 하는 과정입니다. 인내심을 가지고 꾸준히 시도하면 좋은 결과를 얻을 수 있습니다.

5. 결론: AI와 함께 B2B 리드 획득 자동화를 경험해보세요!

커서(Cursor)와 카피 코더(Copy Coder)를 활용하면 누구나 쉽게 B2B 리드 스크래퍼를 제작하고, 리드 획득 프로세스를 자동화할 수 있습니다. 본 튜토리얼을 통해 AI 코딩의 가능성을 확인하고, 비즈니스 성장에 도움이 되는 도구를 직접 만들어보세요!

프롬프트 예시 요약:

1. "I am creating a Chrome extension that is going to use HTML, CSS, and JS, and it's going to be able to pull data from a website. I want that data to be stored locally, which would include all the information: name, email, phone number, address, and any other information a B2B business would need in order to contact them. Save as much data as you can. Also, I want to be able to then save that info as a CSV. I want this Chrome extension to work in the background when it's been turned on, so add a turn on/off button. All the time for every website I visit looking for contact information. I have included a design and a CLI."
2. "Got this error: [오류 메시지]. Fix it."
3. "You are not finding the Gmail on the page and adding it correctly. Fix it."
4. "You are now pulling in the emails, but I see that the formatting is incorrect. And also, why aren't you saving the other info: the other info - name, phone, address, etc.?"

< Prompts >

1. (To Copy Coder - Implied): (Based on screenshot upload) "Analyze this screenshot of a UI and generate the necessary code (or a detailed prompt) to recreate it." [This is implied by the action of uploading the screenshot]
2. (To Copy Coder - Implied): "Generate the Page Structure" [This generates a project structure based on the image analyzed in the previous step]
3. (To Cursor Agent - Explicit): "I am creating a Chrome extension that is going to use HTML, CSS, and JS, and it's going to be able to pull data from a website. I want that data to be stored locally, which would include all the information: name, email, phone number, address, and any other information a B2B business would need in order to contact them. Save as much data as you can. Also, I want to be able to then save that info as a CSV. I want this Chrome extension to work in the background when it's been turned on so add a turn on/off button. All the time for every website I visit looking for contact information. I have included a design and a CLI." [Initial, high-level instructions]
4. (To Cursor Agent - Explicit): "Setup." [This is the "trigger word" or command to activate the agent.]
5. (To Cursor - Explicit): "get add everything then here's the commit message and then hit push origin main" [This is said at the end and used as a step. User is telling cursor, not asking]
6. (To Cursor Agent - Explicit): "Got this error: [Pasted Error Message]. Fix it." [Iterative debugging - this is a pattern]
7. (To Cursor Agent - Explicit): "You are not finding the Gmail on the page and adding it correctly." [Specific issue identification]
8. (To Cursor Agent - Explicit): "You are now pulling in the emails, but I see that the formatting is incorrect and also why aren't you saving the other info: the other info - name, phone, address, Etc." [Issue identification and expanding requirements]
9. (Implied to Users of the tool): “Set up a filter system for certain key items."

Key Observations and Refinements:

• Copy Coder's Role: Copy Coder is primarily used for initial UI generation. The AI's strength is in turning a visual input (the screenshot) into a code representation.
• Cursor Agent's Iterative Nature: The Cursor Agent's power lies in its ability to iteratively refine and extend existing code. The prompts are designed to leverage this.
• Implicit vs. Explicit: While I have focused on listing the explicit prompts, it's critical to recognize the implied element. The speaker is constantly evaluating the AI's output and deciding what to ask next. This ongoing evaluation is a crucial part of the process.
• Error Handling as a Prompt: The repeated use of "Got this error: [Error Message]. Fix it" highlights that error messages themselves become a form of prompt. The AI analyzes the error and attempts a solution.
• The explicit way the the speaker is talking to it is key!