ChatGPT, Claude, Gemini가 HTML 코드를 줬어요: 어떻게 실행해서 페이지를 보나요?

ChatGPT에게 퀴즈나 생일 카드, 작은 계산기를 부탁했더니 <!DOCTYPE html>로 시작하는 긴 코드가 답으로 왔어요. 이 코드가 페이지 하나 전체예요. 어시스턴트가 미리보기를 보여 주지 않으면 채팅에서는 그냥 글자예요. 이 글에서는 지금 쓰는 휴대폰이나 컴퓨터에서 그 코드를 실행해 보는 방법과, 어시스턴트마다 자체 미리보기가 하는 일, 그 미리보기가 멈추는 곳을 설명해요.

링크가 필요한가요? 이 페이지 맨 위의 업로드 상자에서 ‘코드 붙여 넣기’로 바꾸고, 코드를 붙여 넣은 뒤 ‘미리보기 링크 받기’를 누르세요. 계정 없이 링크가 생겨요. 이 미리보기에서는 스크립트가 실행되지 않아서, 퀴즈나 게임은 아직 반응하지 않아요. ‘이 페이지 보관하기’(무료, 카드 필요 없음)를 누르고 가입하면 페이지가 내 계정으로 옮겨지고, 거기서 스크립트가 실행되고 게시할 수 있어요.

코드가 아니라 내려받은 .html 파일이 있나요? 아이폰에서 HTML 파일을 여는 방법이나 Mac에서 여는 방법(영어)을 보세요. Codex나 Claude Code가 내 컴퓨터에 파일을 썼다면 Codex나 Claude Code가 만든 HTML 파일을 미리 보는 방법(영어)을 보세요.

코드가 페이지 전체인지 확인하기

실행할 수 있는 페이지는 <!DOCTYPE html>이나 <html>로 시작해서 </html>로 끝나는 코드 블록 하나예요. CSS는 <style> 태그에, JavaScript는 <script> 태그에 들어 있어요. Convika는 2026년 10월 25일에 답변 4종류를 Convika의 HTML 뷰어에 붙여 넣어 봤어요. Chromium 156과, 아이폰 15 크기로 맞춘 Playwright의 WebKit 27.2 테스트 빌드에서 시험했고, 두 브라우저의 결과는 같았어요.

어시스턴트가 페이지를 HTML, CSS, JavaScript 블록으로 나눠 줬거나 React 컴포넌트로 썼다면 파일 하나로 달라고 하세요. 같은 채팅에 이렇게 붙여 넣으세요.

페이지 전체를 <!DOCTYPE html>부터 </html>까지 HTML 파일 하나로, 코드 블록 하나에 넣어 주세요.
CSS는 <style> 태그에, JavaScript는 <script> 태그에 넣어 주세요.
React 컴포넌트라면 빌드 단계 없이 일반 HTML과 JavaScript로 다시 써 주세요.
이미지는 https://로 시작하는 전체 주소로 넣어 주세요.

ChatGPT, Claude, Gemini에서 코드 복사하기

어시스턴트의 버튼은 자주 바뀌어요. 아래 표는 2026년 10월 25일에 각 어시스턴트의 도움말에 적혀 있던 내용이에요. 앱을 직접 열어 보지는 않았기 때문에, 도움말에 나온 버튼만 적었어요.

• ChatGPT. OpenAI의 코드 블록 도움말에는 “ChatGPT는 일반적으로 코드를 코드 블록에 넣습니다”라고 적혀 있어요. 코드 블록과 쓸 수 있는 기능에 따라 “코드 복사”와 “미리 보기가 지원되는 경우 코드와 미리 보기 간 전환”을 할 수 있어요. 도움말은 “사용 가능한 기능은 요금제, 기기, 워크스페이스 설정, 모델 및 기능 출시 현황에 따라 다릅니다”라고 덧붙여요.
• Claude. Anthropic의 아티팩트 도움말에는 “아티팩트는 대화 옆의 자체 창에서 열립니다”라고 적혀 있어요. 템플릿으로 만든 아티팩트에는 ‘내보내기’를, 레거시 아티팩트에는 패널의 컨트롤을 들고, 나머지에는 아무 컨트롤도 들지 않아요. Claude 아티팩트를 HTML 파일로 받아서 공유하는 방법에서 종류별로 하나씩 살펴보고, 코드를 블록 하나로 받는 요청도 알려 줘요.
• Gemini. Google의 Canvas 도움말에는 “코드를 열고 수정하려면 Canvas 패널 오른쪽 상단에서 코드를 클릭합니다”라고 적혀 있어요. ‘공유 및 내보내기’ 아래의 ‘콘텐츠 복사’는 “텍스트 복사하기”에 쓰는 버튼이에요. 일반 답변에는 Google의 내보내기 도움말이 ‘Replit으로 내보내기’를 들어요. 그러면 “프롬프트와 Gemini 앱의 대답이 Replit으로 전송됩니다.” 도움말은 “무료 Replit 계정으로 내보낸 항목은 Replit에 공개적으로 표시됩니다”라고 경고해요.

어느 어시스턴트가 만들었든 첫 <!DOCTYPE html>부터 마지막 </html>까지 전부 복사하세요. 중간에 잘린 페이지는 깨지거나 빈 화면으로 보여요.

브라우저에서 코드를 실행하는 4단계

휴대폰과 컴퓨터 모두 같은 단계예요. 아무것도 설치하지 않고, 아무것도 업로드되지 않아요.

1. 코드 블록 전체 복사하기

위 섹션처럼 첫 <!DOCTYPE html>부터 마지막 </html>까지 복사하세요. 답변에 블록이 여러 개라면 먼저 파일 하나로 달라고 하세요.

2. HTML 뷰어에서 코드 붙여 넣기 탭 열기

브라우저에서 Convika의 무료 HTML 뷰어를 열고 ‘코드 붙여 넣기’를 고르세요. 계정은 필요 없어요. 코드는 내 브라우저 안에만 있고, ‘업로드해서 링크 만들기’를 눌렀을 때만 Convika로 가요.

3. 붙여 넣고 페이지 보기 누르기

상자에 코드를 붙여 넣고 ‘페이지 보기’를 누르세요. 페이지는 convika.com과 분리된 틀 안에서 CSS와 JavaScript까지 실행돼요. CDN의 Tailwind처럼 다른 사이트의 이미지, 글꼴, 스크립트도 불러와요. 붙여 넣는 코드는 2 MB까지 돼요.

4. 버튼을 모두 눌러 보기

페이지를 끝까지 눌러 보세요. 버튼과 탭을 누르고, 퀴즈는 마지막 문제까지 풀어 보세요. 너비를 ‘휴대폰’으로 바꾸면 휴대폰 너비로 볼 수 있어요. 고칠 곳이 있으면 ‘코드 수정하기’를 누르고 고친 뒤 ‘페이지 보기’를 다시 누르세요. 코드가 무슨 일을 하는지 잘 모르겠다면 먼저 ‘스크립트 실행’을 끄세요. 그러면 페이지의 HTML과 CSS만 보여요.

뷰어에서 실행되는 것과 안 되는 것

같은 10월 25일 시험에서 페이지 전체를 붙여 넣었을 때 결과는 이랬어요.

• 실행됨: 페이지 자체의 스크립트, 클릭 카운터, cdn.tailwindcss.com에서 불러온 Tailwind.
• 알림 창 없음: alert()를 부르는 버튼을 눌러도 아무것도 나오지 않았고, 스크립트는 곧바로 다음으로 넘어갔어요. 뷰어의 틀은 대화상자나 새 창을 열 수 없게 되어 있어요.
• 새 탭 없음: target="_blank"가 붙은 링크는 아무것도 열지 않았어요.
• 데이터 저장 안 됨: localStorage에 쓰면 SecurityError가 났어요. 그래서 최고 점수를 저장하는 게임은 그 줄에서 멈출 수 있어요.
• 옆에 있는 파일 없음: 붙여 넣은 코드는 style.css, game.js, photo.png를 함께 가져올 수 없어요. 코드가 이런 파일을 이름으로 가리키면 뷰어가 페이지 아래에 목록으로 보여 줘요. 고치는 방법은 이미지와 스타일이 빠지는 이유(영어)에 있어요.

알림 창이나 저장된 데이터가 필요한 페이지는 다음 섹션처럼 파일로 저장해서 브라우저에서 여는 편이 잘 돼요.

대신 .html 파일로 저장하기

페이지를 기기에 남겨 두거나 채팅 없이 열려면, 일반 텍스트 편집기에 코드를 붙여 넣고 이름이 .html로 끝나게 저장하세요.

• Mac에서. Apple의 텍스트 편집기 사용 설명서에 따르면 ‘파일 > 신규’를 선택한 다음 ‘포맷 > 일반 텍스트 만들기’를 선택해요. 코드를 붙여 넣고 ‘파일 > 저장’을 선택한 뒤 quiz.html 같은 이름을 입력하고, 텍스트 편집기가 물으면 ‘.html 사용’을 클릭하세요.
• Windows에서. 메모장에 코드를 붙여 넣고 이름이 .html로 끝나게 저장하세요. 그다음 파일 탐색기에서 이름을 확인하세요. 확장명이 보이지 않으면 Microsoft의 파일 이름 확장명 도움말대로 ‘보기 > 표시 > 파일 이름 확장명’을 선택하세요. 이름이 .html.txt로 끝나면 텍스트 파일이에요. 이름 끝을 .html로 바꾸세요. Microsoft는 확장명을 바꿔도 파일이 “다른 형식으로 변환”되지는 않는다고 설명하는데, 여기서는 변환할 필요가 없어요. 안의 글자가 이미 HTML이기 때문이에요.

파일을 더블클릭하면 브라우저에서 열려요. 코드가 모두 파일 안에 있는 페이지는 거기서 실행돼요. 폴더에서 모듈 스크립트나 데이터 파일을 불러오는 페이지는 디스크에서 열면 막혀요. Convika의 Mac 시험(영어)에서 확인한 내용이에요. 아이폰에서는 파일 앱에서 파일을 탭하면 미리보기가 열리는데, Convika의 iOS 26.3 시험에서 이 미리보기는 JavaScript를 실행하지 않았어요. 그러니 아이폰에서는 뷰어를 쓰세요. 파일이 코드나 빈 화면으로 열리면 HTML 파일이 코드나 빈 화면으로 보이는 이유(영어)를 보세요.

어시스턴트별 자체 미리보기와 그 한계

어느 미리보기든 내가 페이지를 확인하기에는 충분해요. 다른 사람이 페이지를 페이지로 열어야 할 때 멈춰요. ChatGPT 채팅의 공유 링크는 채팅을 보여 주고, Claude 링크는 Claude 계정을 요구하고, Gemini 링크는 브라우저에서 gemini.google.com으로 열어야 해요. OpenAI는 “미리 보기에 외부 리소스가 필요한 경우 ChatGPT가 연결 전에 권한을 요청할 수 있습니다”라고 덧붙여요.

출처는 OpenAI의 공유 도움말, Anthropic의 아티팩트 공유 도움말, Google의 Canvas 도움말이고, 모두 2026년 10월 25일에 읽었어요. 한국어판은 2026년 10월 30일에 확인했어요.

링크로 보내기

링크는 AI 계정 없이 어느 휴대폰이나 컴퓨터에서도 열려요. Convika에서는 이렇게 해요.

1. 이 페이지 맨 위의 업로드 상자에서 ‘코드 붙여 넣기’로 바꾸고, 코드를 붙여 넣은 뒤 ‘미리보기 링크 받기’를 누르세요. 계정 없이 몇 초 만에 링크가 생겨요. 이 링크는 3분 동안 열리고, 스크립트와 폼은 꺼져 있어요. 뷰어의 ‘업로드해서 링크 만들기’도 같은 링크를 만들어요.
2. ‘이 페이지 보관하기’(무료, 카드 필요 없음)를 누르고 가입하세요. 페이지가 내 계정으로 옮겨지고, 대시보드 미리보기에서 스크립트가 실행돼요.
3. 페이지 화면에서 게시하고, 코드 대신 링크를 보내세요.

나머지는 어시스턴트별 게시 가이드 ChatGPT, Claude, Gemini Canvas, Grok(영어)에서 다뤄요. ChatGPT와 Gemini Canvas 가이드는 다른 호스팅 서비스도 비교해요. ChatGPT의 canvas를 찾고 있었다면 ChatGPT canvas가 어디로 갔는지(영어)에서 바뀐 점을 설명해요.

자주 묻는 질문

ChatGPT(챗GPT)가 준 HTML 코드는 어떻게 실행하나요?

코드 블록 전체를 복사해서 브라우저의 HTML 뷰어에 붙여 넣으세요. Convika의 무료 HTML 뷰어에서 ‘코드 붙여 넣기’를 고르고, 붙여 넣은 뒤 ‘페이지 보기’를 누르면 스크립트까지 실행되고 코드는 업로드되지 않아요. ChatGPT 안에서는 지원되는 코드 블록에서 ‘미리 보기’를 고르라고 OpenAI 도움말이 안내하고, 보이는 기능은 요금제와 기기에 따라 다르다고 해요.

휴대폰에서 ChatGPT가 준 HTML을 열 수 있나요?

네. ChatGPT 앱에서 코드를 복사하고, 휴대폰 브라우저에서 HTML 뷰어를 열어 ‘코드 붙여 넣기’를 고른 뒤 ‘페이지 보기’를 탭하세요. 아이폰 15 크기로 맞춘 Playwright의 WebKit 27.2 테스트 빌드에서 시험해 보니, 붙여 넣은 페이지의 스크립트와 Tailwind 스타일이 동작했어요. 실제 휴대폰으로는 시험하지 않았어요. 코드를 파일로 저장해서 아이폰의 파일 앱에서 탭하면 미리보기가 열리는데, Convika의 iOS 26.3 시험에서 이 미리보기는 JavaScript를 실행하지 않았어요.

ChatGPT HTML을 저장했더니 글자로만 보이는 이유는?

대개 파일이 이름이 .html로 끝나는 일반 텍스트 파일이 아니기 때문이에요. Windows에서는 파일 탐색기에서 파일 이름 확장명을 보이게 하고 page.html.txt를 page.html로 바꾸세요. Mac에서는 붙여 넣기 전에 텍스트 편집기에서 ‘포맷 > 일반 텍스트 만들기’를 선택하고, 저장할 때 ‘.html 사용’을 클릭하세요. Convika의 시험에서는 React 컴포넌트가 브라우저에서도 글자로 보였으니, 일반 HTML과 JavaScript로 달라고 하세요.

ChatGPT 코드를 웹사이트로 만들려면 어떻게 하나요?

코드를 호스팅 서비스에 게시하고, 그곳이 주는 링크를 보내세요. Convika에서는 업로드 상자를 ‘코드 붙여 넣기’로 바꾸고 코드를 붙여 넣으면 계정 없이 미리보기 링크가 생겨요. 그다음 무료 요금제로 페이지를 보관하고 게시하세요. 그 링크는 ChatGPT나 Convika 계정 없이 어느 브라우저에서나 페이지를 열어요. ChatGPT로 만든 HTML을 무료로 웹사이트에 올리는 방법에서 무료 호스팅 서비스를 비교하고, Convika로 게시하는 6단계를 설명해요.

Claude(클로드)에는 HTML 코드를 실행하는 버튼이 있나요?

따로 있는 버튼은 없어요. Claude는 페이지를 아티팩트로 실행하고, Anthropic 도움말에 따르면 아티팩트는 “대화 옆의 자체 창에서 열립니다.” 다른 곳에서 실행하려면 코드가 필요해요. 도움말은 템플릿 아티팩트의 ‘내보내기’와, 레거시 아티팩트에만 있는 복사·다운로드 컨트롤을 들어요. 그 밖의 아티팩트는 Claude에게 페이지 전체를 답변 안의 코드 블록 하나로 달라고 한 뒤 HTML 뷰어에 붙여 넣으세요.

Gemini(제미나이)에는 코드를 실행하는 버튼이 있나요?

Canvas에는 있어요. Canvas 패널이 앱을 보여 주고, 패널 오른쪽 상단의 ‘코드’를 누르면 코드가, ‘콘솔 표시’를 누르면 오류가 보여요. 일반 답변에는 Google 도움말이 미리보기를 들지 않아요. 대신 ‘공유 및 내보내기’ > ‘Replit으로 내보내기’를 드는데, HTML을 지원하고 프롬프트와 Gemini의 대답을 Replit으로 보내요. Google은 무료 Replit 계정으로 내보낸 항목은 공개적으로 표시된다고 경고해요.

HTML 뷰어에서 눌러도 반응하지 않는 버튼이 있는 이유는?

뷰어는 페이지를 분리된 틀 안에서 실행해요. Convika의 시험에서 alert()는 창을 띄우지 않았고, 새 탭을 여는 링크는 아무것도 열지 않았고, localStorage는 SecurityError를 냈어요. 이 중 하나에 기대는 버튼은 뷰어에서 아무 일도 하지 않아요. 코드를 .html 파일로 저장해서 브라우저에서 열거나, 게시하세요. style.css처럼 페이지가 이름으로 불러오는 파일은 붙여 넣은 코드와 함께 올 수 없어요.

뷰어에 붙여 넣으면 코드가 업로드되나요?

아니요. 브라우저가 코드를 읽어 페이지를 보여 주고, Convika 서버로는 아무것도 가지 않아요. 다만 페이지 자체는 다른 사이트의 글꼴, 이미지, 스크립트처럼 링크된 것을 불러와요. ‘업로드해서 링크 만들기’를 누를 때만 코드가 Convika로 업로드되고, 3분 동안 열리는 나만 보는 미리보기 링크가 생겨요.

출처

• ChatGPT에서 글쓰기 블록 및 코드 블록 작업하기 (OpenAI) (2026년 10월 30일 한국어판 확인)
• ChatGPT에서 대화 및 예약된 작업 공유하기 (OpenAI) (2026년 10월 30일 한국어판 확인)
• 아티팩트란 무엇이며 어떻게 사용하나요? (Anthropic) (2026년 10월 30일 한국어판 확인)
• 아티팩트 공유 (Anthropic) (2026년 10월 30일 한국어판 확인)
• Canvas로 문서, 앱 등 만들기 (Google) (2026년 10월 30일 한국어판 확인)
• Gemini 앱 대답 내보내기 (Google) (2026년 10월 30일 한국어판 확인)
• Mac용 텍스트 편집기에서 HTML 문서로 작업하기 (Apple) (2026년 10월 30일 한국어판 확인)
• Windows의 일반 파일 이름 확장명 (Microsoft) (2026년 10월 30일 한국어판 확인)