AI에게 물어본 것을 마크다운으로 정리해 강의 자료 만들기

소개

너무 자주 바뀌는 UI 때문에 강의 자료 만들기가 너무 힘들었는데요.

마크다운으로 만들어 놨다가 그 때 그 때 변경사항만 수정해서 제공하면 어떨까 하는 생각을 하게 되었습니다.

지난 스터디에서 구글 사이트를 사용해보라고 하셨는데 도저히... 사용법을 모르겠어서 GitHub를 세팅하기로 했습니다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

claude에 GitHub 서비스를 어떻게 하는지 물어봤습니다.

Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.

저장폴더는 이미 만들어져 있어서 파일 업로드부터 깃허브 주소 어떻게 생성하는지 이런걸 자세히 물어봤습니다.

이렇게 막힐 때마다 다 물어봤습니다.

Upload files를 선택하라는데 안 보여서 스크린샷 찍어서 보여주고 찾아달라고 하고 계속 물어봤습니다. 될 때까지 물어봤어요.

그리고 내용을 다 저장해서 마크다운으로 만들었습니다.

Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.

뭘 모르는지 어떤 단계에서 문제가 생기는지 사진을 찍어 올리니까 좀 더 정확한 도움을 받을 수 있었습니다. 알면서도 질문은 항상 부족하게 보내는 것인지...

Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GitHub Pages 가이드</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
      background: #f6f8fa;
      color: #24292f;
      line-height: 1.7;
      padding: 40px 20px;
    }

    .container {
      max-width: 760px;
      margin: 0 auto;
      background: #ffffff;
      border: 1px solid #d0d7de;
      border-radius: 12px;
      padding: 40px 48px;
    }

    h1 {
      font-size: 1.6rem;
      font-weight: 700;
      color: #0969da;
      border-bottom: 2px solid #d0d7de;
      padding-bottom: 10px;
      margin: 36px 0 16px;
    }

    h1:first-child { margin-top: 0; }

    p { margin-bottom: 12px; }

    strong { font-weight: 600; }

    ol, ul {
      padding-left: 24px;
      margin-bottom: 14px;
    }

    li { margin-bottom: 6px; }

    code {
      background: #f6f8fa;
      border: 1px solid #d0d7de;
      border-radius: 4px;
      padding: 2px 6px;
      font-family: 'Consolas', 'Courier New', monospace;
      font-size: 0.88em;
      color: #cf222e;
    }

    pre {
      background: #f6f8fa;
      border: 1px solid #d0d7de;
      border-radius: 8px;
      padding: 16px 20px;
      margin: 14px 0;
      overflow-x: auto;
    }

    pre code {
      background: none;
      border: none;
      padding: 0;
      color: #24292f;
      font-size: 0.9em;
    }

    .step-block {
      background: #f6f8fa;
      border-left: 4px solid #0969da;
      border-radius: 0 8px 8px 0;
      padding: 16px 20px;
      margin: 16px 0;
    }

    .step-block .step-title {
      font-weight: 700;
      font-size: 1rem;
      margin-bottom: 8px;
      color: #0969da;
    }

    .tip {
      background: #dff7e3;
      border: 1px solid #75d6a3;
      border-radius: 8px;
      padding: 14px 18px;
      margin: 16px 0;
      font-size: 0.95em;
      color: #1a7f4b;
    }

    .tip strong { color: #1a7f4b; }

    a {
      color: #0969da;
      text-decoration: none;
    }

    a:hover { text-decoration: underline; }

    hr {
      border: none;
      border-top: 1px solid #d0d7de;
      margin: 20px 0;
    }

    blockquote {
      background: #fff8c5;
      border-left: 4px solid #f0b72f;
      border-radius: 0 8px 8px 0;
      padding: 12px 18px;
      margin: 16px 0;
      color: #6e5100;
      font-size: 0.95em;
    }
  </style>
</head>
<body>
  <div class="container">

    <h1>GitHub 세팅</h1>

    <p><strong>실제 웹페이지로 접속하는 주소 (GitHub Pages)</strong><br>
    HTML을 실제 웹사이트처럼 열려면 <strong>GitHub Pages</strong>를 활성화해야 해요.</p>

    <p>활성화 방법:</p>
    <ol>
      <li>저장소 → <strong>Settings</strong> → <strong>Pages</strong></li>
      <li>Source를 <code>main</code> 브랜치로 설정 후 저장</li>
    </ol>

    <p>그러면 주소가 이렇게 생성돼요:</p>
    <pre><code>https://유저명.github.io/저장소명/

https://luriluan0-a11y.github.io/gameContents</code></pre>

    <p><code>index.html</code>은 기본 파일이라 파일명 없이 위 주소로 바로 접속돼요.</p>

    <hr>

    <h1>GitHub 활성화하기</h1>

    <p>Source를 main 브랜치로 설정 후 저장했는데 안 될 때는 저장소에 <strong>파일이 아직 없어서</strong> 그래요! 빈 저장소엔 GitHub Pages가 작동하지 않아요.</p>

    <p><strong>순서가 이래야 해요 👇</strong></p>

    <div class="step-block">
      <div class="step-title">① 먼저 index.html 파일 업로드</div>
      <p>화면 중간에 <strong>uploading an existing file</strong> 링크가 보이죠? 그걸 클릭해요!</p>
      <p>그다음 만든 <code>portfolio.html</code> 파일을 <strong><code>index.html</code></strong>로 이름 바꾼 뒤 업로드 → <strong>Commit changes</strong> 클릭</p>
    </div>

    <div class="step-block">
      <div class="step-title">② 파일 업로드 확인 후 GitHub Pages 설정</div>
      <p>파일이 저장소에 올라간 걸 확인하고 나서</p>
      <p><strong>Settings → Pages → Branch: main → Save</strong></p>
    </div>

    <div class="step-block">
      <div class="step-title">③ 잠깐 기다리면 주소 생성!</div>
      <p>1~2분 후 이 주소로 접속하면 돼요:</p>
      <p><a href="https://luriluan0-a11y.github.io/HTML_source/" target="_blank">https://luriluan0-a11y.github.io/HTML_source/</a></p>
    </div>

    <div class="tip">
      💡 <strong>핵심은 순서예요!</strong> 파일 먼저 → Pages 설정 나중. 파일 없이 Pages 설정하면 배포가 안 돼요 😊
    </div>

    <hr>

    <h1>GitHub 폴더 만들기</h1>

    <p>GitHub는 <strong>빈 폴더를 만들 수 없어요.</strong> 파일을 넣어야 폴더가 생겨요!</p>

    <p><strong>방법: 파일 이름 앞에 폴더명을 써주면 돼요</strong></p>
    <ol>
      <li>저장소에서 <strong>Add file → Create new file</strong> 클릭</li>
      <li>파일 이름 입력란에 이렇게 입력해요:</li>
    </ol>

    <pre><code>폴더명/파일명.txt</code></pre>

    <p>예시:</p>
    <pre><code>images/README.md
css/style.css
js/script.js</code></pre>

    <ol start="3">
      <li><code>/</code> 를 입력하는 순간 자동으로 폴더가 만들어져요! ✨</li>
      <li>파일 내용을 아무거나 입력하고 <strong>Commit changes</strong> 클릭</li>
    </ol>

    <hr>

    <p><strong>웹 업로드로 폴더째 올리는 방법</strong></p>
    <ol>
      <li><strong>Add file → Upload files</strong> 클릭</li>
      <li>내 컴퓨터에서 <strong>폴더 자체를 드래그 앤 드롭</strong></li>
      <li>폴더 안의 파일들이 그대로 올라가요</li>
    </ol>

    <blockquote>
      💡 폴더 안에 파일이 하나도 없으면 GitHub에서 폴더가 사라져요. 항상 파일이 최소 1개 있어야 해요!
    </blockquote>

  </div>
</body>
</html>

결과와 배운 점

배운 점과 나만의 꿀팁을 알려주세요.

뭘 모르고, 어느 단계에서 문제가 생겼는지 정확히 알려주는 것이 중요하다는 것을 깨닫게 되었습니다.

과정 중에 어떤 시행착오를 겪었나요?

질문을 단계적으로 해야 하는데 이것저것 물어보니 정리가 잘 되지 않았습니다. 한 번에 하나씩 단계적으로 처리하는 것이 좋겠다는 생각을 해 보았습니다.

강의 자료를 만들어서 깃허브를 통해 링크를 걸어서 전달하니 무척 편했습니다.

실습을 위해서 프롬프트를 공유해야 하는 경우가 있는데 이런 경우를 대비해서 코드를 짜 달라고 하는 것이 필요하다는 생각이 들어서 다음에 시도해 볼 예정입니다.

🔥<24기 AI 스터디> 9/21 모집 마감 🔥

AI에게 물어본 것을 마크다운으로 정리해 강의 자료 만들기

소개

진행 방법

결과와 배운 점

온·오프라인 AI 스터디