Claude Code는 HTML 파일을 컴퓨터의 폴더에 직접 작성하므로 가장 먼저 알아야 할 것은 페이지가 다른 사람이 보기 전에 실제 파일로 존재한다는 것입니다.
이는 채팅 창에 비해 진정한 이점이며 하나의 격차를 만듭니다. Claude Code HTML 파일은 경로이며 경로는 동료에게 보낼 수 있는 것이 아닙니다.
다음은 실행할 검사, 파일이 이동할 때 파일이 깨지는 두 가지 방법, 링크로 전환하는 단계입니다.
달리기 후에 실제로 가지고 있는 것
지정한 폴더에 있는 디스크의 파일입니다. 파일은 하나일 수도 있고 여러 개일 수도 있으며, 이 페이지의 다른 무엇보다 차이점이 중요합니다.
| 무엇이 쓰여졌는가 | 혼자 움직일 때 작동 | 해야 할 일 |
|---|---|---|
| 내부에 스타일과 스크립트가 포함된 파일 1개 | 예 | 있는 그대로 공유 |
| index.html과 styles.css | 아니요 | 인라인된 CSS를 요청하세요. |
| 로컬 JSON 파일을 가져오는 페이지 | 아니요 | 데이터 삽입 또는 폴더 제공 |
| 주소별로 글꼴이나 라이브러리를 연결하는 페이지 | 예, 네트워크가 있는 경우 | NOS에서는 일반 CDN 또는 Google Fonts에서만 가능합니다. 오프라인 실패 |
| 빌드 단계가 있는 프레임워크 프로젝트 | 아니요 | 먼저 빌드한 후 출력을 공유하세요. |
실행으로 인해 파일이 아닌 폴더가 생성된 경우 프로젝트가 있는 것입니다. 프로젝트에는 호스트가 필요합니다. 단일 파일에는 주소가 필요하며 이는 훨씬 짧은 심부름입니다.
보내기 전에 열어보세요
두 번 클릭하면 페이지가 서버가 아닌 파일 프로토콜을 통해 실행되기 때문에 가장 확실하고 가장 신뢰도가 낮은 검사입니다.
해당 프로토콜에서는 일부 가져오기, 모듈 스크립트 및 파일 간 요청이 브라우저에 의해 의도적으로 차단됩니다. 독자에게는 존재하지 않는 제한 사항을 디버깅하게 됩니다.
대신 HTML 파일 오프너에서 엽니다. 독자가 있는 위치와 정확히 같은 폴더에 대한 정보가 없는 창입니다. 거기에서 살아남는 것은 그들에게 살아남습니다.
열려 있는 동안 살펴봐야 할 세 가지 사항:
- 스타일이 표시됩니까, 아니면 페이지에 스타일이 지정되지 않은 흰색 텍스트가 있습니까?
- 이미지가 나타나나요, 아니면 자리표시자가 깨졌나요?
- 페이지가 휴대폰 너비에서 작동합니까, 아니면 가로 스크롤이 필요합니까?
두 번째는 일반적으로 폴더 내부에서만 확인되는 이미지 경로를 의미합니다. 세 번째는 일반적으로 헤드에서 뷰포트 메타 라인이 누락되었음을 의미합니다.
프로젝트 대신 하나의 파일을 요청하는 중
프로젝트 폴더에서 Claude Code는 프로젝트의 모양을 따라 페이지를 별도의 파일로 분할할 수 있습니다. 누군가에게 넘겨주려는 페이지에 대해서는 요청에 그렇게 명시하세요.
유용한 표현: 하나의 HTML 파일, 스타일 블록의 CSS, 외부 스타일시트 없음, 포함된 이미지 또는 전체 주소에 제목 및 뷰포트 줄이 포함됩니다.
결과적으로 파일은 길어지고 누락될 수 있는 항목의 목록은 짧아집니다. 자체 포함 HTML은 어떤 부분이 내부로 들어가야 하고 어떤 부분이 네트워크에 남아 있을 수 있는지 설명합니다.
파일 자체가 품질이 좋지 않은 이유
파일이 완성되었으니 파일 보내기가 완료된 느낌입니다. 세 가지 별도의 문제는 그렇지 않다고 말합니다.
배달. 양식과 스크립트가 포함된 페이지도 가짜 로그인 페이지의 형태이기 때문에 일부 회사 메일 게이트웨이는 .html 첨부 파일을 차단합니다. 당신의 것은 하나와 구별할 수 없습니다.
열기. 데스크톱에서는 확장 프로그램을 소유한 모든 곳에서 파일이 열립니다. 때로는 코드 편집기에서도 열립니다. 휴대폰에서는 렌더링 기능이 전혀 제공되지 않은 상태로 파일 저장소에 저장될 수 있습니다.
정확하게 유지하세요. 모든 사본은 보낸 순간에 동결됩니다. 한 번의 수정은 두 번째 파일을 의미하며, 이제는 구별할 수 없는 두 가지 버전이 유통되고 있습니다.
세 가지 중 하나만으로도 페이지 읽기를 중단할 수 있습니다.
Claude Code HTML 파일을 링크로 전환
- 파일을 열고 문서 유형부터 닫는 태그까지 모든 것을 복사합니다.
- NOS 문서에 붙여넣습니다. 어두운 테마, 차트 및 스크립트를 포함하여 작성된 대로 렌더링됩니다.
- 공유, 링크 공유, 공유 링크 만들기를 차례로 선택하세요. 링크는 기본적으로 목록에 표시되지 않으므로 해당 링크가 있는 사람만 페이지를 열 수 있습니다. 검색에서 찾을 수 있도록 하려면 웹에 공개를 선택하세요.
- 링크를 보내세요. 변경 사항이 있으면 새 파일을 보내기보다는 문서를 편집하세요.
HTML을 링크로 변환은 이 단계 자체입니다.
호스트 또는 문서
둘 다 페이지를 주소에 넣습니다. 다음에 일어날 일이 다릅니다.
정적 호스트는 빌드 파이프라인과 저장소를 루프에 유지합니다. 이는 페이지가 제품의 일부이거나 자체 도메인이 있거나 다른 모든 것과 동일한 프로세스에 의해 배포될 때 올바른 모양입니다.
문서는 페이지가 명명된 그룹이 읽는 보고서, 사양, 대시보드 또는 프로토타입일 때 올바른 모양입니다. 텍스트를 제자리에서 수정하므로 작업 단위는 파일이 아닙니다.
정적 호스트 대 문서는 기능보다는 수정 비용을 비교합니다.
다음 실행 시 편집 내용이 취소되지 않도록 유지
하나의 트랩은 이 워크플로에만 적용됩니다. 페이지를 공유하고 문서의 제목을 편집한 다음 Claude Code에게 변경 사항을 요청하고 새 출력을 맨 위에 붙여넣습니다.
재생성된 파일은 사용자가 직접 편집한 내용을 알지 못합니다. 원본 파일의 모든 수정 사항을 유지하고 다시 붙여넣거나, 문서에 유지하고 재생성을 중지하세요. 두 가지를 혼합하면 고정된 오타가 다시 나타나는 방식입니다.
명령줄이 아닌 아티팩트나 채팅에서 나온 페이지의 경우 Claude 아티팩트 저장이 내보내기 경로를 다룹니다.