토론

AI로 구글 확장 프로그램(extension) 만들기 - 뉴스 스크랩을 도와주는 '캠페인즈 웹 스크래퍼'

2024.07.12

469
7
과학기술과 사회에 관심이 많은 연구활동가


제가 활동하고 있는 캠페인즈에서는 '뉴스'탭에서 서로 뉴스를 공유하고, 읽고, 의견을 나눌 수 있습니다. 평소 인터넷 뉴스 덧글의 흉포함에 지친 분들이 안전하게 자신의 의견을 나눌 수 있는 곳이며, 뿐만 아니라 각자 다른 사람에게 공유하고 싶은 뉴스를 가져오기 때문에 좋은 뉴스가 정말 많이 올라옵니다. 저 역시 가끔 캠페인즈에 들어와 뉴스를 보고, 직접 뉴스도 공유하는데요.

그렇게 뉴스를 캠페인즈에 업로드하던 어느 날, 이런 생각이 들었습니다. '이전에 소개했던 Notion web clipper처럼, 캠페인즈 뉴스도 사람들이 쉽게 공유하면 더 많은 뉴스가 캠페인즈에 올라올 수 있지 않을까?' 이미 좋은 공간인데, 사람들이 너도나도 아무 뉴스나 보다가 딸깍 쉽게 공유하면 더 좋겠다는 생각이 들어, 개발자가 아님에도 직접 한 번 '캠페인즈 웹 스크래퍼'를 만들게 되었습니다. 활용하실 경우, 꼭 글을 끝까지 읽고 사용해주세요!


1. 무엇을 자동화할 수 있을지 먼저 고민하기

지금까지 캠페인즈 뉴스를 추가하려면,
1) 공유하고 싶은 뉴스를 발견 -> 2) 캠페인즈 내에 들어와서 -> 3) 뉴스 탭에 들어온 다음 -> '추가'버튼을 누르고 뜨는 팝업에서 -> 4) 이슈,토픽,URL,코멘트(선택)를 입력한 다음 -> 5) '뉴스 공유하기'버튼을 눌러야 했습니다. 이렇게 단계를 나누고 천천히 분석해보니, 제가 자동화 할 수 있다고 처음 판단한 영역은 다음과 같았습니다.

-2)와 3)에 해당하는 과정 - '추가'버튼을 누르면 나오는 화면이 나오게 하기
-4)번 과정 중, 먼저 할 수 있는 자동으로 지금 보고 있는 뉴스 기사 링크를 URL칸에 들어가게 하기

2. 일단 AI에게 물어보기

이 개요를 토대로, ChatGPT4o로 코드를 짜기로 결심했습니다. ChatGPT에는 앱스토어와 같은 'GPTs(GPT 탐색)'이 가능했고, 그 중 크롬 확장 프로그램 제작을 도와주는 'Chrome Extension Full-Auto Coder' 라는 GPTs를 찾아서 제가 필요한 걸 찾아 정리해 넣었습니다.

그리고 따라서 하다 보니 크롬 확장 프로그램에 필요한 로고 파일이 있다는 것도 발견하고, 이것도 ChatGPT로 만들어서 파일로 준비해 두었습니다.

중간 과정은 생략했지만, 약 1시간에 걸쳐 크롬 확장 프로그램을 만들었고, 제 크롬과 웨일에서 사용 가능하게 업로드할 수 있었습니다. 하지만 많은 사람들과 이 기능을 쉽게 공유하려면, Chrome 웹 스토어에 등록해야 합니다. 이 역시 질문하고, 개인 정보 처리 방침 등은 전부 ChatGPT에게 물어보며, 개발자 등록과 크롬 확장 프로그램을 웹스토어 등록하는 것까지 마칠 수 있었습니다. 근데 이 과정을 많이 헤매서.. 여기에서만 2시간이 추가로 소요됐네요 ㅎㅎ..


3. 아쉬운 점을 개선하면 완료!

사용해보니, 뉴스 공유를 완료하고 나서도 캠페인즈 뉴스 탭이 사라지지 않는 게 좀 불편하더라구요. 그래서 뉴스 공유하기를 누르고 나면 창이 자동으로 꺼지도록 하는 기능까지 GPTs에게 물어보고, 답을 받아 고쳤습니다..! 사용 장면을 간단히 보여드리며 사용 방법을 알려드릴게요. 천천히 따라하시면 어렵지 않을 거에요.


  1. chrome웹 스토어(크롬 / 웨일 / Edge 사용 가능)에 들어가서 '캠페인즈 웹 스크래퍼'를 검색하시거나, 이 링크를 눌러 페이지로 직접 들어가기
  2. 오른쪽 상단의 'Chrome에 추가하기'버튼 누르기
  3. 우측 상단 퍼즐 모양을 누른 다음, 확장 프로그램 옆에 핀셋 눌러 인터넷 창에 고정시키기
  4. 기본적으로 캠페인즈에 로그인이 되어 있을 때 사용이 가능하며, 이제 뉴스 페이지에서 해당 버튼을 누르시면, 팝업으로 캠페인즈 뉴스 추가 창이 뜨고, 동시에 자동으로 현재 보고 있는 뉴스 사이트의 링크가 URL칸에 입력됩니다.
  5. 나머지 내용을 채우고 '공유하기'를 누르시면, 자동으로 팝업이 닫힙니다.

더 많은 뉴스가 캠페인즈에 공유되어, 서로 더 좋은 정보를 공유할 수 있게 되어 더 좋은 사회가 만들어지길 바랍니다..! 많은 분들의 활용 부탁드립니다!

저 역시 이 확장프로그램을 개발하며 자신감도 얻고, 보람차기도 했던 좋은 경험을 할 수 있어 좋았습니다 ㅎㅎ 여러분들도 해보고 싶은 일이 있으면 언제든지 도전하세요!


*필독 : '캠페인즈 웹 스크래퍼'는 캠페인즈의 공식 기능이 아닙니다. 따라서 얘기치 못한 버그가 발생할 수 있으며, 캠페인즈 웹 구조가 바뀔 시 작동하지 않을 수 있음을 알려드립니다(그렇다고 해킹이나 바이러스 같은 게 있지는 않습니다..그런 건 등록이 안됩니다).


p.s. 모바일에서 활용하시려면 '키위 브라우저'라는 걸 찾아 설치하셔야 한다고 합니다..!




공유하기

이슈

인공지능

구독자 234명

AI로 이런 것까지 만들 수 있군요... 저도 한번... 시도를......(그런데 사실 못 하겠죠 어려워서..)

와! 재경님! 이런 걸 만들어주시다니 감사합니다! 저도 써보겠습니다!

오, 과정까지 잘 공유해주셔서 감사해요! 한번 써봐야겠네요!

재밌네요. 요즘 챗GPT를 코드를 짜주는 툴로 쓰고 있는데요. html 등에 대한 이해가 없어도 쉽게 이용할 수 있도록 코드를 짜주더라고요. 다음 도전으로 크롬 추가기능을 생각하고 있었는데 이 사례를 따라서 시도해봐야겠네요.

설치해봤습니다. 잘 사용해볼게요! 감사해요.
사용자들이 함께 만드는 공간에 저는 무얼 기여할 수 있나 궁리해보겠습니다 >_<

디지털 시민 광장을 함께하는 사용하는 동료 시민들을 위해 직접 고안하고 만들어 공유해주셨다니 멋져요!

앞으로도 계속해서 유용한 도구를 개발하고, 더 나은 사회를 만들기 위한 활동을 이어가시길 응원합니다. 많은 사람들이 캠페인즈 웹 스크래퍼를 활용하여 좋은 뉴스를 더 많이 공유할 수 있기를 바랍니다.

연관 토픽 : #AI