GPT5 Codex로 Next.js 출석 체크 시스템 구축하기

by

개요

OpenAI가 새롭게 출시한 GPT-5 Codex 모델의 실전 활용 가능성을 검증하기 위해, Next.js 기반 출석 체크 시스템을 처음부터 끝까지 구축한 실습 영상입니다. 단순한 소개가 아닌 실제 코딩 과정을 통해 GPT-5 Codex의 에이전트 기능 향상, 실행 속도, 그리고 한계점까지 솔직하게 다룹니다.

이 영상은 코드팩토리(Code Factory) 채널에서 제작한 콘텐츠로, 국내 최초 클로드 코드 완벽 가이드 저자이자 NestJS, Flutter, TypeScript 전문 강사로 활동 중인 개발자가 직접 실습하며 평가합니다. 채널은 최신 AI 도구와 프로그래밍 기술을 다루는 국내 주요 개발자 커뮤니티로, 실무 중심의 콘텐츠로 알려져 있습니다.

핵심 내용

GPT-5 Codex 모델 특징과 초기 설정

OpenAI는 기존 GPT-5를 코딩에 최적화한 GPT-5 Codex 모델을 출시했습니다. 이 모델은 Low, Medium, High 세 가지 레벨로 제공되며, 각 레벨은 처리 속도와 복잡도 처리 능력에서 차이를 보입니다.

실제 영상에서는 Medium 모델이 가장 실용적인 선택지로 평가되었습니다. Low 모델은 한국어 처리와 복잡한 구조 이해에서 명확한 한계를 보였고, Medium 모델만으로도 25분 내에 인증 시스템부터 데이터베이스 연동까지 에러 없이 구현할 수 있었기 때문입니다. High 모델은 테스트하지 않았지만, Medium의 성능이 워낙 만족스러워 필요성을 느끼지 못했다고 합니다.

프로젝트는 Next.js + Supabase + shadcn/ui + Framer Motion 조합으로 구성되었으며, Claude Code의 Codex CLI를 통해 진행되었습니다. 초기 설정은 모두 기본값으로 진행했고, Supabase는 ORM(Prisma, Drizzle) 없이 직접 API를 호출하는 방식으로 구현했습니다.

4단계 Phase 기반 체계적 구현

영상에서 가장 인상적인 부분은 GPT-5 Codex가 자동으로 생성한 Phase별 구현 계획입니다. 기존 Claude Code에서는 볼 수 없었던 플로우 다이어그램, 와이어프레임, API 설계까지 자동으로 제안했습니다.

Phase 1: 프로젝트 기초 설정

  • Next.js 프로젝트 초기화 (기본 설정)
  • shadcn/ui 설치 및 구성
  • Supabase 클라이언트 설정 (SSR 라이브러리 사용)
  • 폴더 구조 설계

Phase 2: 인증 시스템 구현

  • Supabase Auth를 활용한 회원가입/로그인
  • SSR 기반 인증 상태 관리
  • 보호된 라우트 설정
  • 프로필 온보딩 페이지

이 단계에서 특기할 점은 타입스크립트 에러 없이 한 번에 구현이 완료되었다는 것입니다. 일반적으로 Next.js에서 Supabase Auth를 SSR로 구현하면 여러 오류가 발생하는데, GPT-5 Codex는 createServerClient와 createBrowserClient를 정확히 구분하여 사용했습니다.

Phase 3: 출퇴근 체크 기능

  • 중앙 원형 버튼 UI (Framer Motion 애니메이션)
  • 출근 시 “숨 쉬는 듯한” ripple effect 애니메이션
  • 실시간 경과 시간 표시 (useEffect 훅 활용)
  • 퇴근 시 근무 시간 계산 및 Supabase 저장
  • 히스토리 페이지에서 과거 기록 조회

실제 구현 결과, 출근 버튼을 누르면 애니메이션과 함께 경과 시간이 실시간으로 표시되었고, 퇴근 버튼 클릭 시 정확하게 근무 시간이 계산되어 데이터베이스에 저장되었습니다. 영상에서는 16초, 1분 등 다양한 시간대로 테스트했고 모두 정상 작동했습니다.

Phase 4: 관리자 대시보드

  • 전체 근무자 현황 모니터링
  • 차트 기반 리포트 (시각화)
  • CSV/Excel 다운로드 기능
  • 필터링 및 검색 기능

이 단계에서 처음으로 Next.js 에러가 발생했지만, GPT-5 Codex가 자동으로 해결했습니다. 최종 결과물은 깔끔한 대시보드 UI에 실시간 근무 상태, 차트 리포트, 데이터 다운로드까지 모두 작동하는 수준이었습니다.

디자인 일관성 개선 – 테마 통일 작업

초기 구현된 페이지들은 각기 다른 색상과 스타일을 사용하고 있었습니다. 이를 해결하기 위해 “어드민 페이지와 홈페이지의 색상 및 테마를 참고해서 나머지 페이지도 같은 색상과 테마로 디자인되도록 수정해 줘”라는 단 한 줄의 프롬프트를 입력했습니다.

결과는 놀라웠습니다. 모든 페이지가 일관된 다크 테마와 포인트 컬러로 통일되었고, 버튼 스타일, 카드 디자인, 타이포그래피까지 완벽하게 조화를 이루었습니다. 영상 제작자는 “대충 프롬프팅했는데도 디자인이 잘 나왔다”며 만족감을 표현했습니다.

실전 가이드

GPT-5 Codex를 실무에서 활용하려면 다음 과정을 따라 진행할 수 있습니다.

1단계: 프로젝트 계획 단계 (5-10분)

먼저 상세한 요구사항을 작성합니다. 영상에서 사용한 프롬프트 구조를 참고하세요:

출석 체크 시스템을 만들 거야.
- 사용자가 회원가입하고 로그인하면 중앙에 출근하기 버튼이 동그랗게 있을 거고
- 출근하기 버튼을 누르면 리플 이펙트로 애니메이션 될 거야
- 그 아래에는 출근 후 얼마나 지나는지 확인할 수 있어야 되고
- 출근하기 버튼을 퇴근하기 버튼으로 변경돼야 해
- 퇴근하기 버튼을 누르면 근무 시간이 저장되는 기능을 구현할 계획이야
- 어드민 대시보드에서는 사용자들의 근무 시간을 모니터링 할 수 있어야 돼
계획을 작성하고 아직 구현하지 말아 줘

이 단계에서 “아직 구현하지 말아 줘”라고 명시하는 것이 중요합니다. GPT-5 Codex는 계획을 먼저 세운 후, 사용자가 검토하고 수정할 수 있는 시간을 줍니다.

2단계: 계획 검토 및 수정 (5-10분)

GPT-5 Codex가 생성한 계획을 prompts/init-plan.md 같은 별도 파일에 저장하고 다음 사항을 확인합니다:

  • 기술 스택 적절성: ORM 사용 여부, 상태 관리 라이브러리 선택 등
  • Phase 단계 합리성: 단계가 너무 세분화되거나 너무 뭉쳐있지 않은지
  • 누락된 요구사항: 보안, 에러 핸들링, 애니메이션 라이브러리 등

영상에서는 다음과 같은 수정 요청을 했습니다:

  • “Prisma 사용하지 않고 Supabase API 직접 사용하는 형태로 기획해 줘”
  • “Supabase Auth 사용할 때는 꼭 SSR Supabase 라이브러리 사용할 수 있도록 수정해 줘”
  • “애니메이션은 Framer Motion 사용하도록 기획 추가해 줘”

3단계: Phase별 구현 (각 15-30분)

각 Phase를 순차적으로 진행합니다. 중요한 점은 한 Phase가 완전히 끝난 후 다음으로 넘어가는 것입니다.

/new (새 대화 시작)
init-plan.md를 태그하고 "Phase 1 구현해 줘" 입력

구현 중 주의사항:

  • Medium 모델 권장: Low는 한국어와 복잡한 구조 처리에 한계, High는 불필요
  • 자동 검증 확인: 린트와 타입스크립트 에러 체크를 자동으로 수행하는지 확인
  • agents.md 파일 활용: 프로젝트 루트에 agents.md 파일을 만들어 “린트와 타입스크립트 에러를 작업 끝나고 확인해 줘”라고 명시하면 자동 검증됩니다

각 Phase가 완료되면 실제로 앱을 실행해서 동작을 확인하세요. 영상에서는 Phase 2 완료 후 바로 로그인 기능을 테스트했고, Phase 3 완료 후 출퇴근 버튼을 직접 클릭해봤습니다.

4단계: 디자인 통일 및 마무리 (10-15분)

모든 기능 구현이 끝나면 디자인 일관성을 개선합니다. 아래와 같은 간단한 프롬프트로 충분합니다:

어드민 페이지와 홈페이지의 색상 및 테마를 참고해서
나머지 페이지도 같은 색상과 테마로 디자인되도록 수정해 줘

GPT-5 Codex는 기존 페이지의 CSS 변수, Tailwind 클래스, shadcn/ui 테마 설정을 자동으로 분석해서 일관된 스타일을 적용합니다.

심층 분석

GPT-5 Codex vs Claude Code 비교

영상 제작자는 평소 Claude Code Sonnet을 주력으로 사용하는 개발자입니다. 그가 비교 평가한 핵심 차이점은 다음과 같습니다:

에이전트 자율성 차이

Claude Code는 보통 15-20분 내에 구현을 마치고 사용자 입력을 기다리는 반면, GPT-5 Codex는 25-30분 동안 자율적으로 작업을 이어갑니다. 이는 양날의 검인데, 긍정적으로는 더 많은 작업을 자동화할 수 있지만, 잘못된 방향으로 진행될 경우 시간 낭비가 될 수 있습니다.

에러 발생 빈도

Claude Code Sonnet으로 같은 수준의 작업을 하면 “Next.js 에러가 수도 없이 떴어야 했다”고 언급했습니다. 실제로 영상에서 GPT-5 Codex는 Phase 4까지 거의 에러 없이 진행했고, 발생한 에러도 자동으로 해결했습니다. 이는 특히 Supabase SSR 설정처럼 까다로운 부분에서 두드러졌습니다.

프롬프트 엔지니어링 필요성

Claude Code는 상세한 프롬프트를 요구하는 반면, GPT-5 Codex는 “대충 프롬프팅”해도 의도를 잘 이해했습니다. 디자인 통일 작업이 대표적인 예시입니다.

한계점과 미완성 기능

GPT-5 Codex는 현재 agents.md 파일을 통한 메모리 기능만 제공하고, Claude Code의 핵심 기능인 서브에이전트(Subagent), 커스텀 명령(Custom Command), 시스템 프롬프트 수정 등이 없습니다. 또한 한국어 처리에 명확한 한계가 있어, 영상 중반에 한국어로 작성된 계획을 제대로 읽지 못하는 모습이 나옵니다.

실무 도입 시 고려사항

비용 효율성 분석

Medium 모델은 약 50분간 사용해서 11,000토큰을 소비했습니다. 이를 시간당 비용으로 환산하면, 복잡한 작업일수록 토큰 소비가 많아지므로 예산 관리가 필요합니다. Claude Code 구독료와 비교했을 때, 프로젝트 규모와 빈도에 따라 어느 쪽이 유리한지 계산이 필요합니다.

팀 협업 환경에서의 적용

GPT-5 Codex의 자율적인 구현 방식은 혼자 작업할 때는 장점이지만, 팀 프로젝트에서는 코드 리뷰와 일관성 유지가 어려울 수 있습니다. 영상에서처럼 agents.md에 코딩 스타일, 네이밍 컨벤션, 필수 검증 사항을 명시해두면 일관성을 높일 수 있습니다.

데이터 보안 및 개인정보

영상에서는 Supabase 키를 .env 파일에 저장했지만, 실제 실무에서는 키 관리와 데이터베이스 접근 권한 설정이 중요합니다. GPT-5 Codex가 자동으로 생성한 코드에 하드코딩된 민감 정보가 없는지 반드시 확인해야 합니다.

데이터 기반 인사이트

구현 시간 분석

영상에서 기록된 실제 작업 시간:

  • Phase 1 (프로젝트 설정): 약 5분
  • Phase 2 (인증 시스템): 약 25분
  • Phase 3 (출퇴근 기능): 약 20분
  • Phase 4 (관리자 대시보드): 약 20분
  • 디자인 통일: 약 10분

총 작업 시간: 약 80분 (1시간 20분)

이는 Claude Code로 같은 작업을 할 때 예상되는 2-3시간에 비해 약 40% 단축된 시간입니다. 하지만 이는 “운이 좋아서 에러가 적게 발생한 경우”일 수 있으므로, 평균적으로는 1.5-2시간 정도로 예상하는 것이 합리적입니다.

채널 신뢰성 평가

코드팩토리 채널은 다음과 같은 실적을 보유하고 있습니다:

  • 국내 최초 클로드 코드 완벽 가이드 저자
  • NestJS 마스터클래스, Flutter 초중급 강의, TypeScript 마스터클래스 운영
  • 무료 메일링 리스트를 통한 최신 AI 및 프로그래밍 정보 제공
  • 바이브코딩 오픈 카카오톡방 운영

영상에서 제공하는 링크들은 모두 공식 강의 플랫폼(인프런, Stibee) 또는 공식 커뮤니티로 연결되며, 검증된 교육 콘텐츠 제공자로 평가됩니다.

토큰 사용량 및 컨텍스트 관리

영상 중반(약 10분 시점)에 표시된 정보:

  • 사용 토큰: 11,000토큰
  • 남은 컨텍스트: 100%

GPT-5 Codex는 작업 중 자동으로 컨텍스트를 요약하는 기능이 있는 것으로 보이며, 이는 장시간 작업에서도 토큰 한계에 도달하지 않도록 돕습니다. 이는 Claude Code의 200K 토큰 제한과는 다른 방식의 컨텍스트 관리입니다.

핵심 요점

영상을 본 후 기억해야 할 다섯 가지:

  1. Medium 모델이 최적의 가성비 선택지: Low 모델은 한국어 처리와 복잡한 구조 이해에 한계가 있고, High 모델은 테스트하지 않았지만 Medium만으로도 충분히 만족스러운 결과를 얻을 수 있습니다. 마치 Claude의 Opus가 필요 없이 Sonnet으로 충분한 것처럼, GPT-5 Codex도 Medium이 실무의 마지노선입니다. 구체적으로 25-30분간 자율 작업, 타입스크립트 에러 자동 해결, Phase별 체계적 구현이 모두 Medium에서 원활하게 작동했습니다.
  2. 에이전트 자율성 향상은 양날의 검: GPT-5 Codex는 Claude Code보다 훨씬 오래(20-30분) 자율적으로 작업하며, 사용자 개입 없이 Phase 전체를 구현합니다. 긍정적으로는 대시보드 차트, CSV 다운로드, 필터링 등 요청하지 않은 세부 기능까지 알아서 추가했지만, 부정적으로는 잘못된 방향으로 진행될 경우 시간 낭비가 될 수 있습니다. 실전에서는 agents.md 파일에 “각 Phase 완료 후 사용자 승인 대기”같은 제약을 명시하거나, 10분마다 진행 상황을 체크하는 습관이 필요합니다.
  3. 프롬프트 엔지니어링 부담 감소, 하지만 한국어는 약점: “어드민 페이지와 홈페이지의 색상 및 테마를 참고해서 나머지 페이지도 같은 색상과 테마로 디자인되도록 수정해 줘”라는 단 한 줄로 모든 페이지의 디자인이 통일되었습니다. Claude Code에서는 “shadcn/ui의 다크 테마 기본 색상 사용, 포인트 컬러는 #3b82f6, 버튼 border-radius는 8px…”처럼 상세히 명시해야 했던 것과 대조적입니다. 하지만 영상 중반에 한국어로 작성된 계획 파일을 제대로 읽지 못하는 장면이 나오므로, 핵심 요구사항은 영어로 작성하는 것이 안전합니다.
  4. Supabase SSR 설정을 에러 없이 구현한 기술적 완성도: Next.js에서 Supabase Auth를 SSR로 구현하면 보통 createServerClient와 createBrowserClient 혼동, 쿠키 처리 오류, middleware 설정 누락 등으로 여러 에러가 발생합니다. GPT-5 Codex는 이를 한 번에 정확히 구현했으며, 회원가입 → 이메일 인증 → 로그인 → 프로필 설정까지 전체 플로우가 에러 없이 작동했습니다. 이는 실무에서 인증 시스템 구축 시간을 크게 단축할 수 있음을 의미합니다. 단, .env 파일 설정과 Supabase DB 마이그레이션은 여전히 수동으로 진행해야 합니다.
  5. 즉시 전환보다는 기능 추가를 기다리는 것이 현명: 영상 제작자는 “아직 스위칭하지 않을 것”이라고 명확히 밝혔습니다. 이유는 Claude Code의 서브에이전트, 커스텀 명령, 시스템 프롬프트 수정 기능이 GPT-5 Codex에는 없기 때문입니다. 현재 GPT-5 Codex는 agents.md 파일을 통한 메모리 기능만 제공하므로, 복잡한 워크플로우나 팀 프로젝트에서는 제약이 있습니다. 실무 도입은 이러한 기능들이 추가된 후에 고려하는 것이 안전하며, 현재는 “간단한 프로토타입이나 개인 프로젝트에서 실험”하는 수준으로 활용하는 것이 적절합니다.

요약자 노트

이 요약은 YouTube 자동 생성 자막(자막 추출일: 2025-12-16)을 바탕으로 작성되었습니다. 영상은 실시간 코딩 과정을 보여주므로, 작업 중 발생한 시행착오나 에러 해결 과정의 세부사항은 요약에 포함되지 않았을 수 있습니다.

GPT-5 Codex는 2025년 12월 현재 출시 초기 단계이므로, 이 영상의 평가는 초기 버전 기준입니다. 향후 업데이트로 언급된 한계점(한국어 처리, 커스텀 기능 부족)이 개선될 가능성이 있으며, 실무 도입을 고려하는 개발자는 공식 문서와 최신 업데이트를 확인하시기 바랍니다.

영상에서 구현한 출석 체크 시스템은 교육 목적의 예시 프로젝트이므로, 실제 프로덕션 환경에 적용하려면 보안 강화(API 키 관리, SQL Injection 방지), 에러 핸들링, 테스트 코드 작성 등 추가 작업이 필요합니다.

참고자료

영상에서 언급된 자료와 더 깊이 있는 학습을 위한 출처들:

이 글은 YouTube 자동 생성 자막(자막 추출일: 2025-12-16)을 바탕으로 작성되었습니다. 영상의 핵심 내용을 정리한 것이므로, 보다 완전한 이해를 위해서는 원본 영상 시청을 권장합니다.

Leave a Comment