Windows 11에서 ChatGPT Codex로 Next.js 개발자 홍보 홈페이지 만들어보기

최근 AI 코딩 도구를 활용해서 개인 프로젝트나 포트폴리오를 만드는 개발자들이 많아졌다.

처음에는 AI가 단순히 코드 일부를 자동완성해주는 정도라고 생각하기 쉽다.

하지만 실제로 써보면 단순 자동완성을 넘어서 프로젝트 구조를 잡고, 컴포넌트를 만들고, 오류를 확인하고, 반복적인 수정까지 도와주는 개발 보조 도구에 가깝다.

이번 글에서는 Windows 11 환경에서 ChatGPT Codex를 사용해서 Next.js 기반 개발자 홍보 홈페이지를 만들어보는 흐름을 정리해보려고 한다.

여기서 말하는 개발자 홍보 홈페이지는 거창한 서비스가 아니다.

개발자 소개, 기술 스택, 포트폴리오 예시, 문의 버튼 정도가 들어간 간단한 랜딩 페이지에 가깝다.

처음 Codex를 테스트하기에는 이런 정적 페이지 형태가 적당하다.

로그인, DB, 결제, 관리자 페이지 같은 기능이 들어가면 처음부터 확인해야 할 것이 너무 많아지기 때문이다.

반대로 개발자 홍보 홈페이지는 구조가 단순하면서도 디자인, 문구, 컴포넌트 분리, 빌드 검증까지 한 번에 확인할 수 있다.


1. 왜 Codex를 써보려고 했나

AI 코딩 도구를 사용하면 개발 속도가 확실히 빨라질 수 있다.

화면 초안도 빠르게 만들 수 있고, 반복적인 컴포넌트 작성도 줄일 수 있다.

특히 Next.js 같은 프레임워크로 작은 웹사이트나 MVP를 만들 때는 효과가 더 잘 느껴진다.

하지만 한 가지 도구만 사용하면 다른 도구의 장단점을 비교하기 어렵다.

그래서 Codex도 한번 테스트해볼 만하다.

Codex가 어떤 방식으로 프로젝트를 읽고, 어떤 식으로 파일을 수정하고, 빌드 오류를 어떻게 처리하는지 직접 확인해보는 것이다.

처음부터 복잡한 서비스를 만들기보다는 간단한 개발자 홍보 홈페이지를 만들어보는 편이 좋다.

이유는 단순하다.

기능이 복잡하지 않기 때문에 AI 코딩 도구 자체의 기본 사용 흐름을 보기 좋다.

어떤 파일을 수정하는지, 요구사항을 얼마나 잘 반영하는지, 빌드 검증을 잘 수행하는지 확인하기 쉽다.


2. 기본 개발환경 기준

이 글은 아래 환경이 이미 준비되어 있다는 기준으로 작성했다.

① Windows 11 사용
② VS Code 사용
③ Node.js와 npm 설치 완료
④ Git 설치 완료
⑤ Next.js 프로젝트 생성 경험 있음
⑥ VS Code 터미널 사용 가능

이미 Next.js 개발환경이 준비되어 있다면 추가로 할 것은 많지 않다.

핵심은 Codex CLI를 설치하고, 프로젝트 폴더에서 codex 명령어를 실행하는 것이다.

예를 들면 흐름은 아래와 같다.


[PowerShell 명령어 예시]

cd C:\Projects\sample-dev-homepage

codex


여기서 C:\Projects\sample-dev-homepage는 예시 경로다.

본인의 실제 프로젝트 경로에 맞게 바꾸면 된다.

예를 들어 D 드라이브에 프로젝트를 관리한다면 아래처럼 사용할 수도 있다.


[PowerShell 명령어 예시]

cd D:\Workspace\my-nextjs-site

codex


중요한 것은 특정 폴더명이 아니라, 현재 작업하려는 Next.js 프로젝트 폴더 안에서 codex를 실행한다는 점이다.


3. Codex CLI 설치하기

이미 Node.js와 npm이 설치되어 있다면 Codex CLI 설치는 간단하다.

PowerShell 또는 VS Code 터미널에서 아래 명령어를 실행한다.


[PowerShell 명령어]

npm i -g @openai/codex


설치가 끝나면 버전을 확인한다.


[PowerShell 명령어]

codex --version


정상적으로 버전이 나오면 설치는 끝난 것이다.

나중에 최신 버전으로 업데이트하고 싶다면 아래처럼 실행하면 된다.


[PowerShell 명령어]

npm i -g @openai/codex@latest


처음 codex를 실행하면 로그인 안내가 나올 수 있다.

ChatGPT 계정으로 로그인하거나, 안내되는 방식에 따라 인증을 진행하면 된다.

여기까지 되면 VS Code 터미널 안에서 Codex를 사용할 준비가 된 것이다.


4. 테스트용 Next.js 프로젝트 만들기

기존 프로젝트에 바로 적용해도 되지만, 처음에는 테스트용 프로젝트를 따로 만드는 것이 좋다.

처음부터 중요한 프로젝트에 붙이면 Codex가 어떤 식으로 파일을 수정하는지 감을 잡기 전에 코드가 많이 바뀔 수 있다.

그래서 간단한 헬로월드 프로젝트를 하나 만들어보는 것을 추천한다.


[PowerShell 명령어]

cd C:\Projects

npx create-next-app@latest codex-next-hello

cd codex-next-hello

code .


위 경로는 예시다.

본인이 프로젝트를 관리하는 폴더가 따로 있다면 그 위치에서 실행하면 된다.

Next.js 생성 옵션은 일반적으로 아래처럼 선택하면 된다.


[create-next-app 선택 예시]

TypeScript: Yes

ESLint: Yes

Tailwind CSS: Yes

src/ directory: Yes

App Router: Yes

Turbopack: Yes

Import alias: Yes


프로젝트가 생성되면 VS Code 터미널에서 개발 서버를 실행해본다.


[PowerShell 명령어]

npm run dev


브라우저에서 아래 주소로 접속한다.


[브라우저 주소]

http://localhost:3000


기본 Next.js 화면이 나오면 정상이다.


5. VS Code 터미널에서 Codex 실행하기

이제 프로젝트 폴더 안에서 Codex를 실행한다.


[PowerShell 명령어]

codex


여기서부터는 터미널 안에서 Codex에게 요청하면 된다.

처음 테스트는 너무 거창하게 요청하지 않는 것이 좋다.

예를 들면 아래처럼 요청할 수 있다.


[Codex 요청 프롬프트]

이 Next.js 프로젝트를 아주 간단한 개발자 홍보 홈페이지 헬로월드로 바꿔줘.

요구사항:
- src/app/page.tsx 수정
- "개발자 홍보 홈페이지" 제목 표시
- "Next.js + Codex로 만든 첫 번째 테스트 페이지" 문구 표시
- 기술스택 태그 5개 표시: Next.js, TypeScript, Tailwind CSS, Vercel, AI Coding
- 간단한 문의 버튼 추가
- npm run build로 검증


중요한 것은 마지막 문장이다.

단순히 코드를 만들어달라고만 하지 말고, 반드시 빌드 검증까지 요청하는 것이 좋다.


[Codex 요청 문장]

npm run build로 검증해줘.

오류가 있으면 원인을 찾고 수정해줘.


AI 코딩 도구를 쓸 때는 결과 화면만 보는 것이 아니라 빌드가 통과하는지 확인하는 습관이 중요하다.


6. 직접 작성해볼 수 있는 page.tsx 예시

Codex에게 맡기기 전에 직접 헬로월드 느낌으로 수정해본다면 src/app/page.tsx를 아래처럼 바꿔볼 수 있다.

아래 코드는 예시다.

이름, 이메일, 문구는 본인 상황에 맞게 수정하면 된다.


[TypeScript / src/app/page.tsx 예시]

export default function Home() {
  return (
    <main className="min-h-screen bg-slate-950 text-white">
      <section className="mx-auto flex min-h-screen max-w-4xl flex-col justify-center px-6">
        <p className="mb-4 text-sm font-semibold text-cyan-300">
          Next.js + Codex Test
        </p>

        <h1 className="text-4xl font-bold sm:text-6xl">
          개발자 홍보 홈페이지
        </h1>

        <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
          Next.js와 Codex를 활용해 만든 첫 번째 개발자 홍보 홈페이지 테스트 페이지입니다.
        </p>

        <div className="mt-8 flex flex-wrap gap-3">
          {["Next.js", "TypeScript", "Tailwind CSS", "Vercel", "AI Coding"].map(
            (skill) => (
              <span
                key={skill}
                className="rounded-full border border-slate-700 px-4 py-2 text-sm text-slate-200"
              >
                {skill}
              </span>
            )
          )}
        </div>

        <a
          href="mailto:contact@example.com"
          className="mt-10 inline-flex w-fit rounded-xl bg-cyan-400 px-5 py-3 font-semibold text-slate-950"
        >
          프로젝트 문의하기
        </a>
      </section>
    </main>
  );
}


수정 후 실행한다.


[PowerShell 명령어]

npm run dev


그리고 빌드도 확인한다.


[PowerShell 명령어]

npm run build


이렇게 하면 최소한 Codex를 쓰기 전과 후의 차이를 비교하기 쉽다.


7. 개발자 홍보 홈페이지용 첫 프롬프트

헬로월드가 정상적으로 되었다면 이제 실제 개발자 홍보 홈페이지로 확장해볼 수 있다.

다만 공개 블로그 글에서는 실제 개인 경력이나 실제 포트폴리오명을 그대로 넣기보다 예시 데이터를 사용하는 것이 좋다.

아래는 범용적으로 사용할 수 있는 예시 프롬프트다.


[Codex 요청 프롬프트]

개발자 홍보 홈페이지 MVP를 만들어줘.

프로필 예시:
- 웹 서비스 개발 경험이 있는 풀스택 개발자
- 프론트엔드와 백엔드 개발 경험 보유
- 최근에는 Next.js, TypeScript, Supabase, Vercel 기반 프로젝트를 진행
- AI 코딩 도구를 활용해 반복 작업과 초기 개발 속도를 개선
- 개인 포트폴리오, MVP 개발, 업무 자동화 프로젝트를 소개하고 싶음

페이지 구성:
1. Hero 섹션
   문구: "아이디어를 빠르게 웹 서비스로 구현하는 개발자"
2. 핵심 강점 3개
   - 프론트엔드와 백엔드를 함께 이해하는 개발자
   - AI 도구를 활용한 빠른 MVP 개발
   - 기획부터 배포까지 고려한 구현
3. 기술 스택
4. 포트폴리오 프로젝트 카드
   - AI 문서 요약 도구
   - 예약 관리 시스템
   - 중고거래 플랫폼 MVP
   - 개인 개발자 홈페이지
5. 제공 가능한 서비스
6. 문의 CTA

요구사항:
- Next.js App Router + TypeScript + Tailwind CSS
- 과한 애니메이션보다 신뢰감 있는 디자인
- 모바일/데스크탑 반응형
- 컴포넌트 분리 가능
- npm run build로 검증


이렇게 요청하면 처음부터 너무 추상적이지 않다.

어떤 사람의 홈페이지인지, 어떤 느낌을 원하는지, 어떤 섹션이 필요한지 어느 정도 기준을 준 상태에서 작업을 시킬 수 있다.

AI 코딩 도구를 쓸 때는 “알아서 잘 만들어줘”보다 “이런 구조로 만들어줘”가 훨씬 낫다.


8. AGENTS.md로 프로젝트 기준 잡기

AI 코딩 도구를 사용할 때는 프로젝트 기준 파일을 만들어두는 것이 좋다.

Codex에서도 프로젝트 루트에 AGENTS.md 같은 파일을 만들어두고, 작업 전에 읽게 하는 방식이 좋다.

예를 들어 프로젝트 루트에 AGENTS.md 파일을 만들고 아래처럼 적는다.


[AGENTS.md 예시]

Project Guide

이 프로젝트는 개발자 홍보 홈페이지 예제입니다.

Goal

- 구직, 외주, MVP 개발 의뢰를 위한 신뢰감 있는 개발자 소개 사이트를 만든다.
- 단순 포트폴리오 나열이 아니라 "실제로 개발을 맡길 수 있는 사람"이라는 인상을 주는 것이 목표다.
- 이 문서의 내용은 예시이며, 실제 공개 시 개인 정보는 상황에 맞게 수정한다.

Stack

- Next.js App Router
- TypeScript
- Tailwind CSS
- Vercel 배포

Seed Profile

- 이름: 홍길동
- 역할: 풀스택 개발자
- 소개 문구: 아이디어를 빠르게 웹 서비스로 구현하는 개발자
- 이메일: contact@example.com
- GitHub: https://github.com/example-user

Seed Projects

1. AI 문서 요약 도구
   - PDF나 문서 내용을 요약해주는 웹앱 예시

2. 예약 관리 시스템
   - 소규모 매장 예약을 관리하는 웹앱 예시

3. 중고거래 플랫폼 MVP
   - 상품 등록, 검색, 관심 목록 기능이 있는 MVP 예시

4. 개인 개발자 홈페이지
   - 개발자 소개와 포트폴리오를 보여주는 랜딩 페이지 예시

Rules

- 변경 후 npm run build를 실행해서 오류를 확인한다.
- 불필요한 라이브러리는 추가하지 않는다.
- 모바일/데스크탑 반응형을 유지한다.
- 핵심 컴포넌트의 역할은 명확히 한다.
- 디자인은 과한 SaaS 스타트업 느낌보다 신뢰감 있는 개발자 소개 사이트 느낌으로 한다.
- 실제 개인 정보, 실제 고객명, 실제 내부 프로젝트명은 사용하지 않는다.

Tone

- 안정감 있는 개발자 소개
- 과장된 표현보다 실제 구현 가능성 중심
- AI 도구 사용을 자랑하기보다 결과물 중심


그리고 Codex에게 이렇게 요청한다.


[Codex 요청 문장]

AGENTS.md 내용을 먼저 읽고, 그 기준에 맞춰 개발자 홍보 홈페이지 첫 버전을 구현해줘.

구현 후 npm run build로 검증해줘.


이렇게 하면 매번 긴 설명을 반복하지 않아도 된다.

프로젝트의 목적, 기술 스택, 작업 규칙을 먼저 정리해두면 Codex도 그 기준에 맞춰 작업하기 쉬워진다.

AI에게도 프로젝트의 기준이 필요하다.


9. Codex를 쓸 때 조심할 점

Codex가 코드를 만들어준다고 해서 그대로 믿으면 안 된다.

AI 코딩 도구가 만든 코드는 항상 확인해야 한다.

특히 아래는 꼭 확인하는 것이 좋다.

① npm run build가 통과하는가
② 불필요한 라이브러리를 추가하지 않았는가
③ 기존 파일 구조를 과하게 바꾸지 않았는가
④ 모바일 화면에서 깨지지 않는가
⑤ 텍스트가 너무 과장되어 보이지 않는가
⑥ 메일 주소나 링크가 임시값으로 남아 있지 않은가
⑦ 실제 개인 정보가 코드나 문구에 들어가지 않았는가
⑧ 배포 후 Vercel에서 정상 동작하는가

개발자 홍보 홈페이지는 기능은 단순하지만, 오히려 문구와 인상이 중요하다.

AI가 만든 문구는 가끔 너무 화려하거나 과장될 수 있다.

예를 들어 “업계를 혁신하는 최고의 개발자” 같은 표현은 오히려 신뢰를 떨어뜨릴 수 있다.

개인적으로는 이런 방향이 더 낫다고 본다.


[문구 방향]

과장된 표현보다 실제 경험 중심

화려한 말보다 맡길 수 있는 안정감

AI를 쓴다는 자랑보다 결과물을 빠르게 만든다는 설명

실제 개인 정보보다 예시 데이터를 먼저 사용


AI 도구를 쓴다는 사실 자체보다 중요한 것은, 그 도구로 어떤 결과물을 만들 수 있느냐다.


10. Claude Code와 Codex를 비교해보는 방법

처음부터 어느 도구가 더 낫다고 단정할 필요는 없다.

같은 요구사항을 서로 다른 AI 코딩 도구에 각각 던져보고 비교해보면 된다.

예를 들어 같은 Next.js 프로젝트에서 아래 요청을 각각 해보는 것이다.


[비교용 프롬프트]

Next.js 기반 개발자 홍보 홈페이지 첫 버전을 만들어줘.

Hero, 기술스택, 포트폴리오, 제공 가능 서비스, 문의 CTA를 포함해줘.

실제 개인 정보는 사용하지 말고 예시 데이터로 구성해줘.

수정 후 npm run build로 검증해줘.


비교할 때는 아래를 보면 된다.

① 첫 결과물의 디자인이 마음에 드는가
② 요구사항 누락이 적은가
③ 파일 구조가 깔끔한가
④ 빌드 검증을 제대로 하는가
⑤ 수정 요청을 했을 때 맥락을 잘 유지하는가
⑥ 불필요한 코드를 많이 만들지는 않는가
⑦ 내가 이해할 수 있는 코드인가
⑧ 개인 정보가 실수로 포함되지 않았는가

AI 코딩 도구는 결국 내 개발 흐름에 맞아야 한다.

남들이 좋다고 하는 도구보다, 내가 실제로 프로젝트를 만들 때 편하고 검증하기 쉬운 도구가 더 중요하다.


11. 추천 실험 순서

Codex 첫 실험은 아래 순서가 좋아 보인다.

① 테스트용 Next.js 프로젝트 생성
② Codex CLI 설치
③ VS Code 터미널에서 codex 실행
④ 간단한 헬로월드 페이지 생성 요청
⑤ npm run build 확인
⑥ 예시 데이터 기반 개발자 홍보 홈페이지로 확장
⑦ AGENTS.md 작성
⑧ GitHub 업로드
⑨ Vercel 배포
⑩ 다른 AI 코딩 도구와 결과 비교

처음부터 Supabase, 로그인, DB, 관리자 페이지까지 넣을 필요는 없다.

그런 기능은 Codex의 기본 사용 흐름에 익숙해진 뒤 붙이는 것이 좋다.

처음에는 정적 페이지가 적당하다.

개발자 홍보 홈페이지는 그런 면에서 좋은 테스트 주제다.


12. 공개 글 작성 시 개인 정보 주의

블로그에 개발 과정을 정리할 때는 생각보다 개인 정보가 쉽게 들어간다.

예를 들면 아래 같은 것들이다.

① 실제 로컬 폴더 경로
② 실제 이름
③ 실제 이메일
④ 실제 GitHub 주소
⑤ 실제 고객사 이름
⑥ 실제 프로젝트명
⑦ 실제 포트폴리오 URL
⑧ 내부 업무나 고객과 관련된 설명

이런 내용은 공개 글에서는 가급적 예시로 바꾸는 것이 좋다.

예를 들면 아래처럼 바꿀 수 있다.


[예시 치환]

실제 이름 → 홍길동

실제 이메일 → contact@example.com

실제 폴더 경로 → C:\Projects\sample-dev-homepage

실제 GitHub 주소 → https://github.com/example-user

실제 프로젝트명 → 예약 관리 시스템, AI 문서 요약 도구, 중고거래 플랫폼 MVP


기술 블로그는 누군가에게 도움이 되기 위해 쓰는 글이다.

꼭 내 실제 정보가 모두 들어갈 필요는 없다.

오히려 범용 예시로 정리하면 읽는 사람도 자신의 환경에 맞게 적용하기 쉽다.


13. 마무리

Windows 11에서 이미 Next.js 개발환경이 준비되어 있다면 Codex를 시작하는 것은 어렵지 않다.

핵심은 이 세 줄이다.


[PowerShell 명령어]

npm i -g @openai/codex

cd C:\Projects\sample-dev-homepage

codex


그리고 가장 중요한 것은 이것이다.


[중요 문장]

코드를 만들어달라고만 하지 말고, 반드시 빌드 검증까지 시킨다.


AI 코딩 도구는 개발 속도를 높여준다.

하지만 최종 판단은 개발자가 해야 한다.

AI가 만든 코드를 내가 이해하고, 확인하고, 책임질 수 있어야 내 프로젝트가 된다.

이번 Codex 테스트는 단순히 새로운 도구를 써보는 것이 아니라, 앞으로 AI-assisted 개발 흐름을 더 넓게 비교해보는 과정이라고 볼 수 있다.

처음에는 너무 큰 프로젝트보다 작고 안전한 예제부터 시작하는 것이 좋다.

Next.js 기반 개발자 홍보 홈페이지는 그런 의미에서 Codex를 테스트하기 좋은 첫 주제라고 생각한다.