기초 개념
환경 세팅에 들어가기 전에, 앞으로 자주 나올 용어들을 가볍게 훑어봅시다. 다 외울 필요 없어요 — 나중에 헷갈리면 다시 오면 됩니다.
오늘의 여정 — 지금 여기에 있습니다
Claude Code란?
AI와 함께 코딩하는 도구
Claude Code란?
Claude Code는 AI와 대화하며 코딩하는 도구입니다. 파일 만들기, 코드 작성, 프로젝트 관리, 인터넷에 공개(배포)까지 — 한국어로 말하면 AI가 알아서 처리합니다.
가장 쉬운 방법: Claude Desktop 앱
2025년 11월, Claude Desktop 앱에 Code 탭이 추가되면서 누구나 쉽게 Claude Code를 사용할 수 있게 되었습니다. 앱을 설치하고 Code 탭을 열면 바로 시작할 수 있어요.
Claude Code를 쓸 수 있는 3가지 방법
Claude Desktop 앱 — Code 탭
앱 설치 → Code 탭 클릭 → 바로 시작. 처음 시작하는 분에게 가장 쉽고, 이번 수업의 웹사이트 제작도 MCP(구글 드라이브 연결) 체험도 전부 이 앱 하나로 합니다.
터미널에서 직접 실행
터미널(Warp)에서 claude 명령어로 실행. 더 강력한 경로지만, 오늘은 몰라도 됩니다 — 나중에 익숙해지면 시도해보세요.
웹에서 사용 (claude.ai)
설치 없이 claude.ai 에서 바로 사용. 앱 설치가 안 되는 환경에서 유용.
이 가이드의 기본 경로
Git이란?
코드를 안전하게 저장하는 시스템
Git이란?
Git은 코드의 변경 기록을 관리하는 시스템입니다. 게임의 "세이브 포인트"처럼, 작업한 내용을 저장하고 나중에 되돌릴 수 있어요.
일상 비유
- - 구글 문서의 "버전 기록"과 같아요
- - 게임에서 "세이브 포인트"를 만드는 것과 같아요
- - 사진 편집에서 "실행 취소"를 무한으로 할 수 있는 거예요
Git
내 컴퓨터에서 버전을 관리하는 프로그램
비유: 일기장
GitHub
Git으로 관리한 코드를 온라인에 저장하는 웹 서비스
비유: 클라우드 백업
전체 작업 흐름
코드 작성 → 저장(커밋) → 온라인 업로드(푸시) → 인터넷 공개(배포). 이 흐름을 한눈에 보세요. 각 단계를 클릭하면 자세한 설명이 나옵니다.
색칠된 단계를 클릭하면 아래에 설명이 나와요
내 컴퓨터
로컬 저장소
세이브 기록이 쌓이는 곳
GitHub
원격 저장소
클라우드 백업 · 팀원 모두 접근
github.com/me/my-project
라이브 웹사이트
전 세계에서 접속
Vercel이 자동으로 공개해줘요
my-project.vercel.app
내 컴퓨터
로컬 저장소
세이브 기록이 쌓이는 곳
GitHub
원격 저장소
클라우드 백업 · 팀원 모두 접근
github.com/me/my-project
라이브 웹사이트
전 세계에서 접속
Vercel이 자동으로 공개해줘요
my-project.vercel.app
커밋 = 세이브 포인트
작업할 때마다 "커밋"을 하면, 그 시점이 기록으로 남습니다. 게임에서 세이브하는 것처럼요. 언제든 과거 시점으로 되돌릴 수 있어요.
첫 페이지 완성
10:00
로그인 추가
11:30
디자인 수정
14:00
버그 수정
15:15
실수해도 괜찮아요 — 말 한마디면 저장해둔 어느 시점으로든 돌아갑니다.
첫 페이지 완성
10:00
로그인 추가
11:30
디자인 수정
14:00
버그 수정지금 여기
15:15
"2번으로 되돌려줘" — 언제든 저장해둔 시점으로 복구할 수 있어요.
일을 하다 보면 예전으로 돌아가거나, 어떤 시점에 무엇을 바꿔서 지금 이렇게 되었는지 되짚어야 할 때가 있습니다. 저장(커밋)을 주기적으로 잘 해두면 AI도 히스토리를 보고 원인을 파악하기 쉬워요.
커밋, 푸시, 배포 — 뭐가 다른가요?
이 세 가지는 각각 다른 일을 합니다. 꼭 함께 할 필요는 없어요.
커밋
사진 찍기
나만 봄
푸시
클라우드에 업로드
팀 · 백업
배포
SNS에 게시
전 세계 공개
그래서 우리는 한 번에 이렇게 말합니다
"커밋, 푸쉬, 배포해줘"