풀어쓰는 사회학 AI

홈
가이드

내 교구 모아두는 허브 사이트 만들기 | GitHub Pages 무료 — 교사용 포트폴리오

📌 이 글 요약

  • 교구가 많아지면 URL을 일일이 기억할 수 없습니다. 목록 페이지(허브)를 하나 만들면 해결됩니다.
  • 교구 이름 + 한 줄 설명 + 링크를 카드형으로 정리한 index.html 하나면 충분합니다.
  • GitHub Pages 저장소에 올리면 https://유저.github.io/저장소/로 바로 접속됩니다.
  • 새 교구가 생기면 index.html에 카드 하나만 추가하면 끝. 5분이면 완료.

교구가 10개 넘어가니까 관리가 안 되더라고요. 그래서 목록 페이지를 하나 만들었습니다.

처음엔 교구가 3~4개라 머릿속으로 URL을 기억할 수 있었어요. 그런데 한 학기 지나니까 10개가 넘었고, "저번에 만든 타이머 교구 주소가 뭐였지?"를 매번 GitHub에 들어가서 찾게 되더라고요. 학생들한테 공유할 때도 매번 주소를 찾아서 복사하는 게 번거로웠습니다.

그래서 내 교구를 한 곳에 모아두는 목록 페이지를 만들었습니다. 일종의 "교구 포트폴리오"예요. 이 페이지 주소 하나만 기억하면 모든 교구에 접근할 수 있습니다.

교구가 많아지면 허브가 필요합니다

GitHub Pages에 교구를 올리면 파일마다 고유 URL이 생깁니다. 편리하죠. 하지만 교구가 늘어날수록 이런 문제가 생겨요.

상황 불편한 점
교구 URL이 10개 이상어디에 적어뒀는지 기억이 안 남
학생에게 공유할 때매번 GitHub에 접속해서 주소 복사
동료 선생님에게 보여줄 때카톡으로 링크를 여러 개 보내야 함
새 학기에 다시 쓸 때"작년에 만든 그 교구 어디 갔지?"

해결책은 간단합니다. 내 교구 목록이 담긴 HTML 페이지 하나를 만들어서 저장소 최상위에 index.html로 올리면 됩니다. GitHub Pages는 index.html을 자동으로 메인 페이지로 인식하기 때문에, 저장소 주소만 입력하면 바로 이 목록이 뜹니다.

index.html 만들기

허브 페이지의 구조는 단순합니다. 교구 이름 + 한 줄 설명 + 링크가 있는 카드를 나열하면 끝이에요. 아래는 바로 복사해서 쓸 수 있는 예시 코드입니다.

✅ 핵심 포인트

  • 파일 이름은 반드시 index.html로 저장하세요.
  • 카드 안의 링크(href)를 내 실제 교구 URL로 바꾸면 됩니다.
  • 카드 개수는 자유롭게 추가하거나 줄일 수 있어요.

예시 코드: 카드형 교구 목록

아래 코드를 통째로 복사해서 index.html로 저장하세요. 메모장에 붙여넣고 "다른 이름으로 저장" → 파일 형식을 "모든 파일"로 바꾼 뒤 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>
  <style>
    :root {
      --primary: #2196F3;
      --bg: #f5f7fa;
      --card-bg: #ffffff;
      --text: #1e1e1e;
      --sub: #666;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Noto Sans KR', sans-serif;
      background: var(--bg);
      color: var(--text);
      padding: 40px 20px;
    }
    h1 { text-align: center; font-size: 26px; margin-bottom: 8px; }
    .subtitle { text-align: center; color: var(--sub); margin-bottom: 36px; }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      max-width: 900px;
      margin: 0 auto;
    }
    .card {
      background: var(--card-bg);
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      padding: 24px;
      transition: box-shadow 0.2s;
    }
    .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
    .card h2 { font-size: 18px; margin-bottom: 8px; }
    .card p  { font-size: 14px; color: var(--sub); margin-bottom: 16px; }
    .card a  {
      display: inline-block;
      background: var(--primary);
      color: #fff;
      text-decoration: none;
      padding: 8px 18px;
      border-radius: 6px;
      font-size: 14px;
    }
    .card a:hover { opacity: 0.85; }
  </style>
</head>
<body>

  <h1>🎯 김 선생님의 교구 모음</h1>
  <p class="subtitle">수업에서 바로 쓰 수 있는 HTML 교구 모음입니다.</p>

  <div class="grid">

    <div class="card">
      <h2>⏱️ 발표 타이머</h2>
      <p>조별 발표 시간을 재는 타이머. 종소리와 함께.</p>
      <a href="timer.html">열기 &rarr;</a>
    </div>

    <div class="card">
      <h2>🎲 단어 멀칭 퍼즐</h2>
      <p>영어 단어와 뜻을 매칭하는 카드 게임.</p>
      <a href="word-match.html">열기 &rarr;</a>
    </div>

    <div class="card">
      <h2>📑 형성 평가 퀴즈</h2>
      <p>수업 중 바로 풀고 결과를 확인할 수 있는 퀴즈.</p>
      <a href="quiz.html">열기 &rarr;</a>
    </div>

    <div class="card">
      <h2>🎲 룸렛 돌림판</h2>
      <p>발표자 선정이나 보상에 사용하는 돌림판.</p>
      <a href="roulette.html">열기 &rarr;</a>
    </div>

    <div class="card">
      <h2>📊 투표 도구</h2>
      <p>학생 의견을 실시간으로 수집하는 간단 투표.</p>
      <a href="poll.html">열기 &rarr;</a>
    </div>

  </div>

</body>
</html>

💡 Tip: 코드에서 김 선생님 부분을 본인 이름으로, 각 카드의 href를 실제 교구 파일 이름으로 바꾸면 바로 사용할 수 있습니다.

코드 구조 설명

부분 역할
:root { --primary: ... }CSS 변수로 색상을 한 곳에서 관리. 색을 바꾸고 싶으면 여기만 수정.
.grid반응형 그리드. 화면 크기에 따라 카드가 자동으로 1~3열로 배치됩니다.
.card교구 하나에 해당하는 카드. 제목 + 설명 + 링크 버튼으로 구성.
href="timer.html"같은 저장소 안의 파일이라 파일 이름만 적으면 됩니다.

GitHub에 올리기

index.html을 만들었으면 기존 저장소에 업로드합니다. 교구 파일을 올렸던 것과 동일한 방법이에요.

✅ 따라하기

  1. 교구들이 올라가 있는 GitHub 저장소에 들어갑니다.
  2. "Add file" → "Upload files"를 클릭합니다.
  3. 방금 만든 index.html 파일을 드래그앤드롭합니다.
  4. Commit 메시지에 허브 페이지 추가 정도로 적어줍니다.
  5. 초록색 "Commit changes" 버튼을 클릭합니다.

⚠️ 주의: 이미 저장소에 index.html이 있다면 덮어씌워집니다. 기존 index.html이 있는 경우, 먼저 백업해 두세요.

접속 확인하기

GitHub Pages가 이미 활성화되어 있다면, index.html을 올리고 1~2분 후 자동으로 반영됩니다.

https://유저이름.github.io/저장소이름/

위 주소로 접속하면 index.html은 파일 이름을 붙이지 않아도 자동으로 열립니다. 즉, 아래 두 주소는 같은 페이지를 보여줍니다.

  • https://math-teacher-kim.github.io/my-tools/ ← 이것만 기억하면 됨
  • https://math-teacher-kim.github.io/my-tools/index.html ← 같은 결과

이 주소 하나만 기억하면 모든 교구에 접근할 수 있습니다. 카카오톡이나 밴드에 이 주소 하나만 공유하면, 학생들은 목록에서 원하는 교구를 골라 클릭할 수 있어요.

✅ 확인 방법

  1. 브라우저 주소창에 위 주소를 입력합니다.
  2. 카드형 목록이 뜨면 성공입니다.
  3. 각 카드의 "열기" 버튼을 클릭해서 교구가 잘 열리는지 확인합니다.
  4. 안 뜨면 1~2분 후 새로고침하세요. (GitHub Pages 배포 대기 시간)

💡 팁: 새 교구 추가할 때

새 교구를 만들었을 때 할 일은 딱 두 가지입니다.

1️⃣

교구 파일 업로드

새 HTML 파일을 같은 저장소에 올립니다.

2️⃣

index.html에 카드 추가

index.html을 열어 카드를 하나 복사→붙여넣기→내용 수정.

추가할 카드 코드는 아래와 같습니다. 기존 카드를 복사해서 제목, 설명, 링크만 바꾸면 됩니다.

<div class="card">
  <h2>🎨 새 교구 이름</h2>
  <p>교구에 대한 한 줄 설명을 적으세요.</p>
  <a href="new-tool.html">열기 &rarr;</a>
</div>

이걸 <div class="grid"> 안에 넣으면 자동으로 그리드에 배치됩니다. GitHub에서 파일을 직접 수정할 수도 있어요. (파일 클릭 → 연필 아이콘 → 편집 → Commit)

💡 디자인 팁: CSS 변수와 반응형 그리드

위 예시 코드에는 두 가지 디자인 기법이 들어 있습니다. 둘 다 교사가 쉽게 활용할 수 있는 수준이에요.

CSS 변수로 색상 통일하기

코드 맨 위에 있는 :root 부분이 CSS 변수입니다. 여기서 색상 값을 바꾸면 페이지 전체의 색이 한꺼번에 바뀝니다.

  • --primary: #2196F3 → 버튼 색상 (파란색)
  • --bg: #f5f7fa → 배경 색상 (연한 회색)
  • --card-bg: #ffffff → 카드 배경 (흰색)

예를 들어, 버튼을 초록색으로 바꾸고 싶으면 --primary: #4CAF50으로만 바꾸면 됩니다.

반응형 그리드로 자동 배치

grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))이 핵심입니다.

  • PC: 카드가 3열로 나란히 배치
  • 태블릿: 2열로 자동 조정
  • 스마트폰: 1열로 세로 정렬

별도 미디어 쿼리 없이도 모든 기기에서 깔끔하게 보입니다.

🎯 전체 흐름 정리

Step 1index.html 만들기 (카드형 교구 목록)
Step 2기존 GitHub 저장소에 업로드
Step 3https://유저.github.io/저장소/ 로 접속 확인
이후새 교구 추가 시 index.html에 카드만 추가

교구 10개 이상 관리하면서 URL을 일일이 기억하는 건 비효율적입니다. 허브 페이지 하나로 정리하면, 나도 편하고 학생들도 편합니다. 한 번 만들어두면 매 학기 재활용할 수 있으니, 오늘 바로 시작해 보세요.

현직 고교 교사가 전하는 통합사회·경제의 정석. 고퀄리티 수업 PPT와 HTML 시뮬레이션 교구, 생생한 여행 기록을 통해 사회를 풀어냅니다.