말로 만드는 홈페이지

내 가게 홈페이지를
내 말로 만들어요

컴퓨터에서 만들고 두 기기에서 확인해요.
사진과 정보가 준비되면 하루 안 첫 주소에 도전합니다.

따뜻한 가게 안에서 노트북으로 홈페이지를 살펴보는 소상공인
내 가게 정보를 내 손에 둡니다.

시작

완성은 이 정도면
충분합니다

내 가게 주소가
컴퓨터와 휴대전화에서
모두 열립니다.

완성 기준가게 소개·연락 방법·사진이 실제 사실대로 보입니다.도메인 없이도실제아이디.github.io 주소로 완성할 수 있어요.

시작

이 순서로
첫 주소를 만들어요

가게 정보, AI 대화, 홈페이지 파일, 공개된 브라우저 화면이 차례로 이어진 네 장면
① 가게 정보② Codex와 대화③ 내 파일④ 공개 주소
만들기GitHub에 놓기링크 나누기

시작

이 길이 맞는 가게인지
먼저 봐요

잘 맞는 범위

가게 기본 소개

소개·사진·연락 방법처럼
공개할 정보

다른 방법을 찾을 범위

판매·예약 거래 중심

주문·결제·거래가 주목적인 사이트

이 과정의 범위GitHub Pages는 나·조직·프로젝트 소개용 정적 호스팅입니다.알아둘 점무료 Pages는 온라인 사업·전자상거래·거래 촉진·SaaS가 주목적인 사이트에 쓸 수 없습니다. 실제 운영 목적이 거래 중심이면 공식 제한을 확인하세요.

공식 제한 보기

시작

먼저 이것만
준비해요

□ 노트북과 인터넷

□ ChatGPT 앱 로그인
그림·파일을 여러 번 만들고 고친다면 Plus가 편해요. 작은 소개 홈페이지에 Pro가 꼭 필요한 것은 아니에요.
가입 전 내 계정의 가격·포함 기능·사용 한도를 확인하세요.

□ GitHub 이메일

□ 공개할 가게 정보와 사진 2~3장
있으면 Instagram 또는 블로그 URL

□ GitHub Pages 호스팅은 기본 과정에서 별도 비용 없음
ChatGPT 유료 이용과 도메인 구매는 선택 비용

ChatGPT 앱

앱에서 Codex를
열어 주세요

1. 여는 곳공식 ChatGPT 다운로드

2. 누를 곳앱 설치·로그인 뒤 모델 메뉴

3. 입력·확인Codex를 선택합니다.

이렇게 보이면 다음으로Codex 대화가 열립니다.막히면보이지 않으면 앱과 계정의 현재 환경을 확인하세요.

이 안내는 글·파일·배경 그림을 같은 앱에서 만들고 고치는 데스크톱 Codex 기준입니다.

ChatGPT 앱

새 홈페이지 폴더를
만들어요

1. 여는 곳Finder(Mac) 또는 파일 탐색기(Windows)

2. 누를 곳Mac Shift + Command + N, Windows Ctrl + Shift + N

3. 입력·확인새 폴더 이름을 my-web-site로 적습니다.

이렇게 보이면 다음으로홈페이지 전용 폴더가 생깁니다.막히면나중에 찾기 쉬운 위치를 고르세요.

ChatGPT 앱

Codex에 그 폴더를
열어 주세요

1. 여는 곳ChatGPT 앱 Codex 프로젝트

2. 누를 곳Open folder 또는 Edit project → Add folder

3. 입력·확인my-web-site를 고르고 보이면 Local을 선택합니다.

이렇게 보이면 다음으로대화가 내 컴퓨터 폴더를 작업 대상으로 봅니다.막히면폴더 이름과 저장 위치를 다시 확인하세요.

Local 프로젝트는 내 PC의 홈페이지 폴더를 뜻해요.

가게 내용

가게의 사실을
먼저 말해 주세요

가게 내용

글의 순서만
눈으로 확인해요

이해를 돕기 위한 예시

  1. 첫 인사와 가게 소개
  2. 무엇을 하는지
  3. 사진과 찾아오는 방법
  4. 전화·이메일·카카오톡

이렇게 보면 다음으로실제와 다른 말, 빠진 연락처를 표시합니다.막히면“이 문장은 [정확한 내용]으로 바꿔줘”라고 적으세요.

가게 내용

진짜 사진은
내 사진을 써요

1. 여는 곳같은 Codex 대화

2. 누를 곳첨부 버튼 또는 사진 끌어놓기

3. 입력·확인가게 외관·작업·제품처럼 공개 가능한 내 사진 2~3장을 붙이고 “이 사진을 사용해줘”라고 적습니다.

이렇게 보이면 다음으로대화에 사진이 보입니다.막히면손님 얼굴·전화번호가 담긴 사진은 먼저 가리거나 빼세요.

가게 내용

배경 그림은
같은 ChatGPT에 부탁해요

수선실바느질 도구는 예시입니다. 내 업종으로 바꾸세요.

가게 내용

홈페이지 파일을
만들어 달라고 해요

가게 내용

파일은 바로 아래에
이렇게 놓여요

my-web-site├── index.html└── images  └── 가게사진.jpg

다음index.html을 두 번 클릭해 컴퓨터 브라우저에서 사진·소개·연락처를 확인합니다.막히면“사진 경로를 고쳐줘”라고 Codex에 요청하세요.

가게 내용

바꿀 곳은
한 문장으로 말해요

GitHub

GitHub 계정을
내 이름으로 만들어요

1. 여는 곳공식 GitHub 가입

2. 누를 곳가입 화면 안내

3. 입력·확인내 이메일·비밀번호·사용자 이름을 입력합니다.

이렇게 보이면 다음으로GitHub 가입 흐름이 시작됩니다.막히면다른 사람 계정을 빌리지 마세요.

GitHub

이메일을 확인해야
다음 버튼이 열려요

1. 여는 곳GitHub 가입 때 쓴 이메일

2. 누를 곳GitHub 확인 메일

3. 입력·확인메일 속 이메일 확인 안내를 마칩니다.

이렇게 보이면 다음으로저장소를 만들 수 있는 계정이 됩니다.막히면메일이 없으면 스팸함과 GitHub 재전송 안내를 보세요.

GitHub

로그인 아이디를
정확히 적어 둬요

1. 여는 곳GitHub 프로필 메뉴

2. 누를 곳내 username 또는 프로필 주소

3. 입력·확인예: myshop-owner처럼 실제 로그인 아이디를 복사합니다.

이렇게 보이면 다음으로실제 username이 메모에 있습니다.막히면보이는 이름과 username은 다를 수 있어요.

GitHub

새 저장소를 만들고
Public을 골라요

이해를 돕기 위한 예시

Owner내 GitHub 계정

Repository namemyshop-owner.github.io

VisibilityPublic

Add a README처음에는 선택하지 않음

1. 여는 곳GitHub 오른쪽 위 + → New repository

2. 누를 곳Create repository

3. 입력·확인실제 username이 myshop-ownermyshop-owner.github.io로 적습니다. 대문자는 소문자로 씁니다.

이렇게 보이면 다음으로비어 있는 공개 저장소가 열립니다.막히면같은 이름이 이미 있으면 만들지 말고 그 저장소가 내 홈페이지인지 확인하세요.

GitHub 공개 저장소에 처음 올린 순간부터 원본은 누구나 볼 수 있습니다. 비밀번호·내부 문서·개인정보는 넣지 마세요.

GitHub

Git 준비를
Codex에 확인해요

GitHub

저장소 주소를 복사해
Codex에 보여 줘요

1. 여는 곳방금 만든 GitHub 저장소

2. 누를 곳비어 있는 저장소면 Quick setup의 HTTPS 옆 주소를 복사합니다. 이미 파일이 있으면 Code → HTTPS를 엽니다.

3. 입력·확인끝이 .git인 저장소 주소를 복사합니다.

이렇게 보이면 다음으로홈페이지 저장소 주소가 클립보드에 있습니다.막히면홈페이지 주소와 저장소 주소를 바꿔 쓰지 마세요.

GitHub

처음 올릴 파일을
먼저 보여 달라고 해요

GitHub

브라우저 인증은
내가 직접 읽어요

1. 여는 곳Codex가 연결을 요청할 때

2. 누를 곳GitHub 인증·승인 화면

3. 입력·확인계정과 내아이디.github.io 저장소가 내 것인지 읽고 맞을 때만 승인합니다.

이렇게 보이면 다음으로Codex가 연결 결과를 알려 줍니다.막히면낯선 계정·저장소면 승인하지 마세요.

GitHub

파일 목록을 보고
처음 올리기를 승인해요

GitHub Pages

main에 파일이 보이면
Pages 설정을 열어요

1. 여는 곳내아이디.github.io 저장소

2. 누를 곳Code → main, 이어 Settings → Pages

3. 입력·확인맨 위의 index.html·images와 필요한 설정 파일을 확인한 뒤 Pages를 엽니다.

이렇게 보이면 다음으로Build and deployment이 보입니다.막히면파일이 없으면 Pages를 켜지 말고 Codex에 main 상태를 확인해 달라고 요청하세요.

GitHub Pages

공개 방법은
이 항목을 골라요

1. 여는 곳Pages Build and deployment

2. 누를 곳Source → Deploy from a branch

3. 입력·확인Branch와 Folder를 고르는 칸을 엽니다.

이렇게 보이면 다음으로main 파일을 공개할 준비가 됩니다.막히면GitHub Actions를 고르지 마세요. 이 자료는 별도 빌드 없이 공개합니다.

GitHub Pages

main과 root를 고르고
Save를 눌러요

Branchmain

Folder/(root)

1. 여는 곳같은 Pages 설정

2. 누를 곳main · /(root) · Save

3. 입력·확인두 값이 맞는지 보고 저장합니다.

이렇게 보이면 다음으로GitHub Pages 배포가 시작됩니다.막히면다른 폴더를 고르면 index.html을 찾지 못합니다.

GitHub Pages

Actions에서 배포가
끝났는지 봐요

1. 여는 곳저장소 Actions 또는 Settings → Pages

2. 누를 곳Pages 실행 상태

3. 입력·확인성공 표시가 나는지 기다려 확인합니다.

이렇게 보이면 다음으로Pages에 실제 주소 또는 Visit site가 보입니다.막히면반영은 최대 10분 걸릴 수 있어요. 바로 안 보여도 잠시 뒤 새로고침하세요.

GitHub Pages

Visit site로 실제 주소를
두 기기에서 열어요

1. 여는 곳Pages 화면

2. 누를 곳Visit site

3. 입력·확인실제 주소를 복사해 컴퓨터와 휴대전화에서 엽니다.

이렇게 보이면 다음으로두 기기에서 제목·사진·연락 방법이 보입니다.막히면예시 주소가 아니라 Pages 화면에 나온 실제 주소를 쓰세요.

공개 완료

실제 주소가 열리면
기본 과정 완료

✓ 폴더: my-web-site

✓ 공개 저장소: 내아이디.github.io

✓ 홈페이지: https://내아이디.github.io/

스마트폰으로 자기 가게 홈페이지를 확인하는 소상공인과 가게 풍경
주소 하나를 내 가게 안내판처럼 씁니다.

다음실제 주소를 업체정보나 SNS 프로필 링크에 넣습니다.선택 과정수정·도메인·검색 등록은 원할 때만 이어서 보세요.

선택 · 말로 수정

다시 열 때는
내 폴더부터 열어요

선택 · 말로 수정

확인한 뒤 main에 올리고
Pages 상태를 봐요

예전 화면이면main → Pages 성공 → index.html → 새로고침·시크릿 창을 순서대로 확인하세요.

선택 · 내 이름 주소

내 이름의 주소는
원할 때만 사요

내아이디.github.io 주소로
이미 공개되어 있어요.

비아웹·가비아 등에서 도메인을 고를 수 있어요.
www.my-shop.co.kr처럼 더 짧은 주소가 필요할 때만 이어갑니다.

아래 구매와 DNS 입력은 비아웹 예시입니다.

선택 · 내 이름 주소 · 비아웹 예시

비아웹에서
원하는 영문 주소를 찾아요

1. 여는 곳비아웹 도메인 신규등록

2. 입력my-shop처럼 영문 이름을 적고 .co.kr을 고릅니다.

3. 확인my-shop.co.kr처럼 전체 주소 후보를 검색합니다.

이렇게 보이면 다음으로검색 결과에 주소 후보가 보입니다.막히면한글 주소는 별도 표기 규칙이 있어 이 안내에서는 영문 주소를 고릅니다.

선택 · 내 이름 주소

등록 가능한 줄에서
신청하기를 눌러요

1. 여는 곳방금 검색한 비아웹 결과

2. 누를 곳등록 가능으로 보이는 주소의 신청하기

3. 확인고른 전체 도메인 이름이 신청 화면으로 넘어가는지 봅니다.

이렇게 보이면 다음으로도메인 신청 흐름이 열립니다.막히면등록 불가라면 다른 영문 이름을 다시 검색합니다.

선택 · 내 이름 주소

내 계정으로
회원가입하거나 로그인해요

1. 여는 곳비아웹 신청 화면

2. 누를 곳회원가입 또는 로그인 안내

3. 확인본인 계정으로 로그인한 뒤 신청 흐름으로 돌아옵니다.

이렇게 보이면 다음으로도메인 정보를 적는 화면이 이어집니다.막히면다른 사람 계정을 빌리지 말고 본인 이메일로 진행하세요.

선택 · 내 이름 주소

등록자 정보와
기간을 실제대로 적어요

1. 여는 곳도메인 등록 정보 화면

2. 입력실제 등록자 정보와 연락받을 이메일을 적고, 원하는 등록 기간을 고릅니다.

3. 확인나중에 갱신 안내를 받을 정보인지 다시 읽습니다.

이렇게 보이면 다음으로결제 전 확인 화면으로 갈 준비가 됩니다.막히면누구 정보로 등록되는지 모르면 결제하지 말고 화면 설명을 다시 확인하세요.

선택 · 내 이름 주소

결제 전에는
이 다섯 가지를 봐요

전체 이름예: my-shop.co.kr

등록 기간내가 고른 기간

최종 금액VAT 포함 여부까지

갱신 조건언제·어떤 조건으로 연장되는지

등록자 정보내 실제 정보인지

확인 뒤현재 화면이 보여 주는 결제 방법으로 본인이 결제합니다.참고2026년 9월 9일 공개 요금표에서 .co.kr·.kr은 1년 11,400원, 부가세 별도라고 안내했습니다. 결제 전 현재 총액과 조건을 다시 확인하세요.

선택 · 내 이름 주소

구매 뒤에는 도메인과
만료일을 적어 둬요

1. 여는 곳비아웹 보유 도메인 또는 관리 화면

2. 확인구매한 전체 도메인 이름과 만료일

3. 기록내 메모에 도메인 이름·로그인 이메일·만료일을 적습니다.

이렇게 보이면 다음으로내가 가진 도메인을 나중에도 찾을 수 있습니다.다음여기서는 도메인만 구매했고 홈페이지 공간은 이미 GitHub Pages를 사용합니다.

선택 · 내 이름 주소

내 도메인인지
GitHub에 알려 줘요

1. 여는 곳GitHub 프로필 사진 → Settings → Pages

2. 누를 곳Add a domain

3. 입력방금 산 영문 기본 도메인 example.com을 넣습니다.

이렇게 보이면 다음으로GitHub가 도메인 소유 확인용 TXT 호스트와 값을 보여 줍니다.막히면저장소 Settings가 아니라 GitHub 계정 Settings입니다.

선택 · 내 이름 주소

보이는 TXT 호스트와 값을
그대로 복사해요

TXT는 “이 도메인을 관리할 권한이 있다”는 확인용 메모입니다. GitHub가 보여 주는 실제 호스트와 값을 한 글자도 바꾸지 않고 복사합니다.

다음두 값을 비아웹 DNS 화면에 넣습니다.중요예시 값이나 이 슬라이드의 도메인으로 바꾸지 않습니다.

선택 · 내 이름 주소

비아웹 DNS에
TXT 한 줄을 추가해요

1. 여는 곳비아웹 도메인 → 부가서비스 → 고급네임서버관리

2. 확인선택한 도메인의 DNS를 비아웹에서 관리하는지 봅니다.

3. 입력TXT 종류를 고르고 GitHub에서 복사한 이름과 값을 그대로 넣어 저장합니다.

이렇게 보이면 다음으로TXT 레코드가 목록에 보입니다.막히면메일에 쓰는 기존 MX·TXT 레코드는 지우지 않습니다. DNS를 다른 회사에서 관리하면 그 회사 화면에서 추가합니다.

선택 · 내 이름 주소

Verify를 누르고
TXT는 남겨 둬요

1. 여는 곳GitHub 프로필 Settings → Pages의 도메인 화면

2. 누를 곳Verify

3. 확인소유 확인이 끝나도 TXT 레코드는 지우지 않습니다.

이렇게 보이면 다음으로GitHub가 도메인 소유를 확인합니다.막히면DNS 반영에는 시간이 걸릴 수 있으니 철자를 대조한 뒤 나중에 다시 확인하세요.

선택 · 내 이름 주소

저장소 Pages에
www 주소를 먼저 저장해요

1. 여는 곳내아이디.github.io 저장소 Settings → Pages

2. 누를 곳Custom domain

3. 입력·확인www.example.com을 적고 Save합니다.

이렇게 보이면 다음으로GitHub Pages가 www 주소를 받을 준비를 합니다.중요DNS보다 GitHub에 먼저 이 주소를 저장합니다.

선택 · 내 이름 주소

비아웹에 CNAME
한 줄을 넣어요

이해를 돕기 위한 예시

종류CNAME

이름www

실제내아이디.github.io

1. 여는 곳비아웹 도메인 → 부가서비스 → 고급네임서버관리

2. 입력CNAME 종류에 이름 www, 값 실제내아이디.github.io를 넣습니다.

3. 확인값에는 https://, 저장소 이름, 경로를 넣지 않습니다.

이렇게 보이면 다음으로www가 GitHub Pages를 가리키게 됩니다.막히면기존 MX·TXT 레코드는 그대로 둡니다.

선택 · 내 이름 주소

DNS 확인 상태가 준비되면
HTTPS를 켜요

1. 여는 곳저장소 Settings → Pages

2. 확인Custom domain의 DNS 확인 상태가 준비되었는지 봅니다.

3. 누를 곳가능해진 Enforce HTTPS를 켭니다.

이렇게 보이면 다음으로https://www.example.com이 경고 없이 열립니다.막히면DNS와 HTTPS 준비에는 최대 24시간 걸릴 수 있습니다.

선택 · 내 이름 주소

다음 수정 전에는
원격 CNAME을 지켜요

선택 · 검색과 AI

SEO와 GEO는
어려운 마법이 아니에요

SEO

검색에서
찾기 쉽게

실제 가게 정보를 검색에 읽기 쉽게 둡니다.

GEO

AI가
이해하기 쉽게

AI 검색 질문에도 사실을 읽기 쉽게 둡니다.

선택 · 검색과 AI

SEO와 GEO 점검도
Codex에 말해요

선택 · 검색과 AI

사실을 확인한 뒤
main에 반영해요

Google 등록

Google에 실제 주소를
URL 접두어로 등록해요

1. 여는 곳내 Google 계정의 Search Console

2. 누를 곳속성 추가 → URL 접두어

3. 입력·확인https://내아이디.github.io 또는 최종 https://www.example.com 전체 주소를 넣습니다.

이렇게 보이면 다음으로소유권 확인 방법 화면이 보입니다.막히면github.io와 www는 서로 다른 주소이므로 최종으로 쓸 주소를 선택합니다.

Google 등록

Google 태그를 전체 복사해
요청문에 붙여 넣어요

순서Google 다른 확인 방법 → HTML 태그 → 한 줄 전체 복사 → 위 대괄호 줄에 붙이기.중요클립보드 내용은 다른 앱 대화에 저절로 전달되지 않습니다.

Google 등록

실제 주소에 태그가 보이면
Google에서 소유 확인해요

1. 먼저내 컴퓨터 미리보기에서 태그를 확인한 뒤 main 반영을 승인합니다.

2. 확인GitHub Pages 성공 뒤 실제 홈페이지 원문에 인증 태그가 있는지 봅니다.

3. 누를 곳Search Console의 확인을 누릅니다.

이렇게 보이면 다음으로Google 속성의 소유 확인이 끝납니다.중요확인 뒤에도 인증 태그는 지우지 않습니다.

Google 등록

Google에 사이트맵을
따로 제출해요

1. 먼저실제 홈페이지에서 https://실제주소/sitemap.xml이 열리는지 봅니다.

2. 누를 곳Search Console의 Sitemaps

3. 입력·확인sitemap.xml을 제출합니다.

이렇게 보이면 다음으로사이트맵 제출 기록이 보입니다.참고사이트맵은 홈페이지 안의 페이지 주소 목록입니다.

Google 등록

Google에 첫 페이지도
따로 알려요

1. 여는 곳Search Console의 URL 검사

2. 입력실제 홈페이지 첫 주소 전체

3. 누를 곳실제 URL 테스트색인 생성 요청

이렇게 보이면 다음으로첫 페이지 검사와 요청 기록이 남습니다.막히면요청은 검색 노출을 보장하지 않습니다.

네이버 등록

네이버에 주소를 등록하고
태그를 복사해요

1. 여는 곳내 네이버 계정의 서치어드바이저

2. 누를 곳웹마스터도구 → 사이트 등록 → HTML 태그

3. 입력·확인실제 홈페이지 전체 주소를 넣고 <meta …> 한 줄 전체를 복사합니다.

이렇게 보이면 다음으로네이버 태그가 클립보드에 있습니다.막히면주소 뒤의 경로는 빼고, 태그는 처음 <meta부터 끝 >까지 복사하세요.

네이버 등록

네이버 태그는
요청문에 붙여 넣어요

네이버 등록

확인한 태그만
실제 주소에 반영해요

순서컴퓨터 확인 → main → Pages 성공 → 실제 주소 태그 → 네이버 소유확인.중요확인 뒤에도 인증 태그는 지우지 않습니다.

네이버 등록

네이버에 사이트맵을
따로 제출해요

1. 여는 곳소유 확인 뒤 네이버 서치어드바이저

2. 누를 곳요청 → 사이트맵 제출

3. 입력·확인https://실제주소/sitemap.xml을 제출합니다.

이렇게 보이면 다음으로사이트맵 제출 기록이 남습니다.막히면실제 주소에서 sitemap.xml이 먼저 열리는지 확인하세요.

네이버 등록

네이버에 첫 페이지
수집을 요청해요

1. 여는 곳네이버 서치어드바이저의 요청

2. 누를 곳웹페이지 수집

3. 입력·확인실제 홈페이지 첫 주소를 넣어 수집을 요청합니다.

이렇게 보이면 다음으로첫 페이지 수집 요청 기록이 남습니다.막히면요청이 바로 검색 노출을 뜻하지는 않습니다.

네이버 등록

나중에 수집 상태도
다시 확인해요

1. 여는 곳네이버 서치어드바이저의 리포트와 URL 검사

2. 확인등록한 실제 주소와 수집 상태

3. 주소가 바뀌면github.io에서 www처럼 호스트가 바뀐 경우 새 실제 주소로 사이트 등록과 제출을 다시 합니다.

기억할 점검색 등록은 한 번 누르고 끝나는 보증이 아닙니다. 실제 정보와 주소를 계속 맞춰 둡니다.

Google 등록

Google의 AI 검색 설정도
한 번 확인해요

1. 여는 곳Search Console 내 속성

2. 누를 곳Settings → Search generative AI

3. 입력·확인“사이트 링크와 콘텐츠 포함(Include)” 상태인지 봅니다.

이렇게 보이면 다음으로Google 생성형 검색의 현재 상태를 확인합니다.막히면이 설정은 다른 AI 학습 허가를 뜻하지 않습니다.

마지막

주소를 적어 두고
막히면 순서대로 봐요

폴더my-web-site

저장소내아이디.github.io

주소https://내아이디.github.io/

변경이 안 보임main → Pages 성공 → 새로고침 → 시크릿 창

www가 안 열림Custom domain → CNAME → DNS/HTTPS 상태

공식 근거와 범위

GitHub Pages 문서 확인: 2026-09-10. OpenAI·비아웹·Google·네이버 안내 확인: 2026-09-09. 로그인 뒤 화면·권한·약관은 바뀔 수 있습니다. 이 자료는 계정 생성, 결제, 인증, 배포를 대신 실행하지 않습니다.