공들여 만든 페이지를 카톡으로 보냈습니다. 그런데 상대방 답이 이렇습니다.
“이거 안 열리는데?”
“뭘 눌러야 해?”
“글자만 나오는데 이게 맞아?”
HTML 파일을 메신저로 보내면 거의 항상 이렇게 됩니다. 상대방 잘못이 아니고, 파일이 손상된 것도 아닙니다. 애초에 그렇게 쓰라고 만든 파일이 아니어서 그렇습니다. 왜 그런지와 어떻게 보내야 하는지 정리했습니다.
메신저로 보낸 HTML이 안 열리는 세 가지 이유
① 휴대폰은 HTML 파일을 브라우저로 열지 않습니다
PC에서는 index.html을 더블클릭하면 브라우저가 열립니다. 휴대폰은 다릅니다. 안드로이드는 파일 관리자에서 “이 파일을 열 앱이 없습니다”가 뜨거나 텍스트 편집기가 열려 코드가 그대로 보입니다. 아이폰은 아예 미리보기조차 되지 않는 경우가 많습니다.
“글자만 나오는데?”라는 반응이 정확히 이 상황입니다. 상대는 지금 당신의 소스코드를 보고 있는 겁니다.
② 이미지와 CSS가 같이 따라가지 않습니다
HTML은 겉껍데기일 뿐입니다. 안에 <img src="images/logo.png">나 <link href="style.css">가 있다면, 그건 “내 컴퓨터의 그 폴더에서 가져와”라는 지시입니다. 파일 하나만 전송되면 그 폴더가 없으니 사진은 엑스 박스가 되고 디자인은 사라집니다.
③ 메신저가 실행 가능한 파일을 경계합니다
HTML은 스크립트를 품을 수 있어서 보안상 주의 대상입니다. 그래서 다운로드 경고가 붙거나, 이메일이라면 아예 차단되고 스팸함으로 갑니다.
⚠️ 압축(zip)해서 보내는 것도 답이 아닙니다
휴대폰에서 압축을 풀고, 폴더를 찾아 들어가서, HTML을 브라우저로 여는 앱을 따로 설치해야 합니다. 여기까지 해줄 사람은 없습니다.
클라우드 링크도 반쪽짜리입니다
구글 드라이브나 네이버 마이박스에 올려 공유 링크를 보내는 방법을 많이 시도합니다. 파일 전송보다는 낫지만 세 가지가 걸립니다.
- 웹페이지로 실행되지 않습니다. 미리보기가 막히거나 다운로드 창이 뜹니다.
- 로그인이나 권한 요청이 뜨는 경우가 있습니다. 링크 하나 여는 데 문턱이 생깁니다.
- 미리보기 카드가 안 뜹니다. 채팅방에 정체불명의 긴 주소만 덩그러니 남습니다.
세 번째가 생각보다 큽니다. 카톡에서 링크를 보낼 때 제목·설명·썸네일이 붙은 카드가 뜨느냐 아니냐로 클릭률이 크게 갈립니다.
답은 하나입니다 — 파일이 아니라 주소를 보내세요
https://로 시작하는 주소가 되면 위 문제가 한 번에 전부 사라집니다. 아이폰이든 안드로이드든 링크를 누르면 브라우저가 열리고, 이미지와 CSS는 서버에서 같이 내려오고, 보안 경고도 없습니다.
HTML 코드를 붙여넣어 주소로 바꿔주는 서비스를 쓰면 가장 빠릅니다. HTMLtoSITE에 코드를 붙여넣고 발행하면 이런 화면이 나옵니다.
1단계 — 코드 붙여넣기
htmltosite.com 첫 화면에 index.html이라고 적힌 상자가 바로 있습니다. 여기에 Ctrl+V만 하면 됩니다. 가입 화면이 먼저 나오지 않아서 부담이 없습니다.
2단계 — 미리보기로 확인
붙여넣는 순간 오른쪽에 화면이 그려집니다. 여기가 비어 있으면 코드가 잘린 것이니 다시 복사하세요. 상대에게 보내기 전에 내가 먼저 확인할 수 있다는 게 핵심입니다.
3단계 — 주소 정하고 발행
이름과 서브도메인을 정하고 발행을 누르면 악성코드 검사를 거쳐 주소가 열립니다. 여기까지 1분이 안 걸리고, 카드 등록도 없습니다.
Ctrl+V. 이걸로 끝입니다.QR 코드가 같이 나오는 것도 실용적입니다. 상대가 옆에 있으면 화면만 보여주면 되고, 인쇄물에 넣을 수도 있습니다.
카톡 미리보기 카드를 예쁘게 만드는 법
여기서 한 단계 더 갈 수 있습니다. 링크를 보냈을 때 뜨는 썸네일 카드는 페이지 안의 Open Graph(OG) 정보를 읽어서 만들어집니다. 이걸 비워 두면 제목이 Document로 뜨거나 썸네일이 없는 밋밋한 링크가 됩니다.
편집기 설정 → 브랜딩에 이 항목들이 모여 있습니다.
- 제목(title) — 카드 위에 굵게 뜨는 줄. 가게 이름이나 페이지 성격을 넣습니다.
- 설명(description) — 그 아래 작은 글씨. 한 줄로 무슨 페이지인지 알려 줍니다.
- OG 이미지 — 카드 썸네일. 설명에 “메신저·SNS 에서 링크를 공유할 때 보이는 미리보기 이미지입니다”라고 적혀 있습니다. 가로 1200 × 세로 630 픽셀을 권합니다.
- 파비콘 — 브라우저 탭에 뜨는 작은 아이콘. 있으면 훨씬 완성돼 보입니다.
넣고 저장한 뒤 발행까지 눌러야 반영됩니다. 이 5분이 링크의 인상을 완전히 바꿉니다.
페이지가 여러 장이면 링크도 나눠 보냅니다
공유 탭에 들어가면 QR 코드와 함께 페이지별 링크가 정리돼 있습니다. 복사 아이콘 하나로 각 페이지 주소를 가져올 수 있고, QR은 PNG와 SVG 두 형식으로 내려받습니다. 인쇄물에는 확대해도 안 깨지는 SVG를 쓰세요.
상황별로 이렇게 보내세요
| 보내는 상황 | 권하는 방식 | 이유 |
|---|---|---|
| 단톡방에 공지 | 주소 + OG 카드 | 카드가 있어야 스크롤에서 눈에 걸립니다 |
| 클라이언트에게 시안 | 주소 + 비밀번호 잠금 | 외부 유출 없이 링크 하나로 공유 |
| 부모님·어르신께 | QR 코드 이미지 | 주소를 타이핑할 필요가 없습니다 |
| 인쇄물·명함 | QR(SVG) + 짧은 주소 | 확대해도 안 깨지고 외우기 쉽습니다 |
| 이메일 뉴스레터 | 주소만 | 첨부는 스팸 처리될 확률이 높습니다 |
공통점은 하나입니다. 상대가 아무것도 설치하거나 풀지 않아도 되게 만드는 것. 링크를 누르는 것 이상을 요구하는 순간 전달률이 떨어집니다.
보내기 전 30초 점검
- 내 휴대폰 시크릿 모드에서 열어 봤는가 (PC 캐시에 속지 않기)
- 사진이 전부 뜨는가 (엑스 박스 없는지)
- 전화·지도 버튼을 실제로 눌러 봤는가
- OG 제목이
Document로 뜨지 않는가 - 마지막 수정 후 발행을 눌렀는가
이럴 때 막힙니다
카톡에서 미리보기 카드가 안 떠요
세 가지를 확인하세요. ① 브랜딩에서 OG 이미지를 넣고 발행까지 눌렀는지, ② 이미지 주소가 https://로 시작하는 공개된 주소인지, ③ 이미 한 번 보낸 링크인지. 카톡은 링크 정보를 잠시 캐시해 두기 때문에 방금 바꾼 내용이 바로 안 보일 수 있습니다. 주소 뒤에 ?v=2처럼 아무 값이나 붙여서 보내면 새로 읽어 옵니다.
링크를 눌렀는데 흰 화면이래요
발행 전 상태이거나, 붙여넣은 코드가 잘렸을 가능성이 큽니다. 본인 휴대폰에서 시크릿 모드로 한 번 열어 보세요. 내 PC 브라우저에는 캐시가 남아 정상으로 보이는 경우가 있습니다.
사진이 몇 장만 안 나와요
해당 이미지만 내 컴퓨터 경로로 남아 있는 겁니다. 미디어 라이브러리에 업로드해 웹 주소로 바꾸거나, 편집기에서 그 이미지를 클릭해 교체하면 됩니다.
정리
- HTML 파일을 보내는 방법은 전부 상대에게 숙제를 넘깁니다
https://주소로 바꾸면 기기·앱을 가리지 않고 그냥 열립니다- OG 제목·설명·이미지를 채우면 채팅방에서 카드로 예쁘게 뜹니다
- 바꾼 뒤에는 반드시 발행, 그리고 캐시 때문에 안 보이면 주소 뒤에 값 하나 붙이기
관련 글 — HTML 파일이 내 컴퓨터에서만 열릴 때 · 인스타 프로필 링크에 넣을 페이지 · 모바일 청첩장 직접 만들기
