SKILL 20 min

코딩 환경 — 에디터·터미널·git

이 레슨이 끝나면

  • 코드 에디터(VS Code/Antigravity)·터미널·git 3가지 도구의 역할 차이를 한 줄로 설명할 수 있다
  • "검은 화면(터미널)"이 무서운 게 아니라 그냥 "글자로 명령하는 곳"임을 이해한다
  • git이 왜 "코드 시간여행"인지, 매일 한 번 commit이 왜 안전한지 안다

왜 이 레슨이 필요한가

Ch.4 BUILD에서 본인 PC에 코드 에디터 깔고, 터미널 열고, git 명령을 직접 쳐요. 그때 가서 처음 보면 "이게 뭐야"가 되거든요. 이 레슨은 진짜 깔지는 않고 — "이 도구들이 뭔지, 왜 필요한지"를 미리 머리에 그려둬요. Ch.4에서 깔 때 "아 이거 들었던 그거구나"가 되도록.

/v1-director 스킬이 친숙한 비유로 풀어줘요. "감독 비유"가 메인 — 본인이 영화 감독, AI가 배우들, 에디터·터미널·git이 촬영장 도구.

🎨 생성 (Codex CLI) — 영화 촬영장 일러스트. 감독(본인) + 배우(AI) + 카메라(에디터) + 마이크(터미널) + 촬영 일지(git). 도구별 라벨.
본인은 감독. AI가 배우. 도구들은 촬영 장비.

스킬 호출 방법

입력

/v1-director
📷 캡쳐 — Claude Desktop에서 <code>/v1-director</code> 입력 후 첫 응답 (감독 비유로 시작).

3가지 도구 — 한 줄 정의

도구 역할 감독 비유 대표 제품
코드 에디터 코드 파일을 보고 쓰는 곳 시나리오를 보고 수정하는 책상 Antigravity, VS Code, Cursor
터미널 PC에 글자로 명령하는 검은 화면 "카메라 돌려!" 외치는 마이크 macOS Terminal, iTerm2, Windows Terminal
git 코드 변경 이력을 저장하는 시간여행 도구 매 컷 끝에 적는 촬영 일지 git (CLI) + GitHub (백업 클라우드)

코드 에디터 = 워드프로세서의 코딩 버전

평소에 한글이나 워드를 쓸 때, 빈 화면에 글자를 입력해서 문서를 만들죠? 코드 에디터도 똑같아요. 다만 코드 파일을 다뤄요. 글씨 색을 자동으로 칠해주고(syntax highlighting), 오타를 잡아주고, AI 자동완성을 띄워주고, 폴더 구조도 옆에 보여줘요.

가장 많이 쓰이는 건 VS Code(무료, Microsoft) 또는 Antigravity(VS Code 기반 + AI 강화). LEARN은 Ch.4-2에서 Antigravity 먼저를 권해요. 이유는 Claude Code(터미널 AI)가 Antigravity 안에서 그대로 돌아가고, AI 코드 추천이 강력해요.

🎨 생성 (Codex CLI) — Antigravity/VS Code 화면 mockup. 좌(파일 트리) + 가운데(코드 + 색깔별 syntax highlight) + 우(AI 자동완성 팝업) + 하단(터미널 패널).
코드 에디터는 코딩용 한글·워드 + AI 비서.

터미널 = 검은 화면이 무서운 이유는 없어요

영화에서 해커가 검은 화면에 초록 글자 막 치는 장면 — 그게 터미널이에요. 진짜는 그렇게 무서운 곳이 아니에요. 터미널은 단순히 "PC에 마우스 클릭 대신 글자로 명령하는 창"이에요. 클릭 대신 키보드로 시키면 더 빠른 일들이 있거든요.

예시 — 마우스로 하면 5분 걸리는 "이 폴더 안의 모든 .png 파일 이름 앞에 'photo_' 붙이기"가 터미널 한 줄이면 1초:

for f in *.png; do mv "$f" "photo_$f"; done

비개발자가 터미널을 무서워하는 진짜 이유는 "잘못 치면 PC 망가질 것 같다"예요. 하지만 (1) AI가 옆에 있고 (2) 위험한 명령(rm -rf 등)은 미리 안 시키고 (3) 99% 명령은 그냥 "어떤 정보 보여줘"라서 안전해요.

Ch.4-2에서 진짜 자주 쓸 명령 5개를 미리 만나봐요:

명령
cd 폴더이름 "이 폴더로 이동해" (Change Directory)
ls "지금 폴더 안에 뭐 있어?" (LiSt)
pwd "내가 지금 어느 폴더야?" (Print Working Directory)
bin/dev "내 SaaS 서버 켜줘" (Rails 빌드킷에서)
git status "내가 지금까지 뭘 바꿨어?"
🎨 생성 (Codex CLI) — 검은 터미널 화면 mockup. 위 5개 명령이 한 줄씩 입력된 모습 + 결과 텍스트. "무서운 곳 X" 라벨.
터미널은 그냥 "글자로 명령하는 창"이에요.

git = 코드 시간여행 + 매일 백업

git은 코딩하다가 가장 자주 일어나는 두 사고를 막아줘요:

  • "어제 잘 되던 게 오늘 안 됨" → 어제로 되돌리기 (rollback)
  • "노트북이 망가졌어요" → 다른 PC에서 GitHub에서 다시 받아옴 (clone)

핵심 동작 = commit. 영어로 "약속하다, 결정하다" 뜻인데, git에서는 "지금 이 상태를 한 컷 저장해 두기"예요. 예를 들어 회원가입을 다 만들었으면 "회원가입 완성" 메시지로 한 번 commit. 디자인 톤 바꿨으면 "디자인 톤 변경" 메시지로 또 한 번 commit. 이렇게 매일 한두 번 commit하면 코드 역사가 기록되고, 언제든지 그 시점으로 돌아갈 수 있어요.

git ≠ GitHub — 자주 헷갈려요. git은 본인 PC에서 도는 도구. GitHub은 그 git 결과를 클라우드에 백업·공유하는 사이트(Microsoft 소유). 둘은 짝꿍이지만 다른 것.

git 명령
git init 이 폴더부터 git 시작 (한 번만)
git add . "바뀐 파일 전부 commit 후보로 올려"
git commit -m "회원가입 완성" 메시지 적고 한 컷 저장
git push GitHub에 백업 업로드
git log 과거 commit 역사 보기
🎨 생성 (Codex CLI) — git 시간여행 다이어그램. 가로 타임라인에 commit 5개 점(촬영 일지 비유) + "어제로 되돌리기" 화살표 + GitHub 클라우드 아이콘.
commit 한 번 = 그 시점으로 돌아올 수 있는 표지석.

스킬이 묻는 질문

질문 예시 답변
Q1: 본인은 글 쓸 때 한글/워드/노션 중 어느 게 익숙해요? "노션이요"
Q2: 검은 화면(터미널)을 본 적 있어요? 어떤 인상이었어요? "해커 영화에서… 무서웠어요"
Q3: 글 쓸 때 자동 백업(예: 구글 드라이브) 써요? "네, 그게 git 같은 거?"
Q4: 본인이 가장 두려운 코딩 사고는? "잘 되던 게 갑자기 안 됨"
Q5: 본인 OS는 Mac/Win/Linux? "맥북이요" 또는 "윈도우 노트북"
📷 캡쳐 — 스킬 Q&A 흐름 화면.

스킬 결과물 — 자가진단표

답변 끝에 스킬이 본인 친숙도 자가진단표를 만들어줘요. 이걸로 Ch.4-2 ~ Ch.4-3을 얼마나 천천히 갈지 결정해요.

자가진단표 (예시)

에디터 친숙도:    ★★☆☆☆ — 노션은 익숙, 코드 에디터 처음
터미널 친숙도:    ★☆☆☆☆ — 검은 화면 무서움
git 친숙도:       ★★☆☆☆ — 백업 개념은 익숙
권장 진행 속도:   Ch.4-2 ~ Ch.4-3을 하루씩 나눠서
                 매 단계 스크린샷 + 동영상 같이 보기
📷 캡쳐 — 스킬이 만든 본인 친숙도 자가진단표.

막히는 지점 — 미리 답

  • "VS Code랑 Antigravity 둘 다 깔아도 돼요?" → 됩니다. 다만 한 번에 하나만 쓰는 게 깔끔해요. LEARN은 Antigravity 권장.
  • "터미널 명령을 외워야 해요?" → 외울 필요 없어요. 위 5개만 알면 90%. 나머지는 AI에게 "ls 비슷한 거 뭐였더라" 물어보면 됨.
  • "git을 잘 안 써도 되지 않아요?" → 안 쓰면 위험해요. 코드가 늘면 어디서 잘못됐는지 못 찾고, 노트북 망가지면 다 날아가요. 매일 한 번 commit이 최소 안전선.
  • "GitHub 가입 비용 들어요?" → 무료. 본인 코드를 비공개(private)로 두는 것도 무료. Ch.4-13에서 가입.
  • "git을 깊게 배워야 하나요?" → 아니요. add → commit → push 이 3개 흐름만 알면 80%. 나머지는 AI가 해줘요.

다음 단계 → 1-4 AI 도구 + 비용 시뮬레이터

도구 친숙도가 잡혔으면 이번엔 AI 도구의 종류와 비용을 정리해요. claude.ai (웹) / Claude Desktop (앱) / Claude Code (터미널) / Claude API (코드에서 호출) — 4가지 차이와 본인 단계별 권장 + 월 비용 알람까지. /v1-discover 스킬을 호출해요.

실습하기

로그인하면 스킬을 실습할 수 있습니다