HTML · CSS · JavaScript · React · Git
Git/GitHub · 개념 설명형 · 2026년 6월 23일 공개 · 2026년 8월 10일 검토

Git과 GitHub 차이 쉽게 정리

GitHub를 쓰면서 Git이 정확히 무엇인지 구분하지 못하는 상황

Git/GitHub Git과 GitHub 차이 쉽게 정리
  1. 문제 상황 확인
  2. 짧은 코드로 재현
  3. 브라우저에서 결과 점검
Git과 GitHub 차이 쉽게 정리를 실습할 때 확인할 흐름입니다.

Git과 GitHub 차이에서 먼저 볼 부분

Git은 변경 기록을 관리하는 도구이고, GitHub는 그 기록을 온라인에서 저장하고 협업하게 해주는 서비스입니다.

Git은 내 컴퓨터 안에서 파일 변경 이력을 기록합니다. 언제 무엇을 바꿨는지 되돌아볼 수 있게 해주는 버전 관리 도구입니다.

GitHub는 Git 저장소를 인터넷에 올려두는 공간입니다. 혼자 백업용으로 쓸 수도 있고, 팀원이 함께 코드를 검토하는 장소로 쓸 수도 있습니다.

초보자는 Git 명령어와 GitHub 화면을 한꺼번에 배우다 보니 헷갈리기 쉽습니다. 둘을 도구와 서비스로 나눠 생각하면 훨씬 단순해집니다.

로컬과 원격 흐름

git init
git add index.html
git commit -m "첫 페이지 추가"
git remote add origin https://github.com/user/repo.git
git push origin main

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

Git과 GitHub 차이 쉽게 정리 비교 기준

구분GitGitHub
정체버전 관리 도구저장소 호스팅 서비스
위치내 컴퓨터에서도 동작인터넷 서비스
주요 기능커밋, 브랜치푸시, PR, 이슈

잘못 작성했을 때 나타나는 흐름

Git 글은 명령어를 외우기보다 작업 전 상태, 기록할 파일, 원격 저장소 반영 순서로 나누어 보는 것이 좋습니다.

문제가 생겼을 때는 먼저 현재 브랜치와 변경 파일을 확인하고, 그다음 커밋 또는 원격 상태를 확인하는 순서가 안전합니다.

GitHub와 배포 글은 설정 화면과 DNS가 함께 얽히므로 한 번에 여러 설정을 바꾸기보다 하나씩 확인하는 편이 좋습니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

  • 내 컴퓨터 작업은 Git으로 기록하기
  • 온라인 백업은 GitHub에 push하기
  • 커밋 전 변경 파일을 확인하기
  • 저장과 커밋을 같은 의미로 착각하지 않기

작성 기준

AG FE Guide는 프론트엔드 입문자가 실제 학습 중 만나는 문제를 기준으로 예제와 확인 순서를 정리합니다. 본문은 공식 문서와 브라우저 동작 기준을 함께 참고해 주기적으로 검토합니다.