# ChatGPT Canvas 와 사용하기 좋은 Instant HTML 프리뷰 북마클릿

> Clean Markdown view of GeekNews topic #17150. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=17150](https://news.hada.io/topic?id=17150)
- GeekNews Markdown: [https://news.hada.io/topic/17150.md](https://news.hada.io/topic/17150.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-10-09T09:46:38+09:00
- Updated: 2024-10-09T09:46:38+09:00
- Original source: [gist.github.com/rmtbb](https://gist.github.com/rmtbb/e42d870a59a7f98091e734674831072b)
- Points: 9
- Comments: 0

## Summary

ChatGPT Canvas는 구조화된 콘텐츠를 생성하고 볼 수 있지만 HTML 또는 SVG 코드의 직접 미리보기를 생성하는 기능이 없는데요. 이 Instant HTML 프리뷰 북마클릿은 ChatGPT Canvas와 함께 사용할 수 있어 유용합니다. 클립보드에 복사된 HTML, CSS, 자바스크립트를 포함한 전체 페이지를 브라우저에서 즉시 미리 볼 수 있게 해주어, 웹 개발 및 디자인 작업에 큰 도움이 됩니다.

## Topic Body

- 현재 클립보드에 복사된 모든 CSS 및 자바스크립트가 포함된 전체 HTML 페이지를 렌더링하는 북마클릿   
- ChatGPT Canvas는 구조화된 콘텐츠를 생성하고 볼 수 있지만 HTML 또는 SVG 코드의 직접 미리보기를 생성하는 기능이 없음   
- 이 북마클릿은 브라우저에서 직접 HTML 콘텐츠를 빠르게 미리 볼 수 있도록 하여 이러한 공백을 메워줌   
- ChatGPT 또는 Claude 인터페이스에서 '클립보드에 복사' 버튼을 클릭한 다음 이 북마클릿을 클릭하면 전체 HTML 페이지로 렌더링된 콘텐츠를 즉시 확인  
- 또한 SVG 그래픽에도 사용할 수 있어 웹 개발 및 디자인 작업에 다양하게 활용 가능

## Comments



_No public comments on this page._