※ 주의
소스 코드는 창작성이 인정되는 표현물로, 저작권 보호를 받는 대상입니다.
따라서 다른 사람의 소유 코드를 허락 없이 복제하거나 배포하는 행위는 중대한 저작권 침해로 이어질 수 있습니다.
아래 안내드리는 방식은 반드시 학습 목적으로만 제한적으로 활용하시길 권장드립니다.
소개
크롬 확장프로그램을 Vibe Coding으로 개발하다보면
서비스의 일부 기능을 클론, 벤치마킹 하고 싶을 때가 많이 있습니다.
그때 사용하면 좋은 추천 익스텐션과 클론하는 방법 3가지를 공유하고자 합니다.
진행 방법
사용 도구
크롬 익스텐션의 소스 코드를 볼수 있도록 도와주는 익스텐션
https://chromewebstore.google.com/detail/chrome-extension-source-v/jifpbeccnghkjeaalbbjmodiffmgedin
Cursor IDE
https://www.cursor.com/ChatGPT Desktop for Mac
https://openai.com/chatgpt/desktop/
전체 흐름
크롬 익스텐션 소스 뷰어 익스텐션을 활용해서 소스 코드를 다운받는다.
Cursor 에서 해당 폴더를 연다.
아래 세가지 방법 중 일부 또는 전부를 활용하여 기능을 클론/벤치마킹 한다.
Code 직접 복사 붙여넣기
Pseudocode(수도코드) 활용하기
ChatGPT의 Work with 기능 활용하기
세가지 방법에 대해 아래와 같이 공유합니다.
Code 직접 복사 붙여넣기
코드를 직접 이해할 수 있는 수준의 개발자라면 필요한 코드를 직접 복사 붙여넣기 해서 가져올수 있습니다.
"전체 코드베이스 분석해서 OO 기능에 관한 코드 어디에 있는지 알려줘"로 원하는 기능과 관련된 코드를 찾을수 있습니다.
Pseudocode(수도코드) 활용하기
코드를 직접 이해할 수 없는 비개발자라면 Cursor Agent에게 *수도코드로 OO 기능에 관한 코드 작성을 요청하고 내 프로젝트에 해당 코드를 바탕으로 코드 작성해달라고 요청할 수 있습니다.
*수도코드(Pseudocode)란?
실제 프로그래밍 언어의 문법을 사용하지 않고,
사람이 이해하기 쉬운 일반적인 언어로 알고리즘의 흐름을 기술한 것입니다.
클론하고 싶은 타겟 프로젝트 -> 수도 코드로 특정 기능에 대해 작성해달라고 요청 -> 해당 내용 복사 -> 내 프로젝트 -> 해당 수도 코드를 바탕으로 해당 기능 구현 요청
ChatGPT의 Work with 기능 활용하기
ChatGPT Desktop 앱에는 Work with라는 기능이 있습니다. 이 기능은 ChatGPT를 활용하여 Cursor나 Windsurf 같은 IDE와 연동하여 사용하는 기능입니다. 이 기능을 활용하여 서로 다른 프로젝트 간의 Code(정확히는 Context)를 AI 에게 Copy 하도록 요청이 가능합니다.
클론 하고 싶은 타겟 프로젝트 -> ChatGPT Work with 기능을 활용하여 타겟 프로젝트의 코드 학습 -> 내 프로젝트 -> ChatGPT Work with 기능 활용하여 학습한 코드 내프로젝트에 작성 요청
결과와 배운 점
Work with 기능을 좀 더 적극적으로 사용할 필요가 있을것 같습니다.
이를 잘 활용하면 좀 더 입체적인 방법으로 Vibe Coding을 할 수 있을것 같다.AI 이전 코딩을 학습할 때 클론 코딩을 많이들 하게 되는데
Vibe Coding 시에도 클론은 다양한 이유로 유용할 것 같습니다.Work with 기능이 Mac OS 에서 밖에 안된다는 점은 이번에 처음 알게 됐습니다.
macbook을 사야할 이유 하나 추가 🥲