code_blocks HTML/CSS/JS 실시간 에디터 star

작동 방식

HTML, CSS, JS 탭에 입력하면 미리보기 패널이 입력과 동시에 업데이트되며, 결합된 결과를 샌드박스 처리된 iframe 안에서 렌더링합니다. sandbox 속성은 allow-same-origin 없이 allow-scripts만 설정되는데, 이것이 실제로 안전을 보장하는 부분입니다. 미리보기 안에서 실행되는 스크립트는 별도의 불투명한 origin에서 실행되므로, 이 페이지의 쿠키, 로컬 저장소, DOM을 읽을 수 없고, 이 페이지 역시 iframe 내부에 접근할 수 없습니다. 이 격리는 단순한 시각적 프레임이 아니라 브라우저가 강제하는 보안 경계이며, 신뢰할 수 없는 광고, 위젯, 사용자 제출 코드 조각 같은 제3자 콘텐츠를 안전하게 삽입할 때 사이트들이 사용하는 것과 동일한 메커니즘입니다.

편집 자체는 의도적으로 단순합니다 — 구문 강조나 자동완성이 없는 세 개의 텍스트 영역뿐입니다. 이는 빠진 기능이 아니라 의식적인 트레이드오프입니다. 진짜 코드 편집 경험(키워드 토큰화, 괄호 매칭, 태그 자동완성)을 구현하려면 상당한 크기의 서드파티 에디터 라이브러리를 불러와야 하며, 이는 첫 글자를 입력하기도 전에 무게와 로딩 지연을 더합니다. 이 도구는 그 반대를 최적화합니다 — 페이지를 열자마자 의존성 없이, 어떤 빌드 과정도 없이 바로 입력을 시작할 수 있습니다.

세 탭 중 어디서든 키를 누를 때마다 다시 빌드가 일어납니다. 현재 HTML, <style> 태그로 감싼 현재 CSS, <script> 태그로 감싼 현재 JS가 하나의 문서로 조립되어 iframe에 기록됩니다. 차이 비교나 점진적 패치는 없습니다 — 미리보기 문서 전체가 단순히 교체되며, 이 정도 규모에서는 이 방식이 즉각적으로 느껴질 만큼 충분히 빠르면서도 구현을 단순하게 유지합니다.

알아두면 좋은 점

편집과 렌더링 모두 브라우저 안에서 이루어지므로, 서버 왕복도 계정도 필요 없습니다. CSS 트릭을 빠르게 테스트하거나, 더 큰 코드베이스에서 자바스크립트 버그를 보고하기 전에 따로 분리해보거나, 실제 프로젝트에 결과를 복사해 넣기 전에 작은 컴포넌트를 프로토타입하는 데 적합합니다. 입력한 내용은 자동으로 저장되지 않으므로 메모장처럼 다루세요 — 탭을 닫기 전에 보관하고 싶은 내용은 따로 복사해두시기 바랍니다.