제 포스팅은 AI가 작성한게 아닌 한글자 한글자 타자를 쳐서 작성한 포스팅입니다. 구독 좋아요 댓글은 힘이됩니다.
안녕하세요~~~!!!
이번에 포스팅을 할 주제는!
파일 시스템에 기록된 문서 명세를 실시간으로 해독하여 화면에 그리고, 그 문서 안에 적힌 자바스크립트나 HTML 예제 코드를 사용자 화면에서 즉시 실행해 볼 수 있는 안전한 격리 환경구축!!!
우선 제 깃페이지를 통해서 확인하시면 좋을것같습니다!!!!
AMEVA Neural Fabric — Edge-Native AI Dashboard
AMEVA Neural Fabric — Edge-Native AI Dashboard
Your browser does not support WebGPU, which is strictly required for the local LLM engine. We've switched you to Codex Mode so you can explore the network without local AI.
uno-km.github.io
리포지토리 클릭
나타나는 모달에서 > 실시간 시뮬레이션 데모 화면 미리보기 클릭
코드실행
에뮬레이터가 실행되는 모습
원래 깃 리포지토리의 리드미엔 html과 css, js만 덩그러니 있습니다. (접은글로 처리)
코어 아키텍처: 마크다운 실시간 번역과 안전한 코드 샌드박스 실행기
웹 클라이언트 내에서 문서를 보여주고 코드를 동적으로 연산하기 위해 다음과 같은 흐름을 설계했습니다.
마크다운 렌더러
깃허브 저장소나 정적 폴더에서 긁어온 마크다운 가이드 라인을 브라우저 표준 DOM 요소로 변환해 줍니다.
격리식 코드 에뮬레이터
문서 본문 안의 코드 조각을 수집하여 메인 웹페이지의 쿠키나 세션 영역에 접근할 수 없는 격리된 임시 뷰포트를 만들어 가동합니다.
난제 1: 크로스 오리진 제한 속에서 아이프레임 높이를 알아내는 방법
1) 격리 보안 정책으로 생긴 레이아웃 붕괴 문제
보안을 위해 에뮬레이터용 아이프레임 태그에 세임 오리진 접근을 막는 옵션을 적용했습니다.
이 조치로 인해 부모 창에서는 보안 제약 때문에 자식 아이프레임의 안쪽 콘텐츠 높이를 직접 조회할 수 없게 되었습니다.
고정된 높이를 지정하면 결과물이 길어질 때 아래쪽 화면이 잘리고, 너무 넓게 잡으면 스페이스 낭비가 발생하는 난관에 부딪혔습니다.
2) 돌파구: 윈도우 포스트 메시지 교신과 옵저버를 결합한 자동 조절 기법
이 문제를 해결하기 위해 아이프레임 샌드박스 내부에 부모 창과 통신하는 전용 이벤트 스크립트를 주입했습니다.
콘텐츠가 로드되거나 콘솔 출력이 덧붙여질 때, 혹은 내부 돔 구조가 변경될 때마다 자신의 높이를 계산하여 부모 창으로 메시지를 던지도록 설계했습니다.
// 아이프레임 내부에서 실행되는 전용 메시지 스크립트
function sendHeight() {
const height = document.documentElement.scrollHeight || document.body.scrollHeight;
window.parent.postMessage({ type: 'resize-sandbox', id: iframeId, height: height }, '*');
}
window.addEventListener('load', sendHeight);
// 동적으로 돔이 바뀌는 것을 관찰하여 크기를 다시 계산합니다.
const observer = new MutationObserver(sendHeight);
observer.observe(document.body, { childList: true, subtree: true, attributes: true });부모 윈도우에서는 이 신호를 받아 해당 아이프레임 요소를 찾아내고 높이 값을 실시간으로 더해 줌으로써 스크롤바가 생기지 않는 완벽한 뷰포트 밀착 레이아웃을 구현했습니다.
난제 2: 실시간 파싱 과정에서의 스타일 및 돔 구조 간섭 현상
1) 부모 모달 창의 레이아웃 오염
마크다운 문서를 읽어와 변환할 때, 변환 엔진이 내보내는 출력 태그들의 기본 스타일이 부모 모달 컴포넌트의 다크 테마 디자인 시스템과 엉키는 현상이 발생했습니다.
특히 가독성을 위해 추가한 코드 블록 영역 내부에 재생 버튼을 주입해야 하는데, 파싱된 돔 내부 구조가 가변적이어서 버튼이 엉뚱한 레이아웃 위치에 생성되거나 중복 생성되는 버그가 잦았습니다.
2) 돌파구: 뮤테이션 옵저버 타겟팅 및 조기 중단 로직 적용
모달 내용물이 채워지는 시점을 확실히 제어하기 위해 돔 변경 이벤트를 실시간 모니터링하는 뮤테이션 옵저버를 배치했습니다.
타겟 컨테이너 내부의 변경 감지 시 중복 계산을 사전에 차단하기 위해 고유 클래스 이름을 검사하고, 실행 버튼을 코드 텍스트 영역 상단에 삽입하여 코드 보기와 실행 환경의 일치성을 보장했습니다.
설계 과정의 트레이드오프
1) 메인 스레드 직접 연산 vs 아이프레임 격리 구동
| 초기 구상 | 이벤트를 단순 처리하기 위해 현재 창의 스크립트 구문(eval)으로 자바스크립트를 바로 돌려 결과를 화면에 뿌림. |
| 타협과 결정 | 사용자가 문서에 작성한 코드에 무한 루프가 있거나 악의적인 스크립트가 있을 경우 웹 전체 세션이 강제 탈취되거나 페이지가 멈추는 치명적인 취약점이 생깁니다. |
따라서 속도 면에서 렌더링 오버헤드가 다소 늘어나더라도 완벽한 자원 격리를 보장하고 메인 스레드를 보호할 수 있는 가상 아이프레임 방식으로 전면 대체했습니다!!
2) 에뮬레이터 수동 실행 vs 자동 가동 연산
초기 구상: 모달 창이 열린 뒤 실행 버튼을 눌러야 결과 화면이 등장함.
타협과 결정: 사용자가 코드를 즉각 눈으로 확인하고 조작할 수 있게 만드는 것이 인터랙티브 경험의 핵심이므로, 문서 로드 직후 100밀리초의 대기 시간을 주고 알아서 첫 실행 연산을 마쳐 레이아웃에 포함시키도록 기본 동작을 수정했습니다.
마치며: 우리가 얻은 정수
서버의 개입 없이 클라이언트 브라우저 속에서 문서를 예쁘게 출력하고 안전하게 실습 환경까지 내장시키는 일은 프론트엔드의 독립성을 한 차원 끌어올리는 혁신입니다.
문서 변환 엔진과 전대전 격리 샌드박스를 연동하고 크로스 오리진의 벽을 포스트 메시지 기법으로 우아하게 극복한 경험은, 외부 호스팅 자원에 얽매이지 않고 반영구적으로 구동 가능한 스마트 웹 서비스를 빌딩할 때 가장 튼튼한 밑바탕이 되어 줄 것입니다.
기껏 잘만든 프로젝트를 좀더 동영상보다더 즉각적인 UI로 보여주고 싶은것을 이제 깃 페이지에서 에뮬레이터로 볼수있도록 구현했습니다.
이것으로 한껏 포트폴리오의 가치와 값어치가 올라가는 계기가 되었으면합니다.
더 자세한 문의사항은 zhfldk014745@naver.com 메일을 통해 또는 댓글을 통해 문의해주세요!!
제 포스팅은 AI가 작성한게 아닌 한글자 한글자 타자를 쳐서 작성한 포스팅입니다. 구독 좋아요 댓글은 힘이됩니다.
댓글