이 영상에서 단테는 Codex의 커스텀 출력 형식(출력 스키마)을 이용해 코드 리뷰 결과를 JSON으로 받고, 그것을 HTML 리포트로 보여 주는 도구를 바이브 코딩으로 만듭니다. 코드 리뷰 결과를 팀이 원하는 양식으로 정리하고 싶거나, Codex의 구조화된 출력을 실제로 활용해 보고 싶은 개발자에게 맞는 실습입니다.
만들려는 것
최종 결과물은 간단한 HTML 페이지입니다. 코드 리뷰를 수행한 뒤 전체 코드에서 이슈가 몇 개인지, 몇 개 파일이 수정 대상인지, 각 이슈가 무엇인지를 보여 줍니다. 단테는 이런 리포트를 팀별 커스텀 코드 리뷰 템플릿으로 쓸 수 있고, CI 과정에서 Codex의 도움을 받아 리포트를 생성하는 데도 응용할 수 있다고 설명합니다. 시중의 리뷰 도구나 템플릿 라이브러리를 쓰지 않아도 각 팀이 원하는 형식을 직접 만들 수 있다는 점이 요지입니다.
준비: VS Code의 Codex 익스텐션
새 폴더를 만들고 그 디렉터리에서 VS Code를 엽니다. 이번 실습은 OpenAI가 공식으로 만든 Codex 익스텐션을 사용합니다. 익스텐션 탭에서 Codex를 검색하면 비슷한 이름의 익스텐션이 여러 개 나오는데, 제작자가 openai.com으로 인증 표시된 것을 설치해야 합니다. 설치하면 왼쪽에 Codex 탭이 생깁니다.
모드는 에이전트 모드 중 전체 접근 권한을 주는 쪽으로 설정했습니다. 이 모드는 네트워크 통신, 코드 수정, 파일 삭제·변경 같은 권한을 모두 주는 설정이므로 실습용 폴더에서 쓰는 것이 좋습니다. 모델은 GPT-5 Codex high, 실행 위치는 로컬로 지정했습니다. CLI보다 UI가 편한 사람에게는 익스텐션이 더 편하다고 합니다.
1단계: 코드 리뷰용 JSON 스키마 만들기
먼저 Codex에게 코드 리뷰 결과를 화면에 표시하기 좋은 형태의 JSON 스키마를 작성해 파일로 만들어 달라고 요청합니다. 단순한 JSON 예시가 아니라 JSON Schema 형식이어야 Codex가 출력 형식으로 이해할 수 있다는 점이 중요합니다. 프롬프트 문구는 달라도 되지만 의도는 분명해야 합니다.
생성된 스키마의 properties를 보면 리뷰 ID, 리뷰 메타데이터, 그 안에 리뷰어의 이름·이메일·아바타 URL 같은 값이 중첩 구조로 들어 있습니다. 다만 이 단계에서는 이것이 실제로 유효한 스키마인지 아직 알 수 없으므로, 직접 실행해 봐야 합니다.
2단계: 스키마를 보고 UI 만들기
다음으로 Codex에게 이 스키마를 보고 어떤 화면을 구성할지 스스로 판단해 UI 페이지를 작성하라고 요청했습니다. Codex가 제안한 다음 단계(예시 데이터와 렌더링 코드 작성)를 그대로 실행해 달라고 하면, UI 폴더에 index.html과 예시 리뷰 데이터가 만들어집니다. VS Code의 Live Server 익스텐션으로 index.html을 열어 렌더링을 확인합니다.
예시 화면에는 머지 전에 해결해야 할 이슈 두 개와 보안, 인증, 백엔드 카테고리, 이슈가 발생한 파일·라인·함수가 표시됐습니다.
3단계: 실제 코드에 리뷰를 돌리고 오류 잡기
이제 실제 코드로 확인합니다. 단테는 페이스북 초창기 PHP 코드를 가져와 PHP 파일로 저장하고, 터미널에서 Codex를 비대화형 모드로 실행해 이 파일을 리뷰하고 결과를 JSON으로 저장하게 했습니다. 이때 출력 스키마 옵션으로 앞서 만든 스키마 파일을 지정하고, Git 저장소 확인을 건너뛰는 옵션도 함께 넣었습니다. 옵션 위치를 잘못 넣어 한 번 고치는 장면도 나옵니다.
처음 실행하면 높은 확률로 400 Bad Request가 납니다. 스키마가 Codex가 요구하는 형식에 맞지 않기 때문입니다. 단테의 대응은 다음과 같았습니다.
- 실행한 명령과 에러 메시지를 XML 형식의 구분자로 감싸 Codex에게 전달합니다. 구분자를 쓰면 무엇이 명령이고 무엇이 에러인지 명확해져 프롬프트 효과가 좋습니다.
- 키가 많은 스키마는 같은 종류의 에러가 반복되므로, 한 번 에러 정보를 준 뒤 완성될 때까지 스스로 실행하고 고치는 자가 피드백을 하라고 요청합니다.
스키마 수정이 끝난 뒤 다시 명령을 실행하자 형식에 맞는 코드 리뷰 결과가 나왔습니다. 결과를 예시 JSON 파일에 기록하고 index.html을 다시 열었더니, 이번에는 null 값을 참조하다 오류가 났습니다. 이 오류도 Codex에 전달해 null 체크를 안전하게 하도록 고쳤고, 최종적으로 PHP 파일에 대한 리뷰가 이슈 두 개짜리 HTML 리포트로 표시됐습니다.
정리
- Codex의 출력 스키마 기능을 쓰면 코드 리뷰 결과를 원하는 JSON 구조로 받을 수 있습니다.
- 스키마는 단순 JSON 예시가 아니라 JSON Schema 형식이어야 하며, 처음에는 400 에러가 나기 쉽습니다.
- 에러를 전달할 때는 명령과 에러를 XML 구분자로 나누고, 반복 에러는 자가 피드백으로 끝까지 고치게 합니다.
- 구조화된 결과를 HTML로 렌더링하면 팀 전용 코드 리뷰 리포트를 라이브러리 없이 만들 수 있습니다.