오픈소스 도구 in-app-editor는 웹페이지의 복사본을 브라우저에서 직접 편집한다. 편집 결과는 변경 지침으로 복사해 Codex에 전달할 수 있으며, 실제 사이트 파일을 바꾸려면 해당 프로젝트에 지침을 적용해야 한다.
사이트에 EDIT 버튼을 추가하면 항목을 선택해 이동하거나 크기를 조절하고, 텍스트·색상·글꼴 등을 편집할 수 있다. 새 텍스트, 아이콘, 버튼, 도형 등도 추가할 수 있다. 편집은 페이지 복사본에서 이뤄지며 원본은 그대로 유지된다. 편집 모드에서 각 항목은 개별적으로 움직이므로 카드와 그 안의 텍스트·버튼을 함께 옮기려면 함께 선택하거나 그룹으로 묶어야 한다.
저장할 때는 변경 사항을 Codex에 전달할 프롬프트로 복사한다. 프롬프트는 캔버스 좌표를 시각적 목표로 삼아 실제 페이지 레이아웃에 편집 내용을 반영하고, 넓은 화면과 좁은 화면에서 확인하도록 요청한다. persist: true를 설정하면 초안을 저장하고 복원할 수 있으며, 기본 initialZoom 값은 0.8이다. 매 편집 세션은 현재 페이지에서 시작한다.
일반 사이트는 in-app-editor.js를 공개 폴더에 복사한 뒤 스크립트를 한 번 불러오면 된다.
<script src="/in-app-editor.js" defer></script>
모듈을 사용하는 앱에서는 index.js와 in-app-editor.js를 같은 폴더에 복사하고, 앱이 브라우저에 마운트된 뒤 mountEditor()를 호출한다. 앱에서 편집기를 제거할 때는 InAppEditor.destroy()를 호출한다.
import { mountEditor } from './in-app-editor/index.js';
mountEditor();
편집용 캔버스는 페이지가 편집 모드에 들어갈 때 내용을 복사하며, 페이지 스크립트는 실행하지 않는다. 닫힌 섀도 루트(shadow root)나 프레임 안의 콘텐츠는 복사할 수 없고, 동영상·사용자 정의 컴포넌트·복잡한 변환 효과는 복사본에서 다르게 보일 수 있다. 데모는 저장소에서 npm start를 실행한 뒤 localhost:4317에서 확인할 수 있다. 설치와 설정은 instructions.md에 안내돼 있다.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요