HTML 코드 실행기 작동 방식

도구 뒤에 있는 기술 아키텍처, 보안 모델 및 설계 결정에 대해 자세히 알아보세요.

아키텍처 개요

HTML Code Runner는 순수한 클라이언트측 애플리케이션입니다. 백엔드 서버 처리 코드, 데이터베이스 저장 조각, 외부 서비스에 대한 API 호출이 없습니다. 전체 도구는 HTML, CSS 및 JavaScript와 같은 표준 웹 기술을 사용하여 사용자 브라우저 내에서 실행됩니다.

코드 실행 파이프라인

실행 버튼을 클릭하면 다음 순서가 발생합니다.

  1. 코드 캡처 — 텍스트 영역 편집기의 HTML 콘텐츠가 문자열로 읽혀집니다.
  2. Blob 생성 — 코드 문자열은 MIME 유형 text/html을 사용하여 Blob 개체로 래핑됩니다.
  3. URL 생성 — URL.createObjectURL()을 사용하여 임시 Blob URL이 생성됩니다.
  4. Iframe 로드 — Blob URL은 샌드박스 iframe의 src 속성에 할당됩니다.
  5. 렌더링 — 브라우저는 내장된 CSS 및 JavaScript를 실행하여 iframe 내에서 HTML 문서를 렌더링합니다.
  6. 콘솔 캡처 — iframe의 console.log, console.error 및 console.warn 메소드는 출력을 콘솔 출력 패널로 파이프하도록 재정의됩니다.
  7. 정리 — 메모리를 확보하기 위해 로드한 후 Blob URL이 취소됩니다.

보안 모델

보안은 핵심 설계 고려 사항입니다. 우리는 여러 계층의 격리를 사용합니다.

샌드박스 처리된 Iframe

미리보기 iframe은 다음 권한과 함께 HTML5 sandbox 속성을 ​​사용합니다.

  • allow-scripts — iframe 내에서 JavaScript 실행을 활성화합니다(JS 미리보기에 필요).
  • allow-modals — alert(), confirm() 및 prompt() 대화 상자를 허용합니다.
  • allow-same-origin — Blob URL 로드에 필요합니다(콘텐츠는 Blob URL과 원본을 공유해야 함)

샌드박스에는 다음이 명시적으로 포함되지 않습니다.

  • allow-top-navigation — iframe은 상위 페이지를 탐색할 수 없습니다.
  • allow-forms — 양식 제출이 차단됩니다(우발적인 데이터 유출 방지).
  • allow-popups — 팝업 창이 차단됩니다.

Blob URL 격리

document.write() 또는 srcdoc를 통해 코드를 삽입하는 대신 Blob URL을 사용합니다. 이는 브라우저가 Blob URL을 자체 실행 컨텍스트가 있는 별도의 문서로 처리하기 때문에 더 나은 격리를 제공합니다.

서버 측 처리 없음

귀하의 코드는 네트워크를 통해 전송되지 않습니다. 입력한 순간부터 탭을 닫을 때까지 브라우저의 메모리에 유지됩니다. 손상될 서버도 없고, 침해할 데이터베이스도 없으며, 악용할 API 엔드포인트도 없습니다.

에디터 디자인

코드 편집기는 다음 기능을 갖춘 스타일이 지정된

  • 줄 번호 — 줄 번호를 표시하고 편집기와 함께 스크롤하는 동기화된 읽기 전용 패널입니다.
  • 탭 지원 — Tab 키는 포커스를 이동하는 대신 두 개의 공백을 삽입합니다(표준 코드 편집기 동작).
  • Monospace 글꼴 — 최적의 코드 가독성을 위해 JetBrains Mono를 사용합니다.
  • 맞춤법 검사 비활성화됨 — 브라우저가 코드 '맞춤법 오류'에 밑줄을 긋는 것을 방지합니다.

성능 고려 사항

  • 전체 도구는 두 개의 작은 JS 파일과 하나의 CSS 파일이 포함된 단일 HTML 파일로 로드됩니다.
  • JavaScript 프레임워크나 라이브러리가 사용되지 않습니다. 모든 코드는 바닐라 JS입니다.
  • 글꼴은 font-display: swap을 사용하여 비동기적으로 로드됩니다.
  • 이 도구는 페이지 로드 후 밀리초 내에 대화형으로 작동합니다.
  • Blob URL은 메모리 누수를 방지하기 위해 사용 후 취소됩니다.

접근성

이 도구는 접근성을 염두에 두고 설계되었습니다.

  • 모든 대화형 요소에는 ARIA 라벨이 있습니다.
  • FAQ 아코디언은 적절한 aria-expanded 상태를 사용합니다.
  • 모든 대화형 요소에 초점이 명확하게 표시됩니다.
  • 색상 대비는 WCAG AA 지침을 충족합니다.
  • 이 도구는 완전히 키보드로 탐색할 수 있습니다.
  • 토스트 알림은 role="status" 및 aria-live="polite"를 사용합니다.

반응형 디자인

인터페이스는 모든 화면 크기에 맞게 조정됩니다.

  • 데스크톱(1024px+) — 편집기와 미리보기 패널이 나란히 있음
  • 태블릿(768px~1024px) — 전체 너비 레이아웃이 포함된 스택 패널
  • 모바일(<768px) — 누적 패널, 접힌 탐색, 최적화된 터치 대상

SEO 구현

이 사이트의 모든 페이지에는 다음이 포함됩니다.

  • 고유한 제목 태그 및 메타 설명
  • 시맨틱 HTML5 요소(머리글, 기본, 바닥글, 탐색, 섹션, 기사)
  • 중복 콘텐츠 문제를 방지하기 위한 표준 URL
  • WebPage, SoftwareApplication, FAQPage 및 BreadcrumbList 스키마에 대한 구조화된 데이터(JSON-LD)
  • 다국어 지원을 위한 Hreflang 태그
  • 적절한 제목 계층 구조를 갖춘 페이지당 하나의 H1

HTML 코드 실행기 사용해 보기 →