이 도구에 대해
코드 플레이그라운드는 아이디어를 시험하는 가장 빠른 방법입니다: 프로젝트 설정도, 빌드 단계도, 서버도 필요 없습니다. 세 창에 HTML, CSS, JavaScript를 입력하면 입력을 멈추는 순간 미리보기가 다시 렌더링됩니다. Stack Overflow 스니펫을 테스트하거나 컴포넌트를 프로토타이핑하거나 코드가 어떻게 동작하는지 가르치기에 완벽합니다.
모든 것은 브라우저 안의 샌드박스 iframe에서 로컬로 실행되며, 코드는 어디에도 업로드되지 않습니다. 마음에 드는 결과가 나오면 어디서나 열 수 있고 프로젝트에 넣을 수 있는 자체 완결형 .html 파일 하나로 다운로드하세요.
자주 묻는 질문
제 HTML/CSS/JS가 서버에서 실행되나요?
아니요. 모든 것이 브라우저 안의 샌드박스 처리된 iframe에서 실행됩니다 — 서버 측 실행은 없으므로 작성한 내용이 어디로도 전송되지 않습니다.
미리보기 iframe에서 실험해도 안전한가요?
네. 미리보기는 sandbox="allow-scripts allow-modals"로 실행되어 부모 페이지에 접근하거나, 쿠키를 읽거나, 최상위 창을 이동시킬 수 없습니다 — 사이트의 나머지 부분과 격리되어 있습니다.
코드가 자동으로 저장되나요?
네. 입력을 멈춘 후 약 300밀리초 뒤에 HTML, CSS, JS가 이 브라우저의 로컬 저장소에 저장되며, 다음에 여기서 플레이그라운드를 열면 자동으로 복원됩니다.
CDN의 외부 라이브러리를 사용할 수 있나요?
HTML 패널에 <script src="https://..."> 태그를 직접 추가하면 CDN에서 호스팅되는 라이브러리를 가져올 수 있지만, npm/번들러 지원은 없습니다 — 일반 <script> 태그가 불러올 수 있는 것만 가능합니다.
플레이그라운드를 독립된 파일로 저장할 수 있나요?
네. 다운로드 버튼은 현재 HTML, CSS, JS를 인라인 <style>과 <script> 태그가 포함된 하나의 .html 파일로 묶어주며, 서버 없이도 어떤 브라우저에서나 제대로 열립니다.