🥹 이게 되네? 지피터스 멤버를 위한 크롬 확장프로그램 1시간 안에 개발 (with Cursor)

지피터스 SNS 챌린지 아시나요?

좋은 게시글을 요약해서 나의 SNS에 올리는 챌린지인데, 이걸 쉽게하려고 클로드 프로젝트도 만들어두었지만 이마저도 귀찮더라고요

ALT

웹 사이트의 한국어 스크린 샷

그러다 문득 이런 생각이 들었습니다:

"크롬 확장프로그램으로 자동 요약되고 붙여넣기만 하면 되게 하면?"

네, 그렇게 자동화 욕구가 폭발했고... 시작했습니다. 성장피터님의 클론코딩 방식을 해보려 했으나 시중의 요약 프로그램들은 기능이 너무 많아서 제가 구현하려고 한 간단한 기능만 하기엔 오히려 복잡해지더라고요. 😭

처음부터 확장 프로그램을 만들겠다고 덤볐다가는 오류와 버그의 늪에 빠질 게 뻔했기에, 아주 살살, 신중하게 접근해봤습니다 🐢

진행 방법

1. 크롤링부터 시작해봤습니다 ✨

• 우선 BeautifulSoup으로 지피터스 게시글을 긁어오는거 테스트.

• 제목, 작성자, 본문을 가져오는 데 성공했고요!

2. 요약은 Gemini API에게 맡겼습니다 🧠

• Google에서 제공하는 무료 Gemini API가 있어서 활용해봤어요.

• 하드 코딩으로 요약해봤고 성공

3. 이제 본격적으로 확장 프로그램을 만들어봅니다 💻

• Cursor에게 "요약 버튼 만들어줘~" 하고 말로 입코딩을 해봤습니다.

• 게시글에 버튼이 생기고, 클릭하면 요약된 팝업이 뜨는 구조로 만들었고요.

• 하지만... 게시글을 못 가져오고 확장이 뻗는 현상이 여러 번 있었습니다 😇

• 그래도 열심히 로그 찍어가면서 디버깅했더니 결국엔 잘 돌아갔어요. 감동...

ALT

한국 웹 사이트의 스크린 샷

4. UX를 고민해봤습니다: 버튼은 어디에 둘 것인가?

• 처음엔 닉네임 옆에 넣었는데요, 로딩 시간 때문인지 버튼 위치가 자꾸 오락가락했어요.

• 결국 제목 하단과 게시글 최하단으로 바꿨습니다. 안정적이고 보기 좋더라고요 👍

  

ALT

한국 데이트 앱의 스크린 샷

5. 디자인도... 아 이건 진짜 신경 써야 했습니다 🎨

• 처음 만든 버튼은 너무 투박해서, 보는 순간 멤버분들 클릭 안 하실 것 같더라고요 🥲

• 그래서 지피터스 키 컬러를 넣고, 글래스몰피즘 효과도 입혀봤습니다.

• 아... 예뻐졌습니다. 자꾸 누르고 싶어지는 마성의 버튼...

6. 급 떠오른 또 다른 자동화 아이디어 💡

• "멤버들 사례 게시글 쓸때 도움을 주는 GPT를 만들었는데, 링크를 매번 찾는 게 너무 번거롭다"는 생각이 들었어요.

• 그래서 게시글 작성 페이지에 '사례 게시글 GPT' 버튼을 추가했습니다.

• 게시판 선택 버튼과 제목 사이 영역에 버튼을 넣고, 누르면 바로 이 GPT로 연결되게 했습니다.

결과와 배운 점

• 코딩이라기보다는 노가다의 영역이긴 했는데

• 입코딩 결과가 바로바로 눈에 보여서 도파민이 정말 치솟았습니다... 😭

• 제게 용기와 모세의 기적같은 가르침 주신 성장피터님 무한 감사드립니다.

도움받은 글

https://www.gpters.org/dev/post/three-methods-cloning-chrome-0Ww9UGQBxDzVadl

https://www.gpters.org/dev/post/development-environment-setting-developing-cyB4qMTzm8jIUV7