오토프로그5강: Git
말로 저장하고, 올리고, 되돌립니다
오늘 끝나면 이런 걸 갖게 돼요
4강에서 만든 홈페이지에 안전한 저장 지점이 생겨요. 잘못 바꿔도 저장한 상태로 돌아오고, 마지막에는 깃허브에도 보관합니다.
직접 입력할 터미널 명령어는 없어요. 4강에서 쓰던 test 폴더와 클로드 코드만 열어 주세요.
1. 지금 상태를 저장해요
게임에서 보스전을 앞두고 저장하듯, 홈페이지가 잘 보일 때 먼저 기록을 남겨요. Git(깃, 파일의 변경 기록을 저장하는 도구)이 이 일을 맡아요.
클로드에게 이렇게 말하세요.
지금 상태 저장해 줘.Git이 설치되어 있는지 확인해 줘. 없다면 설치 방법을 안내하고 내 승인을 기다려 줘.준비되면 이 폴더에서 Git 기록을 시작하고, 기본 작업 갈래(브랜치) 이름은 main으로 정해 줘.이미 Git 기록이 시작되어 있다면 현재 갈래 이름을 확인하고 main으로 맞춰 줘.저장할 파일을 먼저 보여 주고, 비밀번호나 인증 정보가 없는지 확인한 뒤"5강 실습 전 상태"라는 이름으로 저장해 줘.
Git 설치 창이나 컴퓨터 승인 화면이 열리면 직접 진행하세요. 이것만 직접 하시면 나머지는 클로드가 해요.
끝나면 "저장 기록을 보여 줘"라고 말하세요. 5강 실습 전 상태가 보이면 첫 저장을 마친 거예요.
2. 일부러 한 줄을 바꿔요
되돌리기를 확인하려면 저장 뒤에 변화가 하나 필요해요. 홈페이지 배경색만 바꿔 봅니다.
index.html의 배경색을 빨간색으로 바꿔 줘.다른 글과 구성은 건드리지 마.바꾼 뒤 브라우저에서 열어 줘.
화면이 빨간색으로 바뀌면 성공이에요. 이 변경은 아직 새 저장 지점으로 남기지 마세요.
3. 아까 저장한 때로 돌아가요
이제 세이브 파일을 불러오듯 이전 상태를 복원해요. 클로드에게 이렇게 말하세요.
아까 "5강 실습 전 상태"로 저장한 때로 돌아가 줘.지금 바뀐 내용을 먼저 보여 주고, 내 확인을 받은 뒤 index.html만 복원해 줘.다른 파일과 저장 기록은 건드리지 마.
확인 요청이 나오면 바뀌는 파일이 index.html인지 보고 승인하세요. 원래 배경색이 다시 보이면 저장과 복원 실습이 끝났어요.
4. 깃허브에 보관해요
지금까지의 기록은 내 컴퓨터에만 있어요. GitHub(깃허브, 코드와 기록을 온라인에 보관하는 곳)에 올리면 컴퓨터 밖에도 사본이 생겨요.
계정이 없다면 GitHub 가입에서 가입하세요. 가입과 로그인, 브라우저의 권한 승인은 직접 해야 해요. 이것만 직접 하시면 나머지는 클로드가 해요.
준비되면 클로드에게 이렇게 말하세요.
깃허브에 올려 줘.필요한 도구가 없으면 설치 방법을 안내하고 내 승인을 기다려 줘.내 계정에 새 저장소를 만들고 지금 홈페이지의 Git 기록을 연결해 줘.저장소를 공개할지 비공개로 둘지 먼저 물어봐 줘.브라우저 로그인이나 권한 승인이 필요하면 그 화면에서 멈춰서 알려 줘.승인이 끝나면 main 갈래의 저장 기록을 깃허브에 올려 줘.
로그인이나 승인 화면이 열리면 직접 완료하세요. 클로드가 알려 준 깃허브 주소에서 index.html이 보이면 온라인 보관도 끝났어요.
Git은 세 단계로 움직여요
방금 클로드가 처리한 일은 세 단계예요. 흐름만 알아두면 충분합니다.
- add(애드): 저장할 파일을 고릅니다.
- commit(커밋): 고른 파일을 이름과 함께 기록합니다.
- push(푸시): 기록을 깃허브로 보냅니다.
명령어를 외울 필요는 없어요. 기능 하나를 마칠 때마다 "지금 상태 저장해 줘"라고 말하세요.
클로드의 체크포인트와 Git은 무엇이 다른가요?
클로드 코드는 지시 전 상태를 체크포인트로 잠시 남겨요. 같은 대화에서 방금 한 작업을 되돌릴 때 편합니다.
Git의 커밋은 이름을 붙여 오래 보관하는 기록이에요. 프로젝트를 계속 만들 때는 Git 기록을 기준으로 돌아가는 편이 안전합니다.
언제 되돌리면 될까요?
새 기능을 넣은 뒤 잘 되던 화면까지 망가졌거나, 같은 문제를 세 번 고쳐도 풀리지 않을 때 저장한 시점으로 돌아가세요. 여러 수정이 겹쳤다면 잘 되던 상태에서 다른 방법을 시도하는 편이 낫습니다.
저장 지점이 많을수록 돌아갈 곳도 많아요. 작은 기능 하나가 제대로 움직일 때마다 저장해 두세요.
이 강의, 영상으로도 있어요
말로 저장하고 복원하는 화면을 그대로 보고 싶다면 영상을 따라 해보세요.
이런 분께 추천해요
홈페이지를 망가뜨릴까 봐 수정을 미루는 분, 잘 되던 상태로 돌아가고 싶은 분, 프로젝트를 컴퓨터 밖에도 보관하고 싶은 분께 필요해요.
참고 링크
다음 강
6강: 아이디어에서 기획까지에서는 일상의 불편을 골라 기획서(PRD, 제품 요구사항 문서)로 정리해요.