[Spring, React] 바이브코딩 첫 도전, Codex에 3시간을 투자해서 간단한 프로젝트를 만들어보자!

 

 

바이브코딩이 엄청난 화제인 만큼
처음부터 끝까지 Codex를 이용해서
프로젝트를 만들어보자.

 

 

 

1. 프로젝트 소개
이 프로젝트는 인턴 모집 공고에서 적혀 있는 내용을 기반으로 프로젝트를 해봤다. 지원용은 당연히 아니고 그냥 HRD, AI 검색 등 해본 적 없는 부분이라서 궁금해서 시작하게 되었다. (대부분 플젝은 호기심에 의해 시작하는 편이다)

 

모집 내용을 쉽게 이야기하면 직원이 교육을 이수했는지 관리하기 위한 프로그램 제작(HRD_ 직무역량 진단, 교육 이력, 온보딩 완료율 등 구성원의 역량 강화와 성장을 설계하는 데 쓰이는 인재 분석 지표)을 할 예정이라고 했다. 그래서 직원이 교육을 이수했으면 실시간으로 데이터가 변동되는 것처럼 보이도록 만들었고, 실제 AI를 넣기엔 돈이 들어서 Fake AI를 만들어서 AI 검색처럼(키워드 검색) 보이도록 했다.

 

바이브코딩에 쓴 시간은 약 3시간이었다. 9시에 시작해서 12시에 끝났고, 그 뒤에 내 편의성을 위해 따로 추가한 부분이 있어서 그것까지 포함하면 4시간 정도 걸렸다고 보면 된다. 더 시간을 쓰면 훨씬 완성도가 있겠지만, 이 프로젝트의 목표는 Codex를 어떻게 사용하는지 알기 위함이었기에 이 정도 결과에 만족하기로 했다. 이 글을 통해서 3시간 정도 시간을 쓰면 이 정도 결과가 나온다고 보면 될 것 같다.

 

프로젝트에 관심은 없고(ㅠ,ㅠ) 어떻게 만들었는지 알고싶다면 이 파트를 지나가면 될 것 같다. 

 

 

• 메인화면
  필수 교육별 미수료 현황을 보여준다. 차트는 라이브러리 추가 없이 만들었다.

 

 

• 미수료자 확인 화면
  교육별로 어떤 직원이 미수료 했는지 표시되는 페이지이다.

교육명 검색을 먼저 살펴보자. 교육명과 부서 필터에 맞춰서 아래 교육별 미수료 현황이 달라지도록 만들었다. 지금은 아무것도 적혀있지 않아서 디폴트 값이 전체 부서로 화면에 나타나고 있다.

 

교육명 검색에 AI를 적으니 AI 업무 자동화 기초가 나온다.  그리고 밑에 보면 AI 업무 자동화 기초 미수료 직원이 나온다. 이렇게 어떤 교육을 검색했는지에 따라 자동적으로 검색된 교육에 맞춰 미수료 직원을 보여준다. 그러면 만약 여러 부서가 검색 결과로 나타난다면?

 

경영이라는 검색어를 넣으니 윤리경영 및 준법 교육과 ESG 경영 이해 교육이 나왔다. 이렇게 두 개의 검색 결과가 나온 경우, 가장 첫 번째 검색 결과의 미수료 직원을 보여준다. 즉, 윤리경영 및 준법 교육의 미수료 직원을 보여주게 된다.

다른 교육의 미수료 직원이 보고 싶을 수 있다. 그래서 이런 경우, 상세보기상세 보기 버튼을 눌러 원하는 교육의 미수료 직원을 확인할 수 있도록 만들었다. 위의 화면도 ESG 경영 이해 교육을 상세 보기 한 화면이다.

 

이 부분이 나의 편의성을 위해 따로 추가한 부분이다. 이수한 직원에 따라 데이터가 자동 변경되는지 확인하고 싶은데, 확인할 방법이 딱히 없었다. 아마 테스트 코드로 확인하면 되겠지만 편하게 프론트로 보고 싶었다. 그래서 이 부분을 따로 추가했고 자잘한 오류가 계속 생겨서 그걸 수정하느라 시간이 좀 더 걸렸다. 

화면을 보면 지금은 개인정보보호 교육의 미수료 직원이 보이고 있다. 이때는 김민지 직원이 개인정보보호 교육을 이수했다고 표시되어있다. 그래서 위에 개인정보보호 미수료 직원에 김민지 직원은 보이고 있지 않다.

 

김민지 직원의 개인정보보호 교육 이수 상태를 취소했다. 그러니 개인정보보호 미수료 직원에 김민지 직원이 나타났다. 이런식으로 자동화 관리가 되도록 만들었다.

 

 

• AI 검색 화면

검색어를 입력하면 각 검색어를 분석해서 결과를 나타낸다. 내부는 굉장히 간단하게 돌아간다. 검색어에 넣어둔 부서명과 일치하는게 있는지, 필수 혹은 선택이란 단어가 있는지, 신입 혹은 대리 등 직급과 맞는 단어가 있는지를 확인한다. 이런 방식으로 AI 검색을 한 것처럼 보이도록 만들었다.

 

 

 

 

---

 

 

 

 

2. 프로젝트 세팅

• 프로젝트 폴더

큰 폴더를 만들고 그 안에 backend와 frontend를 나눴다. AGENTS.md는 설정 파일이다. 쉽게 말해서 기본적인 설계도를 넣어둔 거라고 보면 될 것 같다. Codex를 사용할 때 프로젝트 별로 꼭 지켜야 할 것, 어떻게 작성하길 원하는지 등을 적어뒀다. 이렇게 하면 훨씬 더 안정적이게 Codex를 이용할 수 있다. AGENTS 작성 방법과 내부 내용은 뒤에서 설명하겠다. 

 

 

• Codex CLI

Codex CLI

 

Codex APP

curl -fsSL https://chatgpt.com/codex/install.sh | sh

맥북 기준으로 위의 명령어를 터미널에 붙여넣으면 codex가 설치된다. 그리고 터미널에 codex라고 치면 codex가 실행된다. 근데 codex를 치기 전에 이때 아까 만든 폴더에 들어가서 터미널을 열고 codex를 실행하는 게 좋다. (폴더에서 오른쪽 마우스를 클릭하면 [이 폴더에서 터미널 열기]가 뜬다)

CLI는 터미널을 열어서 Codex를 사용하는 것이다. 첫번째 이미지가 Codex CLI 화면인데, 조금 복잡하고 덜 직관적이게 느껴질 수 있을 것 같다. 두 번째 이미지가 Codex App이다.  Codex App은 채팅방 같이 생겨서 대화가 가능한 구조이다. 아까 첫번째 이미지보다 훨씬 친숙한 이미지이다. UI가 다르긴 하지만 사용 방법은 채팅을 쳐서 일을 시키는 것으로 동일하다.

그렇다면 둘이 뭐가 다를까? /compact라는 걸 지원하기도 하고 그 외에 CLI가 기능이 더 많은 편이라고 한다. 그런데 이렇게 간단한 프로젝트를 하는 경우 굳이 CLI를 사용할 필요는 없을 것 같다. 본인이 더 편하게 사용할 수 있는 걸 선택하면 될 것 같다. 

일단 나는 다양한 경험을 더 선호하는 편이다. 할 줄 알지만 하지 않는 것과 몰라서 하지 못하는 건 아주 큰 차이가 있다고 생각하기 때문이다. 그리고 실무에 들어가면 더 많은 기능을 제공하는 CLI를 사용할 것 같아서 CLI로 프로젝트를 진행하게 되었다.

 

 

 

---

 

 

 

 

 

3. Codex 세팅

• !!! 설계도 만들기 !!!
  Chat GPT는 설계와 Codex에게 입력할 명령어를 만드는 역할을 맡을 것이다. 그리고 Codex가 코드를 작성하는 역할을 할 것이다.

일부분)

목차

1. 프로젝트 개요
2. 사용자 입장에서의 동작 방식
3. 기본 사용 방식
4. 핵심 원칙
5. 프로젝트 대상 범위
6. 전체 동작 흐름
7. 기능 우선순위
8. 데이터 구조 설계
9. 데이터 기반 자동화 방식
10. AI 검색 방식
11. 화면 구성
12. 프론트엔드와 백엔드 역할 분리
13. API 계약
14. 서버 코드 구조 설계
15. 환경 변수 설계
16. 미리 발생할 문제점과 예외 처리
17. 자동화 결과 검증 정책
18. AI 검색 결과 검증 정책
19. 검색 방식 우선순위
20. 데이터 예시
21. 개발 순서
22. 최종 MVP 기능 목록
23. 나중에 추가할 수 있는 기능
24. 프로젝트 설명 문구
25. 최종 정리


... 목차일 뿐, 내용은 더 구체적이게 작성되어있다.

Chat GPT에게 내가 구상한 것들을 말하면 된다. 예를 들어서 어떤 프로젝트이며 어떤 기능을 꼭 넣어야 하는지 / 어떤 프레임워크이고 무슨 라이브러리를 추가할 건지 / 실제 서버를 운영할 건지 아닌지 / 어느 정도 규모인지. 생각나는 것들을 모두 적어서 어떻게 프로젝트를 진행하면 될지 GPT에게 물어본다. 그러면 GPT가 여러 내용을 작성해서 보내주면 쭉 읽어보자. 그 뒤 수정할 부분을 다시 전달하면서 이 내용들을 기반으로 설계안을 파일로 작성해 달라고 하면 된다. 이때 파일을 어떤 걸로 받을지도 말해주면 좋다. 한글을 사용 중이면 hwp로 받고 워드를 사용 중이면 docx로 달라고 하면 된다.

이제 GPT가 파일을 줄 것이다. 받고 나면 한 번 쭉 읽어봐야 한다. 이때 절대로 대충 읽거나 넘겨서는 안 된다. 비개발자라서 이해가 안 가면 안 가는 부분은 일단 넘기고 아는 부분만이라도 제대로 읽어야 한다. 그리고 추가할 것들을 넣고 뺄 건 빼서 GPT한테 다시 넘긴다. 이때 넘기면서  [ 이 프로젝트를 만들면서 주의해야 할 사항과 문제가 될 만한 부분을 적어서 수정해 줘 ]  이 멘트를 추가한다. 이 작업이 정말 중요하다. 이걸 정말 잘해놔야, 코드를 만들 때 오류를 고칠 일이 확 줄어든다. 설계를 처음부터 잘해야 빨리 끝난다.

GPT가 준 수정본을 받으면 꼭 읽어보고 수정할 게 있으면 수정한다. 그러고 나서 제미나이한테 넘긴다. 제미나이한테 파일을 열어서 읽고 수정할 부분을 알려달라고 한다. 그리고 이때도 [ 이 프로젝트를 만들면서 주의해야 할 사항과 문제가 될 만한 부분을 알려줘 ] 이 멘트를 추가한다. GPT가 놓치고 간 부분을 제미나이가 알려주는 경우가 많다.

참, 이건 내 쪽에서 문제일 수 있는데 제미나이가 파일을 참 이상하게 만들어준다. 그래서 나는 파일로 보내지 말고 그냥 알려만 달라고 한다. 제미나이 답변을 읽고 직접 추가한 뒤 수정하기도 하고, 귀찮으면 제미나이 답변 그대로 복사해서 GPT한테 넘긴 뒤 설계안에 추가할 것을 추가해서 파일 보내달라고 한다. 마무리는 무조건 보내준 파일을 처음부터 끝까지 읽는다. 

파일을 끝까지 읽으라고 하는 이유는, 이상한 기능을 넣어두기도 하고 꼭 넣어야 하는 기능을 빼고 작성하기도 한다. 그리고 채팅으로 주고받다 보면 수정을 하기로 한 사항인데 GPT가 혼동해서 수정 전 사항을 넣어두기도 한다. 그래서 꼭 읽어봐야 한다. 

 

 

• AGENTS.md

일부분)

## Tech Stack

Backend:
- Java 17
- Spring Boot
- Spring Data JPA
- H2 for local development
- MySQL optional later
- Gradle

Frontend:
- React
- Vite
- JavaScript or TypeScript
- CSS modules or plain CSS

아까 설계도 만든 방은 나간다. 그리고 새로운 채팅방을 열어서 최종 설계도를 준다. 이렇게 하는 이유는, 전 채팅방엔 수정 전 내용들이 들어가 있어서 가끔 GPT가 수정 전 내용과 혼동하기도 한다. 

아무튼 새로운 채팅방에서 설계도를 읽으라고 시킨 뒤, 어떤 내용인지 간단하게 요약하라고 한다. 그다음 설계도를 기반으로 Codex에 넣을 AGENTS.md를 만들어달라고 한다. 그리고 어디에 넣어두면 되는지 물어본 뒤 알맞은 위치에 두면 된다.

 

 

 

 

---

 

 

 

3. 일해라, Codex!

• 명령어 입력하기

2단계 작업을 진행해줘.

작업 방식:
- backend_worker가 구현한다.
- 구현 후 tester가 ./gradlew test를 실행한다.
- reviewer는 아직 실행하지 않는다.

목표:
HRD 교육 데이터 도메인을 만든다.

범위:
- Employee Entity
- Course Entity
- TrainingRecord Entity
- TrainingStatus Enum
- EmployeeRepository
- CourseRepository
- TrainingRecordRepository
- data.sql 샘플 데이터
- schema 생성은 JPA ddl-auto로 처리

필드:
Employee:
- id
- name
- department
- position
- hireType
- email
- joinedAt

Course:
- id
- title
- category
- description
- required
- targetDepartment
- targetHireType

TrainingRecord:
- id
- employee
- course
- status
- completedAt

TrainingStatus:
- NOT_STARTED
- IN_PROGRESS
- COMPLETED

금지:
- Controller 만들지 마.
- API 만들지 마.
- frontend 수정하지 마.

완료 기준:
- Entity와 Repository 생성
- 샘플 데이터 로딩 가능
- ./gradlew test 통과
- 변경 파일 목록 요약

설계도를 기반으로 단계적으로 명령어를 만들어달라고 한다. 일단 AI는 한 번에 성을 지어달라고 하면 지어는 주는데 부실공사로 지어준다. 그래서 아래서부터 단계별로 차근차근 부탁해야 한다. 

GPT가 만들어준 명령어를 그대로 입력한다. Codex가 열심히 코드를 작성하고 나면 테스트를 돌린다. 아마 대부분 잘 돌아갈 것이다. 

사실 처음 바이브 코딩을 해본 거라 어느 정도로 오류가 발생하는지 잘 모른다. 다만 이런 방식으로 했을 때 설계도 안에 있는 기능을 만들고 나서 에러가 나타난 적은 없었다. 나중에 추가한 직원별 교육 이수 상태 파트만 에러가 나타났다. 물론 금방 고쳤다

 

 

• 완성?
  완성하고 나면 그 이후는 Codex App에서 수정을 진행했다. 수정은 별 거 없다. 이 프로젝트에 큰 문제점과 고치면 좋은 점을 알려달라고 물었다. 이때 고치지는 말고 알려만 달라고를 꼭 말해야 한다. 보내준 답변을 보고 내 프로젝트 수준과 규모에 맞춰서 고칠 부분을 고르면 된다. 고칠 때는 무조건 하나씩 요구한다. 그리고 고치고 나서 프로젝트가 제대로 동작하는지 항상 확인해야 한다. 
  
  +) 이 프로젝트에서는 Fake AI를 실제 AI로 바꿀 가능성을 열어두고 진행했다. 물론 실제로 바꾸는 것은 아니지만, 실제 서버를 연다는 가정을 항상 하면서 코드를 작성하려고 한다. 이렇게 본인 프로젝트에서 바뀔 가능성이 조금이라도 있는 코드 혹은 업데이트가 될 가능성이 높은 기능이 어디일지 생각해 두는 게 좋다. 그래야 나중에 코드를 수정하고 구조를 바꿔도 깔끔하게 유지된다.