깃헙 베이스캠프 | 위니북스

깃헙으로 홈페이지 만들기

1. 깃헙 페이지스

GitHub Pages라는 것을 통해서 쉽게 웹 서비스를 만들 수 있습니다. 굳이 이런 챕터를 앞 부분에 추가한 이유는 디자이너나 기획자도 간혹 홈페이지를 직접 수정하고 싶을 때가 있기 때문입니다. 버튼에 문구 하나만 수정하면 되는데 요청하는 절차가 복잡하다던지, 자잘한 수정들이 보이는데 개발자 우선순위가 쌓여있어서 계속해서 밀린다던지 할 때 내가 코드를 직접 수정하여 배포하는 방법을 살펴봅니다. 다만, 직접 수정하기 전 꼭 개발자와 이 챕터 강의 URL을 주고 '3번 챕터'대로로 수정하면 되는 것인지 상의해보세요. 임의로 수정을 했다가 서버가 동작하지 않으면 큰 이슈가 될 수 있습니다.

2. 웹 페이지 만들기

웹은 HTML, CSS, JS로 되어 있습니다. 이것이 어떤 언어인지 간단하게 설명하자면 HTML은 뼈대, CSS는 피부, JS는 행위등을 나타냅니다.

이 언어로 홈페이지를 만들면 아래와 같은 구조가 됩니다. 이 파일을 컴퓨터에 .html 파일로 저장하면 웹 페이지에서 열 수 있는 파일이 됩니다. 우리의 목표는 홈페이지를 만드는 것이라기 보다는 만들어진 홈페이지를 수정하는 법을 배우기 위한 것이므로 컴퓨터에서 만들지 않고 .dev페이지에서 index.html이라는 파일로 만들어주도록 하겠습니다. 실습하던 레파지토리에서 .com을 .dev로 변경하셔서 아래 파일을 01-3챕터에서 했던 것처럼 업로드해주세요. 기억하셔야 할 것은 파일명이 index.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>
    <header>
        <h1>위니브 웹 서비스</h1>
    </header>
    <main>
        <section>
            <h2>위니브</h2>
            <p>위니브는 IT 분야에 다양한 콘텐츠를 제공합니다.</p>
        </section>
        <section>
            <h2>위니브의 서비스</h2>
            <p>위니북스, 위니브월드, 위니브SQL 등에 다양한 서비스를 제공합니다.</p>
        </section>
        <section class="contents">
        </section>
    </main>
    <footer>
        <p>&copy; 2025 weniv All rights reserved</p>
    </footer>
    <!-- script로 내용이 추가되는 경우 -->
    <script>
        const contents = document.querySelector('.contents');
        contents.innerHTML = '<h2>위니브 서비스 바로가기</h2><p>위니북스</p><button>바로가기</button>';
    </script>
</body>
</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>
    <header>
        <h1>위니브 웹 서비스</h1>
    </header>
    <main>
        <section>
            <h2>위니브</h2>
            <p>위니브는 IT 분야에 다양한 콘텐츠를 제공합니다.</p>
        </section>
        <section>
            <h2>위니브의 서비스</h2>
            <p>위니북스, 위니브월드, 위니브SQL 등에 다양한 서비스를 제공합니다.</p>
        </section>
        <section class="contents">
        </section>
    </main>
    <footer>
        <p>&copy; 2025 weniv All rights reserved</p>
    </footer>
    <!-- script로 내용이 추가되는 경우 -->
    <script>
        const contents = document.querySelector('.contents');
        contents.innerHTML = '<h2>위니브 서비스 바로가기</h2><p>위니북스</p><button>바로가기</button>';
    </script>
</body>
</html>

이렇게 만들어진 홈페이지는 실행시키면 아래와 같은 화면이으로 나옵니다. 다만, 지금은 실행시켜보지 않고 바로 배포를 해보도록 하겠습니다.

번호대로 클릭을 해주세요. 우측 상단의 Settings를 클릭하고 나온 좌측 메뉴에서 Pages를 클릭합니다. 중간에 Branch 항목이 있는데 여기서 main을 선택하고 save를 눌러주세요.

바로 서비스가 성성이 되지 않습니다. 보통 3분에서 길게는 20분까지 소요될 수 있는데요. 페이지를 새로고침 해가면서 아래 페이지가 뜨는지 확인해주세요. 아래 페이지가 떴다면 성공입니다.

생성된 주소는 http://<Github 계정 명>.GitHub.io/<레파지토리 이름> 으로 고정됩니다. 나중에 URL을 구매하셔서 URL을 변경할 수 있습니다. 이렇게 생성된 URL은 내가 아니더라도 누구나 접근할 수 있습니다.

3. 웹 페이지 수정하기

지금 거친 과정을 배포과정이라고 합니다. 이렇게 배포된 페이지는 대부분 GitHub을 수정하면 자동으로 수정이 되게 됩니다. 꼭 GitHub에서 배포가 되지 않았다 하더라도 자동으로 배포하는 시스템이 구축이 되어 있거든요. 이를 CI/CD라고 합니다. 우리에게 중요한 것은 GitHub에서 수정하면 배포된 페이지가 수정이 된다는 것입니다. 그렇지 않은 경우도 있으니 비개발자이신 분은 개발자 분에게 여쭤보세요.

이제 앞서 배운 것처럼 수정을 해보도록 하겠습니다. 다만 중요한 것이 권한입니다. 여러분이 권한이 없는 레파지토리는 .dev로 이동할 수는 있어도 여기서 수정하여 업로드(push)까지 할 수는 없습니다. 따라서 여러분이 레파지토리를 소유하지 않은 이상 먼저 개발자에게 해당 레파지토리에 저를 초청해주세요.라고 요청해주세요.

그 다음부터는 배운 것과 같습니다. 다만 우리가 아래와 같은 목적으로 왔다고 생각해볼게요.

위니브 페이지라는 제목을 위니브 홈페이지로 변경해주세요.
바로가기 버튼은 위니브 서비스 목록으로 바로가기로 변경해주세요.

여기서 말씀드리고 싶은 것이 2가지 있습니다.

파일은 .html 파일일 수도 있고, 다른 확장자일 수도 있습니다.
찾는 텍스트가 여러개로 나왔을 경우 여기를 수정하면 반영되나요?라고 개발자에게 물어봐주세요.
찾는 텍스트가 하나여도 이렇게 수정하고 푸쉬하면 될까요?라고 확인받아주세요.

예를 들어, 바로가기로 검색을 하면 아래와 같이 2가지가 검색이 됩니다. 여기서 검색된 것을 클릭해주시면 앞, 뒤 맥락을 보면서 내가 원하는 곳인지 아닌지를 판단할 수 있어요. 다만, 이렇게 검색을 하고 수정을 했어도 엉뚱한 곳을 수정하는 경우도 종종 있기 때문에 개발자에게 확인을 받는 것이 좋습니다. 그 이후로는 어떤 파일을 수정하면 될지 감이 잡히실겁니다.

이렇게 수정을 하고 커밋 및 푸쉬를 하면 수정이 반영이 됩니다. 이렇게 수정이 되었는지 확인을 위해 http://<Github 계정 명>.GitHub.io/<레파지토리 이름>로 접속해주세요.