무료 강의 · Codex
Codex 무료 강의
VS Code에서 Codex를 켜고, 말로 만든 첫 웹페이지를 배포하는 6강 입문 코스예요.
코딩을 몰라도 괜찮아요. 한 강이 한 페이지라 멈춘 자리에서 다시 시작하기 쉽고, 모든 프롬프트를 그대로 복사해 쓸 수 있어요. 강의료는 전부 0원이에요.
ChatGPT 구독자를 위한 경로
Codex로 첫 웹페이지 만들기
ChatGPT를 채팅으로만 쓰고 있었다면 여기서 시작해요. VS Code에 Codex를 설치하고, 원하는 결과를 말로 설명해 페이지를 만들고, 안전하게 되돌리고, 마지막에는 인터넷에 배포해요. 코딩 경험은 필요 없고 강의료는 0원이에요.
1개 코스 · 6/6강 공개 · 프롬프트 전부 공개
입문 코스Codex로 첫 웹페이지 만들기
ChatGPT를 채팅으로만 쓰고 있었다면 여기서 시작해요. VS Code에 Codex를 설치하고, 원하는 결과를 말로 설명해 페이지를 만들고, 안전하게 되돌리고, 마지막에는 인터넷에 배포해요. 코딩 경험은 필요 없고 강의료는 0원이에요.
- 1강완료 ✓
VS Code와 Codex 설치하기
공식 Codex 확장을 설치하고 ChatGPT 계정으로 로그인해 첫 파일을 만들어요.
끝나면Codex가 연결된 VS Code + 브라우저에서 열린 첫 HTML 페이지
이 강 시작하기 완성 예시폴더·파일·Codex 연결·브라우저 결과가 모두 보이는 설치 완료 화면 모형이에요. - 2강완료 ✓
바이브 코딩으로 첫 페이지 만들기
Codex가 먼저 질문하게 한 뒤, 내 내용과 분위기가 담긴 소개 페이지를 만들어요.
끝나면내 소개와 링크가 담긴 index.html 한 장
이 강 시작하기 완성 예시2강 뒤에 남는 반응형 자기소개 페이지를 직접 열어볼 수 있어요. - 3강완료 ✓
다시 시키면서 원하는 대로 고치기
결과를 보고 구체적으로 다시 말하는 루프를 다섯 번 연습해요.
끝나면다섯 번 다듬은 페이지 + 잘못된 변경을 바로잡은 경험
이 강 시작하기 완성 예시수정 전과 다섯 번 수정한 뒤를 버튼으로 번갈아 비교해요. - 4강완료 ✓
내 규칙을 기억시키기
AGENTS.md에 프로젝트 규칙을 적고, 새 작업에서도 지켜지는지 확인해요.
끝나면내 취향과 작업 원칙을 읽고 시작하는 Codex 프로젝트
이 강 시작하기 완성 예시AGENTS.md의 규칙이 다음 작업 결과에 반영되는 관계를 보여줘요. - 5강완료 ✓
되돌리기 안전장치 만들기
git 저장점을 만들고 일부러 망가뜨린 파일 하나를 안전하게 복원해요.
끝나면두 개의 저장점 + 마지막 저장 상태로 복원한 경험
이 강 시작하기 완성 예시망가진 파일을 마지막 저장점으로 되돌리는 동작을 직접 눌러봐요. - 6강완료 ✓
내 페이지 인터넷에 무료로 배포하기
GitHub와 Cloudflare Pages를 연결해 페이지에 진짜 주소를 붙여요.
끝나면폰과 다른 사람의 기기에서도 열리는 내 웹페이지 URL
이 강 시작하기 완성 예시내 폴더에서 GitHub를 거쳐 Pages URL이 생기는 성공 화면 모형이에요.
다른 도구를 쓰고 있나요?
강의 내용은 섞지 않았어요. 도구 선택 화면으로 돌아가 지금 쓰는 AI의 강의를 고르세요.
새 강의가 열리면 알려드려요
새 코스와 레슨 소식을 메일로 받을 수 있어요. 스팸 없이, 언제든 끌 수 있어요.
새 강의가 열리면 메일로 알려드려요.구글 계정으로 가입하면서 새 글 알림을 선택할 수 있어요. 강의는 가입 없이도 계속 무료예요.
가입하고 알림 받기 →