미리보기 패널은 파일에 대한 창입니다. 파일이 주소가 있는 어딘가에 있으면 유용한 모든 일이 발생합니다.
패널이 실제로 보유하고 있는 것
일반적으로 하나의 파일입니다. 단일 문서의 마크업, 스타일 지정 및 동작이 빌드 단계 없이 즉시 실행되는 이유입니다.
코드를 선택하고 복사한 후 텍스트 편집기에 붙여넣고 .html로 끝나는 이름으로 저장하세요.
해당 파일이 전체 페이지입니다. 다른 어떤 것도 관련되지 않았습니다.
가끔 패널 밖에서 깨지는 이유
미리보기 환경은 기본 브라우저가 아닙니다. 라이브러리나 스타일 지정 프레임워크를 제공하는 경우 이에 의존하는 마크업은 패널에서 스타일이 지정되고 일반 파일에서는 스타일이 지정되지 않습니다.
증상은 명백합니다. 모든 것이 작동하며 1995년 문서처럼 보입니다.
수정 사항은 파일 헤드의 한 줄로, 공개 주소에서 동일한 프레임워크를 로드합니다. 해당 줄을 명시적으로 요청하거나 파일에 작성된 스타일이 포함된 버전을 요청하세요.
| 파일을 열 때 나타나는 증상 | 원인 |
|---|---|
| 스타일이 지정되지 않은 일반 텍스트 | 프레임워크가 로드되지 않았습니다. |
| 빈 페이지 | 스크립트 오류입니다. 콘솔을 확인하세요. |
| 이미지 누락 | 파일에는 없었어요 |
| 글꼴이 다름 | 글꼴이 참조되었지만 로드되지 않았습니다. |
| 작동한 다음 잊어버림 | Claude에 남아 있는 스토리지 |
한 페이지는 무엇입니까?
사람들이 생각하는 것 이상입니다.
계산기, 퀴즈, 파일에 기록된 데이터에 대한 대화형 차트, 체크리스트, 변환기, 작은 게임, 고정된 숫자 집합에 대한 대시보드, 교육 도구. 이 모든 것은 뒤에 아무것도 없는 브라우저에서 실행됩니다.
경계는 기억이다. Claude에서 복사된 페이지에서는 Claude가 제공하는 아티팩트 저장소가 손실되고 NOS는 소유자의 변경 사항만 저장합니다. 로그인, 저장된 기록, 제출물 및 두 방문자 간에 공유되는 모든 항목에는 저장 공간이 필요하며 이는 모양이 다른 다른 프로젝트입니다.
대화를 공유하는 것은 페이지를 공유하는 것이 아닙니다
대화 링크는 프롬프트, 수정 사항, 토론 등 대화 내용을 누군가에게 보여줍니다.
일반적으로 원하는 것은 페이지 자체가 주소에서 작동하는 것입니다. 채팅도 없고, 맥락도 없고, 그것이 어떻게 만들어졌는지에 대한 증거도 없습니다.
이는 페이지로 제시된 도구가 사용되고 기록으로 제시된 동일한 도구가 읽히기 때문에 누군가가 실제로 사용할 버전이기도 합니다.
밀접하게 관련된 문제: Claude 아티팩트를 호스트하는 방법 및 인접한 문제에 대한 ChatGPT에서 HTML 출력을 호스트하는 방법.
주소에 넣어두세요
대화 대신 코드를 복사하고, HTML 파일로 저장하고, 다른 것보다 먼저 로컬에서 열고, 미리보기에서 제공하는 내용을 추가하고, 자체 주소에 게시하세요.