홈페이지 기초 — 유튜브 따라하기

이 과정은 이런 과정이에요

이 과정은 누나IT 님의 영상을 보며 따라 하는 과정이에요. 영상은 유튜브 채널 누나IT의 「클로드로 홈페이지 만들기 코딩 없이 깃허브 배포까지」(11분 56초, 2026-08-27)이고, 강마다 해당 구간을 아래 영상 창으로 보여 줘요. 영상을 대신하는 글이 아니라, 영상을 어디서 어떻게 보고 따라 할지 안내하는 길잡이예요. 글은 영상의 말을 옮기지 않고 단계와 방법만 우리 말로 다시 정리했어요. 출처: 누나IT 채널.

영상이 쓰는 도구와 방식

• 만드는 곳: 클로드 채팅 화면의 아티팩트(Code 탭이 아니에요)
• 공개 방법: 결과를 HTML 파일로 내려받아 깃허브 저장소에 올리고 깃허브 페이지로 공개
• 정식 홈페이지로 키울 때(내 도메인, 여러 페이지)는 6강의 안내대로 Code 탭·버셀 쪽으로 이어가요

전체 흐름

강	영상 구간	한 줄 요약
1 준비	0:00~1:52	아티팩트 켜고 웹사이트 만들기 화면 열기
2 첫 홈페이지	1:52~3:34	소개 재료를 입력해 오른쪽 창에 홈페이지 만들기
3 스타일·사진	3:34~5:56	좋아하는 사이트 주소로 디자인 바꾸고 사진 넣기
4 공유와 내려받기	5:56~8:45	게시 링크의 한계, 틀 없는 HTML 파일 내려받기
5 깃허브 올리기	8:45~10:35	저장소 만들고 index.html 올리기
6 공개와 정리	10:35~11:52	깃허브 페이지로 주소 얻기, 다음 단계

실습 결과물

• 아티팩트로 만든 내 소개 홈페이지 1개(스타일·사진 반영)
• 내려받은 HTML 파일, 깃허브의 Public 저장소와 index.html
• 깃허브 페이지로 공개된 내 홈페이지 주소

준비물

것	설명
클로드 계정(웹)	영상은 무료로도 되지만 한도·이미지 문제가 있다고 해요. 유료가 더 안정적이라고 소개해요
구글 등 이메일 계정	깃허브 가입용. 비밀번호는 내가 직접 입력해요
소개할 재료	이름, 한 줄 소개, 링크, 사진 몇 장(공개해도 되는 것만)
시간	약 2.5시간(영상 12분 + 따라 하기)

먼저 보면 좋은 글

클로드 사용법 기초 · 클로드 활용법 · 깃 기초 · 깃허브 기초 · 버셀 기초

끝나면 할 수 있는 것

• 코딩 없이 클로드 아티팩트로 한 페이지 홈페이지를 만들고 고칠 수 있다
• 게시 링크와 HTML 내려받기의 차이를 설명할 수 있다
• 깃허브에 파일을 올리고 깃허브 페이지로 무료 공개할 수 있다
• 더 큰 홈페이지가 필요할 때 어디로 이어갈지 안다(홈페이지 만들기)