이 장에서는 3장에서 잠시 실습해본 GitHub의 역할과 활용을 상세히 다룹니다. 저장소 생성부터 배포 확인까지 전 과정을 따라해 볼 수 있습니다. 이번에는 파일을 손으로 하나씩 올리는 대신 Code 탭에 시켜서 올려봅니다. 뒤에 다룰 백엔드에서도 GitHub은 필수로 쓰이니 꼼꼼하게 읽고 실습해 보시길 권합니다.

1. GitHub 이해하기

1.1 GitHub이란?

GitHub은 전 세계 개발자들이 코드를 저장하고 공유하는 가장 큰 플랫폼입니다. 2018년 마이크로소프트가 인수했으며, 현재 1억 명 이상의 개발자가 사용하고 있습니다. 거의 모든 개발자가 사용하는 서비스이기 때문에 생태계가 활발하고, 다양한 도구가 GitHub과 연동됩니다. 개발자가 아니더라도 무언가를 만들어 인터넷에 올리려면 한 번은 만나게 되는 서비스입니다.

GitHub을 이해하기 위해 간단한 비유를 들어보겠습니다. 쉽게 표현하자면 GitHub은 '시간여행이 가능한 구글 드라이브'입니다.

구글 드라이브에 파일을 올리듯이, GitHub에는 코드를 올립니다. 다만 GitHub은 단순 저장을 넘어서 누가, 언제, 무엇을 수정했는지 모든 기록이 남습니다. 이것이 바로 '버전 관리'입니다.

1.2 왜 GitHub에 코드를 올릴까?

GitHub을 사용하는 이유는 크게 다섯 가지입니다.

1.2.1 백업과 복구

컴퓨터가 고장 나도 GitHub에 올려둔 코드는 안전합니다. 언제든 다시 다운로드받을 수 있습니다.

1.2.2 버전 관리

코드에서 중대한 에러가 발생하거나, 단순 변심으로 되돌리고 싶을 때에도 GitHub의 버전을 사용할 수 있습니다. GitHub은 모든 수정 기록을 저장하기 때문에 언제든 과거 버전으로 돌아갈 수 있습니다. 3장에서 본 Code 탭의 /rewind가 한 대화 안에서 되돌리는 기능이라면, GitHub은 날짜를 넘겨서도 되돌릴 수 있는 기록입니다.

1.2.3 협업

여러 사람이 동시에 같은 프로젝트를 작업할 수 있습니다. 누가 어떤 부분을 수정했는지 충돌 없이 관리됩니다. 따라서 아래처럼 결과보고서를 여러 개로 작업할 필요가 없습니다.

좀 더 고급 기능으로 아래와 같은 Project 보드 등도 제공하여 협업을 도와줍니다.

1.2.4 포트폴리오

GitHub 프로필은 만든 것을 모아 두는 이력서와 같습니다. 어떤 프로젝트를 했는지, 얼마나 꾸준히 만들었는지 한눈에 볼 수 있어서 취업이나 이직, 협업 제안을 받을 때 중요한 자료가 됩니다. 이러한 포트폴리오를 GitHub Pinned로 고정시켜 보여줄 수도 있습니다. 특히 Pinned 저장소 아래 있는 초록색으로 표시된 부분을 'GitHub 잔디'라고 부르며, 얼마나 꾸준히 활동했는지를 나타내는 지표로 활용됩니다.

1.2.5 배포

배포를 할 때에도 GitHub을 사용합니다. 앞서 해본 GitHub Pages도 있지만, GitHub에 코드를 올리면 자동으로 감지하여 원하는 서버에 배포하는 다양한 서비스와 연동할 수 있습니다. 머메이드로 그리자면 다음과 같습니다. 추후에는 GitHub Pages 말고도 아래 그림처럼 별도 서버에 배포할 것이기 때문에 GitHub 사용법을 익혀두는 것이 좋습니다.

1.3 GitHub Pages란?

GitHub Pages는 GitHub 저장소에 올린 웹페이지 파일에 URL을 부여하여 인터넷에 공개해주는 무료 서비스입니다. 일반적으로 웹사이트를 인터넷에 공개(배포)하려면 다음과 같은 과정이 필요합니다.

하지만 GitHub Pages를 사용하면 이 모든 과정이 단순해집니다.

2. Code 탭으로 만들고 GitHub Pages로 배포하기

3장에서는 웹 브라우저에서 만든 index.html 하나를 GitHub 화면에 끌어다 놓아 배포했습니다. 이번에는 조금 다른 방식입니다. 페이지가 여러 개인 작은 사이트를 Code 탭에 시켜서 만들고, 올리는 것까지 Code 탭에 맡깁니다. 그리고 배포하며 주의해야 할 사항도 함께 살펴봅니다.

2.1 만들 구조 정하기

이번에 만들 구조는 다음과 같습니다. 메인 페이지 하나와 메뉴 페이지 두 개입니다.

menu/
├── index.html      (메인 페이지)
├── a/
│   └── index.html  (A 메뉴 페이지)
└── b/
    └── index.html  (B 메뉴 페이지)

일부러 이렇게 폴더를 나눈 이유가 있습니다. 이 구조를 통해 웹사이트에서 폴더와 URL이 어떻게 연결되는지 이해할 수 있기 때문입니다. 지금은 구조만 눈에 익혀 두세요.

2.2 Code 탭에 만들게 하기

바탕화면에 menu라는 폴더를 만들고, Code 탭에서 폴더 선택으로 이 폴더를 지정합니다. 3장에서 한 것과 같습니다. 그리고 아래 요청을 붙여 넣습니다.

이 폴더에 아주 단순한 메뉴 사이트를 만들어줘.

- 최상위에 index.html: 제목은 '메인 페이지입니다', 아래에 'A 페이지로 이동', 'B 페이지로 이동' 링크
- a 폴더 안에 index.html: 제목은 'A 페이지입니다', '메인으로 돌아가기', 'B 페이지로 이동' 링크
- b 폴더 안에 index.html: 제목은 'B 페이지입니다', '메인으로 돌아가기', 'A 페이지로 이동' 링크
- 링크는 모두 상대 경로로 써줘. 나중에 GitHub Pages에 올릴 거야.
- 디자인은 넣지 말고 HTML만. CSS, JavaScript 파일은 만들지 마.

작업이 끝나면 폴더를 열어 파일 세 개가 위 구조대로 생겼는지 확인합니다. 최상위 index.html을 더블클릭해 브라우저로 열고, 링크를 눌러 A 페이지와 B 페이지로 오가는지도 눌러 보세요. 이렇게 만든 뒤 바로 열어서 눌러 보는 습관이 10장에서 다룰 검토의 시작입니다.

Claude가 만든 메인 페이지는 대략 아래와 같은 모양입니다. 지금 이 코드를 읽을 필요는 없습니다. href 뒤에 ./a/처럼 폴더 이름이 들어 있다는 것만 보이면 충분합니다. 8장에서 HTML을 다룰 때 다시 만납니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>메인 페이지</title>
</head>
<body>
    <h1>메인 페이지입니다</h1>
    <nav>
        <a href="./a/">A 페이지로 이동</a> |
        <a href="./b/">B 페이지로 이동</a>
    </nav>
</body>
</html>

a 폴더 안의 페이지에서는 링크가 ../로 시작합니다. ..은 한 단계 위 폴더라는 뜻입니다. a 폴더에서 한 단계 올라가면 최상위이니 메인으로 돌아가고, 거기서 다시 b 폴더로 들어가는 식입니다.

<nav>
    <a href="../">메인으로 돌아가기</a> |
    <a href="../b/">B 페이지로 이동</a>
</nav>

2.3 GitHub에 빈 저장소 만들기

이제 올릴 자리를 만듭니다. 3장에서 한 것과 같은 순서입니다. GitHub에 로그인하고 오른쪽 위 + 버튼에서 New repository를 누릅니다. 저장소 이름은 menu, 공개(Public)로 두고, 이번에는 README.md 체크를 하지 않은 채 Create repository를 누릅니다. 빈 저장소여야 Code 탭이 올릴 때 충돌이 없습니다.

저장소가 만들어지면 주소창에 https://github.com/여러분아이디/menu 같은 주소가 보입니다. 이 주소를 복사해 두세요.

2.4 Code 탭에 올리게 하기

다시 Code 탭으로 돌아와, 같은 대화에서 아래처럼 요청합니다. 주소는 방금 복사한 것으로 바꿉니다.

이 폴더를 GitHub 저장소 https://github.com/여러분아이디/menu 에 올려줘.
처음 올리는 거고, 브랜치 이름은 main으로 해줘.
올린 다음 저장소 주소를 알려줘.

Claude가 Git 명령을 여러 개 실행하는 과정이 화면에 흘러갑니다. git init, git add, git commit, git push 같은 단어가 보일 텐데, 읽지 않아도 됩니다. 명령을 실행해도 되는지 물어보면 수락합니다.

처음 올릴 때는 GitHub 로그인 창이 따로 뜹니다. Windows는 'Git Credential Manager'라는 작은 창이, 맥은 브라우저 창이 열리며 GitHub 계정으로 로그인하라고 합니다. 브라우저로 로그인하는 항목을 고르고 로그인하면 됩니다. 한 번 로그인하면 이후에는 묻지 않습니다.

올리기가 끝났다는 답이 오면 GitHub 저장소 페이지를 새로고침해서 확인합니다. 확인할 것은 세 가지입니다.

• index.html 파일과 a, b 폴더가 보이는가
• a 폴더를 눌러 들어가면 그 안에 index.html이 있는가
• 올릴 생각이 없던 파일이 함께 올라가지는 않았는가. 예를 들어 .claude 폴더나 실습과 무관한 파일이 보이면 ".claude 폴더는 GitHub에서 빼줘"라고 요청합니다.

2.5 GitHub Pages 활성화하기

이 단계는 3장에서 진행했던 것과 같습니다. 저장소의 Settings 탭으로 이동합니다.

1. Settings 클릭
2. Pages 클릭
3. None 버튼 클릭
4. main 브랜치 선택
5. Save 클릭

약 2 ~ 3분 정도 기다리고 페이지 새로고침을 해보면 아래와 같이 배포된 URL이 나타납니다. 클릭해보세요.

이제 다음과 같은 URL로 각 페이지에 접속할 수 있습니다.

배포된 주소에서도 링크 세 개를 모두 눌러 보세요. 내 컴퓨터에서는 되던 링크가 인터넷에 올린 뒤 깨지는 일이 종종 있습니다. 대부분 링크 주소가 절대 경로로 쓰였기 때문인데, 그럴 때는 Code 탭에 "GitHub Pages에 올렸더니 A 페이지 링크가 안 열려. 주소가 https://사용자이름.github.io/menu/야. 고쳐서 다시 올려줘."라고 상황과 주소를 함께 알려 주면 됩니다.

2.6 고친 뒤 다시 올리기

한 번 올린 뒤에 고칠 일이 생기면 흐름은 더 짧습니다. Code 탭에서 수정을 요청하고, 브라우저로 열어 확인한 다음, "고친 내용을 GitHub에 올려줘"라고 하면 됩니다. GitHub Pages는 새로 올라온 내용을 감지해 1 ~ 2분 안에 자동으로 다시 배포합니다.

메인 페이지 제목을 '우리 동네 메뉴판'으로 바꿔줘.
확인했으니 GitHub에 올려줘.

이 세 단계, 고치고, 열어 보고, 올리기가 앞으로 이 책에서 반복할 기본 리듬입니다.

3. 커스텀 도메인 연결하기

GitHub Pages는 커스텀 도메인 연결도 지원합니다. 'myname.com' 같은 자신만의 도메인을 구매했다면, 이를 GitHub Pages와 연결할 수 있습니다. Pages 설정에서 'Custom domain' 란에 도메인을 입력하고, 도메인 제공업체에서 DNS 설정을 조정하면 됩니다. 단계별로는 아래와 같습니다.

1. Custom Domain 구입(Cafe24, 가비아 등)
2. GitHub Pages 설정에서 도메인 입력
3. 도메인 제공업체에서 DNS 설정 변경
   • A 레코드: 185.199.108.153 주소로 설정
   • CNAME 레코드: 사용자이름.github.io로 설정
4. 변경사항 저장 및 전파 대기(30분에서 1시간 소요될 수 있음)

3번 같은 경우 도메인 제공업체마다 설정 방법이 다르므로, 해당 업체의 가이드를 참고하는 것이 좋습니다. 이미지는 Cafe24의 예시입니다. DNS 관리 페이지에서 A 레코드와 CNAME 레코드를 추가하는 모습입니다.

실제 연결하는 실습은 5.5장에서 진행합니다. 위 설명으로 충분한 이해가 되셨다면 넘어가셔도 좋습니다.