document.designMode
Elements 탭으로 즉석 고치기
해결하는 문제
웹 화면의 글자나 디자인을 바꿨을 때 어떻게 보일지 빨리 확인하고 싶다.
Elements 탭에서 글자와 스타일을 바로 고쳐 보고, 콘솔에서 document.designMode를 켜면 페이지 전체를 문서처럼 편집할 수 있습니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것보고 있는 웹페이지
브라우저가 하는 일요소를 골라 글자·스타일 수정
나오는 것바뀐 화면 (새로고침 전까지)
쓰는 브라우저 기술
DevTools Elements 탭document.designMode$0
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 요소 선택 도구
- 스타일 즉석 편집
자주 막히는 곳
- 새로고침하면 사라진다
- 고친 화면 캡처를 실제 정보처럼 쓰면 안 된다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 원하는 모습으로 고친 뒤 AI에게 코드로 만들어 달라고 하기
웹 서비스
- 보고서용 화면 시안
피지컬 AI
- 장비 화면 문구 개선 제안
넓히는 방법
- 고친 요소의 outerHTML을 AI에 전달
- 시안 캡처
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬안 된다
아이폰 사파리안 된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
Elements 탭에서 고른 이 요소의 outerHTML을 줄게. 같은 구조로 내 페이지에 넣을 카드 컴포넌트를 만들어줘.
같은 분류의 능력
09 개발 도구로서의 브라우저에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md