29. 실습 · 내 페이지의 공개와 접속 확인
시작 전에 확인할 것
이번에는 예시 자료로 만든 소개 페이지 한 개를 인터넷 주소로 엽니다. 실제 공개를 원할 때 진행하는 실습입니다. 파일 보관까지만 하고 싶다면 1단계에서 마쳐도 됩니다. 이 경우 인터넷 공개 실습을 완료했다고 표시하지 않습니다.
AI 도구의 결과를 독립적인 HTML 한 파일로 받을 수 있는지 확인합니다. 여러 파일이 필요한 프로젝트라면 아래 설정을 그대로 적용하지 않습니다. 공개 전 확인에 따라 자료·권한·동작을 확인하고, 사용할 GitHub와 Vercel 계정의 현재 요금 조건을 읽습니다. 기존 운영 사이트가 아닌 새 연습용 저장소와 프로젝트를 사용합니다.
계정이 없다면 먼저 가입하기
이미 계정이 있다면 이 부분은 건너뜁니다. 가입과 이메일 인증 시간은 실습 시간과 별도로 잡으세요.
- GitHub 가입 페이지를 엽니다. 화면에 제시된 이메일 또는 소셜 로그인 방식으로 가입하고, 사용자 이름과 이메일 인증을 마칩니다. 인증 메일이 없으면 스팸함과 입력한 주소를 확인하세요.
- GitHub에 로그인한 뒤 내 사용자 이름을 확인합니다. 유료 요금제·Copilot·Codespaces는 이번 HTML 파일 업로드에 필요하지 않습니다.
- Vercel 가입 페이지를 엽니다. 개인의 비상업적 연습이면 Hobby 조건을 읽고 해당 방식으로 시작합니다. 상품 판매나 고객 작업은 같은 무료 조건으로 가정하지 마세요.
- GitHub로 계속하기가 표시되면 방금 만든 계정으로 연결합니다. 추가 인증이 나오면 직접 마칩니다. 연결할 저장소 선택은 뒤의 3단계에서 합니다.
준비 완료: 두 사이트에 로그인했고, 내가 쓰는 GitHub 사용자 이름을 알고 있으면 됩니다. 카드 결제 화면이 나오면 자동으로 진행하지 말고 10장의 요금 표와 선택한 요금제를 먼저 비교하세요.
가입 안내: GitHub 공식 안내, Vercel 시작 안내. 2026년 10월 21일 확인.
1. 현재 페이지를 파일로 보관하기
AI 작업에서 마지막으로 확인한 결과를 열고 아래 요청을 보냅니다.
아래 글을 복사해 AI 대화창에 붙여 넣으세요. [ ] 안의 내용은 내 상황에 맞게 바꿉니다.
현재 확인한 소개 페이지 전체를 index.html 한 파일로 내보낼 수 있게 해 줘.
내용과 모양을 유지하고, 외부 라이브러리나 별도 설치 없이 브라우저에서 열 수 있게 해 줘.
파일 일부만 주지 말고 필요한 HTML과 CSS 전체를 포함해 줘.
별도 사진 파일이 필요하다면 무엇인지 먼저 알려 줘.
아직 GitHub 업로드나 인터넷 공개는 하지 마.Claude에서 만든 결과라면 답변의 HTML 파일 카드에서 Download Index 또는 다운로드 버튼을 찾으세요. 파일 카드가 보이지 않으면 결과물 패널의 내려받기나 파일 내보내기 메뉴를 확인합니다. 이전 형태의 Artifact는 패널 위쪽에 다운로드 도구가 있습니다. 메뉴가 다르거나 HTML 파일을 주지 않으면 “공개 가능한 독립 HTML 파일을 다운로드할 수 있게 첨부해 줘”라고 요청합니다. Artifact 공식 안내를 참고하세요.
파일을 내려받고 브라우저의 다운로드 목록에서 ‘폴더에서 보기’ 또는 ‘Finder에서 보기’로 보관 위치를 확인합니다. 파일 이름이 index.html.txt처럼 되어 있지 않은지 확장자를 확인합니다. 내려받기 대신 코드 전체를 받았다면 운영체제의 일반 텍스트 편집기로 저장해야 하며, 워드 문서로 저장하지 않습니다. 저장 방식이 불분명하면 운영체제와 현재 보이는 저장 창을 설명해 안내를 받습니다.
받은 파일을 브라우저로 열어 별명과 소개 문장이 미리보기의 마지막 결과와 같은지 봅니다. 링크도 확인합니다. 글자나 그림이 빠졌다면 필요한 자료가 함께 있는지 먼저 확인합니다. 공개하기 전에 이 파일이 맞는 결과인지 알아야 합니다.
2. 새 저장소에 파일 올리기
GitHub에 로그인해 새 저장소 만들기를 엽니다. 저장소 이름은 예를 들어 my-first-profile로 정합니다. 이미 같은 이름이 있으면 다른 연습용 이름을 사용합니다. 소유자가 자신의 계정인지 확인하고 설명에 ‘소개 페이지 연습’이라고 적습니다.
공개 범위는 목적에 맞게 고릅니다. Public은 코드 파일도 공개되는 선택이고, Private은 저장소 접근이 제한되는 선택입니다. 어느 쪽이든 비밀값을 넣는 방식으로 사용하지 않습니다. 파일을 보관하는 저장소의 공개 범위와 나중에 사이트를 방문하는 범위는 따로 확인합니다. 이번에는 README를 추가해 저장소를 만든 뒤 파일 목록에서 진행하면 됩니다.
파일 목록의 Add file에서 Upload files를 선택해 index.html을 올립니다. 사진 등 필요한 파일이 있다면 경로를 유지해 함께 올립니다. 변경 설명은 ‘첫 소개 페이지’처럼 적고 Commit changes로 기록합니다. 업로드한 파일이 저장소의 첫 위치에 있는지 확인합니다. 폴더를 한 겹 더 올려 폴더/index.html로 된 경우는 다음 설정과 다릅니다.
파일 목록에서 확인할 모습
저장소의 Code 탭 → 파일 목록에 README.md와 index.html이 함께 보이면 됩니다. index.html을 눌러 소개 문장이 들어 있는지 읽으세요. HTML 코드가 보이는 것이 정상입니다. GitHub는 이 단계에서 완성 웹페이지를 보여 주는 곳이 아닙니다.
3. Vercel에서 새 프로젝트 연결하기
Vercel에 로그인해 새 프로젝트 만들기를 엽니다. GitHub 연결이 필요하면 요청 권한을 읽고 가능한 범위에서 방금 만든 저장소만 선택합니다. 저장소 목록에서 이름과 소유자를 확인한 뒤 가져옵니다. 예전에 운영하던 다른 프로젝트를 선택하지 않습니다.
아래 설정은 저장소 첫 위치에 index.html이 있고 별도 빌드가 필요 없는 경우에 사용합니다. 다른 파일 구조가 감지되면 이유를 확인합니다.
| 항목 | 이번 파일 구조의 설정 |
|---|---|
| Project Name | 알아보기 쉬운 새 연습용 이름 |
| Framework Preset | Other |
| Root Directory | index.html이 있는 저장소의 첫 위치 |
| Build Command | Override를 켜고 비워 빌드 단계를 건너뜀 |
| Output Directory | 기본값 사용. public 폴더가 없으면 저장소의 첫 위치를 제공 |
별도 비밀키나 외부 서비스 연결은 필요하지 않습니다. 설정을 읽고 준비되었으면 Deploy로 공개를 진행합니다. 이 단계부터 인터넷에 제공되는 결과가 생깁니다. 새 프로젝트의 첫 배포가 Production으로 표시될 수 있으며, ‘연습용’이라는 이름만으로 Preview가 되는 것은 아닙니다. 기존 사이트의 운영 배포를 바꾸는 실습은 아닙니다.
4. 방문자가 보는 주소 열기
완료 상태가 나오면 새 프로젝트의 Domains에서 연결된 운영 도메인을 확인하고 엽니다. 직접 도메인을 구입할 필요는 없습니다. 자동으로 제공된 프로젝트이름.vercel.app 형태의 주소를 사용할 수 있습니다. 아래 주소는 형태를 설명하는 예시입니다.
| 주소의 종류 | 용도 |
|---|---|
| vercel.com으로 시작하는 관리 화면 | 배포 상태와 설정 확인 |
| 프로젝트에 연결된 도메인 | 이후 수정도 같은 주소에서 확인할 방문자용 주소 |
| 특정 배포에 붙은 고유 주소 | 그때 배포한 버전을 확인하는 주소. 새 배포로 자동 바뀌지 않음 |
주소의 길이만으로 판단하지 말고 현재 프로젝트에 연결된 도메인인지 확인해 기록합니다. 이 장의 ‘같은 방문자용 주소’는 이 주소를 뜻합니다. 방문자용 주소에서 소개글과 링크가 마지막 파일과 같은지 확인합니다. 실패 상태라면 오류 문장과 파일 위치, 설정을 확인한 뒤 수정합니다. 해결을 위해 다른 저장소를 무작정 연결하지 않습니다.
로그인하지 않은 브라우저나 다른 기기에서 주소를 열어 예상한 접근 범위인지 봅니다. 보호 화면이 나오면 코드부터 고치지 말고 Deployment Protection 설정과 현재 요금제에서 가능한 접근 방식을 확인합니다. 누구나 보게 하려는 의도가 있을 때만 해당 새 프로젝트의 공개 범위를 조정합니다. 자료가 공개되어도 되는지도 다시 확인합니다.
5. 휴대전화와 실제 동작 확인하기
휴대전화 브라우저에 방문자용 주소를 넣습니다. 글이 옆으로 잘리지 않는지, 링크를 손가락으로 누르기 쉬운지, 링크가 정한 곳을 여는지 봅니다. 컴퓨터에서 창 폭만 줄여 본 결과와 실제 기기의 결과를 구분해서 적습니다.
컴퓨터에서는 Tab으로 소개 페이지의 링크를 선택하고 Enter로 열어 봅니다. 21장에서 미뤄 둔 링크 이동·키보드 동작이 이제 확인됐다면 해당 기록을 완료로 바꿉니다. 아직 실패한다면 수정한 뒤 다시 확인합니다.
25장에서 보류한 확인 마치기
25장의 저장·내보내기·불러오기 중 보류한 것이 있다면 이 과정도 필수입니다. 모두 확인했다면 넘어가도 됩니다.
- 링크 모음을 만들었던 AI 대화를 열고 “현재 링크 모음의 HTML·CSS·JavaScript 전체를 독립적인 index.html 한 파일로 내보내 줘. 기능을 유지하고 외부 라이브러리는 쓰지 마”라고 요청합니다.
- 소개 페이지와 섞이지 않도록 다른 폴더에 받습니다. 1~4단계를 반복하되 저장소와 프로젝트 이름은
my-first-links처럼 별도로 정합니다. 소개 페이지 파일을 덮어쓰지 않습니다. - 새 프로젝트에 연결된 도메인에서 ‘저장 연습’과
https://example.net을 추가합니다. 같은 브라우저에서 새로고침하고 닫았다 다시 열어 항목이 남는지 봅니다. - 25장 5~7단계의 내보내기·삭제 후 복원·잘못된 파일 검사를 이 주소에서 다시 합니다. 실제 결과를 기록하고 모두 맞으면 25장을 완료로 바꿉니다.
미리보기에서 입력한 목록이 새 주소에 자동으로 나타나지 않는 것은 주소별 보관 공간이 다르기 때문일 수 있습니다. 예시 자료를 새로 넣어 시험하세요. 인터넷 공개를 원하지 않으면 이 단계는 보류할 수 있지만, 확인 전에는 저장 실습 전체를 완료한 것으로 표시하지 않습니다.
공개에 성공했는지 비교하기
자기소개 완성 예시처럼 주소창에는 방문자용 주소가 있고, 본문에는 소개글과 링크가 보이는 상태가 목표입니다. Vercel 관리 화면이나 로그인 화면만 보이면 아직 방문자 화면 확인이 끝나지 않았습니다. 예시의 색이나 장식까지 같을 필요는 없습니다.
6. 작은 수정 한 번 반영하기
처음 공개된 결과가 잘 작동한다면 그 파일을 보관합니다. AI 작업에서 소개 문장 하나만 고치고 새 전체 파일을 받습니다. 파일을 다시 열어 확인한 뒤, 방금 만든 연습용 저장소의 같은 위치에 반영합니다. 변경 설명은 ‘소개 문장 수정’으로 남깁니다.
파일을 바꿀 때는 같은 저장소의 Code → Add file → Upload files로 돌아가세요. 수정된 파일 이름이 정확히 index.html인지 보고, 처음과 같은 위치에 올립니다. index (1).html처럼 이름이 달라지면 교체가 아니라 새 파일이 됩니다. 변경 설명을 적고 Commit changes로 기록한 뒤, 파일을 다시 열어 새 소개 문장을 찾습니다.
연결된 운영 브랜치에 기록하면 자동 배포가 시작될 수 있습니다. Vercel에서 완료 여부를 확인하고 같은 방문자용 주소에서 새 문장이 보이는지 봅니다. 아직 처리 중이면 기다리고, 다른 부분까지 바뀌었다면 이전 파일을 다시 반영해 확인합니다. 페이지 코드 복구와 사용자가 입력한 자료 복구는 구분합니다.
완료 기록
작업 이름, 저장소 주소, Vercel 프로젝트 이름, 방문자용 주소, 마지막으로 확인한 문장을 한곳에 적습니다. 비밀번호는 함께 적지 않습니다. 다음에 수정할 때 올바른 프로젝트를 찾는 자료로 사용합니다.
- 공개한 파일이 미리보기에서 확인한 결과와 같습니다.
- 새 프로젝트의 방문자용 주소를 구분했습니다.
- 다른 기기에서 의도한 접근 범위와 동작을 확인했습니다.
- 작은 수정 뒤 같은 주소에 바뀐 문장이 나타났습니다.
- 21장에서 보류한 링크·키보드 동작을 마쳤습니다.
- 25장에서 보류한 저장·복원 검사가 있었다면 별도 링크 모음 프로젝트에서 마쳤습니다.
남은 필수 확인이 있으면 ‘보류’입니다. 확인한 주소와 행동을 기록한 뒤 해당 단계로 돌아갑니다. 배포 성공 표시만으로 실습 완료를 대신하지 않습니다.
파일 올리기와 배포가 막힐 때
내려받은 파일이 다른 결과일 때
파일을 열었는데 미리보기에서 고친 문장이 없으면 현재 받은 파일이 최신 결과인지 확인합니다. 같은 이름으로 내려받은 파일이 여러 개라면 날짜와 실제 내용을 비교합니다. 이름만 보고 가장 최신이라고 결정하지 않습니다. 정확한 문장 하나를 기준으로 확인하면 버전을 구별하기 쉽습니다.
아래 글을 복사해 AI 대화창에 붙여 넣으세요. [ ] 안의 내용은 내 상황에 맞게 바꿉니다.
미리보기의 마지막 소개 문장은 [현재 문장]이야.
그런데 내려받은 파일을 열면 [실제로 보인 문장]이 나와.
현재 미리보기와 내려받은 파일이 같은 버전인지 확인해 줘.
마지막으로 확인한 내용과 모양을 담은 전체 index.html을 다시 제공해 줘.
새로운 기능이나 문장을 추가하지 마.새 파일을 받은 뒤 다시 열고 문장을 확인합니다. 기존 파일과 구분할 수 있게 보관하되 공개에 사용할 첫 파일 이름은 의도한 이름인지 봅니다. 여러 파일이 필요한 결과라면 어떤 파일을 함께 올려야 하는지 확인하기 전에는 다음 단계로 넘어가지 않습니다.
사진이나 모양이 빠진 파일의 확인
글은 보이는데 사진이 없으면 사진이 별도 파일인지, 외부 주소인지 확인합니다. 외부 자료라면 그 주소를 다른 환경에서도 받을 수 있는지 살펴야 합니다. 내 컴퓨터에만 있는 사진 위치를 인터넷 방문자가 그대로 사용할 수 있다고 생각하지 않습니다.
글자 크기와 배치가 크게 달라졌다면 모양을 정하는 내용이 파일에 포함되었는지 확인합니다. 이 실습에서는 한 HTML 파일에 필요한 내용을 담도록 요청했으므로, 일부 코드만 제공된 것은 아닌지 볼 수 있습니다. 어떤 파일이 빠졌는지 이해하지 못한 채 이름을 바꾸거나 확장자를 여러 번 덧붙이지 않습니다.
문제를 전달할 때는 ‘글은 보임, 사진만 안 보임’처럼 되는 부분과 안 되는 부분을 함께 적습니다. 현재 파일의 위치와 필요한 자료의 이름을 알려 줄 수 있지만 비밀 정보는 제외합니다. 작은 페이지의 독립적인 파일인지 확인하는 것이 공개 설정을 시작하기 전의 기준입니다.
파일 이름과 위치를 확인하는 순서
내 컴퓨터에서 파일의 확장자를 확인합니다. 화면에 보이는 이름과 실제 확장자가 다를 수 있으므로 운영체제의 파일 정보나 확장자 표시를 이용할 수 있습니다. 사용하는 운영체제에 맞는 방법이 필요하면 그 이름을 밝히고 안내를 받습니다. 단순히 이름 끝에 .html을 반복해서 붙이지 않습니다.
GitHub에 올린 뒤에는 저장소의 첫 위치에서 index.html을 볼 수 있는지 확인합니다. 업로드 과정에서 폴더째 올렸다면 한 단계 아래에 있을 수 있습니다. 이번 설정과 파일 위치가 다르면 결과가 예상과 다를 수 있으므로, 파일을 옮길지 설정을 바꿀지 먼저 판단합니다.
사진 파일이 있는 경우에는 코드에서 찾는 이름과 저장소에 올라간 이름을 비교합니다. 대소문자나 폴더 위치가 달라진 것은 아닌지 봅니다. 필요한 파일을 확인하는 단계에서 관계없는 개인 메모와 자료는 업로드 대상에서 제외합니다.
저장소를 못 찾을 때의 확인
Vercel에서 저장소 목록에 방금 만든 저장소가 보이지 않으면 로그인한 GitHub 계정과 선택한 작업 공간을 확인합니다. 연결에 허용한 저장소에 해당 이름이 포함되어 있는지도 봅니다. 파일을 다시 작성하거나 다른 저장소를 계속 새로 만드는 것으로 해결하려 하지 않습니다.
현재 연결의 권한을 이해할 수 없다면 어떤 자료에 접근하려는지 설명을 받습니다. 개인 연습 저장소 하나를 가져오려는데 모든 기존 작업이 포함되는 허용을 무심코 선택하지 않습니다. 서비스와 저장소의 연결 범위를 읽고 필요한 대상을 고릅니다.
아래 글을 복사해 AI 대화창에 붙여 넣으세요. [ ] 안의 내용은 내 상황에 맞게 바꿉니다.
새 연습용 저장소를 만들었지만 가져오기 목록에서 찾지 못했어.
현재 확인한 계정: [구별 가능한 이름, 비밀번호 제외]
저장소 소유자와 이름: [소유자 / 이름]
현재 연결에서 허용한 범위: [화면에서 읽은 내용]
파일 코드를 바꾸지 말고 계정·공간·저장소 접근 중 무엇을 확인할지 안내해 줘.
확인하지 않은 권한을 이미 허용했다고 가정하지 마.안내에 따라 확인한 뒤 올바른 저장소를 선택합니다. 이름이 비슷한 기존 운영 저장소를 대신 고르지 않습니다. 새 연습용 프로젝트로 진행하는지 한 번 더 읽고 공개 설정으로 넘어갑니다.
배포 버튼을 누르기 전 읽을 항목
프로젝트 이름, 저장소와 브랜치, 파일이 있는 위치, 준비 명령, 제공할 폴더를 읽습니다. 모든 영어 항목을 외울 필요는 없지만 지금 어떤 자료를 공개하려는지는 설명할 수 있어야 합니다. 설정표를 복사해 넣는 것보다 실제 파일 구조와 맞는지 확인하는 것이 중요합니다.
한 HTML 파일의 실습에서 예상하지 않은 설치나 비밀키 요구가 나오면 결과물의 구조가 달라진 것인지 확인합니다. 여러 파일과 프로그램 실행이 필요한 프로젝트라면 단순 파일용 설정을 그대로 적용하지 않습니다. AI에게 현재 파일 목록과 필요한 실행 과정을 먼저 설명해 달라고 할 수 있습니다.
처음 배포를 진행하면 연습용 새 사이트가 실제 인터넷에 제공될 수 있습니다. 공개할 자료인지 다시 확인합니다. 이름에 ‘연습’이나 ‘미리보기’를 붙이는 것만으로 접근이 자동 제한되는 것은 아닙니다. 공개 의도와 접근 범위를 설정과 실제 접속으로 확인합니다.
배포가 실패했을 때 남길 정보
오류 화면에서 개인정보나 비밀값이 없는 안내 문장을 기록합니다. 어떤 파일 구조와 설정으로 진행했는지도 적습니다. 처리 중인지 실패로 끝났는지도 구분합니다. 아직 진행 중인 결과에 새 요청과 재배포를 계속 겹치지 않습니다.
아래 글을 복사해 AI 대화창에 붙여 넣으세요. [ ] 안의 내용은 내 상황에 맞게 바꿉니다.
HTML 한 파일을 공개하는 단계에서 배포가 완료되지 않았어.
저장소 첫 위치의 파일: [파일 이름 목록]
선택한 프로젝트 종류와 준비 명령: [현재 설정]
배포 화면의 상태: [진행 중 또는 실패 안내]
오류 문장: [민감한 정보를 제외한 정확한 문장]
파일 위치와 설정이 이 결과물에 맞는지 먼저 확인해 줘.
기존 프로젝트 삭제나 다른 저장소 연결부터 제안하지 마.원인이 제시되면 실제로 어떤 항목이 맞지 않는지 확인합니다. 바꿀 설정 하나와 기대 결과를 정하고 다시 시도합니다. 성공하면 처음과 무엇이 달라졌는지 기록합니다. 확인되지 않은 설명을 원인으로 확정해서 적지 않습니다.
방문자용 주소를 구별해서 기록하기
관리 화면에서 사이트를 여는 링크로 이동한 뒤 주소창을 확인합니다. 현재 보이는 것이 실제 소개 페이지인지, 배포 상태 목록인지 구분합니다. 방문자용 주소를 별도 기록하고 다른 탭에서 다시 열어 같은 결과가 보이는지 봅니다.
인터넷에 접속할 수 있는 다른 기기에서도 열어 봅니다. 의도한 사람에게 로그인 없이 보여 주려는 페이지인지, 접근 보호가 필요한 페이지인지 목적과 비교합니다. 로그인 화면이 나오면 현재 주소와 보호 설정을 확인합니다. 자료가 비공개여야 하는데 보호를 무작정 해제하지 않습니다.
주소를 공유할 때는 관리 화면이 아니라 확인한 방문자용 주소를 사용합니다. 공개 범위를 아직 결정하지 못했다면 공유를 미루고 예시 자료로 확인할 수 있습니다. 이번 실습의 완료 기록에는 어떤 접근 상태를 실제로 확인했는지 적습니다.
작은 수정 뒤 되돌아갈 기준 만들기
소개 문장 하나를 수정하기 전에 현재 공개 파일을 보관합니다. 어떤 문장을 바꿀지 적고 AI에게 그 문장만 요청합니다. 새 파일을 내 컴퓨터에서 확인한 다음 올바른 저장소 위치에 반영합니다. 변경 기록에는 무엇을 바꿨는지 짧게 적습니다.
새 배포가 끝난 뒤 같은 방문자용 주소에서 문장을 확인합니다. 문장이 바뀌었는데 링크까지 달라졌다면 수정 범위 밖 변화로 기록합니다. 이전 파일로 돌아갈지 링크만 고칠지 영향과 범위를 보고 정합니다. 어느 쪽이든 변경 뒤 같은 행동으로 다시 확인합니다.
되돌리기를 연습하려면 예시 자료의 연습용 프로젝트에서 합니다. 실제 사용자 자료가 있는 사이트에서 처음 시험하지 않습니다. 이전 파일을 반영한 뒤 어떤 내용이 돌아왔고 어떤 입력 자료는 별개로 남는지 살펴봅니다. 코드와 데이터 복구를 구분하는 설명을 실제 결과와 연결합니다.
꼭 기억하세요
배포 성공 표시 뒤에 실제 접속과 동작 확인이 이어져야 공개 실습이 끝납니다.
절차 참고: GitHub 저장소 생성, 파일 업로드, Vercel 연결, 정적 파일 설정. 주소 종류. 설정과 주소 안내 확인: 2026년 10월 19일.