17강. GitHub Pages·Actions 맛보기 | 깃허브 사용법 18강 — Git & GitHub 협업 · 입문 — 누구나패스

🎯 학습 목표

이 강을 마치면 다음을 할 수 있습니다.

GitHub Pages를 설정해 HTML 또는 정적 사이트를 인터넷에 무료로 배포할 수 있습니다.
GitHub Actions의 핵심 개념(워크플로우, 트리거, 잡, 스텝)을 이해합니다.
YAML 파일로 간단한 CI 파이프라인을 직접 작성할 수 있습니다.
자동화가 왜 현대 개발에서 필수인지 이유를 설명할 수 있습니다.

🌐 GitHub Pages — 무료 정적 사이트 호스팅

이 섹션에서는 GitHub 저장소를 그대로 웹사이트로 공개하는 GitHub Pages의 개념과 설정 방법을 살펴보겠습니다.

GitHub Pages는 GitHub 저장소의 파일을 그대로 웹사이트로 호스팅해주는 무료 서비스입니다. 별도 서버 없이 HTML, CSS, JavaScript 파일만으로 username.github.io/repository 주소로 접근 가능한 사이트를 만들 수 있습니다.

GitHub Pages로 호스팅하기 좋은 것들입니다.

개인 포트폴리오 사이트
프로젝트 문서(Docusaurus, VitePress 등)
블로그(Jekyll, Hugo 등 정적 사이트 생성기)
간단한 랜딩 페이지
취업 포트폴리오용 온라인 이력서

단, GitHub Pages는 정적 사이트만 지원합니다. 서버사이드 렌더링, 데이터베이스, 서버 로직이 필요한 서비스는 Vercel, Netlify, Railway 같은 다른 플랫폼을 사용해야 합니다.

🚀 GitHub Pages 배포 — 단계별 설정

이 섹션에서는 간단한 HTML 파일부터 시작해 GitHub Pages를 실제로 설정하고 배포하는 과정을 살펴보겠습니다.

# 방법 1: main 브랜치의 root 또는 /docs 폴더에서 배포
# 1. 저장소에 index.html 생성
echo "<h1>Hello GitHub Pages!</h1>" > index.html
git add index.html
git commit -m "feat: GitHub Pages 초기 페이지"
git push

# 2. GitHub 웹에서 설정:
# 저장소 Settings → Pages → Source → main 브랜치 선택 → Save

# 3. 배포 완료 후 주소:
# https://username.github.io/repository-name/

# 방법 2: gh-pages 브랜치 사용 (React, Vue 빌드 결과물 배포에 적합)
# npm install -g gh-pages  (전역 설치)
# package.json scripts에 추가:
# "deploy": "gh-pages -d dist"  # Vite 빌드 결과 dist 폴더 배포
# npm run build && npm run deploy

처음 배포 후 사이트가 활성화되기까지 1~2분이 걸릴 수 있습니다. Settings → Pages 화면에서 배포 상태와 URL을 확인할 수 있습니다.

커스텀 도메인을 연결하면 username.github.io 대신 www.my-portfolio.com 같은 주소로 서비스할 수 있습니다. DNS 설정 + Pages Settings의 Custom domain에 입력하면 됩니다.

⚙️ GitHub Actions — 자동화의 세계

이 섹션에서는 GitHub Actions가 무엇이고 어떤 종류의 자동화를 실현할 수 있는지 살펴보겠습니다.

GitHub Actions는 GitHub 저장소에서 발생하는 이벤트(push, PR, 스케줄 등)에 반응해 사전 정의된 작업을 자동으로 실행하는 CI/CD 플랫폼입니다. GitHub 저장소에 완전히 통합되어 있어 별도 설정 없이 바로 사용할 수 있고, 공개 저장소는 무료입니다.

GitHub Actions로 자동화할 수 있는 것들입니다.

CI (Continuous Integration): push마다 자동으로 테스트·린트 실행, 버그를 main에 들어오기 전에 차단
CD (Continuous Deployment): main 머지 시 자동으로 Vercel·AWS·GCP에 배포
자동화 작업: 이슈에 자동으로 라벨 붙이기, 오래된 이슈에 자동 댓글, 정기적 데이터 업데이트
코드 품질: PR 생성 시 자동으로 코드 분석(SonarQube, CodeQL)

📋 GitHub Actions 핵심 개념

이 섹션에서는 GitHub Actions를 구성하는 핵심 요소들의 관계를 살펴보겠습니다.

GitHub Actions는 계층 구조로 이루어집니다.

Workflow(워크플로우): 자동화 전체 프로세스. 저장소의 .github/workflows/ 폴더에 YAML 파일로 정의
Trigger(트리거): 워크플로우를 실행하는 이벤트 (push, pull_request, schedule 등)
Job(잡): 워크플로우 안의 독립적인 작업 단위. 각 잡은 별도 가상 머신(Runner)에서 실행
Step(스텝): 잡 안의 개별 명령어. 순서대로 실행됨
Action: 재사용 가능한 스텝 단위. GitHub Marketplace에서 공개된 액션 활용 가능

🔧 간단한 CI 워크플로우 작성

이 섹션에서는 push와 PR이 발생할 때 자동으로 테스트를 실행하는 CI 워크플로우를 직접 작성해 보겠습니다.

워크플로우는 .github/workflows/ 폴더에 YAML 파일로 작성합니다. 파일명은 자유롭게 지을 수 있습니다.

# .github/workflows/ci.yml

name: CI  # 워크플로우 이름 (GitHub Actions 탭에 표시됨)

on:  # 트리거 — 언제 실행할지
  push:
    branches: [ main, develop ]  # main, develop 브랜치에 push 시
  pull_request:
    branches: [ main ]           # main으로 PR 생성·업데이트 시

jobs:
  test:  # 잡 이름
    runs-on: ubuntu-latest  # 실행 환경 (Ubuntu 최신 버전)

    steps:
      - name: 코드 체크아웃    # 스텝 이름 (Actions 탭에 표시)
        uses: actions/checkout@v4  # GitHub 제공 공식 액션

      - name: Node.js 설치
        uses: actions/setup-node@v4
        with:
          node-version: '20'   # Node.js 버전 지정
          cache: 'npm'         # npm 캐시 활성화 (빌드 속도 향상)

      - name: 의존성 설치
        run: npm ci            # npm install 대신 ci 사용 (lock 파일 엄격 준수)

      - name: 린트 실행
        run: npm run lint

      - name: 테스트 실행
        run: npm test

      - name: 빌드 테스트
        run: npm run build

이 파일을 저장소에 push하면 이후 모든 push와 PR에서 자동으로 실행됩니다. 테스트가 실패하면 GitHub UI에서 빨간 X가 표시되고, PR 페이지에서 병합을 차단할 수 있습니다.

📦 GitHub Marketplace — 공개 액션 활용

이 섹션에서는 다른 사람이 만들어 공개한 액션을 활용해 복잡한 자동화를 쉽게 구성하는 방법을 살펴보겠습니다.

GitHub Marketplace에는 수천 개의 공개 액션이 있습니다. Slack 알림, Docker 빌드, AWS 배포, 코드 커버리지 리포트 등 복잡한 작업도 몇 줄로 구성할 수 있습니다.

# 자주 쓰이는 공개 액션 예시

# Slack 알림 (배포 성공/실패 알림)
- name: Slack 알림
  uses: slackapi/slack-github-action@v1
  with:
    channel-id: 'dev-alerts'
    slack-message: "배포 완료: ${{ github.sha }}"
  env:
    SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}

# Codecov 코드 커버리지 업로드
- name: 코드 커버리지 업로드
  uses: codecov/codecov-action@v3

# Docker 이미지 빌드 및 푸시
- name: Docker Hub 로그인
  uses: docker/login-action@v3
  with:
    username: ${{ secrets.DOCKER_USERNAME }}
    password: ${{ secrets.DOCKER_PASSWORD }}

${{ secrets.SLACK_BOT_TOKEN }}과 같은 표현은 GitHub Secrets에 저장된 값을 참조합니다. API 키, 비밀번호 등 민감한 값은 저장소 Settings → Secrets에 저장하고 워크플로우에서 변수로 참조합니다.

📝 핵심 요약

17강에서 배운 내용을 정리해 보겠습니다.

기능	용도	제한
GitHub Pages	정적 사이트 무료 호스팅	정적 파일만 (서버 로직 불가)
GitHub Actions	CI/CD·자동화 파이프라인	공개 저장소 무료, 비공개는 월 2000분 무료

# GitHub Actions 파일 위치
.github/
└── workflows/
    ├── ci.yml         # CI 파이프라인
    ├── deploy.yml     # 배포 워크플로우
    └── cleanup.yml    # 정리 작업

GitHub Actions의 핵심: 이벤트(trigger) → 잡(job) → 스텝(step) 순서로 실행. YAML 문법으로 정의.

다음 강인 18강 — 정리와 다음 단계에서는 이 시리즈에서 배운 Git과 GitHub의 핵심을 총정리하고, 앞으로 어떤 순서로 실력을 쌓아가면 좋을지 로드맵을 제시합니다. 여정의 끝이자 새로운 시작입니다!

GitHub Pages·Actions 맛보기