AI에게 부탁해서 홈페이지 코드를 받았습니다. 메모장에 붙여넣고 index.html로 저장한 다음 더블클릭하니 브라우저에 예쁘게 뜹니다. 여기까지는 성공입니다.
문제는 그다음입니다. 이걸 어떻게 남한테 보여주죠? 주소창을 보니 이렇게 적혀 있습니다.
file:///C:/Users/user/Desktop/index.html
이 주소를 복사해서 친구에게 보내면 100% 안 열립니다. 왜 그런지, 그리고 어떻게 해야 진짜 주소가 생기는지 정리했습니다.
왜 내 컴퓨터에서만 열릴까요
주소 앞에 붙은 file://가 범인입니다. 이건 “이 컴퓨터의 하드디스크에서 파일을 꺼내 보여줘”라는 뜻입니다. 그러니 다른 사람 컴퓨터에서 그 주소를 열면 그 사람 하드디스크의 같은 경로를 뒤지고, 당연히 아무것도 없습니다.
우리가 아는 웹사이트 주소는 https://로 시작합니다. 이건 “인터넷 어딘가에 켜져 있는 서버에서 파일을 받아와”라는 뜻입니다. 즉 웹사이트가 되려면 조건이 셋입니다.
- 파일이 24시간 켜져 있는 컴퓨터(서버) 위에 올라가 있을 것
- 그 서버를 가리키는 주소가 있을 것
- 브라우저가 안전하다고 인정하는 HTTPS 자물쇠가 붙어 있을 것
내 노트북은 껐다 켰다 하고, 공유기 안에 숨어 있고, 인증서도 없습니다. 그래서 안 되는 겁니다. 파일이 잘못된 게 아니라 있을 자리에 없는 것뿐입니다.
먼저 — 이 방법들은 안 됩니다
대부분 여기서 몇 시간을 버립니다. 흔한 시도부터 정리하겠습니다.
구글 드라이브에 올려서 공유 링크 보내기
드라이브는 HTML 파일을 웹페이지로 실행하지 않고 그냥 파일로 취급합니다. 링크를 열면 미리보기가 안 되거나 다운로드 창이 뜹니다. 예전에 있던 웹 호스팅 기능도 지금은 지원되지 않습니다.
네이버 블로그·카페에 파일 첨부
첨부는 되지만 다운로드만 됩니다. 상대방이 받아서 더블클릭해야 하고, 모바일에서는 아예 열리지 않는 경우가 많습니다.
이메일에 첨부
HTML은 보안상 위험 파일로 분류되는 경우가 많아 차단되거나 스팸함으로 갑니다. 받아도 위 문제가 그대로입니다.
⚠️ 파일을 보내는 방식은 전부 같은 벽에 부딪힙니다
상대가 파일을 받아서 직접 열어야 하는 순간 끝입니다. 필요한 건 파일 전달이 아니라 주소입니다. 링크를 누르면 그냥 열리는 상태여야 합니다.
제대로 된 방법 세 가지, 그리고 각각의 난이도
| 방법 | 필요한 것 | 난이도 |
|---|---|---|
| 웹호스팅 + FTP 업로드 | 호스팅 결제, FTP 프로그램, 접속 정보 | 높음 |
| GitHub Pages | 깃허브 계정, 저장소·브랜치 개념, 영어 화면 | 중간 |
| 붙여넣기형 배포 서비스 | 코드 복사 | 낮음 |
앞의 둘은 “웹서버를 내가 준비한다”는 접근이고, 마지막은 “이미 준비된 서버에 파일만 얹는다”는 접근입니다. HTML 한 장을 공개하는 게 목적이라면 세 번째가 압도적으로 빠릅니다. 아래는 HTMLtoSITE로 해본 과정입니다.
① 코드를 복사합니다
메모장이나 VS Code로 index.html을 열고 Ctrl+A → Ctrl+C. AI 채팅창에서 바로 가져올 거라면 코드 블록 오른쪽 위 ‘복사’ 버튼을 쓰세요.
⚠️ 드래그로 복사하면 잘립니다
코드 블록에 스크롤이 생기면 드래그로는 끝까지 안 잡힙니다. 붙여넣은 코드가 <!DOCTYPE html>로 시작해서 </html>로 끝나는지 꼭 확인하세요.
② 붙여넣기 상자에 넣습니다
에 접속하면 가입 화면이 아니라 검은색 코드 입력 상자가 바로 뜹니다. 여기에 Ctrl+V.
붙여넣는 순간 오른쪽에 실제 화면이 미리 렌더링됩니다. 코드가 제대로 복사됐는지 여기서 바로 확인할 수 있습니다.
③ 주소를 정합니다
‘내 주소 만들기’를 누르면 이름과 서브도메인을 정하는 화면이 나옵니다. 서브도메인이 실제 주소가 됩니다.
- 3~63자
- 영문 소문자 · 숫자 · 하이픈만
- 맨 앞과 맨 끝에 하이픈 불가
④ 발행 — 검사를 거쳐 주소가 열립니다
‘이 주소로 발행하기’를 누르면 바로 열리는 게 아니라 악성코드 검사가 먼저 돌아갑니다. 진행 단계가 숫자로 표시되고, 보통 10초 안팎입니다.
끝나면 “라이브입니다”와 함께 주소가 나옵니다. QR 코드도 같이 나와서 휴대폰으로 바로 확인할 수 있습니다.
여기까지 결제도 카드 등록도 없었습니다. 무료로 사이트 2개까지 계속 쓸 수 있고, 붙여넣기부터 주소가 열릴 때까지 1분이 안 걸렸습니다.
주소가 생긴 다음, 세 가지만 더 하면 됩니다
링크가 열리는 것으로 끝내면 아깝습니다. 어차피 5분이면 되는 것들입니다.
1) 검색에 등록하기
발행만 해서는 네이버·구글에 바로 뜨지 않습니다. 검색엔진에 “여기 사이트 하나 생겼습니다”라고 알려 줘야 합니다. 편집기 설정 → 검색 등록에 들어가면 네이버 서치어드바이저·구글 서치콘솔·Bing 웹마스터 도구의 소유확인 코드를 붙여넣는 칸이 각각 있고, 어느 메뉴에서 코드를 복사해 오는지 경로까지 적혀 있습니다.
2) 문의 받을 창구 만들기
페이지에 폼이 들어 있다면 문의 탭에서 ‘내 폼 스캔’을 누르세요. 방문자가 남긴 내용이 메일과 대시보드에 함께 쌓입니다. 전화번호만 덜렁 적어 두는 것보다 문의량이 확실히 다릅니다.
3) 누가 보는지 확인하기
분석 탭에는 페이지뷰뿐 아니라 버튼 클릭 수와 전환율까지 나옵니다. “몇 명이 왔나”보다 “몇 명이 전화 버튼을 눌렀나”가 훨씬 쓸모 있는 숫자입니다.
이 방법이 맞는 경우 / 아닌 경우
| 맞습니다 | 다른 걸 알아보세요 |
|---|---|
| 완성된 HTML 한 장을 지금 공개해야 함 | 글을 매주 쌓아 갈 블로그를 만들고 싶음 |
| 포트폴리오·청첩장·가게 소개·랜딩페이지 | 회원가입·장바구니·결제가 필요한 쇼핑몰 |
| 서버나 코드를 건드리고 싶지 않음 | 서버 로직(DB, 로그인)을 직접 짜야 함 |
이럴 때 막힙니다
미리보기가 하얗게 비어 있어요
코드가 잘렸습니다. 첫 줄 <!DOCTYPE html>, 마지막 줄 </html>을 확인하세요. 드래그 말고 ‘복사’ 버튼을 쓰면 대부분 해결됩니다.
글자만 나오고 디자인이 사라졌어요
CSS가 style.css라는 별도 파일로 분리된 경우입니다. AI에게 “CSS를 <style> 태그 안에 넣어서 HTML 파일 하나로 다시 줘”라고 요청하면 한 덩어리로 다시 만들어 줍니다.
이미지가 엑스 박스로 떠요
코드 안에 <img src="images/photo.jpg">처럼 내 컴퓨터 안의 경로가 들어 있어서입니다. 사진은 따로 업로드해서 주소를 넣거나, 인터넷에 올라와 있는 이미지 주소로 바꿔야 합니다.
애니메이션이 미리보기에서 안 움직여요
정상입니다. 안내에 적힌 대로 미리보기에서는 스크립트가 실행되지 않고, 발행하면 정상 동작합니다. 보안 때문에 미리보기에서만 막아 두는 것입니다.
정리
HTML 파일이 안 열리는 건 파일 문제가 아니라 위치 문제입니다. file://에 있으면 나만 보고, 서버에 올라가면 모두가 봅니다. 서버를 직접 마련하는 길(호스팅·FTP·GitHub)도 있지만, 한 장짜리 페이지라면 붙여넣고 발행이 가장 짧습니다.
관련 글 — 카톡으로 보냈더니 안 열린다고 할 때 · GitHub Pages에서 막혔다면 · 블로그에 넣으면 디자인이 깨질 때
