개발자 도구
개발자 도구
HTML·CSS·JavaScript 실시간 실행기
HTML·CSS·JavaScript 코드를 브라우저의 격리된 미리보기에서 실행합니다. 문법 강조·Console·반응형 크기 비교·전체화면·HTML/JSON 백업을 지원하며 외부 리소스·API 요청은 제한합니다. 로그인·AI 호출·서버 코드 저장 없이 사용합니다.
외부 리소스·API 요청은 차단합니다. HTML·CSS·일반 JavaScript 전용이며 JSX·TypeScript·npm은 지원하지 않습니다. 무한 반복은 브라우저를 느리게 할 수 있습니다.
보관은 선택 사항이며 브라우저 데이터 삭제 시 사라집니다. 비밀번호·API 키 등 비밀정보는 입력하지 마세요. HTML 저장 파일도 격리·외부 통신 제한을 유지합니다.
Ctrl/⌘ + Enter 실행 · Tab 들여쓰기 · 618/200,000자
실행 후 console.log·warn·error와 JavaScript 오류를 확인할 수 있습니다.
실행을 눌러 샘플을 확인하세요.
HTML·CSS·JavaScript 실시간 실행기란?
AI가 만든 UI 코드나 학습 예제를 붙여넣고 브라우저에서 화면과 버튼 동작을 확인하는 개발자 도구입니다. 프로젝트 설치 없이 HTML 구조, CSS 스타일, 일반 JavaScript를 조합해 실행합니다. 직접 코드를 생성하거나 AI를 호출하지 않습니다.
코드 입력부터 미리보기까지
- HTML·CSS·JS 탭에 코드를 입력합니다. HTML 조각뿐 아니라 style·script를 포함한 완전한 HTML 문서도 넣을 수 있습니다.
- 실행 또는 Ctrl/⌘ + Enter를 누릅니다. CSS 탭은 문서의 스타일 뒤에 적용되며 JS 탭은 DOM이 준비된 뒤 실행됩니다. 같은 코드를 HTML과 JS 탭에 중복 작성하면 두 번 실행됩니다.
- 화면과 Console에서 결과를 확인합니다. 자동 실행은 선택 사항이며 변경 후 700ms 뒤 실행 상태를 새로 만듭니다.
- 모바일·태블릿·PC 크기를 선택하거나 작업 전체화면을 사용합니다. 분할 비율은 슬라이더로 조절합니다.
입력부터 결과까지 실제 사용 예시
기본 버튼 이벤트
- 입력
- 예제 불러오기 → 실행 → Preview의 클릭 버튼
- 예상 결과
- 정상적으로 실행되었습니다. 문구와 Console의 Button clicked
- 해석
- HTML 요소를 JavaScript 이벤트로 바꾸는 동작을 확인합니다.
- 제외·주의
- alert 대신 미리보기 안의 문구를 바꾸며 외부 API를 호출하지 않습니다.
반응형 스타일 비교
- 입력
- HTML: <p>크기 확인</p> / CSS: p { color: blue; } @media(max-width:500px) { p { color: red; } } / JS 비움
- 예상 결과
- 모바일 375px에서는 빨강, PC 1280px에서는 파랑
- 해석
- 표시 배율이 줄어도 미디어 쿼리는 실제 iframe 너비를 기준으로 합니다.
- 제외·주의
- 화면 크기 비교이며 기기 운영체제·터치·모바일 브라우저를 완전히 재현하지 않습니다.
JavaScript 오류 확인
- 입력
- JS: throw new Error("테스트 오류") → 실행
- 예상 결과
- Console에 테스트 오류가 ERROR로 표시
- 해석
- 오류와 처리되지 않은 Promise 거부를 확인할 수 있습니다.
- 제외·주의
- 개발자 도구 전체를 대체하지 않으며 합성 문서의 줄 번호는 원본과 다를 수 있습니다.
외부 통신과 실행 격리
입력 코드를 LushMorrow 서버·Firestore·AI API로 전송하지 않습니다. 미리보기는 부모 페이지와 분리된 sandbox iframe에서 실행하며 부모 DOM·쿠키·저장소를 공유하지 않습니다. 외부 CDN 스크립트·이미지·폰트와 fetch/WebSocket, 외부 페이지 이동은 제한됩니다. 외부 리소스가 필요한 코드는 일부 표시되거나 실행되지 않을 수 있습니다.
코드는 신뢰할 수 있는 것만 실행하세요. 격리는 CPU·메모리 사용량을 제한하는 가상머신이 아니므로 무한 반복 등은 브라우저를 느리게 하거나 멈추게 할 수 있습니다. 미리보기 초기화가 응답하지 않으면 탭을 닫아야 할 수 있습니다. Console은 실행당 200개, 메시지당 4,000자까지 표시합니다. 전체 입력 한도는 200,000자입니다.
저장·백업과 초기화
이 브라우저에 보관을 켜면 HTML·CSS·JS만 localStorage에 저장합니다. 복구한 코드는 자동으로 실행하지 않습니다. 공용 기기나 비밀정보는 보관하지 말고 JSON 백업을 활용하세요. 저장 기능이 꺼져 있으면 새로고침 시 작성 코드가 사라집니다. 브라우저 데이터 삭제도 보관본을 지웁니다.
JSON은 세 코드 영역을 보존하는 편집용 파일입니다. 통합 HTML은 미리보기 실행용 파일로, 격리와 외부 통신 제한을 유지합니다. 미리보기 초기화는 코드와 별개이며 전체 비우기·예제 불러오기는 교체 전에 확인합니다. 보기 설정 초기화는 코드에 영향을 주지 않습니다.
자주 묻는 질문
HTML 안에 CSS와 JavaScript를 함께 넣어도 되나요?
네. HTML 탭에 <style>과 <script>가 포함된 코드를 한 번에 붙여넣어 실행할 수 있습니다. 이때 별도 CSS·JS 탭은 비워두세요. 기본 예제의 코드가 다른 탭에 남아 있으면 함께 적용됩니다. 코드를 따로 입력할 때는 CSS 탭의 스타일이 문서 스타일 뒤에 적용되고 JS 탭은 HTML이 준비된 뒤 실행됩니다. 외부 CDN·API 요청 제한은 동일하게 적용됩니다.
React·Vue·TypeScript·Node.js도 실행되나요?
이 도구는 HTML·CSS·일반 JavaScript를 실행합니다. JSX/TypeScript 컴파일, npm 설치, Node.js·PHP·Python·Java 서버 실행은 제공하지 않습니다. HTML에 CDN을 넣어도 외부 리소스 제한이 적용됩니다.
API 호출이 안 되는 이유는 무엇인가요?
이 도구는 CORS 허용 여부와 별개로 미리보기의 외부 통신을 차단합니다. 인증정보·API 키를 입력하지 마세요. 실제 서비스의 백엔드·로그인 동작 검증은 별도 개발 환경에서 진행하세요.
화면 크기와 표시 배율은 어떻게 다른가요?
375×812, 768×1024, 1280×800은 실행 화면의 CSS 크기입니다. 공간이 부족하면 전체 화면이 들어오도록 시각적 배율만 줄입니다. 영역에 맞춤은 현재 Preview 영역의 너비·높이를 사용합니다.
모든 HTML/CSS 오류가 Console에 나오나요?
브라우저는 잘못된 HTML을 보정하거나 잘못된 CSS 선언을 무시할 수 있습니다. Console은 JavaScript 로그·실행 오류를 보조하며 HTML/CSS 문법 검사기나 완전한 디버거가 아닙니다.