---
title: 작업보고 — 스튜디오 빌더 구축(M1~M5 · B구조 비파괴 프리뷰 · 차트편집 · 컴포넌트)
category: workreport
document_type: 작업보고
source_status: published
knowledge_group: 03_history
priority: Normal
purpose: 스튜디오를 토큰 편집기에서 미니브라우저 만능 요소특정·직접편집·비파괴 구조변경 빌더로 대개편
read_when: 스튜디오 빌더·사이드바 요소특정·비파괴 프리뷰·차트편집 관련 작업 시
updated: 2026-06-21
work_timestamp: 20260621_120000
source_of_truth: dallog-tools
---

# 작업보고 — 스튜디오 빌더 구축 (M1~M5 · B구조 · 차트 · 컴포넌트)

## 한 줄 요약
마스터 전용 /studio를 토큰 편집기에서 **미니브라우저로 모든 요소를 특정·직접편집하고 구조 변경을 비파괴로 미리보는 빌더**로 대개편했다(M1~M5). 이 구축 위에서 다음 단계로 프레임 리빌딩(operation 직접발행)이 이어진다.

## 진행 (마일스톤)
- **M1~M2 미니브라우저 + 만능 요소특정 + 직접편집**: 실제 앱 iframe(same-origin)을 띄워 좌/우클릭으로 모든 요소 특정(selectorGen 자동 생성·unique/kind), measure로 디자인 내역 표시, EditPanel에서 시각속성 즉석 수정(scope: 이 하나만/같은 종류 전체·4슬롯 다크/라이트·데스크탑/모바일). studio-overrides.css(토큰+요소룰) 발행.
- **M3 변경 diff 마크다운** + **M4 되돌리기·임시저장·뷰포트** + **M5 버전 히스토리/구버전 프리뷰·베이스 편집**(studio-publish 워커 /history·/version).
- **B 구조변경 비파괴 프리뷰**: iframe DOM 임시 조작으로 이동·부모변경·분리·삭제예상을 보여주고 새로고침 시 원복(발행과 분리).
- **차트 전용 편집 모드**: canvas 차트 옵션(선두께·점·축·그리드·범례·tooltip 등) 비파괴 임시 preview.
- **빌더 컴포넌트 1차**: 복제·새 요소 추가·삭제 preview.
- 드래그+오스냅 구조 이동, 키보드 이동, 구조 초안 정제(이동 squash·invalid nesting 차단).

## 핵심 의사결정 (디버깅 교훈)
- **cross-realm instanceof 버그**: iframe 요소는 부모 realm의 `instanceof Element`가 아니다 → `nodeType===1`로 판정(이걸 놓쳐 selector 생성 실패=편집 무효였음).
- **Chart.js v4 프록시 손상**: `chart.options`는 정규화된 scriptable 프록시 → 객체 재할당(`o.plugins.x = ...??{}`)이 프록시를 깨 e.startsWith 에러. 리프 값만 설정. dataset 속성(borderWidth/pointRadius)이 가장 안전.
- **stale 인스턴스**: 데이터 async 재로드 시 차트 인스턴스 파괴 → canvas 저장 후 매번 getChart 재조회.
- 마스터 전용 + 데모 발행 차단(라이브 main 대상 발행은 데모에서 막음), selector 유일성 최종 검증.

## Codex 검수 반영
- 초기화/구버전 전환 reload·실패 op 차단·reparent 순환 명시, selector 유일성 검증, 데모 발행 차단 등 반영.

## 미해결 / 다음
- 이 구축 위에서 **프레임 리빌딩**(마크다운 초안 → operation JSON 직접발행, 별칭·전수속성·한글화)으로 이어짐 — 별도 작업보고 참조.