VS Code와 Codex 설치하기

Codex로 첫 페이지 만들기에 오신 걸 환영해요. ChatGPT 구독료는 내고 있는데 아직 채팅으로만 쓰고 있다면, 이 무료 코스가 딱 맞아요. 순서대로 따라가면 되고, 코딩 경험은 없어도 돼요. 반대로 코드를 업으로 다루는 분이라면 단편 레슨 쪽이 더 잘 맞을 거예요. 이 주방은 처음 요리해 보는 분들을 위한 곳이거든요.

시작하기 전에 약속 하나만 할게요. 모든 레슨은 눈으로 확인할 수 있는 결과물로 끝나요. 이론만 쌓다 끝나는 일은 없어요. 오늘도 컴퓨터가 뭔가를 해내는데, 자잘한 지시를 백 개 따라 해서가 아니라 원하는 결과를 말했기 때문이에요.

오늘 만들 것

이 레슨이 끝나면 VS Code에 Codex가 설치되고 로그인까지 끝나 있을 거예요. 이미 구독 중인 ChatGPT의 에이전트 버전이죠. 그리고 에이전트가 작은 웹 페이지를 하나 만들어서 브라우저로 직접 열어 줘요. 그 과정을 눈앞에서 지켜보게 돼요.

준비물

• 지금 쓰고 있는 ChatGPT 계정 (유료 구독 중이라면 별도 API 결제 없이 로그인해요)
• 평소 쓰는 컴퓨터 — Windows든 Mac이든 상관없어요
• 약 30분

따라 하기

1. 조리대 준비 — VS Code

VS Code를 내려받아 기본 옵션 그대로 설치하세요. 무료예요. 미리 말해 두면, 여기서 코드를 쓸 일은 없어요. VS Code는 조리대 역할이에요. 에이전트가 파일을 만들고 내용을 고치는 모습을 지켜보는 자리죠. 지켜보는 게 우리 일이고, 칼질은 에이전트가 해요.

2. 공식 Codex 확장 설치

VS Code를 열고 Ctrl+Shift+X(Mac은 Cmd+Shift+X)를 눌러 확장 탭을 여세요. 검색창에 Codex를 입력하고 게시자가 OpenAI인 확장을 설치하세요. 마켓플레이스에서는 Codex – OpenAI's coding agent로 표시돼요.

설치 버튼을 누르기 전에 딱 하나만 확인하세요. 게시자가 OpenAI여야 해요. 비슷하게 생긴 짝퉁 확장이 있거든요. 이름과 아이콘만 보고 아무거나 누르지 말고, 만든 곳이 OpenAI인지부터 보세요.

3. 불 켜기 — 로그인

설치가 끝나면 VS Code 사이드바에 Codex 패널이 나타나요. 배치에 따라 왼쪽이나 오른쪽에 보일 수 있어요. 아이콘이 안 보이면 Ctrl+Shift+P(Mac은 Cmd+Shift+P)를 누르고 Codex: Open Sidebar를 찾아 여세요.

패널에서 Sign in with ChatGPT를 누르고 이미 쓰고 있는 ChatGPT 계정을 선택하세요. 브라우저가 열리며 로그인이 마무리돼요. API 키를 따로 만들 필요는 없어요. 플랜마다 사용량 한도는 다르지만 로그인 방법은 같습니다. 화면이 달라졌다면 공식 Codex IDE 안내를 먼저 확인하세요.

4. 빈 폴더 열기

File → Open Folder를 누른 다음, 원하는 위치에 first-page라는 새 폴더를 만들어 여세요. 이 폴더가 조리대예요. Codex는 이 안에서만 요리해요. 빈 조리대 준비 끝이에요.

한 가지 더 알아두면 좋아요. Codex 작성창 아래에는 권한 메뉴가 있어요. 이 강의에서는 기본 권한을 그대로 두세요. 기본값은 열린 프로젝트 안에서 파일을 읽고 고치며, 경계를 넘어서는 동작에는 승인을 요청해요. Full access는 필요하지 않아요. 무엇을 승인하는지 읽고 한 번씩 허용하는 게 첫날의 중요한 연습이에요.

5. 첫 주문 넣기

오른쪽 사이드바 Codex 패널의 채팅창에 이걸 붙여넣고 Enter를 누르세요:

hello.html이라는 파일을 만들어 줘. "My kitchen is open"이라고
크고 친근한 글씨로 적힌 작은 환영 페이지야. 따뜻한 배경색에
오늘 날짜도 넣어 줘. 다 만들면 내 기본 브라우저로 열어 줘.

이제 지켜보세요. 프로젝트 안에서 파일을 만드는 일은 바로 진행될 수 있고, 브라우저를 여는 명령처럼 권한 경계를 넘는 동작에는 허락을 구할 수 있어요. 요청 내용을 읽고 이번 한 번만 승인하세요. 잠시 뒤 브라우저가 열리고, 1분 전엔 존재하지도 않던 페이지가 주방이 열렸다고 말하고 있을 거예요. 직접 작성한 게 아니라, 주문한 거죠.

6. 루프 한 번 맛보기

이 코스 전체를 관통하는 진짜 기술은 지금부터예요. 바로 다시 요청하기. 붙여넣으세요:

페이지를 더 근사하게 만들어 줘: 부드러운 그라디언트 배경을 넣고
내용을 화면 가운데에 정렬해 줘. 그리고 브라우저에서 새로고침해 줘.

승인하고, 지켜보고, 페이지가 바뀌는 걸 확인하세요. 요청하고, 결과를 보고, 다시 다듬는 이 루프가 이 기술의 전부예요. 앞으로 나올 모든 레슨은 방금 한 일의 더 큰 버전일 뿐이에요.

막혔을 때

• 오른쪽에 Codex 패널이 안 보여요 — VS Code를 완전히 닫았다가 다시 여세요(폴더는 그대로 남아 있어요). 그래도 없으면 확장 탭에서 Codex가 정말 설치됐는지, 사용 설정(Enable)돼 있는지 확인하세요.
• 로그인이 다른 ChatGPT 계정으로 됐어요 — 패널의 계정 메뉴에서 로그아웃한 뒤 평소 쓰는 계정으로 다시 로그인하세요. 플랜과 워크스페이스에 따라 사용량과 사용 가능한 기능이 달라질 수 있어요.
• 게시자가 OpenAI가 아닌 걸 깔았어요 — 그 확장을 삭제하고, Ctrl+Shift+X에서 다시 검색해 게시자 OpenAI인 것으로 설치하세요.
• 회사 노트북이 설치를 막아요 — 회사 컴퓨터는 원래 자주 막아요. 이 코스는 개인 컴퓨터로 진행하세요. 사무실 컴퓨터에 에이전트를 들이는 건 IT 부서 허락부터 받아야 하는 별개의 레시피예요.
• 사소한 것까지 자주 허락을 구해요 — 권한 메뉴에서 기본값이 선택됐는지 확인하세요. 그래도 처음에는 요청 내용을 읽고 좁은 범위로 승인하는 편이 좋아요. 이 코스에서는 Full access로 바꿀 필요가 없어요.

마무리 체크

나가기 전에 하나씩 확인해요:

□ VS Code에서 first-page 폴더가 열려 있다
□ VS Code 사이드바에 Codex 패널이 떠 있고, ChatGPT로 로그인됐다
□ hello.html이 존재하고 — 브라우저에서 열렸다
□ 편집이 아니라 요청으로 페이지를 한 번 바꿔봤다

네 개 모두 체크했다면 중요한 사실 하나가 이미 참이 됐어요. 컴퓨터에게 원하는 걸 말했고, 방법은 컴퓨터가 알아냈다는 것. 폴더는 지우지 마세요. 남은 코스 내내 이 폴더에서 요리할 거예요.

다음 레슨 — 02 바이브 코딩으로 첫 페이지 만들기. 나를 소개하는 진짜 원페이지 사이트를 같은 방식으로, 말로 만들어서 내 컴퓨터에서 돌려봐요.

막힌 단계가 있나요? 아래 질문 상자에 남겨 주세요. 헤맨 단계가 있다면 그건 레슨에 난 구멍이지, 읽는 사람 잘못이 아니에요. 질문 하나가 다음 사람의 길을 메워 줘요.