3강: 개발 환경 세팅

1. 클로드 코드를 설치해요

윈도우는 시작 메뉴에서 powershell을 검색해 Windows PowerShell을 여세요. 이름에 (x86)이 붙지 않은 창에 아래 한 줄을 붙여 넣고 Enter를 누릅니다.

winget install --id Anthropic.ClaudeCode -e --source winget

맥은 터미널(명령을 붙여 넣는 앱)을 열고 아래 한 줄을 붙여 넣으세요.

curl -fsSL https://claude.ai/install.sh | bash

화면이 다르면 클로드 코드·코덱스 설치 페이지도 함께 보세요.

윈도우에서 촬영할 때는 211MB를 내려받았고 1~3분쯤 걸렸어요. 화면에 설치 성공이 나오면 PowerShell 또는 터미널과 VS Code를 완전히 닫았다가 다시 여세요.

맥은 두 앱에서 각각 Command + Q를 눌러 종료해야 해요. 새로 연 창만 방금 설치한 claude를 찾을 수 있어요.

2. 폴더를 열고 로그인해요

바탕화면에 test 폴더를 만드세요. VS Code에서 파일(File) → 폴더 열기(Open Folder)를 누르고 그 폴더를 선택합니다.

메뉴에서 터미널(Terminal) → 새 터미널(New Terminal)을 누른 뒤 claude 한 단어를 입력하고 Enter를 누르세요. 브라우저가 열리면 Claude 계정으로 로그인합니다.

처음에는 이 폴더를 믿어도 되는지 물어요. 내가 만든 test 폴더가 맞는지 확인한 뒤 Yes, I trust this folder를 선택하세요.

로그인과 폴더 승인은 직접 해야 해요. 이것만 직접 하시면 파일 만들기는 클로드가 해요.

3. 첫 페이지를 부탁해요

클로드에게 이렇게 말하세요.

지금 연 test 폴더에 index.html 파일 한 장을 만들어 줘.
페이지 가운데에 "나의 첫 바이브 코딩 페이지"라고 크게 보여 줘.
배경은 밝게 하고, 처음 보는 사람도 파일을 찾기 쉽게 작업이 끝나면 만든 파일 이름을 알려 줘.

파일을 만들어도 되는지 물으면 index.html 한 장을 만드는 요청인지 확인하고 승인하세요.

4. 브라우저로 열어 봐요

클로드에게 이어서 말하세요.

방금 만든 index.html을 내 기본 브라우저로 열어 줘.

브라우저에 문장이 보이면 이 탭의 실습은 끝이에요.

1. 코덱스를 설치해요

윈도우는 시작 메뉴에서 powershell을 검색해 Windows PowerShell을 여세요. 이름에 (x86)이 붙지 않은 창에 아래 한 줄을 통째로 붙여 넣고 Enter를 누릅니다.

powershell -ExecutionPolicy ByPass -c "irm https://chatgpt.com/codex/install.ps1 | iex"

맥은 터미널(명령을 붙여 넣는 앱)을 열고 아래 한 줄을 붙여 넣으세요.

curl -fsSL https://chatgpt.com/codex/install.sh | sh

화면이 다르면 클로드 코드·코덱스 설치 페이지도 함께 보세요.

화면에 installed successfully가 나오면 설치가 끝난 거예요. 윈도우에서 지금 코덱스를 켤지 물으면 n을 누르세요.

PowerShell 또는 터미널과 VS Code를 완전히 닫았다가 다시 엽니다. 맥은 두 앱에서 각각 Command + Q를 눌러 종료하세요. 새로 연 창만 방금 설치한 codex를 찾을 수 있어요.

2. 폴더를 열고 로그인해요

바탕화면에 test 폴더를 만드세요. VS Code에서 파일(File) → 폴더 열기(Open Folder)를 누르고 그 폴더를 선택합니다.

메뉴에서 터미널(Terminal) → 새 터미널(New Terminal)을 누른 뒤 codex 한 단어를 입력하고 Enter를 누르세요. Sign in with ChatGPT를 골라 로그인합니다.

처음에는 폴더를 믿어도 되는지 물어요. 내가 만든 test 폴더가 맞는지 확인한 뒤 Yes, continue를 선택하세요.

로그인과 폴더 승인은 직접 해야 해요. 이것만 직접 하시면 파일 만들기는 코덱스가 해요.

3. 첫 페이지를 부탁해요

코덱스에게 이렇게 말하세요.

지금 연 test 폴더에 index.html 파일 한 장을 만들어 줘.
페이지 가운데에 "나의 첫 바이브 코딩 페이지"라고 크게 보여 줘.
배경은 밝게 하고, 처음 보는 사람도 파일을 찾기 쉽게 작업이 끝나면 만든 파일 이름을 알려 줘.

파일을 만들어도 되는지 물으면 index.html 한 장을 만드는 요청인지 확인하고 승인하세요.

4. 브라우저로 열어 봐요

코덱스에게 이어서 말하세요.

방금 만든 index.html을 내 기본 브라우저로 열어 줘.

브라우저에 문장이 보이면 이 탭의 실습은 끝이에요.