[ChatGPT] 포트폴리오 웹사이트 제작 가이드

Об этом предложении

ChatGPT로 진행하는 AI 포트폴리오 웹사이트 제작 실습 가이드 0. 최종적으로 사용할 구조 Claude 기반 원래 실습을 ChatGPT 환경으로 옮기면 다음과 같다. Claude 환경 ──────────────────────────────── Claude Project Claude Code Skill Artifact Playwright Vercel MCP ↓ ChatGPT로 변환 ChatGPT 환경 ──────────────────────────────── ChatGPT Project ChatGPT Chat / Work Codex Project Instructions / Plugin Skill Site 또는 브라우저 Preview 검증 체크리스트 / Codex 테스트 GitHub Vercel Plugin 실습 전체 흐름은 다음과 같다. IDEA ↓ PLAN ↓ DESIGN ↓ BUILD ↓ CHECK ↓ FIX ↓ DEPLOY ↓ FINAL VERIFY 완료되면 다음 결과물이 남아야 한다. portfolio/ ├── README.md ├── docs/ │ ├── portfolio-design.md │ └── acceptance-criteria.md │ ├── site/ │ ├── index.html │ ├── styles.css │ └── app.js │ └── verification/ └── check.md 그리고 최종적으로: GitHub Repository ↓ Vercel ↓ https://xxxxx.vercel.app 형태의 실제 공개 사이트까지 만든다. 1단계. ChatGPT Project 만들기 ChatGPT 왼쪽 사이드바에서: New Project 를 선택한다. 프로젝트 이름: AI Portfolio Lab 목적: ChatGPT와 Codex를 활용해 개인 포트폴리오 웹사이트를 기획 → 개발 → 검증 → 배포한다. Project에는 앞으로 사용하는: 기획 Chat 설계 Chat Codex 작업 요구사항 문서 스크린샷 검증 결과 를 모두 모은다. 즉 Claude 실습의 작업 디렉터리 역할을 ChatGPT Project가 담당한다. 2단계. Project Instructions 설정 Project의 Instructions에 다음 내용을 입력한다. 이 프로젝트의 최종 목표는 실제로 공개 가능한 한 페이지 포트폴리오 웹사이트를 완성하는 것이다. 모든 작업은 다음 원칙을 따른다. 1. 구현 전에 목표와 완료 기준을 확정한다. 2. 요구하지 않은 기능을 임의로 추가하지 않는다. 3. 한 번에 지나치게 많은 기능을 구현하지 않는다. 4. 구현 결과는 반드시 검증한다. 5. 검증되지 않은 결과를 PASS라고 판단하지 않는다. 6. 오류가 발생하면 전체를 다시 만들기보다 원인을 먼저 분석한다. 7. 수정 범위는 가능한 한 최소화한다. 8. 비밀번호, API Key, Token 등의 비밀정보를 코드에 포함하지 않는다. 9. 허구의 경력, 고객, 프로젝트, 성과 수치를 만들지 않는다. 10. 사용자가 제공하지 않은 콘텐츠는 [예시]라고 표시한다. 프로젝트 단계: PLAN → DESIGN → BUILD → CHECK → FIX → RELEASE 각 단계가 종료되면 반드시 다음을 알려준다. - 현재 단계 - 완료된 내용 - 남은 문제 - 다음 단계 웹사이트의 기본 기술은 다음으로 제한한다. HTML CSS Vanilla JavaScript 추가 프레임워크는 사용자가 명시적으로 요청한 경우에만 사용한다. 이 Instructions가 Claude의 반복 프롬프트나 Skill의 기본 행동 규칙 역할을 한다. 3단계. 첫 번째 Chat — 요구사항 분석 Project 안에서 새 Chat을 만든다. 이름: 01 Portfolio Planning 다음 프롬프트를 입력한다. 개인 포트폴리오 웹사이트를 만들려고 한다. 이번 단계에서는 절대 코드를 작성하지 말고 요구사항만 정의한다. 내 역할: [직업 또는 전문 분야] 주요 방문자: [채용 담당자 / 잠재 고객 / 교육 담당자 등] 방문자가 최종적으로 했으면 하는 행동: 작업 사례 확인 → 나의 전문성 이해 → 연락 이번 프로젝트에서 제외할 기능: - 로그인 - 회원가입 - 결제 - 데이터베이스 - 관리자 페이지 - 게시판 먼저 사이트 설계에 필요한 질문을 해줘. 조건: - 질문은 한 번에 하나씩 한다. - 최대 5개까지만 질문한다. - 질문이 끝난 후 바로 구현하지 않는다. 최종적으로 다음 내용을 정리한다. 1. 사이트 목적 2. 주요 사용자 3. 핵심 메시지 4. 페이지 구조 5. 프로젝트 사례 구조 6. 방문자의 행동 흐름 7. 디자인 방향 8. 완료 조건 결과는 portfolio-design.md 형태로 작성한다. 질문에 하나씩 답한다. 4단계. 콘텐츠 결정 예를 들어 Physical AI 강사의 포트폴리오라면 다음처럼 설정할 수 있다. Hero 메시지: Physical AI와 로봇 교육을 현장에서 활용 가능한 실무 역량으로 연결합니다. 작업 사례: 01 Physical AI 교육과정 설계 02 ROS 2 기반 로봇 프로젝트 03 AI·로봇 기업/대학 교육 각 사례는 다음 구조를 사용한다. Problem ↓ Approach ↓ Implementation ↓ Result 단 실제 성과 데이터가 없다면 임의로 작성하지 않는다. 5단계. Acceptance Criteria 작성 새 Chat을 만든다. 02 Acceptance Criteria 다음 프롬프트를 입력한다. portfolio-design.md를 기준으로 사이트의 완료 기준을 정의한다. 아직 코드를 작성하지 않는다. 다음 사항은 반드시 포함한다. AC-01 390px 모바일 화면에서 가로 스크롤이 발생하지 않는다. AC-02 프로젝트 사례가 정확히 3개 표시된다. AC-03 카테고리 필터가 실제 동작한다. AC-04 키보드 Tab으로 모든 주요 링크와 버튼에 접근 가능하다. AC-05 이메일 연락 방법이 명확하다. AC-06 JavaScript 오류가 발생하지 않는다. AC-07 존재하지 않는 경력이나 성과가 표시되지 않는다. AC-08 API Key, Token 등의 비밀정보가 포함되지 않는다. 각 항목에 대해 PASS FAIL UNVERIFIED 중 하나로 판단할 수 있도록 acceptance-criteria.md를 작성한다. 이 파일이 이후 검증의 기준점이다. 6단계. 구현은 Codex에 맡기기 이제 Codex 를 사용한다. ChatGPT에서 Codex 모드로 이동한다. 새 작업에 다음 프롬프트를 제공한다. 포트폴리오 웹사이트를 구현한다. 다음 두 문서를 요구사항으로 사용한다. - portfolio-design.md - acceptance-criteria.md 다음 구조로 구현한다. site/ ├── index.html ├── styles.css └── app.js 기술 제한: - HTML5 - CSS3 - Vanilla JavaScript - 외부 JavaScript 프레임워크 사용 금지 페이지 순서: Hero ↓ About ↓ Projects ↓ Working Process ↓ Contact Projects에는 정확히 3개의 사례를 표시한다. 각 사례: Problem → Approach → Implementation → Result 구현 기능: 1. 프로젝트 카테고리 필터 2. 이메일 복사 버튼 3. 모바일 반응형 4. 키보드 접근성 5. reduced-motion 지원 구현 후 acceptance-criteria.md 기준으로 자체 검증한다. 검증 결과는 다음 형식으로 작성한다. AC-ID Status: PASS / FAIL / UNVERIFIED Evidence: Reason: 검증 결과를 verification/check.md 파일로 생성한다. 문제가 발견되더라도 이번 단계에서는 자동 수정하지 않는다. 먼저 구현과 검증 결과를 보여준다. 여기서 중요한 점은: Build ↓ Check 까지만 시키는 것이다. 처음부터: Build → Fix → Rebuild → Fix → Rebuild 를 반복시키지 않는다. 7단계. 코드 검토 Codex가 사이트를 만들었다면 다음 요청을 한다. 현재 구현을 코드 리뷰해줘. 이번에는 수정하지 않는다. 다음 관점만 확인한다. 1. HTML 구조 2. CSS 반응형 3. JavaScript 오류 가능성 4. 접근성 5. 보안 6. 유지보수성 7. Acceptance Criteria 위반 각 문제를 다음 형식으로 작성한다. Severity: CRITICAL / HIGH / MEDIUM / LOW Location: 파일명과 관련 코드 Problem: Why: Recommended Fix: 아직 수정하지 않는다. 이 단계는 매우 중요하다. AI에게: 문제 발견 → 즉시 수정 을 시키는 것이 아니라: 문제 발견 → 분석 → 수정 결정 으로 분리한다. 8단계. 브라우저에서 실제 확인 사이트를 직접 브라우저에서 확인한다. 반드시 사람이 확인해야 하는 항목: □ Hero가 정상적으로 보이는가? □ 프로젝트 사례 3개가 보이는가? □ 필터 버튼이 동작하는가? □ Contact가 보이는가? □ 이메일 복사가 동작하는가? □ Tab 키로 이동 가능한가? □ 모바일에서도 깨지지 않는가? Chrome을 사용할 경우: F12 → Toggle device toolbar 을 선택한다. 화면 너비: 390px 로 설정한다. 확인: 가로 스크롤 여부 텍스트 잘림 버튼 겹침 이미지 넘침 9단계. 문제가 있다면 스크린샷을 ChatGPT에 전달 예를 들어 모바일 화면에서 문제가 발생했다면 스크린샷을 ChatGPT에 업로드한다. 프롬프트: 첨부한 스크린샷은 390px 모바일 화면에서 확인한 결과다. 먼저 문제만 분석해줘. 다음을 구분해서 작성한다. 관찰된 사실 추정 원인 관련 파일 수정 후보 아직 코드를 수정하지 않는다. ChatGPT가 문제를 분석하면 이어서: 분석 결과 중 확실성이 가장 높은 원인만 수정한다. 전체 디자인을 다시 만들지 않는다. 관련 HTML/CSS/JavaScript만 최소 범위로 수정한다. 수정 후 다음을 알려준다. 1. 수정 파일 2. 수정 위치 3. 수정 이유 4. 예상 영향 5. 재검증할 Acceptance Criteria 이것이: FAIL ↓ DIAGNOSIS ↓ FIX ↓ RETEST 흐름이다. 10단계. 수정 후 재검증 Codex에 다음과 같이 요청한다. 수정된 사이트를 다시 검증한다. acceptance-criteria.md에 정의된 모든 항목을 처음부터 다시 검사한다. 이전 PASS 결과를 그대로 복사하지 않는다. 현재 코드를 기준으로 새롭게 판단한다. 결과: PASS FAIL UNVERIFIED Evidence를 반드시 포함한다. verification/check.md를 갱신한다. 최종적으로: AC-01 PASS AC-02 PASS AC-03 PASS AC-04 PASS AC-05 PASS AC-06 PASS AC-07 PASS AC-08 PASS 상태가 되는 것이 목표다. 11단계. README 만들기 Codex에 다음 요청을 한다. 현재 프로젝트를 기준으로 README.md를 만들어줘. 대상은 처음 이 프로젝트를 보는 사람이다. 다음 내용을 포함한다. # Project 프로젝트 목적 ## Demo 배포 URL 자리 ## Features 주요 기능 ## Tech Stack HTML CSS JavaScript ## Project Structure 디렉터리 구조 ## Run Locally 로컬 실행 방법 ## Verification Acceptance Criteria와 검증 결과 ## Deployment Vercel 배포 방식 ## License 미정이면 생략 12단계. GitHub 연결 이제 GitHub 저장소를 만든다. 가장 권장하는 저장소 이름: physical-ai-portfolio 또는 일반적인 경우: my-portfolio 최종 구조: my-portfolio/ │ ├── README.md │ ├── docs/ │ ├── portfolio-design.md │ └── acceptance-criteria.md │ ├── site/ │ ├── index.html │ ├── styles.css │ └── app.js │ └── verification/ └── check.md ChatGPT에서 GitHub Plugin을 연결했다면 리포지터리 작업을 ChatGPT/Codex와 연결해서 수행할 수도 있다. 그렇지 않다면 GitHub 웹에서 직접 업로드해도 된다. 13단계. Vercel 연결 ChatGPT에는 Vercel용 Plugin을 사용할 수 있다. Plugin을 연결했다면 ChatGPT에 다음처럼 요청할 수 있다. 현재 GitHub 저장소의 포트폴리오 사이트를 Vercel에 배포하려고 한다. 먼저 배포 설정만 확인해줘. 아직 배포하지 않는다. 다음을 확인한다. - repository - root directory - framework - build command - output directory - environment variables 정적 HTML/CSS/JavaScript 사이트이므로 불필요한 빌드 설정이 있다면 제거한다. 문제가 없으면: 검토한 설정으로 Vercel 배포를 진행한다. 배포가 완료되면 1. Production URL 2. Deployment status 3. 배포 설정 4. 확인해야 할 항목 을 알려준다. 14단계. Vercel Plugin을 사용하지 않는 방법 Plugin을 사용하지 않아도 된다. Vercel 웹사이트에서: Add New → Project → Import Git Repository 를 선택한다. GitHub의: my-portfolio 저장소를 선택한다. 정적 사이트라면 적절한 Root Directory를 지정하고 배포한다. 예: site 배포가 완료되면: https://xxxxx.vercel.app 주소가 생성된다. 15단계. Production 검증 배포했다고 프로젝트가 끝난 것은 아니다. 마지막 단계는: Production Verification 이다. ChatGPT에 다음 프롬프트를 제공한다. 포트폴리오 사이트가 실제 배포되었다. Production URL: [URL] 이제 최종 검증을 수행하기 위한 Production Acceptance Checklist를 만들어줘. 다음 항목을 포함한다. 1. Desktop UI 2. 390px Mobile UI 3. Navigation 4. Project Filter 5. Contact 6. Keyboard Accessibility 7. Broken Links 8. JavaScript Error 9. Sensitive Information 10. False Information 판정: PASS FAIL UNVERIFIED 직접 검증할 수 없는 것은 PASS라고 가정하지 않는다. 직접 사이트를 확인한다. 문제가 보이면 스크린샷을 ChatGPT에 제공한다. 16단계. 최종 완료 조건 프로젝트는 다음 조건을 모두 만족해야 종료한다. G0 REQUIREMENTS PASS G1 DESIGN PASS G2 IMPLEMENTATION PASS G3 FUNCTIONAL TEST PASS G4 RESPONSIVE PASS G5 ACCESSIBILITY PASS G6 PRODUCTION PASS 즉 단순히: 사이트 만들었다 가 아니라: 요구사항 정의 ↓ 설계 ↓ 구현 ↓ 검증 ↓ 수정 ↓ 재검증 ↓ 배포 ↓ 운영 검증 까지 경험하는 것이 이번 실습의 핵심이다. 17단계. ChatGPT Work를 활용하는 더 쉬운 방법 코딩 학습보다 결과물을 빠르게 만드는 것 이 목적이라면 Codex 대신 Work를 사용할 수도 있다. Work에 다음과 같이 요청한다. 개인 포트폴리오 사이트를 만들어줘. 목적: Physical AI 및 로봇 교육 전문가의 포트폴리오 주요 방문자: 대학 교육 담당자 기업 HR 교육기관 담당자 구조: Hero About Projects Teaching Contact 프로젝트 사례 3개를 포함한다. 디자인 방향: - 전문적 - 기술 중심 - 과도한 애니메이션 금지 - 모바일 우선 - 높은 가독성 허구의 프로젝트나 성과를 만들지 않는다. 먼저 사이트 구조와 완료 기준을 제안하고 내가 확인할 수 있도록 보여준 후 사이트를 생성한다. Work가 제공되는 계정에서는 이 방식이 가장 간단하다. 그러나 이 방식은: 개발 프로세스 학습 보다는: 결과물 제작 에 더 적합하다. 18단계. 이번 실습에서 추천하는 방식 학습 목적이라면: ChatGPT Project ↓ Chat 요구사항 정의 ↓ Chat Acceptance Criteria ↓ Codex 코드 구현 ↓ Codex 코드 검증 ↓ Browser 사람 검증 ↓ ChatGPT 스크린샷 진단 ↓ Codex 수정 ↓ GitHub ↓ Vercel ↓ Production Verification 을 권장한다. 빠르게 결과만 만들고 싶다면: ChatGPT Project ↓ Work ↓ Site ↓ 검토 ↓ 공개 를 사용한다. 최종 준비 체크리스트 이번 실습을 시작하기 전에 다음만 준비한다. □ ChatGPT 계정 □ ChatGPT Project 생성 □ Project Instructions 입력 □ 본인 소개 문장 □ 프로젝트 사례 3개 □ 공개 가능한 이메일 □ GitHub 계정 □ Vercel 계정 선택 사항: □ GitHub Plugin □ Vercel Plugin □ Codex Desktop / Web 별도로 필요하지 않은 것: Claude Code Anthropic API Claude Pro Claude Skill Claude Artifact Playwright MCP Vercel CLI 핵심 이 실습에서 중요한 것은 특정 AI 제품을 사용하는 것이 아니다. 핵심은 다음 개발 사이클을 경험하는 것이다. 문제 정의 ↓ 요구사항 ↓ Acceptance Criteria ↓ 구현 ↓ 검증 ↓ Evidence ↓ 수정 ↓ 배포 ChatGPT에서는 이를 가장 자연스럽게: Project + Chat + Codex + GitHub + Vercel 조합으로 구현할 수 있다.