2025.06.27 / 넥스트플랫폼 동준상 프로
목차
- 바이브코딩 1일차: ChatGPT로 워드프레스 플러그인 생성/설치
- 바이브코딩 2일차: ChatGPT Codex 시작하기 설정
- 바이브코딩 3일차: Copilot으로 WP 트래픽 카운터 빌드
- 바이브코딩 4일차: Copilot으로 WP 뉴스 헤드라인 플러그인 생성
바이브코딩 1일차: ChatGPT로 워드프레스 플러그인 생성/설치
바이브코딩으로 매우 세분화된 유용성을 갖춘 소프트웨어를 만들어볼 계획이에요. 누군가에겐 쓸모가 있겠지만 누군가에겐 전혀 쓸모가 없을 수도 있다는 게 이번 바이브코딩 챌린지의 특징이구요, 일단 99번째 프로젝트까지 가보려해요.
바이브코딩 도구는 이미 유료회원이어서 바로 써볼 수 있는 ChatGPT Codex로 선택했고요, 곧 다가올 7월에는 Cursor, Code, Zapier, n8n 등도 순차적으로 (결제하고 와이프한테 등짝 좀 맞고) 사용할 예정입니다.
바이브코딩 빌드 결과물은 워드프레스 플러그인으로 선정했어요. 워드프레스 기반인 홈페이지에 20여년 이상 글을 써왔으므로 워드프레스 생태계에 익숙한 편이지만, 맨날 포스팅만 해서 php는 자세히 안 봤고, 잘 모르므로, (잘 미루는 편) 7월에는 코어, 플러그인, 테마로 구성된 워드프레스 시스템이랑 php에 대해 스터디 예정이에요.
첫번째 바이브코딩 챌린지는 ‘헬로 월드’ 느낌의 매우 간단한 (‘어, 이게 돌아가네… 왜지?’) 워드프레스 플러그인을 빌드해보는 겁니다. 저는 이렇게 했어요.
- ChatGPT에게 Codex 사용법과 워드프레스 플러그인 빌드 방법 질의
- ChatGPT가 알려준대로 Codex를 활용하기 위한 API 키 발급 받음
- ChatGPT가 예시 플러그인 파일 생성 코드도 작성해줌 (Codex를 열지도 못했음)
- 플러그인은 php인데 ChatGPT가 python 코드 안에 php 코드 삽입해서 워드프레스 플러그인으로 바로 업로드할 수 있는 zip 파일 생성해줌
- 실행을 위해서는 php 코드에 API 키를 삽입해야 하므로 python 코드 열기 만만한 구글 Colab 열어서 코드 보기 좋게 편집하고 API 키도 넣은 뒤 다시 실행해서 ‘바이브코딩으로 빌드한 / 실행도 가능한 / 첫 번째 소프트웨어 – 워드프레스 플러그인 생성’ 성공
이제 플러그인 기능이 제대로 작동하는지 확인만 하면 되는데, 작동 트리거는 대괄호 속 chatgpt_prompt이고, 해당 문구를 포스트에 입력하면 ChatGPT 프롬프트 창이 열리게 돼요.
아, 잘 되나 했는데… 한 가지 문제가 있네요. 워드프레스 플러그인으로 정상적으로 설치가 됐고, 포스트 작성시 위 문구를 입력하는 즉시 GPT 프롬프트 창이 뜨지만 질의 답변 내용이 포스트에 반영되지는 않네요.
GPT가 이런 저런 설명을 해주긴 하는데 이 부분은 추후 해결해야겠네요.
바이브코딩: NXP01 1st VIVE WP Plugin (250623 / JAY.NXP).ipynb
https://colab.research.google.com/drive/1NxVIkvNsYFySHFbNtvtG7-xrH2dO36Be?usp=sharing
바이브코딩 2일차: ChatGPT Codex 시작하기 설정
1. 코덱스 접속
2. 깃허브 연결
3. 깃허브에 ChatGPT 커넥터 설치 (코덱스 외부 준비작업 거의 마무리)
4. 코덱스에서 개발환경 설정
5. 잠시 깃허브로 가서 바이브코딩용 새 리포 ‘vive’ 생성
6. 코덱스에 vive 리포 연결
7. 에이전트의 인터넷 접속 가능 여부 설정 (보안위험 있음에 주의)
8. 코덱스 시작: 이런 저런 내용 다 해드릴까요? (일단) 네!
9. 나의 첫 질문: (어제 만든) WP 플러그인 php 코드 설명 요청
10. 코덱스 적절한 분량으로 알기쉽게 대답해줌
바이브코딩 3일차: Copilot으로 WP 카운터 빌드
1. 코덱스에서 워드프레스 포스트의 트래픽을 간단히 확인할 수 있는 WP 카운터 플러그인을 빌드하려했으나 (깃허브 리포와의 긴밀한 연결성 탓인지는 모르겠지만) 뭔가 불편하고 제대로 작동하지 않음
2. 코덱스때문에 깃허브 왔다갔다하다가 그냥 깃허브 코파일럿에 WP 카운터 빌드 요청
3. 역시나 압도적인 월간사용자수 1위답게 구체적인 설명 없이도 내가 원하는 기능 문제없이 잘 생성
4. VS Code에서 열어서 어떤 코드로 카운터 구현하는지 가볍게 확인
5. 생성된 php 코드는 폴더에 넣어서 zip으로 묶어서 워드프레스 플러그인 추가 메뉴로 업로드하면 됨
6. 문제 없이 플러그인 설치 성공
7. 플러그인 활성화 버튼 클릭하면 플러그인 목록에서 아래처럼 새로 추가된 플러그인 확인 가능
8. 큰괄호속 post_views 숏코드 입력하면 카운터 플러그인 기능 활성화
9. 정상적으로 작동
10. WP 카운터 플러그인 빌드, 설치, 작동 확인 성공! (일은 코파일럿이 다했는데 내가 왜 뿌듯할까)
코파일럿 | WP 카운터 플러그인 생성 챗 확인 (php 파일 다운로드 가능)
https://github.com/copilot/share/881c1104-01c0-88b1-b011-044864df0882
바이브코딩 4일차: Copilot으로 WP 뉴스 헤드라인 플러그인 생성
뉴스 수집기, 뉴스 헤드라인 추천은 바이브코딩의 대표 주제 중 하나이고요, 성공 확률도 높고 빌드한 뒤에도 크게 고장 날 일 없이 꾸준히 써먹을 수 있는 블로그 서비스죠.
오늘은 깃허브 코파일럿에게 다음과 같은 소원을 빌었어요.
구글 뉴스 중 오늘 가장 많이 본 뉴스 톱5를 수집해서 매일 아침 7시에 화면에 표시하는 워드프레스 플러그인을 생성해줘
첫 생성 결과가 대체로 만족스러워서 ‘좋아요’ 누르고 넘어가려다가 잘 못해서 ‘맘에 안 들어요’를 누르고 말았는데요, 바쁜 일이 많을 코파일럿을 번거롭게 한 거 아닌가 하며 양심에 가책이 느껴지려는 순간 두 번째 결과물이 좋다는 것을 한 눈에 알아볼 수 있네요.
바이브코딩에서 때론 ‘싫어요’도 필요한 듯 하네요. 두 번째 생성 결과에서는 설명과 설치 방법 등이 훨씬 더 구체적이네요.
첫 번째 제대로 생성 코드를 읽어보지도 못하고 ‘싫어요’를 누른 바람에 두 번째 코드가 첫 번째 보다 더 나은지는 잘 모르겠어요.
포스트를 잠시 저장하고 플러그인을 설치하고 돌아올께요. 플러그인 설치 후에는
오늘의 인기 뉴스를 불러올 수 없습니다.
라는 숏코드를 입력하면 다음날 아침 7시에 최다 조회수 뉴스 5개가 화면에 표시되면 성공이에요.워드프레스 플러그인을 만들고 싶다면: 1) 폴더 생성 및 이름 부여, 2) 바이브코딩으로 생성한 php 파일을 폴더에 넣기, 3) zip 파일로 압축 해서 워드프레스의 ‘새 플러그인 추가’ 메뉴를 통해 설치하면 되요.
‘지금 설치’ 버튼 누르면 아래처럼 대체로 잘 설치되고요
‘성공적으로 설치’ 메시지를 확인하고 ‘플러그인 활성화’ 버튼을 클릭하면 아래처럼 플러그인 목록에서 설치된 플러그인을 확인할 수 있어요.
이제 숏코드를 입력할께요.
오늘의 인기 뉴스를 불러올 수 없습니다.
[gntop5_display_news]
그런데 어쩐 일인지 숏코드가 제대로 작동을 안 해요.
다른 브라우저에서 확인 결과 위와 같이 아직 시간이 안 돼서 ‘인기 뉴스를 불러올 수 없다’는 메시지를 확인할 수 있었고요, 이 부분은 내일 아침에 확인해 봐야겠네요.
하지만, 내일까지 기다리긴 뭐해서 파이썬 프로그램으로 변경했어요.
코드 사용법과 파이썬 코드 모두 잘 생성됐고, 사용법에서 이번 프로그램 실행에 필요한 패키지를 설치하는 부분까지 친절하게 알려주네요.
저는 코랩에서 실행할 예정이어서 ‘프로그램을 항상 켜두어야’하는 부분은 하기 어렵겠네요.
(전문적인 프로그래머가 아닌 모든 분께 대체로 추천하는) 코랩에서 파이썬 코드를 실행했어요.
뉴스 수집 성공!
다음 번엔 관심주제별, 반복주기별, 리뷰선호도별 등 다양한 기준으로 수집해보면 좋을 듯 해요.
코파일럿 | WP 뉴스 헤드라인 플러그인 (php 파일 다운로드)
https://github.com/copilot/share/42750016-48c4-8013-a042-8400601569c2
구글코랩 | NXP 한밤중에 보는 구글 헤드라인 톱5.ipynb
https://colab.research.google.com/drive/1ZrCEQIB1mDLysY61j2UNUo_KWFEuKQos?usp=sharing
지속적으로 업데이트되는 포스트입니다. / 첫 포스팅: 250623 >> 업데이트: 250627 / 이 포스트에 대한 문의: naebon@naver.com
