② 터미널 / 파워쉘 — 컴퓨터와 글로 대화하기 (1/2)

검은 창이 무서워 보이지만, "지금 어디?", "여기 뭐 있어?" 정도만 물어봅니다.

지금 내가 어느 폴더에 있는지 확인 (print working directory)

pwd

이 폴더 안에 뭐가 있는지 목록 보기 (list)

ls

바탕화면 폴더로 이동하기 (change directory)

cd Desktop

한 단계 위 폴더로 나가기

cd ..

새 폴더 만들기 (make directory)

mkdir 연습폴더

② 터미널 / 파워쉘 — 컴퓨터와 글로 대화하기 (2/2)

검은 창이 무서워 보이지만, "지금 어디?", "여기 뭐 있어?" 정도만 물어봅니다.

빈 폴더 삭제하기 (remove directory)

rmdir 연습폴더

새 빈 파일 만들기 (맥/리눅스: touch · 윈도우 파워쉘: ni)

touch test.txt

파일 삭제하기 (윈도우 파워쉘: del test.txt)

rm test.txt

화면이 지저분하면 깨끗하게 지우기

clear

✍️ 메모장으로 첫 HTML 만들기 (복사 → 저장)

메모장/텍스트편집기를 열고 아래를 그대로 붙여넣은 뒤, "내페이지.html"로 저장하세요.

<!DOCTYPE html>
<html>
  <body>
    <h1>안녕하세요, 홍길동입니다</h1>
    <p>AI 자율마스터 과정 3기에서 만든 첫 페이지예요.</p>
    <button>반갑습니다</button>
  </body>
</html>

🎨 색·글자 크기·모양 바꿔보기 (메모장에서 직접 수정)

위 파일의 글자를 아래처럼 바꿔 저장 → 브라우저 새로고침(F5) → 변화를 확인!

제목 색깔 바꾸기 (color)

<h1 style="color: blue;">안녕하세요, 홍길동입니다</h1>

글자 크기 키우기 (font-size)

<p style="font-size: 28px;">AI 자율마스터 과정 3기 첫 페이지</p>

배경색 + 굵게 + 가운데 정렬 (모양 바꾸기)

<h1 style="color: white; background: tomato; text-align: center;">홍길동</h1>

버튼을 둥글고 크게

<button style="font-size: 20px; padding: 12px; border-radius: 10px;">반갑습니다</button>

💻 VS Code 설치하기

설치가 안 되면 바로 손 들어주세요! (강의 전에 미리 설치 권장)

방법 1) 공식 사이트에서 다운로드 (윈도우·맥 공통)

https://code.visualstudio.com → Download 클릭 → 설치

방법 2) 맥 사용자 (홈브루가 깔려 있다면 터미널에서)

brew install --cask visual-studio-code

방법 3) 윈도우 사용자

사이트에서 Windows 버전 다운로드 → 더블클릭 → "다음" → 설치 완료

설치 확인 (터미널/파워쉘에서)

code --version

📁 프로젝트 폴더 만들고 VS Code로 열기

오늘 만들 프로그램이 살 "집(폴더)"을 먼저 만듭니다.

1) 바탕화면으로 이동

cd Desktop

2) "my-page" 라는 프로젝트 폴더 만들기 (make directory)

mkdir my-page

3) 그 폴더 안으로 들어가기

cd my-page

4) 지금 이 폴더를 VS Code로 바로 열기 (마지막에 점 하나!)

code .

💡 안 되면: VS Code 메뉴 → File → Open Folder → my-page 선택

🤖 VS Code 터미널에서 클로드 코드 CLI 켜기

VS Code 안에서 Ctrl + ` 로 터미널을 연 다음 입력하세요.

클로드 코드 CLI가 설치돼 있는지 확인

claude --version

클로드 코드 CLI 실행 (이 한 줄이면 끝!)

claude

처음이면 로그인 안내가 나옵니다 → 브라우저에서 클로드 로그인

끝낼 때는

/exit (또는 Ctrl + C 두 번)

✏️ 터미널 클로드 코드 CLI로 코드 수정하기

클로드 실행 후, 아래처럼 "말"로 시키면 됩니다 (그대로 붙여넣기 OK)

이 폴더에 간단한 자기소개 웹페이지(index.html)를 만들어줘.
이름, 한 줄 소개, 좋아하는 것 3가지가 들어가게 해줘.

만든 뒤에는 이렇게 이어서 시켜보세요

제목 색깔을 파란색으로 바꿔줘.

글씨가 너무 작아. 전체적으로 조금 키워줘.

🔧 내 컴퓨터에 Git 설치하기 (컴퓨터당 1회만)

Git(도구)으로 GitHub(웹사이트)에 코드를 올립니다. 둘은 다른 거예요!

맥 사용자 (Git + 깃허브 명령도구 gh 함께 설치)

brew install git gh

윈도우 사용자

https://git-scm.com 에서 Git 다운로드 → 설치

https://cli.github.com 에서 GitHub CLI(gh) 다운로드 → 설치

설치 확인

git --version

gh --version

내 정보 등록 (딱 한 번만, GitHub 가입 이메일과 똑같이!)

git config --global user.name "내이름"

git config --global user.email "내이메일@example.com"

🤖 (더 쉬운 길) 깃·깃허브 설치를 클로드에게 시키기

2부엔 이미 클로드가 깔려 있죠? 위 설치가 어려우면 클로드에게 그대로 맡기세요. (하나씩 복사)

내 컴퓨터에 git이 설치돼 있는지 확인하고, 없으면 내 운영체제(맥/윈도우)에 맞는 설치 방법을 한 단계씩 알려줘.

깃허브 명령도구(gh)도 설치하고, 내 깃허브 계정으로 로그인(인증)까지 도와줘.

마지막으로 git 사용자 이름과 이메일도 등록해줘. (이메일: 내이메일@example.com)

🔗 깃허브 연결하기 — 클로드에게 시키기

복잡한 연결 과정도 클로드 코드 CLI에게 부탁하면 알아서 해줍니다.

이 프로젝트를 깃허브에 올리고 싶어.
깃허브 저장소를 새로 만들고, 이 폴더를 거기에 연결해줘.
중간에 내가 해야 할 게 있으면 하나씩 알려줘.

클로드가 로그인·인증을 요청하면 안내대로 따라가면 됩니다

지금 깃허브 로그인(인증)이 안 돼 있으면, 로그인하는 방법부터 알려줘.

📤 깃허브에 코드 올리기 — 명령어 3단계

순서만 기억: add(고르기) → commit(저장) → push(올리기)

1) 바뀐 파일 모두 고르기 (마침표 = 전부)

git add .

2) 저장하기 (따옴표 안에 무엇을 했는지 메모 — 세이브 포인트!)

git commit -m "랜딩페이지 첫 버전"

3) 깃허브로 업로드

git push

💡 외우기 싫다면? 클로드 코드 CLI 안에서 한 줄이면 끝:

/commit → 메시지까지 클로드가 알아서 만들어 줍니다

🤖 깃허브에 올리기 — 클로드에게 말로 시키기

add·commit·push를 외울 필요 없어요. 아래처럼 말로 시키면 됩니다.

지금까지 작업한 내용을 깃허브에 올려줘.
커밋 메시지는 뭘 했는지 알아보기 쉽게 한국어로 정해줘.

더 구체적으로 시키고 싶다면

방금 바꾼 것만 "랜딩페이지 색상 변경"이라는 메시지로 커밋하고 push까지 해줘.

🔐 비밀은 .env 파일에 — 깃허브에 올리면 안 되는 것

비밀번호·API 키 같은 "비밀"은 코드에 직접 쓰지 말고 .env 파일에 따로 보관합니다.

1) 프로젝트 폴더에 .env 파일 만들기 (이름이 점으로 시작!)

touch .env

2) .env 안에 "이름=값" 형식으로 비밀 적기 (예시)

OPENAI_API_KEY=sk-여기에-내-키

MY_PASSWORD=1234abcd

3) .gitignore 파일에 .env 를 적어 두면 → 깃허브에 안 올라감!

echo ".env" >> .gitignore

💡 .env = 내 컴퓨터에만 두는 "비밀 금고", .gitignore = "이건 올리지 마" 목록

🤖 .env 설정도 클로드에게 시키기

무엇을 비밀로 빼야 하는지 헷갈리면, 클로드가 정리해 줍니다.

이 프로젝트에 비밀번호나 API 키 같은 민감한 정보가 코드에 직접 들어가 있는지 확인해줘.
있으면 .env 파일로 옮기고, .gitignore에 .env를 추가해서 깃허브에 안 올라가게 해줘.
.env에 뭘 적어야 하는지 예시도 .env.example 파일로 만들어줘.

📥 깃허브에서 자료 받아보기 — 명령어

다른 컴퓨터에서, 또는 친구 코드를 내 컴퓨터로 가져올 때.

처음 통째로 다운로드 (clone)

git clone https://github.com/내아이디/my-page.git

내려받은 폴더로 들어가서 VS Code로 열기

cd my-page

code .

이미 받아둔 프로젝트의 최신 변경분만 받기 (pull)

git pull

💡 clone = 처음 다운로드 / pull = 최신으로 동기화

🤖 깃허브에서 받기 — 상황별로 클로드에게 시키기

주소를 몰라도, 충돌이 나도 — 상황을 말하면 클로드가 처리해 줍니다. (상황별로 하나씩 복사)

[처음 받을 때] 내 깃허브에 있는 my-page 저장소를 이 컴퓨터로 받아서 VS Code로 열어줘.

[최신으로 맞출 때] 깃허브의 최신 내용을 지금 폴더로 받아와 줘.

[충돌·에러가 날 때] 받는 중에 이런 메시지가 떴어. 무슨 뜻이고 어떻게 해결해? (에러 붙여넣기)

[내 저장소 목록을 모를 때] 내 깃허브에 어떤 저장소들이 있는지 보여줘.

STEP 1. 프로젝트 준비 — 클로드에게 시키기

Part 2에서 만든 my-page 폴더를 VS Code로 열고, 터미널에 claude 실행 후 붙여넣기

나는 코딩을 처음 배우는 초보야. 쉬운 말로 설명하면서 진행해줘.
이 폴더(my-page)에 "나를 소개하는 랜딩페이지(한 페이지 소개 사이트)"를 만들 거야.
먼저 어떤 파일들을 만들 계획인지 한국어로 간단히 알려줘.
아직 코드는 만들지 말고, 계획만 먼저 보여줘.

STEP 2. 랜딩페이지 만들기 (핵심!)

미리 메모장에 적어둔 내 소개 정보를 함께 붙여넣으면 더 좋습니다.

좋아, 그 계획대로 나를 소개하는 랜딩페이지를 만들어줘.
구성은 이렇게 해줘:
  1) 맨 위 히어로 영역 — 내 이름 + 한 줄 소개
  2) 소개(About) 섹션 — 나를 소개하는 글
  3) 하는 일/관심사 3가지를 카드로
  4) 맨 아래 연락처 영역 — 이메일·전화·SNS
아래는 내 정보야 (메모장에서 복사해 붙여넣기):
  이름: OOO / 한 줄 소개: OOO / 소개글: OOO / 연락처: OOO
디자인은 깔끔하고 모던하게, 모바일에서도 잘 보이게(반응형), 한글로 만들어줘.
초보자도 실행할 수 있게, 다 만든 뒤 실행 방법도 알려줘.

STEP 3. 개발서버로 직접 열어보기

클로드가 만든 결과를 내 눈으로 확인하는 순간! (살짝 소름 주의 😆)

방금 만든 내 랜딩페이지를 내 컴퓨터에서 실행해서 보고 싶어.
개발서버 켜는 명령어를 알려주고, 내가 따라 할 수 있게 한 줄씩 설명해줘.

보통 아래 같은 명령을 안내해 줍니다 (예시)

npm install      (필요한 재료 설치)
npm run dev      (개발서버 켜기 → 브라우저에서 주소 열기)

화면이 안 뜨거나 에러가 나면, 그 에러를 그대로 복사해서 클로드에게 보여주세요.

STEP 3-2. (더 쉽게) 클로드가 직접 실행하게 시키기

클로드 코드 CLI는 터미널 명령을 "직접 실행"할 수 있어요. 아래처럼 부탁하면 설치·실행까지 알아서 해줍니다.

방금 만든 내 랜딩페이지를 네가 직접 개발서버로 실행해줘.
필요한 설치(npm install 등)가 있으면 그것도 네가 알아서 해줘.
실행되면 내가 브라우저에서 열어볼 주소를 알려줘. (예: http://localhost:3000)
중간에 에러가 나면 네가 원인을 찾아 고친 뒤 다시 실행해줘.

끝낼 때(개발서버 끄기)는 이렇게

개발서버 그만 끄고 싶어. 안전하게 끄는 방법을 알려줘. (보통 터미널에서 Ctrl + C)

STEP 4. 디자인·내용 다듬기

마음에 안 드는 곳을 말로 고칩니다. 얼마든지요! (하나씩 복사해서 사용)

맨 위 히어로 영역에 은은한 그라데이션 배경을 넣어줘.

내 프로필 사진이 들어갈 동그란 자리를 만들어줘 (사진은 임시 이미지로).

버튼·링크에 마우스를 올리면 색이 부드럽게 바뀌게 해줘.

맨 위에 메뉴를 넣어서, 누르면 해당 섹션으로 부드럽게 이동하게 해줘.

STEP 5. 깃허브에 올리기

완성한 내 작품을 깃허브에 안전하게 보관합니다.

클로드 코드 CLI 안에서 (가장 쉬움)

/commit → 그다음 안내대로 push

또는 터미널에서 직접 3단계

git add .

git commit -m "내 랜딩페이지 완성"

git push

💡 마우스로도 가능: 왼쪽 "나뭇가지" 아이콘 → + → 메모 → ✓ → ... → Push

STEP 6. 버전 관리하며 추가로 올리기

기능을 더 넣을 때마다 "세이브 포인트"를 쌓습니다.

내용을 더 추가/수정한 뒤, 다시 3단계 반복

git add .

git commit -m "프로필 사진·연락처 추가"

git push

지금까지의 저장 기록(버전) 보기

git log --oneline

💡 잘못 됐을 때 되돌리는 법은 클로드에게 물어보세요:

"방금 커밋 전으로 되돌리고 싶어. 안전하게 하는 법 알려줘"

STEP 6-2. 버전 관리도 클로드에게 자연어로

명령어를 몰라도 "이런 상황이야" 라고 말하면 클로드가 알아서 처리합니다. (상황별로 하나씩 복사)

[저장] 지금까지 바꾼 내용을 "프로필 사진·연락처 추가"로 커밋하고 push해줘.

[기록 보기] 지금까지 어떤 버전들을 저장했는지 보기 쉽게 알려줘.

[되돌리기] 방금 한 변경이 마음에 안 들어. 직전 저장 상태로 안전하게 되돌려줘.

[특정 버전으로] "랜딩페이지 첫 버전" 때로 되돌리고 싶어. 안전한 방법을 알려줘.

STEP 7. 깃허브에서 다운로드하기

집 컴퓨터에서 만든 걸 강의장 노트북에서, 또는 그 반대로!

다른 컴퓨터에서 내 작품 통째로 받기

git clone https://github.com/내아이디/my-page.git

cd my-page

code .

이미 받아둔 곳이라면 최신 변경분만

git pull

🎉 축하합니다! 만들기 → 실행 → 저장 → 버전관리 → 공유까지 완주!

STEP 7-2. 다운로드도 클로드에게 상황별로 시키기

주소·명령어를 몰라도 상황만 말하면 클로드가 받아줍니다. (상황별로 하나씩 복사)

[다른 컴퓨터에서 처음] 내 깃허브의 my-page 저장소를 이 컴퓨터로 받아서 VS Code로 열어줘.

[최신으로 맞추기] 깃허브의 최신 my-page 내용을 지금 폴더로 받아와 줘.

[어디서 받을지 모를 때] 내 깃허브에 어떤 저장소가 있는지 보여주고, my-page를 받아줘.

[받다가 에러가 날 때] 받는 중에 이런 메시지가 떴어. 원인과 해결 방법을 알려줘. (에러 붙여넣기)

🧾 오늘 자주 쓰는 "프롬프트" 모음 (하나씩 복사)

각 줄을 따로따로 복사해서 클로드 코드 CLI에 붙여넣으세요.

나는 초보야. 쉬운 말로 한 단계씩 설명하면서 해줘.

방금 한 게 무슨 뜻인지 한 줄로 알려줘.

이 에러가 났어. 원인이랑 해결 방법을 알려줘. (에러 내용 붙여넣기)

이 폴더에 나를 소개하는 랜딩페이지를 만들어줘.

방금 만든 페이지를 개발서버로 실행해서 보는 방법을 알려줘.

제목 색을 파란색으로, 글자를 더 크게 바꿔줘.

지금까지 만든 걸 깃허브에 올려줘.

방금 변경을 되돌리고 싶어. 안전한 방법을 알려줘.

내 깃허브 저장소를 이 컴퓨터로 받아서 VS Code로 열어줘.

비밀번호·API 키를 .env로 옮기고 깃허브에 안 올라가게 해줘.

이 코드가 뭐 하는 건지 주석으로 쉽게 설명 달아줘.

⌨️ 오늘 자주 쓰는 "명령어" 모음

터미널/파워쉘에 입력하는 명령어 치트시트.

pwd

지금 어느 폴더?

ls

폴더 안 목록 보기

cd 폴더이름

그 폴더로 이동

cd ..

한 단계 위로

mkdir 폴더이름

새 폴더 만들기

rmdir 폴더이름

빈 폴더 삭제

touch 파일이름

새 빈 파일 만들기 (윈도우: ni)

rm 파일이름

파일 삭제 (윈도우: del)

code .

지금 폴더를 VS Code로 열기

claude

클로드 코드 CLI 실행

git add .

바뀐 파일 모두 고르기

git commit -m "메모"

저장(세이브 포인트)

git push

깃허브에 올리기

git pull

깃허브에서 최신 받기

git clone 주소

깃허브에서 통째로 받기